Денис Царев – Как не разбить лоб об html5
DESCRIPTION
Просто о выборе технологий и реализации кроссплатформенных проектов Почему HTML5 Что дает мне выбор HTML5 Для каких проектов подходит Workflow — стадии разработки HTML5 проекта для мобильных платформ Где и как применить нативный код в HTML5 проекте. Что вы никогда не сможете сделать в HTML5. Тестирование, отладка и дебаг. Пример одной игры от идеи до финала. http://2014.404fest.ru/reports/html5/TRANSCRIPT
![Page 1: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/1.jpg)
КАК НЕ РАЗБИТЬ ЛОБОБ HTML5
![Page 2: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/2.jpg)
О чем же речь?
Вступление10: Почему HTML5
20: Разберем понятия30: Когда только натив40: Для каких приложений
100: Рабочий процесс110: Начинаем разработку HTML5120: Определяемся с инструментами130: Нативные плагины- оно нам надо?140: Чеклист проверки приложения
200: Пример одной игры300: Контакты
1-
51
![Page 3: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/3.jpg)
«НАМ НУЖНО ПРИЛОЖЕНИЕ!»
- Клиент
2-
51
![Page 4: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/4.jpg)
«Зачем?»
- Я
3-
51
![Page 5: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/5.jpg)
4-
51
![Page 6: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/6.jpg)
Фактор крутости
5-
51
![Page 7: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/7.jpg)
3 шага планирования приложения
Аудитория
КонтентПлатформа
6-
51
![Page 8: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/8.jpg)
Концентрируйтесь на аудитории и контенте
7-
51
![Page 9: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/9.jpg)
Не застревайте в одной платформе
8-
51
![Page 10: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/10.jpg)
Нативные — Гибридные — Web приложения
9-
51
![Page 11: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/11.jpg)
Нативные — Гибридные — Web приложения
10-
51
![Page 12: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/12.jpg)
Гибридные
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● Необходимо утверждение
вендора для публикации● Собирается для определенных
платформ● Может быть адаптивным
![Page 13: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/13.jpg)
Нативные
12-
51
Публикация в Google Play
Push сообщения
Скорость работы Нативный UI
Доступ к функциям устройства
Публикация в App Store
Режим работы offline
Лучший UX
Разработка игр
![Page 14: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/14.jpg)
Нативные
13-
51
![Page 15: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/15.jpg)
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
![Page 16: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/16.jpg)
Web приложения
15-
51
![Page 17: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/17.jpg)
Суммируя разницу
16-
51
![Page 18: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/18.jpg)
Какие приложения делают на гибриде?
17-
51
![Page 19: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/19.jpg)
Вопрос вопросов
18-
51
![Page 20: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/20.jpg)
Когда только натив? Проблемы HTML5
19-
51
![Page 21: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/21.jpg)
Когда только натив? Ожидания VS реальность
20-
51
VS
![Page 22: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/22.jpg)
Почему 2014 — год поворота?
21-
51
![Page 23: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/23.jpg)
Почему 2014 — год поворота? iOS8
22-
51
![Page 24: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/24.jpg)
Почему 2014 — год поворота? iOS8
23-
51
![Page 25: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/25.jpg)
Почему 2014 — год поворота? Android L
24-
51
Chrome 36 в качестве Webview. WebGL и WebRTC. : WebAudio и ~200% улучшение производительности 2D Canvas
![Page 26: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/26.jpg)
Почему 2014 — год поворота? Android L
25-
51
![Page 27: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/27.jpg)
Почему 2014 — год поворота? Windows 8.1
26-
51
![Page 28: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/28.jpg)
Почему 2014 — год поворота? Поддержка offline
27-
51
Reference: http://caniuse.com/#feat=offline-apps
![Page 29: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/29.jpg)
Этапы работы над HTML5 проектом
28-
51
![Page 30: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/30.jpg)
То же но проще
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
![Page 31: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/31.jpg)
Инструменты
30-
51
![Page 32: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/32.jpg)
Инструменты и плагины
31-
51
![Page 33: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/33.jpg)
Чеклист
32-
51
● Системные жесты● Задержка нажатия● Избегайте ненужных импутов или
защищайте их● Используйте инерционный
скроллинг● Избегайте оверскроллинга● Делайте контент невыделяемым● Используйте возможности
добавления на домашний экран● Не используйте ненативные
скроллы● Избегайте скейлинга приложения● Протестируйте навигацию● Используйте fastclick
● Оптимизируйте анимации● Кешируйте все!● С самого начала разрабатывайте
под offline● Не используйте jQuerry animate
или fade● Не надо ресайзить картинки на
клиенте● Не используйте много svg ● Добавьте сплешскрин● Используйте шрифты вместо
иконок (fontawesome.io)● Думайте о том как
масштабировать приложение● Проверьте карты пальца
![Page 34: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/34.jpg)
Чеклист: системные жесты
33-
51
Не ставьте сенсорные контролы слишком близко к краям экрана. Так как они часто используются в жестах, которые поддерживаются браузерами, либо отключайте эти жесты плагинами.
![Page 35: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/35.jpg)
Чеклист: импуты
34-
51
Защищайте импуты от случайного нажатия иначе пользователи будут очень часто видеть клавиатуру при обычном скроллинге
![Page 36: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/36.jpg)
Чеклист: выделения
35-
51
Защищайте контент от нечаянного выделения.
![Page 37: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/37.jpg)
Чеклист: оверскролл
36-
51
Избегайте оверскроллов.
![Page 38: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/38.jpg)
Чеклист: UX
37-
51
![Page 39: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/39.jpg)
Чеклист: UX
38-
51
![Page 40: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/40.jpg)
Чеклист: Карты большого пальца
39-
51http://bit.ly/1p1SAGl
![Page 41: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/41.jpg)
Чеклист: Карты большого пальца
40-
51http://bit.ly/1p1SAGl
![Page 42: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/42.jpg)
Пример одной игры
41-
52
![Page 43: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/43.jpg)
Идея
42-
51
![Page 44: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/44.jpg)
Потуги дизайна
43-
51
![Page 45: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/45.jpg)
Потуги дизайна
44-
51
![Page 46: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/46.jpg)
Спустя 3 месяца и 5 дизайнов
45-
51
![Page 47: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/47.jpg)
Персонаж, иконка сплеш
46-
51
![Page 48: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/48.jpg)
Тестирование и отладка
47-
51
![Page 49: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/49.jpg)
Проблемы
● Производительность анимации● Рассинхрон игроков● Засыпание приложения● Импуты● Неработающие плагины
48-
51
![Page 50: Денис Царев – Как не разбить лоб об HTML5](https://reader034.vdocuments.site/reader034/viewer/2022042614/557ee6f0d8b42a331d8b5142/html5/thumbnails/50.jpg)
Нативные плагины
● Пуш● Звук● Реклама● Статистика● IAP● Sharing
49-
51