Разработка мобильных приложений на HTML5

7,532 views
7,177 views

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,532
On SlideShare
0
From Embeds
0
Number of Embeds
220
Actions
Shares
0
Downloads
33
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Разработка мобильных приложений на HTML5

  1. 1. Разработка мобильныхприложений на HTML5 Алексей Устинов
  2. 2. О себеАлексей Устиновразработчик компании "Enterra"3 года разработки веб-приложений1.5 года разработки PhoneGap-версии мобильногопокерного клиента на HTML5
  3. 3. Зачем разрабатывать приложения на HTML?
  4. 4. Преимущества разработки приложений на HTML5● Кроссплатформенность (мобильные платформы, браузеры, Windows 8, etc)● Одна кодовая база● Популярность стека технологий HTML, JavaScript, CSS (армия "jQuery-программистов")
  5. 5. Возможности современных web- приложений● Canvas ● Touch-события● Web Workers ● Viewport● WebSocket ● Media queries● WebRTC ● Geolocation API● Video● Web Storage● WebGL● Шаблонизация в браузере
  6. 6. Viewport<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, target- densityDpi=device-dpi"/>
  7. 7. CSS Media Queries@media only screen and (min-height: 641px) and (min-width: 961px) { /*стили*/}@media screen and (min-aspect-ratio: 3/4) { /*стили*/}@media only screen and (-webkit-min-device-pixel-ratio: 1.5) { /*стили*/}
  8. 8. CSS Media Queries
  9. 9. Фреймворки?
  10. 10. jQuery Mobile● Адаптивные мобильные компоненты● Декларативное описание● Поддержка тач-событий● Поддержка страниц● Темы
  11. 11. jQuery Mobile<form> <label for="slider-1">Slider:</label> <input type="range" name="slider-1" id="slider-1" min="0" max="100" value="50"></form>
  12. 12. Sencha Touch● Адаптивные мобильные компоненты● Императивный подход к созданию компонентов● Анимация● Native Packaging
  13. 13. Sencha TouchExt.create(Ext.form.Panel, { fullscreen: true, items: [ { xtype: sliderfield, label: Percentage, value: 50, minValue: 0, maxValue: 100 } ]});
  14. 14. Приложение в браузере?
  15. 15. Нативные приложения● Objective C/Java/C#/JavaScript● Лучшая производительность и наиболее полные возможности платформы● На каждой платформе свои технологии● Необходимость держать команды разработчиков для каждой платформы
  16. 16. Adobe AIR● ActionScript 3● Возможность вызова нативного кода● Аппаратное ускорение Stage3D (Starling, Feathers UI)● Платформы: iOS, Android, BlackBerry, Windows
  17. 17. Mono● C#● Нативный UI● Платформы: iOS, Android, Windows, Linux, Mac OS, Wii, XBox 360
  18. 18. Веб-приложения● JavaScript/HTML/CSS3● Запуск в браузере● Нет доступа к функциям устройств
  19. 19. Компилируемые веб-приложения● JavaScript/HTML/CSS3● Платформоно-независимый API для работы с функциями устройств● PhoneGap ○ iOS, Android, Blackberry, Windows Phone 7,8, Tizen, WebOS, Bada, Symbian● Appcelerator Titanium ○ iOS, Android, BlackBerry, Windows
  20. 20. PhoneGapФреймворк для создания мобильных приложений сиспользованием стека JavaScript, HTML, CSS.Основан на Apache Cordova. Разработан компаниейNitobi. Куплен Adobe Systems.Облачный сервис PhoneGap Build.
  21. 21. Поддерживаемые платформы● iOS ● Tizen● Android ● WebOS● Blackberry ● Bada● Windows Phone 7,8 ● Symbian
  22. 22. PhoneGap API● Accelerometer ● Globalization● Camera ● InAppBrowser● Capture ● Media● Compass ● Notification● Connection ● Splashscreen● Contacts ● Storage● Device ● File● Events ● Geolocation
  23. 23. PhoneGap: Структура проекта
  24. 24. PhoneGap: Инициализация приложения
  25. 25. PhoneGap: Инициализация JavaScript-приложения
  26. 26. PhoneGap: Пример работы с API
  27. 27. PhoneGap: плагиныПозволяют реализовать не поддерживаемые HTML5возможности на конкретной платформе.В основном репозитории PhoneGap около 200 плагинов.
  28. 28. Проблемы при разработкемобильных HTML5-приложений
  29. 29. Производительность● Однопоточность● Скорость исполнения JavaScript● Рендеринг DOM● Загрузка графики
  30. 30. Зоопарк платформ● Доминирует WebKit● Windows Phone = IE● Разные размеры экранов ○ телефоны ○ планшеты● Разные требования к UI● Различные используемые кодеки● Баги
  31. 31. Проблемы, связанные с особенностями поведения веб-приложений в браузере● Выделение текста● Возможность сохранения графики● Zoom● Нет чувства контроля над приложением
  32. 32. Решение проблем, связанных сособенностями поведения веб-приложений в браузере
  33. 33. Чужеродность UI● Приложение - всего лишь HTML-страница● Проблемы при публикации в store● Sencha Touch, jQuery Mobile лишь внешне похожи● Appcelerator Titanium
  34. 34. Слабая поддержка мобильными браузерами новых стандартов● Нет поддержки или поддерживается не всеми устройствами: ○ WebSocket ○ Web Worker ○ WebGL● Неудовлетворительная поддержка тэга video в WebView на Android● Медленное внедрение новых возможностей● Решается с помощью PhoneGap-плагинов
  35. 35. Когда стоит использовать?● Когда необходимо иметь кросплатформенную версию, охватывающая наибольшее количество платформ● Когда нет жестких требований к UI и производительности● Когда нет разработчиков под нативные платформы
  36. 36. Ссылкиhttp://phonegap.com/https://github.com/phonegap/phonegap-pluginshttp://caniuse.com/http://mobilehtml5.org/http://www.sencha.com/products/touchhttp://jquerymobile.com/
  37. 37. Вопросы?Разработка мобильных приложений на HTML5 Алексей Устинов

×