КАК НЕ РАЗБИТЬ ЛОБОБ HTML5

О чем же речь?

Вступление10: Почему HTML5

20: Разберем понятия30: Когда только натив40: Для каких приложений

100: Рабочий процесс110: Начинаем разработку HTML5120: Определяемся с инструментами130: Нативные плагины- оно нам надо?140: Чеклист проверки приложения

200: Пример одной игры300: Контакты

1-

51

«НАМ НУЖНО ПРИЛОЖЕНИЕ!»

- Клиент

2-

51

«Зачем?»

- Я

3-

51

4-

51

Фактор крутости

5-

51

3 шага планирования приложения

Аудитория

КонтентПлатформа

6-

51

Концентрируйтесь на аудитории и контенте

7-

51

Не застревайте в одной платформе

8-

51

Нативные — Гибридные — Web приложения

9-

51

Нативные — Гибридные — Web приложения

10-

51

Гибридные

11-

51

Native PlatformNative Platform

JavaScript APIJavaScript API

Native BridgeNative Bridge

Native Frameworks + SDK‘s

Native Frameworks + SDK‘s

HTML5 AppHTML5 App ● Устанавливается и работает локально

● Сделано на HTML5 + JS + CSS● Инсталлируется на устройство● Использует нативный webview● Доступ к нативным APIs● Необходимо утверждение

вендора для публикации● Собирается для определенных

платформ● Может быть адаптивным

Нативные

12-

51

Публикация в Google Play

Push сообщения

Скорость работы Нативный UI

Доступ к функциям устройства

Публикация в App Store

Режим работы offline

Лучший UX

Разработка игр

Нативные

13-

51

Web приложения

14-

51

● Runs in mobile web browser (works on any device)

● Built with HTML5 + JS + CSS● Served by web server● No approvals or app store needed● Can look a lot like native● May be responsive or target specific screen

sizes

Web приложения

15-

51

Суммируя разницу

16-

51

Какие приложения делают на гибриде?

17-

51

Вопрос вопросов

18-

51

Когда только натив? Проблемы HTML5

19-

51

Когда только натив? Ожидания VS реальность

20-

51

VS

Почему 2014 — год поворота?

21-

51

Почему 2014 — год поворота? iOS8

22-

51

Почему 2014 — год поворота? iOS8

23-

51

Почему 2014 — год поворота? Android L

24-

51

Chrome 36 в качестве Webview. WebGL и WebRTC. : WebAudio и ~200% улучшение производительности 2D Canvas

Почему 2014 — год поворота? Android L

25-

51

Почему 2014 — год поворота? Windows 8.1

26-

51

Почему 2014 — год поворота? Поддержка offline

27-

51

Reference: http://caniuse.com/#feat=offline-apps

Этапы работы над HTML5 проектом

28-

51

То же но проще

29-

51Windows PhoneWindows Phone

Cordova JS APICordova JS API

Cordova Native LibCordova Native Lib

Silverlight Framework + Windows Phone SDK

Silverlight Framework + Windows Phone SDK

iPhoneiPhone

Cordova JS APICordova JS API

Cordova Native LibCordova Native Lib

IOS Framework + SDK‘s

IOS Framework + SDK‘s

Android PhoneAndroid Phone

Cordova JS APICordova JS API

Cordova Native LibCordova Native Lib

Android Framework + SDK‘s

Android Framework + SDK‘s

HTML5 AppHTML5 App

Инструменты

30-

51

Инструменты и плагины

31-

51

Чеклист

32-

51

● Системные жесты● Задержка нажатия● Избегайте ненужных импутов или

защищайте их● Используйте инерционный

скроллинг● Избегайте оверскроллинга● Делайте контент невыделяемым● Используйте возможности

добавления на домашний экран● Не используйте ненативные

скроллы● Избегайте скейлинга приложения● Протестируйте навигацию● Используйте fastclick

● Оптимизируйте анимации● Кешируйте все!● С самого начала разрабатывайте

под offline● Не используйте jQuerry animate

или fade● Не надо ресайзить картинки на

клиенте● Не используйте много svg ● Добавьте сплешскрин● Используйте шрифты вместо

иконок (fontawesome.io)● Думайте о том как

масштабировать приложение● Проверьте карты пальца

Чеклист: системные жесты

33-

51

Не ставьте сенсорные контролы слишком близко к краям экрана. Так как они часто используются в жестах, которые поддерживаются браузерами, либо отключайте эти жесты плагинами.

Чеклист: импуты

34-

51

Защищайте импуты от случайного нажатия иначе пользователи будут очень часто видеть клавиатуру при обычном скроллинге

Чеклист: выделения

35-

51

Защищайте контент от нечаянного выделения.

Чеклист: оверскролл

36-

51

Избегайте оверскроллов.

Чеклист: UX

37-

51

Чеклист: UX

38-

51

Чеклист: Карты большого пальца

39-

51http://bit.ly/1p1SAGl

Чеклист: Карты большого пальца

40-

51http://bit.ly/1p1SAGl

Пример одной игры

41-

52

Идея

42-

51

Потуги дизайна

43-

51

Потуги дизайна

44-

51

Спустя 3 месяца и 5 дизайнов

45-

51

Персонаж, иконка сплеш

46-

51

Тестирование и отладка

47-

51

Проблемы

● Производительность анимации● Рассинхрон игроков● Засыпание приложения● Импуты● Неработающие плагины

48-

51

Нативные плагины

● Пуш● Звук● Реклама● Статистика● IAP● Sharing

49-

51

Скоро в Google Play

www.monstruma.ru 50-

51

СПАСИБО ЗА ВНИМАНИЕ!

convergent-usa.cominfo@convergent-usa.com