Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Разработка сложного  мультимедийного приложения наJavaScript+HTML5 и PhoneGap для iPad            Олег Неклюдов
Цель доклада (о чем доклад?)• Опыт HTML+PhoneGap для iPad• Проблемы и решения• Выбор технологии
Журнал для iPad    21        3            4   5   6   7
Постановка задачи• Листание пальцем• Интерактивный контент, аудио/видео• Навигация по журналу• Витрина журналов, скачивани...
Выбор способа реализации• Flash   – Есть технология Flash -> iOS   – Попробовали – тормозит –> не подходит• iOS   – Отсутс...
Архитектура•   PhoneGap•   Google Web Toolkit (Java->JavaScript)•   HTML5+CSS3•   Webkit (Chrome, iOS)
Проблемы и решения
1. Листание страниц• Плавное листание страниц (нагруженных графикой) – это  самое главное• Стандартные JS/CSS способы не п...
2. Кэширование изображений• ПРОБЛЕМА:  – При увеличении количества картинок в журнале    приложение вылетает на iPad по па...
3. Большие размеры• ПРОБЛЕМА:  – При увеличении «физических» размеров DOM-дерева    журнала приложение вылетает на iPad (м...
4. ChildBrowser plugin• ЗАДАЧА:  – Показывать HTML-страницы по ссылкам• РЕШЕНИЕ:  – Используем PhoneGap-плагин ChildBrowse...
5. Загрузка и хранение контента• ЗАДАЧА:  – Требуется загружать, хранить и использовать локально    данные и файлы с конте...
6. Загрузка и хранение контента• РЕШЕНИЕ:  – Для загрузки файлов находим PixFileDownload плагин и    докручиваем его сами ...
7. По мелочам• Мелкие отличия в работе DOM-событий в Chrome и iPad• Успешно использованы несколько CSS3-эффектов в  элемен...
Итоги и выводы
Итог разработки (326 часов)• Мы получили работающий движок, на котором  можно делать журналы (и другие продукты)• В планах...
Пример журналаWOW Magazine for iPad[http://goo.gl/JCmXy]191 Мб
Модульная структура• Core – модуль абстрактной листалки• Engine – XML-движок• Mag – навигация по журналу• Shell – оболочка...
Портирование на Android• Еще только предстоит• Возможные проблемы и трудности:  – Плавное листание  – Загрузка и хранение ...
Процесс разработки• Движок  – Основная разработка на Windows + Chrome  – Финальная отладка на Маке в эмуляторе и iPad’e• Ж...
Выводы• Можно ли использовать PhoneGap-подход?  – ДА• Стоит ли использовать PhoneGap-подход?  – ПО СИТУАЦИИ
Используем PhoneGap•   Есть опыт в HTML/CSS/JavaScript•   Готовы на компромиссы•   Переиспользование в веб•   Относительна...
Спасибо!    ВОПРОСЫ?    Олег Неклюдовoleg.nekludov@gmail.com
Upcoming SlideShare
Loading in …5
×

Разработка сложного мультимедийного приложения на JavaScript+HTML5 и PhoneGap для iPad (Олег Неклюдов)

1,580 views

Published on

Published in: Technology, News & Politics
  • Be the first to comment

  • Be the first to like this

Разработка сложного мультимедийного приложения на JavaScript+HTML5 и PhoneGap для iPad (Олег Неклюдов)

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

×