Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
КАК НЕ РАЗБИТЬ ЛОБ 
ОБ HTML5
О чем же речь? 
Вступление 
10: Почему HTML5 
20: Разберем понятия 
30: Когда только натив 
40: Для каких приложений 
100:...
«НАМ НУЖНО 
ПРИЛОЖЕНИЕ!» 
- Клиент 
2- 
51
«Зачем?» 
- Я 
3- 
51
4- 
51
Фактор 
крутости 
5- 
51
3 шага планирования приложения 
Аудитория 
Платформа Контент 
6- 
51
Концентрируйтесь на аудитории и контенте 
7- 
51
Не застревайте в одной платформе 
8- 
51
Нативные — Гибридные — Web приложения 
9- 
51
Нативные — Гибридные — Web приложения 
10 
- 
51
Гибридные 
11 
- 
51 
HHTTMMLL55 AApppp ● Устанавливается и работает 
JJaavvaaSSccrriipptt AAPPII 
NNaattiivvee BBrriiddgg...
Нативные 
12 
- 
51 
Публикация в 
Google Play 
Push 
сообщения 
Публикация в 
App Store 
Доступ к 
функциям 
устройства 
...
Нативные 
13 
- 
51
Web приложения 
● Runs in mobile web browser (works on any 
device) 
● Built with HTML5 + JS + CSS 
● Served by web server...
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% 
улучше...
Почему 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 
- 
CCoorrddoovvaa JJSS AAPPII 
CCoorrddoovvaa NNaattiivvee LLiibb 
Silverlight Framework + 
Windows Ph...
Инструменты 
30 
- 
51
Инструменты и плагины 
31 
- 
51
Чеклист 
32 
- 
51 
● Системные жесты 
● Задержка нажатия 
● Избегайте ненужных импутов или 
защищайте их 
● Используйте и...
Чеклист: системные жесты 
33 
- 
51 
Не ставьте сенсорные контролы 
слишком близко к краям экрана. 
Так как они часто испо...
Чеклист: импуты 
Защищайте импуты от случайного 
нажатия иначе пользователи будут 
очень часто видеть клавиатуру при 
обыч...
Чеклист: выделения 
35 
- 
51 
Защищайте контент от нечаянного 
выделения.
Чеклист: оверскролл 
36 
- 
51 
Избегайте оверскроллов.
Чеклист: UX 
37 
- 
51
Чеклист: UX 
38 
- 
51
Чеклист: Карты большого пальца 
39 
- 
51 
http://bit.ly/1p1SAGl
Чеклист: Карты большого пальца 
40 
- 
51 
http://bit.ly/1p1SAGl
Пример одной игры 
41 
- 
52
Идея 
42 
- 
51
Потуги дизайна 
43 
- 
51
Потуги дизайна 
44 
- 
51
Спустя 3 месяца и 5 дизайнов 
45 
- 
51
Персонаж, иконка сплеш 
46 
- 
51
Тестирование и отладка 
47 
- 
51
Проблемы 
● Производительность анимации 
● Рассинхрон игроков 
● Засыпание приложения 
● Импуты 
● Неработающие плагины 
4...
Нативные плагины 
● Пуш 
● Звук 
● Реклама 
● Статистика 
● IAP 
● Sharing 
49 
- 
51
Скоро в Google Play 
www.monstruma.ru 
50 
- 
51
СПАСИБО ЗА ВНИМАНИЕ! 
convergent-usa.com 
info@convergent-usa.com
Upcoming SlideShare
Loading in …5
×

Денис Царев – Как не разбить лоб об HTML5

1,113 views

Published on

Просто о выборе технологий и реализации кроссплатформенных проектов
Почему HTML5
Что дает мне выбор HTML5
Для каких проектов подходит
Workflow — стадии разработки HTML5 проекта для мобильных платформ
Где и как применить нативный код в HTML5 проекте. Что вы никогда не сможете сделать в HTML5.
Тестирование, отладка и дебаг.
Пример одной игры от идеи до финала.
http://2014.404fest.ru/reports/html5/

Published in: Software
  • Be the first to comment

