КАК НЕ РАЗБИТЬ ЛОБОБ 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
СПАСИБО ЗА ВНИМАНИЕ!