Разработка сложного мультимедийного приложения на...
DESCRIPTION
TRANSCRIPT
![Page 1: Разработка сложного мультимедийного приложения на JavaScript+HTML5 и PhoneGap для iPad (Олег Неклюдов)](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a3da5b479596a4d8b5889/html5/thumbnails/1.jpg)
Разработка сложного мультимедийного приложения на
JavaScript+HTML5 и PhoneGap для iPad
Олег Неклюдов
![Page 2: Разработка сложного мультимедийного приложения на JavaScript+HTML5 и PhoneGap для iPad (Олег Неклюдов)](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a3da5b479596a4d8b5889/html5/thumbnails/2.jpg)
Цель доклада (о чем доклад?)
• Опыт HTML+PhoneGap для iPad• Проблемы и решения• Выбор технологии
![Page 3: Разработка сложного мультимедийного приложения на JavaScript+HTML5 и PhoneGap для iPad (Олег Неклюдов)](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a3da5b479596a4d8b5889/html5/thumbnails/3.jpg)
Журнал для iPad2
13
4 5 6 7
![Page 4: Разработка сложного мультимедийного приложения на JavaScript+HTML5 и PhoneGap для iPad (Олег Неклюдов)](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a3da5b479596a4d8b5889/html5/thumbnails/4.jpg)
Постановка задачи• Листание пальцем• Интерактивный контент, аудио/видео• Навигация по журналу• Витрина журналов, скачивание и offline• XML-формат верстки журналов• (то есть аналог Adobe Digital Publishing Suite)
![Page 5: Разработка сложного мультимедийного приложения на JavaScript+HTML5 и PhoneGap для iPad (Олег Неклюдов)](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a3da5b479596a4d8b5889/html5/thumbnails/5.jpg)
Выбор способа реализации• Flash
– Есть технология Flash -> iOS
– Попробовали – тормозит –> не подходит
• iOS– Отсутствуют ресурсы (разработчики) -> не подходит
• PhoneGap– Есть значительный опыт JavaScript(GWT)+HTML+CSS
– Провели эксперимент – хорошие результаты -> БЕРЕМ В РАБОТУ
![Page 6: Разработка сложного мультимедийного приложения на JavaScript+HTML5 и PhoneGap для iPad (Олег Неклюдов)](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a3da5b479596a4d8b5889/html5/thumbnails/6.jpg)
Архитектура• PhoneGap• Google Web Toolkit (Java->JavaScript)• HTML5+CSS3• Webkit (Chrome, iOS)
![Page 7: Разработка сложного мультимедийного приложения на JavaScript+HTML5 и PhoneGap для iPad (Олег Неклюдов)](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a3da5b479596a4d8b5889/html5/thumbnails/7.jpg)
Проблемы и решения
![Page 8: Разработка сложного мультимедийного приложения на JavaScript+HTML5 и PhoneGap для iPad (Олег Неклюдов)](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a3da5b479596a4d8b5889/html5/thumbnails/8.jpg)
1. Листание страниц• Плавное листание страниц (нагруженных графикой) – это
самое главное• Стандартные JS/CSS способы не подходят – листание
происходит рывками
• РЕШЕНИЕ (CSS3, hardware-accelerated):-webkit-transition-property: -webkit-transform;
-webkit-transform: translate3d(x,y,z) (в JavaScript: WebKitCSSMatrix)
![Page 9: Разработка сложного мультимедийного приложения на JavaScript+HTML5 и PhoneGap для iPad (Олег Неклюдов)](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a3da5b479596a4d8b5889/html5/thumbnails/9.jpg)
2. Кэширование изображений• ПРОБЛЕМА:– При увеличении количества картинок в журнале
приложение вылетает на iPad по памяти
• РЕШЕНИЕ:– Реализуем специальную логику «обнуления»
<img src=“empty.gif”>
(в одной из промежуточных версий iOS не работает)
![Page 10: Разработка сложного мультимедийного приложения на JavaScript+HTML5 и PhoneGap для iPad (Олег Неклюдов)](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a3da5b479596a4d8b5889/html5/thumbnails/10.jpg)
3. Большие размеры• ПРОБЛЕМА:– При увеличении «физических» размеров DOM-дерева
журнала приложение вылетает на iPad (молча)
• РЕШЕНИЕ:– Переделываем логику движка листания: статическое
DOM-дерево заменяем динамическим построением (при смене страниц)
![Page 11: Разработка сложного мультимедийного приложения на JavaScript+HTML5 и PhoneGap для iPad (Олег Неклюдов)](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a3da5b479596a4d8b5889/html5/thumbnails/11.jpg)
4. ChildBrowser plugin• ЗАДАЧА:– Показывать HTML-страницы по ссылкам
• РЕШЕНИЕ:– Используем PhoneGap-плагин ChildBrowser
• ДОПОЛНИТЕЛЬНАЯ ПРОБЛЕМА (не решена):– В последних версиях iOS при открытом ChildBrowser не
отслеживается изменение ориентации окна
![Page 12: Разработка сложного мультимедийного приложения на JavaScript+HTML5 и PhoneGap для iPad (Олег Неклюдов)](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a3da5b479596a4d8b5889/html5/thumbnails/12.jpg)
5. Загрузка и хранение контента• ЗАДАЧА:– Требуется загружать, хранить и использовать локально
данные и файлы с контентом
• ПРОБЛЕМЫ:– HTML5 offline cache – отсутствует у PhoneGap-приложения
– В PhoneGap отсутствуют «стандартные» средства загрузки файлов из интернета (с сохранением файлов локально)
![Page 13: Разработка сложного мультимедийного приложения на JavaScript+HTML5 и PhoneGap для iPad (Олег Неклюдов)](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a3da5b479596a4d8b5889/html5/thumbnails/13.jpg)
6. Загрузка и хранение контента• РЕШЕНИЕ:– Для загрузки файлов находим PixFileDownload плагин и
докручиваем его сами (чтобы заработал на новом PG)– Доступ к сохраненным файлам имеем через PhoneGap
File API, а также работают ссылки из HTML– Для данных используем HTML5 LocalStorage– Реализовали свой менеджер закачек на GWT/JavaScript
![Page 14: Разработка сложного мультимедийного приложения на JavaScript+HTML5 и PhoneGap для iPad (Олег Неклюдов)](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a3da5b479596a4d8b5889/html5/thumbnails/14.jpg)
7. По мелочам• Мелкие отличия в работе DOM-событий в Chrome и iPad• Успешно использованы несколько CSS3-эффектов в
элементах журнала• Успешно использован сторонний компонент iScroll для
организации скроллинга (в дополнение к GWT-компоненту)
• Осталась нерешенная проблема с включением в страницы журнала «внешнего» HTML
![Page 15: Разработка сложного мультимедийного приложения на JavaScript+HTML5 и PhoneGap для iPad (Олег Неклюдов)](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a3da5b479596a4d8b5889/html5/thumbnails/15.jpg)
Итоги и выводы
![Page 16: Разработка сложного мультимедийного приложения на JavaScript+HTML5 и PhoneGap для iPad (Олег Неклюдов)](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a3da5b479596a4d8b5889/html5/thumbnails/16.jpg)
Итог разработки (326 часов)• Мы получили работающий движок, на котором
можно делать журналы (и другие продукты)
• В планах– Расширение функционала (например, InAppPurchase)– Портирование на Android
![Page 17: Разработка сложного мультимедийного приложения на JavaScript+HTML5 и PhoneGap для iPad (Олег Неклюдов)](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a3da5b479596a4d8b5889/html5/thumbnails/17.jpg)
Пример журналаWOW Magazine for iPad[http://goo.gl/JCmXy]191 Мб
![Page 18: Разработка сложного мультимедийного приложения на JavaScript+HTML5 и PhoneGap для iPad (Олег Неклюдов)](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a3da5b479596a4d8b5889/html5/thumbnails/18.jpg)
Модульная структура• Core – модуль абстрактной листалки• Engine – XML-движок• Mag – навигация по журналу• Shell – оболочка с витриной и загрузкой файлов• Модульная структура позволяет легко
переиспользовать отдельные компоненты
![Page 19: Разработка сложного мультимедийного приложения на JavaScript+HTML5 и PhoneGap для iPad (Олег Неклюдов)](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a3da5b479596a4d8b5889/html5/thumbnails/19.jpg)
Портирование на Android• Еще только предстоит• Возможные проблемы и трудности:– Плавное листание– Загрузка и хранение файлов– Разные размеры экрана
![Page 20: Разработка сложного мультимедийного приложения на JavaScript+HTML5 и PhoneGap для iPad (Олег Неклюдов)](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a3da5b479596a4d8b5889/html5/thumbnails/20.jpg)
Процесс разработки• Движок– Основная разработка на Windows + Chrome– Финальная отладка на Маке в эмуляторе и iPad’e
• Журнал– Верстальщик руками верстает XML– Смотрит, что получается на Маке в эмуляторе iPad
![Page 21: Разработка сложного мультимедийного приложения на JavaScript+HTML5 и PhoneGap для iPad (Олег Неклюдов)](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a3da5b479596a4d8b5889/html5/thumbnails/21.jpg)
Выводы• Можно ли использовать PhoneGap-подход?
–ДА• Стоит ли использовать PhoneGap-подход?
–ПО СИТУАЦИИ
![Page 22: Разработка сложного мультимедийного приложения на JavaScript+HTML5 и PhoneGap для iPad (Олег Неклюдов)](https://reader033.vdocuments.mx/reader033/viewer/2022061214/549a3da5b479596a4d8b5889/html5/thumbnails/22.jpg)
Используем PhoneGap• Есть опыт в HTML/CSS/JavaScript• Готовы на компромиссы• Переиспользование в веб• Относительная кроссплатформенность