Денис Царев – Как не разбить лоб об HTML5

  1. 1. КАК НЕ РАЗБИТЬ ЛОБ ОБ HTML5
  2. 2. О чем же речь? Вступление 10: Почему HTML5 20: Разберем понятия 30: Когда только натив 40: Для каких приложений 100: Рабочий процесс 110: Начинаем разработку HTML5 120: Определяемся с инструментами 130: Нативные плагины- оно нам надо? 140: Чеклист проверки приложения 200: Пример одной игры 300: Контакты 1- 51
  3. 3. «НАМ НУЖНО ПРИЛОЖЕНИЕ!» - Клиент 2- 51
  4. 4. «Зачем?» - Я 3- 51
  5. 5. 4- 51
  6. 6. Фактор крутости 5- 51
  7. 7. 3 шага планирования приложения Аудитория Платформа Контент 6- 51
  8. 8. Концентрируйтесь на аудитории и контенте 7- 51
  9. 9. Не застревайте в одной платформе 8- 51
  10. 10. Нативные — Гибридные — Web приложения 9- 51
  11. 11. Нативные — Гибридные — Web приложения 10 - 51
  12. 12. Гибридные 11 - 51 HHTTMMLL55 AApppp ● Устанавливается и работает JJaavvaaSSccrriipptt AAPPII NNaattiivvee BBrriiddggee Native Frameworks + SDK‘s NNaattiivvee PPllaattffoorrmm локально ● Сделано на HTML5 + JS + CSS ● Инсталлируется на устройство ● Использует нативный webview ● Доступ к нативным APIs ● Необходимо утверждение вендора для публикации ● Собирается для определенных платформ ● Может быть адаптивным
  13. 13. Нативные 12 - 51 Публикация в Google Play Push сообщения Публикация в App Store Доступ к функциям устройства Скорость работы Нативный UI Режим работы offline Лучший UX Разработка игр
  14. 14. Нативные 13 - 51
  15. 15. Web приложения ● 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 14 - 51
  16. 16. Web приложения 15 - 51
  17. 17. Суммируя разницу 16 - 51
  18. 18. Какие приложения делают на гибриде? 17 - 51
  19. 19. Вопрос вопросов 18 - 51
  20. 20. Когда только натив? Проблемы HTML5 19 - 51
  21. 21. Когда только натив? Ожидания VS реальность 20 - 51 VS
  22. 22. Почему 2014 — год поворота? 21 - 51
  23. 23. Почему 2014 — год поворота? iOS8 22 - 51
  24. 24. Почему 2014 — год поворота? iOS8 23 - 51
  25. 25. Почему 2014 — год поворота? Android L 24 - 51 Chrome 36 в качестве Webview. WebGL и WebRTC. : WebAudio и ~200% улучшение производительности 2D Canvas
  26. 26. Почему 2014 — год поворота? Android L 25 - 51
  27. 27. Почему 2014 — год поворота? Windows 8.1 26 - 51
  28. 28. Почему 2014 — год поворота? Поддержка offline 27 - 51 Reference: http://caniuse.com/#feat=offline-apps
  29. 29. Этапы работы над HTML5 проектом 28 - 51
  30. 30. То же но проще 29 - CCoorrddoovvaa JJSS AAPPII CCoorrddoovvaa NNaattiivvee LLiibb Silverlight Framework + Windows Phone SDK CCoorrddoovvaa JJSS AAPPII CCoorrddoovvaa NNaattiivvee LLiibb IOS Framework + SDK‘s CCoorrddoovvaa JJSS AAPPII CCoorrddoovvaa NNaattiivvee LLiibb Android Framework + SDK‘s WWiinnddoowwss PPhhoonnee iiPPhhoonnee AAnnddrrooiidd PPhhoonnee 51 HHTTMMLL55 AApppp
  31. 31. Инструменты 30 - 51
  32. 32. Инструменты и плагины 31 - 51
  33. 33. Чеклист 32 - 51 ● Системные жесты ● Задержка нажатия ● Избегайте ненужных импутов или защищайте их ● Используйте инерционный скроллинг ● Избегайте оверскроллинга ● Делайте контент невыделяемым ● Используйте возможности добавления на домашний экран ● Не используйте ненативные скроллы ● Избегайте скейлинга приложения ● Протестируйте навигацию ● Используйте fastclick ● Оптимизируйте анимации ● Кешируйте все! ● С самого начала разрабатывайте под offline ● Не используйте jQuerry animate или fade ● Не надо ресайзить картинки на клиенте ● Не используйте много svg ● Добавьте сплешскрин ● Используйте шрифты вместо иконок (fontawesome.io) ● Думайте о том как масштабировать приложение ● Проверьте карты пальца
  34. 34. Чеклист: системные жесты 33 - 51 Не ставьте сенсорные контролы слишком близко к краям экрана. Так как они часто используются в жестах, которые поддерживаются браузерами, либо отключайте эти жесты плагинами.
  35. 35. Чеклист: импуты Защищайте импуты от случайного нажатия иначе пользователи будут очень часто видеть клавиатуру при обычном скроллинге 34 - 51
  36. 36. Чеклист: выделения 35 - 51 Защищайте контент от нечаянного выделения.
  37. 37. Чеклист: оверскролл 36 - 51 Избегайте оверскроллов.
  38. 38. Чеклист: UX 37 - 51
  39. 39. Чеклист: UX 38 - 51
  40. 40. Чеклист: Карты большого пальца 39 - 51 http://bit.ly/1p1SAGl
  41. 41. Чеклист: Карты большого пальца 40 - 51 http://bit.ly/1p1SAGl
  42. 42. Пример одной игры 41 - 52
  43. 43. Идея 42 - 51
  44. 44. Потуги дизайна 43 - 51
  45. 45. Потуги дизайна 44 - 51
  46. 46. Спустя 3 месяца и 5 дизайнов 45 - 51
  47. 47. Персонаж, иконка сплеш 46 - 51
  48. 48. Тестирование и отладка 47 - 51
  49. 49. Проблемы ● Производительность анимации ● Рассинхрон игроков ● Засыпание приложения ● Импуты ● Неработающие плагины 48 - 51
  50. 50. Нативные плагины ● Пуш ● Звук ● Реклама ● Статистика ● IAP ● Sharing 49 - 51
  51. 51. Скоро в Google Play www.monstruma.ru 50 - 51
  52. 52. СПАСИБО ЗА ВНИМАНИЕ! convergent-usa.com info@convergent-usa.com

×