Embed Size (px)
Citation preview
суббота, 24 ноября 12 г.
разработчик тач-интерфейсов
Плюсы и минусы различных тач-платформ глазами веб-разработчика
Олег
суббота, 24 ноября 12 г.
Введение
суббота, 24 ноября 12 г.
Ожидания
суббота, 24 ноября 12 г.
5
-webkit--webkit-
-webkit-
суббота, 24 ноября 12 г.
Реальность
суббота, 24 ноября 12 г.
-moz-
-moz-
-ms-
-ms-
-o-
-o-
-o-
-webkit--ms-
суббота, 24 ноября 12 г.
Статистика
суббота, 24 ноября 12 г.
Платформы
суббота, 24 ноября 12 г.
iOS
суббота, 24 ноября 12 г.
+11
iOS
суббота, 24 ноября 12 г.
консоль ошибок12
iOS +
суббота, 24 ноября 12 г.
13
– консоль ошибок – удалённый отладчик через десктопный Safari
+iOS
суббота, 24 ноября 12 г.
14
– консоль ошибок – удалённый отладчик через десктопный Safari– красивый рендеринг векторной графики и css
iOS +
суббота, 24 ноября 12 г.
15
– консоль ошибок – удалённый отладчик через десктопный Safari– красивый рендеринг векторной графики и css – самая плавная анимация
iOS +
суббота, 24 ноября 12 г.
16
– консоль ошибок – удалённый отладчик через десктопный Safari– красивый рендеринг векторной графики и css – самая плавная анимация
iOS +
transform: translateZ(0);
суббота, 24 ноября 12 г.
17
iOS
–суббота, 24 ноября 12 г.
18
– путаница с аппаратно-ускоренными слоями
iOS –
суббота, 24 ноября 12 г.
19
– путаница с аппаратно-ускоренными слоями
iOS –
transform: translateZ(0) === zoom: 1;
суббота, 24 ноября 12 г.
20
– путаница с аппаратно-ускоренными слоями– мигание при анимации
iOS –
суббота, 24 ноября 12 г.
21
– путаница с аппаратно-ускоренными слоями– мигание при анимации
iOS
backface-visibility: none;
–
суббота, 24 ноября 12 г.
Windows Phone
суббота, 24 ноября 12 г.
23
Windows Phone
–суббота, 24 ноября 12 г.
24
– только IE
Windows Phone –
суббота, 24 ноября 12 г.
25
– только IE– нет тач-ивентов
Windows Phone –
суббота, 24 ноября 12 г.
26
– только IE– нет тач-ивентов– нет анимаций
Windows Phone –
суббота, 24 ноября 12 г.
27
– только IE– нет тач-ивентов– нет анимаций– нет градиентов
Windows Phone –
суббота, 24 ноября 12 г.
+28
Windows Phone
суббота, 24 ноября 12 г.
29
– Windows UI style
Windows Phone +
суббота, 24 ноября 12 г.
30
– Windows UI style – svg
Windows Phone +
суббота, 24 ноября 12 г.
31
– Windows UI style – svg– WP8 / 10IE
Windows Phone +
суббота, 24 ноября 12 г.
Samsung Bada
суббота, 24 ноября 12 г.
33
Samsung Bada
–суббота, 24 ноября 12 г.
34
Samsung Bada –– нет тач-событий
суббота, 24 ноября 12 г.
35
Samsung Bada –– нет тач-событий
touchstart -> mousedowntouchmove -> mousemovetouchend -> mouseup
суббота, 24 ноября 12 г.
36
– нет тач-событий– мертвая геолокация
Samsung Bada –
суббота, 24 ноября 12 г.
Android
суббота, 24 ноября 12 г.
38
Android
–суббота, 24 ноября 12 г.
39
– большое разнообразие
Android –
суббота, 24 ноября 12 г.
40
– большое разнообразие
– 320x480– 480x800– 480x854– 540x960– 600x1024– 640x960– 640x1136– 720x1280– 800x1280– 1024x768– 2048x1536
Android –
суббота, 24 ноября 12 г.
41
– большое разнообразие– svg начиная с v[ 3.0 ]
Android –
суббота, 24 ноября 12 г.
42
– большое разнообразие– svg начиная с v[ 3.0 ]– дефолтный инпут
Android –
суббота, 24 ноября 12 г.
43
– большое разнообразие– svg начиная с v[ 3.0 ]– дефолтный инпут– относительный и абсолютный адрес-бар
Android –
суббота, 24 ноября 12 г.
44
– большое разнообразие– svg начиная с v[ 3.0 ]– дефолтный инпут– относительный и абсолютный адрес-бар– оторванные глассные
Android –
суббота, 24 ноября 12 г.
45
– большое разнообразие– svg начиная с v[ 3.0 ]– дефолтный инпут– относительный и абсолютный адрес-бар– text-shadow с v[ 4.0.0 ]
Android –
суббота, 24 ноября 12 г.
46
– большое разнообразие– svg начиная с v[ 3.0 ]– дефолтный инпут– относительный и абсолютный адрес-бар– text-shadow с v[ 4.0.0 ]
Android –
суббота, 24 ноября 12 г.
Браузеры
суббота, 24 ноября 12 г.
48
– Opera Mobile
Браузеры .
суббота, 24 ноября 12 г.
49
– Opera Mobile– браузеры в iOS
Браузеры .
суббота, 24 ноября 12 г.
50
– Opera Mobile– браузеры в iOS – браузеры в Android
Браузеры .
суббота, 24 ноября 12 г.
Клиентская Определялка
суббота, 24 ноября 12 г.
52
– платформу– версию– браузер– dpr
Клиентская Определялка .Определяет :
суббота, 24 ноября 12 г.
53
– svg– video– flash– сеть 2G / 3G / wifi
Клиентская Определялка .Узнаёт о поддержке :
суббота, 24 ноября 12 г.
54
Клиентская Определялка .
суббота, 24 ноября 12 г.
55
https://github.com/bem/bem-bl
Клиентская Определялка ./blocks-touch/i-ua/
суббота, 24 ноября 12 г.
JS Framework
суббота, 24 ноября 12 г.
57
– jQuery
JS Framework .
суббота, 24 ноября 12 г.
58
– jQuery – jQuery mobile
JS Framework .
суббота, 24 ноября 12 г.
59
– jQuery – jQuery mobile– Zepto.js
JS Framework .
суббота, 24 ноября 12 г.
Эмуляторы и симуляторы
суббота, 24 ноября 12 г.
61
Эмуляторы и симуляторы .
суббота, 24 ноября 12 г.
62
Эмуляторы и симуляторы .
суббота, 24 ноября 12 г.
63
Эмуляторы и симуляторы .
суббота, 24 ноября 12 г.
64
Эмуляторы и симуляторы .
суббота, 24 ноября 12 г.
65
Эмуляторы и симуляторы .
суббота, 24 ноября 12 г.
66
Эмуляторы и симуляторы .
суббота, 24 ноября 12 г.
Заключение
суббота, 24 ноября 12 г.
Вопросы ?
суббота, 24 ноября 12 г.
