'

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

Понравилась презентация – покажи это...





Слайд 0

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


Слайд 1

Цель доклада (о чем доклад?) Поделиться успешным опытом разработки на JavaScript+HTML+CSS+PhoneGap для iPad Показать ряд проблемных аспектов и способов их решений Помочь в принятии верного решения о выборе технологии на старте для мобильного проекта


Слайд 2

Содержание доклада Постановка задачи Выбор способа решения Проблемные места и способы их решения Итоги и выводы


Слайд 3

Постановка задачи Нужен аналог Adobe Digital Publishing Suite (пример: журнал Wired) Требования Листание пальцем (статьи по горизонтали, страницы по вертикали) Интерактивный контент, аудио/видео Навигация по журналу Витрина журналов со скачиванием и локальным хранением контента XML-формат верстки журналов


Слайд 4

Выбор способа реализации Flash Есть технология Flash -> iOS Попробовали – тормозит –> не подходит iOS Отсутствуют ресурсы (разработчики) -> не подходит PhoneGap Есть значительный опыт JavaScript(GWT)+HTML+CSS Провели эксперимент – хорошие результаты -> БЕРЕМ В РАБОТУ


Слайд 5

Проблемы и решения


Слайд 6

1. Листание страниц Плавное листание страниц (нагруженных графикой) – это самое главное Стандартные JS/CSS способы не подходят – листание происходит рывками РЕШЕНИЕ (CSS3, hardware-accelerated): -webkit-transition-property: -webkit-transform; -webkit-transform: translate3d(x,y,z) (в JavaScript: WebKitCSSMatrix)


Слайд 7

2. Кэширование изображений ПРОБЛЕМА: При увеличении количества картинок в журнале приложение вылетает на iPad по памяти РЕШЕНИЕ: Реализуем специальную логику «обнуления» <img src=“empty.gif”> (в одной из промежуточных версий iOS не работает)


Слайд 8

3. Большие размеры ПРОБЛЕМА: При увеличении «физических» размеров DOM-дерева журнала приложение вылетает на iPad (молча) РЕШЕНИЕ: Переделываем логику движка листания: статическое DOM-дерево заменяем динамическим построением (при смене страниц)


Слайд 9

4. ChildBrowser plugin ЗАДАЧА: Показывать HTML-страницы по ссылкам РЕШЕНИЕ: Используем PhoneGap-плагин ChildBrowser ДОПОЛНИТЕЛЬНАЯ ПРОБЛЕМА (не решена): В последних версиях iOS при открытом ChildBrowser не отслеживается изменение ориентации окна


Слайд 10

5. Загрузка и хранение контента ЗАДАЧА: Требуется загружать, хранить и использовать локально данные и файлы с контентом ПРОБЛЕМЫ: HTML5 offline cache – отсутствует у PhoneGap-приложения В PhoneGap отсутствуют «стандартные» средства загрузки файлов из интернета (с сохранением файлов локально)


Слайд 11

6. Загрузка и хранение контента РЕШЕНИЕ: Для загрузки файлов находим PixFileDownload плагин и докручиваем его сами (чтобы заработал на новом PG) Доступ к сохраненным файлам имеем через PhoneGap File API, а также работают ссылки из HTML Для данных используем HTML5 LocalStorage Реализовали свой менеджер закачек на GWT/JavaScript


Слайд 12

7. По мелочам Мелкие отличия в работе DOM-событий в Chrome и iPad Успешно использованы несколько CSS3-эффектов в элементах журнала Успешно использован сторонний компонент iScroll для организации скроллинга (в дополнение к GWT-компоненту) Осталась нерешенная проблема с включением в страницы журнала «внешнего» HTML


Слайд 13

Итоги и выводы


Слайд 14

Итог разработки (326 часов) Мы получили работающий движок, на котором можно делать журналы (и другие продукты) Пример: http://itunes.apple.com/ru/app/wow-magazine-for-ipad/id488661058 В планах Расширение функционала (например, InAppPurchase) Портирование на Android


Слайд 15

Модульная структура Core – модуль абстрактной листалки Engine – XML-движок Mag – навигация по журналу Shell – оболочка с витриной и загрузкой файлов Модульная структура позволяет легко переиспользовать отдельные компоненты


Слайд 16

Портирование на Andriod Еще только предстоит Возможные проблемы и трудности: Плавное листание Загрузка и хранение файлов Разные размеры экрана


Слайд 17

Процесс разработки Движок Основная разработка на Windows + Chrome Финальная отладка на Маке в эмуляторе и iPad’e Журнал Верстальщик руками верстает XML Смотрит, что получается на Маке в эмуляторе iPad


Слайд 18

Выводы Можно ли использовать PhoneGap-подход? Стоит ли использовать PhoneGap-подход? Когда стоит использовать PhoneGap-подход? Как использовать PhoneGap-подход?


Слайд 19

Спасибо! ВОПРОСЫ ? Олег Неклюдов oleg.nekludov@gmail.com


×

HTML:





Ссылка: