Кир Белевич, Сергей Горобцов: "Touch it: новое мобильное направление веб-разработки"
0 likes909 views
Документ обсуждает развитие мобильных интерфейсов на основе сенсорных технологий, в том числе платформы iOS, Android и Windows Phone. В нем рассматриваются возможности и проблемы разработки согласно различным стандартам, таких как HTML5 и CSS3, а также статистика использования сенсорных устройств. Авторы призывают к большему количеству сенсорных сервисов и платформ в будущем.
Кир Белевич, Сергей Горобцов: "Touch it: новое мобильное направление веб-разработки"
- 1. Touch it: новое мобильное направление веб-разработки Кир Белевич, Сергей Горобцов Разработчики интерфейсов Я.Субботник, Алматы, 15 октября 2011 года
- 2. Да, я в скайпе 2
- 4. Что такое «тачфон»? ́ «Смартфон, реже смартофон (англ. smartphone — умный телефон) — мобильный телефон, сравнимый с карманным персональным компьютером (КПК)» «Коммуникатор (англ. Communicator, PDA Phone) — карманный персональный компьютер, дополненный функциональностью мобильного телефона» http://ru.wikipedia.org/wiki/Смартфон 4
- 6. Что такое «тачфон»? — Большой сенсорный «тачскрин» — Мобильный интернет — Большие мультимедиа возможности — GPS и навигация — HTML5 / CSS3 / SVG / JS 6
- 10. Тач-платформы 300 тысяч пользователей в день 10
- 11. Тач-платформы Статистика по версиям iOS 11
- 12. Тач-платформы Статистика по версиям Android 12
- 13. Тач-платформы Статистика по версиям Samsung Bada 13
- 14. Тач-платформы Статистика по версиям Windows Phone На сегодня версия только одна: — Windows Phone 7 Mango — Windows Phone OS 7.5 — Internet Explorer 9 Mobile 14
- 15. Тач-платформы Поддерживаемые нами версии — iOS 3.1+ — Android 1.6+ — Windows Phone 7.5+ — Samsung Bada 1.1+ 15
- 16. Тач-платформы Поддерживаемые нами версии — iOS 3.X - 4.X - 5.X — Android 1.6 - 2.1 - 2.2 - 2.3 - 3.X — Windows Phone 7.5 — Samsung Bada 1.1 - 1.2 - 2.0 16
- 17. Тач-платформы У многих здесь есть тачфон? 17
- 19. Разработка тач-интерфейсов Настоящий тестовый стенд — Настоящие тормоза — Настоящее ощущение от интерфейса — Настоящие, толстые и не очень, пальцы — Симуляторы слишком быстрые — Эмуляторы слишком медленные 19
- 20. Разработка тач-интерфейсов Настоящий тестовый стенд — iPhone 3 c iOS 3 и iPhone 4 Retina Display c iOS 4 (5) — Android 1.6, 2.1, 2.2 и 2.3 разных производителей — Samsung Bada 1.1, 1.2 и 2.0 — Windows Phone 7 Mango 20
- 21. Разработка тач-интерфейсов Настоящий тестовый стенд 21
- 22. Разработка тач-интерфейсов Возможности — HTML5: Canvas, Video, Audio, Geolocation, Application Cache, Storage, Semantic Elements, ... — CSS3: Selectors, Transforms, Transitions, Animations, Gradients, Backgrounds and Borders, Flexible Box Layout, @font-face, -webkit-mask, ... — JS: Touch Events, JSON, Hashchange, XHR+CORS, querySelector(All), ES5 Object, ES5 Array, ... — SVG: Inline, Background, Data URI 22
- 23. Разработка тач-интерфейсов Возможности — http://caniuse.com/ — http://mobilehtml5.org/ — http://html5test.com/ — http://www.quirksmode.org/mobile/ 23
- 24. Разработка тач-интерфейсов iOS — Идеальная платформа с наибольшим количеством возможностей и плюшек — Единобразие устройств и разрешений экранов — Аппаратное ускорение CSS 3D Transforms — SVG — iOS 5: долгожданные position: fixed и overflow: scroll 25
- 25. Разработка тач-интерфейсов Android — Проблемы с обновлением прошивок у производителей — Большое разнообразие устройств и экранов — Проблемы с оболочками (HTC Sense) — SVG только в 3.0+ — Нет аппаратного ускорения CSS 3D Transforms — position: fixed в 2.2+ 26
- 26. Разработка тач-интерфейсов Samsung Bada — Если всё хорошо в iOS, то с вероятностью 99% всё хорошо и в Bada — Посредственное качество экрана у старых моделей — SVG — Проблемы с HTML5 Geolocation — Нет position: fixed / overflow: scroll 27
- 28. Разработка тач-интерфейсов Windows Phone 7 — Одно разрешение экрана 480x800 — IE9 Mobile со всеми вытекающими... — Нет touch-событий, Flexbox, градиентов, анимаций, text-shadow, border-image, Application Cache, input placeholder, … — Есть SVG, border-radius (уиии!), background-size, multiple backgrounds, box-shadow, @font-face, opacity, rgba, Geolocation, Storage, Audio, Video, ... 29
- 29. Разработка тач-интерфейсов Совместимость и деградации — http://clubs.ya.ru/ui/replies.xml?item_no=2 — Визуальные деградации без доступности контента — Отличия или полное отсутствие некоторой функциональности, если сделать хорошо не представляется возможным 30
- 30. Что дальше? 31
- 31. Что дальше? — Больше тач-сервисов — Больше платформ — Больше браузеров — Планшеты — Доклады ;) 32
- 32. Кир Белевич Разработчик интерфейсов deepsweet@yandex-team.ru Сергей Горобцов Руководитель группы разработки интерфейсов смежных сервисов greyevil@yandex-team.ru