'

Особенности верстки под мобильные устройства

Понравилась презентация – покажи это...





Слайд 0

Особенности верстки под мобильные устройства World Usability Day 2010


Слайд 1

Содержание: Введение Под какие браузеры верстаем Выбор языка разметки Viewports Media queries Формы Ссылки JavaScript Тестирование


Слайд 2

Введение Зачем это нужно Что будет рассмотрено


Слайд 3

Зачем это нужно Mobile internet растет быстрее чем desktop internet Рост продаж смартфонов Снижение продаж телефонов 3G – ключ к успеху мобильного интернета


Слайд 4

Зачем это нужно Mobile internet растет быстрее чем desktop internet


Слайд 5

Зачем это нужно Рост продаж смартфонов


Слайд 6

Зачем это нужно Снижение продаж телефонов


Слайд 7

Зачем это нужно 3G – ключ к успеху мобильного интернета


Слайд 8

Что будет рассмотрено Как и какой стандарт языка выбрать? На что обращать внимание? Как проверять результат?


Слайд 9

Под какие браузеры верстаем Виды браузеров Доля браузеров Совместимость браузеров


Слайд 10

Виды браузеров: полнофункциональные рендеринг происходит непосредственно на устройстве WebKit Safari Apple, OS: iOS Android WebKit Google, OS: Android Dolfin Samsung, OS: bada BlackBerry WebKit RIM, OS: BlackBerry Palm WebKit HP, OS: WebOS Phantom LG, OS: S-class Symbian WebKit Nokia, OS: Symbian S40 WebKit Nokia, OS: S40 Presto Opera Mobile Opera, OS: Android, MeeGo, Symbian, Windows Mobile Gecko MicroB Nokia, OS: MeeGo Firefox Mozilla, OS: Android, MeeGo Mango BlackBerry old RIM, OS: BlackBarry old Trident IE Mobile Microsoft, OS: Windows Mobile NetFront NetFront Access, OS: LiMo, Windows Mobile Obigo Obigo Teleca, OS: Brew, LiMo, MeeGo


Слайд 11

Виды браузеров: mini рендеринг происходит на сервере WebKit Bolt Bitstream, OS: BlackBerry, BlackBerry ol, Symbian, Windows Mobile Presto Opera Mini Opera, OS: Android, bada, BlackBerry old, Brew, iOS, S40, Symbian, Windows Mobile Gecko Ovi Nokia, OS: S40 UC UCWeb UC, OS: Android, bada, iOS, Ophone, Symbian, Windows Mobile


Слайд 12

Доля браузеров: worldwide


Слайд 13

Доля браузеров: worldwide


Слайд 14

Доля браузеров: North America


Слайд 15

Доля браузеров: North America


Слайд 16

Доля браузеров: Europe


Слайд 17

Доля браузеров: Europe


Слайд 18

Доля браузеров: Russian Federation


Слайд 19

Доля браузеров: Russian Federation


Слайд 20

Совместимость браузеров http://www.quirksmode.org/mobile/


Слайд 21

Выбор языка разметки Какие стандарты поддерживаются Отличия стандартов Какой стандарт выбрать


Слайд 22

Какие стандарты поддерживаются HTML5 <!DOCTYPE html> XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> XHTML Mobile Profile (XHTML-MP) <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN“ “http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> Wireless Markup Language (WML) <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN“ “http://www.wapforum.org/DTD/wml13.dtd">


Слайд 23

Отличия стандартов http://www.w3c.org


Слайд 24

Какой стандарт выбрать XHTML: Ориентирован на продвинутые мобильные устройства и смартфоны. Все больше мобильных браузеров поддерживают XHTML в дополнении к XHTML MP и WML. Однако XHTML не поддерживается большинством мобильных телефонов. XHTML-MP: Ориентирован на большинство мобильных устройств, как телефонов, так и смартфонов, за исключением iPhone. XHTML-MP – стандарт языка для разметки сайтов для мобильных устройств. WML: Ориентирован на старые мобильные устройства, с минимальной поддержкой графики, где малый размер документа является приоритетом.


Слайд 25

Viewports Что такое viewport Visual, Layout and Screen Meta name=“viewport” Поддержка


Слайд 26

Что такое viewport


Слайд 27

Что такое viewport Разница между CSS-точками и физическими точками


Слайд 28

Visual, Layout, Screen Visual viewport – часть страницы, которая в данный момент отображается на экране. Пользователь может изменить видимую часть страницы, проскроллировав ее или увеличив масштаб отображения. Layout viewport – вся страница. Размер разный в зависимости от браузера.


Слайд 29

Visual, Layout, Screen


Слайд 30

Visual, Layout, Screen: как измерять Измеряется JavaScript:


Слайд 31

Meta name=“viewport” Устанавливает размер layout viewport


Слайд 32

Meta name=“viewport” Пример 1: viewport не установлен Браузер отображает все содержимое страницы, увеличивая размер visual viewport до максимальных размеров.


Слайд 33

Meta name=“viewport” Пример 2: <meta name=“viewport” content=“width=320”> Браузер отображает содержимое страницы в определенных размерах visual viewport.


Слайд 34

Meta name=“viewport” Пример 3: <meta name=“viewport” content=“width=500”> Браузер отображает содержимое страницы в определенных размерах visual viewport.


Слайд 35

Meta name=“viewport” Пример 4: <meta name=“viewport” content=“width=device-width”> Браузер отображает содержимое страницы в размерах visual viewport устанавливаемых устройством.


Слайд 36

Meta name=“viewport” Пример 5: <meta name=“viewport” content=“width=device-width”> Содержимое шире размера visual viewport Браузер пытается отобразить все содержимое, несмотря на установленные размеры viewport.


Слайд 37

Meta name=“viewport” Пример 6: <meta name=“viewport” content=“width=device-width”> Содержимое шире размера visual viewport Браузер отображает содержимое страницы в размерах visual viewport устанавливаемых устройством.


Слайд 38

Meta name=“viewport” <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">


Слайд 39

Meta name=“viewport” Opera Mobile 10.10 – не позволяет изменять размер страницы iOS – ширина viewport 320.


Слайд 40

Media queries Что это такое Кем поддерживается


Слайд 41

Media query: что это CSS2 - позволяет указать таблицу стилей для конкретного типа носителей, таких как экран или принтер. CSS3 - вы можете добавить выражения к media type для проверки определенных условиях и применять различные стили.


Слайд 42

Media query: что это Media query состоит из media type и условия <link rel="stylesheet" media="screen and (color)" href="example.css" /> @import url(color.css) screen and (color); Media query – это логическое выражение, соответственно должно принимать значения true или false Несколько выражений могут быть объединены в одно @media screen and (color), projection and (color) { … } , в этом списке – логическое OR, and – логическое AND not – логическое NOT <link rel="stylesheet" media="not screen and (color)" href="example.css" /> only – позволяет спрятать выражение от старых user agent <link rel="stylesheet" media="only screen and (color)" href="example.css" />


Слайд 43

Media query: что это


Слайд 44

Media query: совместимость Static – media query не сработает при изменении размера экрана


Слайд 45

Media query: примеры Пример 7: @media screen and (max-device-width: 320px) { DIV { background-color: yellow; color: black; } } @media screen and (min-device-width: 321px) { DIV { background-color: red; color: white; } }


Слайд 46

Media query: примеры Пример 7: Android ведет себя совершенно по другому, после обновления страницы media-query срабатывает.


Слайд 47

Media query: примеры Пример 8: @media screen and (orientation: portrait) { DIV { background-color: yellow; color: black; } } @media screen and (orientation: landscape) { DIV { background-color: red; color: white; } }


Слайд 48

Media query: примеры Пример 8: iPhone 3G не понимает orientation. Android понимает, так же как и iOS.


Слайд 49

Media query: примеры Пример 8.1: @media screen and (max-width: 320px) { DIV { background-color: yellow; color: black; } } @media screen and (min-width: 321px) { DIV { background-color: red; color: white; } }


Слайд 50

Media query: примеры Пример 8.1: Багов не замечено.


Слайд 51

Формы Поведение Что нового Примеры


Слайд 52

Формы: поведение Увеличение + экранная клавиатура


Слайд 53

Формы: примеры Пример 9: placeholder <input name="f1“ type="text" placeholder="Search Bookmarks and History"/>


Слайд 54

Формы: примеры Пример 9: email <input name="f3" id="f3" type="email"/>


Слайд 55

Формы: примеры Пример 9: URL <input name="f4" id="f4" type="url"/>


Слайд 56

Формы: примеры Пример 9: tel <input name="f14" id="f14" type="tel"/>


Слайд 57

Формы: примеры Пример 9: pattern <input name="f15" id="f15" type="text" pattern="[0-9]*"/>


Слайд 58

Формы: примеры Пример 9: number <input name="f5" id="f5" type="number" min="0" max="10" step="1" value="1"/>


Слайд 59

Ссылки Что нового Примеры


Слайд 60

Ссылки: что нового tel: sms: mmsto:


Слайд 61

Ссылки: что нового <meta name = "format-detection" content = "telephone=no">


Слайд 62

JavaScript Что нового?


Слайд 63

JavaScript: что нового? Способы взаимодействия: Клавиатура Мышь Touch screen


Слайд 64

JavaScript: touch events Способы взаимодействия: Клавиатура keydown keypress keyup Мышь mousedown mouseup mouseover mouseout mousemove Способы взаимодействия: Touch screen touchstart touchend touchmove touchcancel


Слайд 65

JavaScript: touch events TOUCH != MOUSE


Слайд 66

JavaScript: touch events В теории touchscreen должен вызывать только touch события, а не события мыши. Однако, слишком много вебсайтов используют события мыши, поэтому производители браузеров вынуждены поддерживать их.


Слайд 67

JavaScript: touch events Поэтому, обычно события мыши и touch events вызываются вместе. http://quirksmode.org/touchevents Touch Action Test Page пример


Слайд 68

JavaScript: touch events http://quirksmode.org/touchevents Drag & Drop пример element.onmousedown = function (e) { // initialise document.onmousemove = function (e) { // move } document.onmouseup = function (e) { document.onmousemove = null; document.onmouseup = null; } }


Слайд 69

JavaScript: touch events http://quirksmode.org/touchevents Drag & Drop пример element.ontouchstart = function (e) { // initialise document.ontouchmove = function (e) { // move } document.ontouchend = function (e) { document.ontouchmove = null; document.ontouchend = null; } }


Слайд 70

JavaScript: touch events http://quirksmode.org/touchevents Drag & Drop пример element.onmousedown = function (e) { document.onmousemove = etc. document.onmouseup = etc. } element.ontouchstart = function (e) { document.onmousedown = null; document.ontouchmove = etc. document.ontouchend = etc. }


Слайд 71

JavaScript: touch events http://quirksmode.org/touchevents Drag & Drop 2 пример (iPhone) Потаскайте несколько элементов одновременно!


Слайд 72

Тестирование Введение FireFox Эмуляторы


Слайд 73

Тестирование Протестируйте ваш сайт сначала на обычном браузере (например FireFox), чтобы убедится что все работает как ожидалось. Как только вся функциональная часть сайта работает как надо, переходите на тестирование на эмуляторах. После этого можно переходить на тестирование на реальных устройствах.


Слайд 74

Тестирование с загрузкой изображений и стилей без загрузки изображений без загрузки стилей с полностью отключенными стилями и изображениями


Слайд 75

Тестирование: FireFox Что надо: Firefox Web browser Modify Headers add-on User Agent Switcher add-on


Слайд 76

Тестирование: FireFox Для добавления user agent в Firefox Tools -> Default User Agent -> User Agent Switcher -> Options


Слайд 77

Тестирование: FireFox Нажмите кнопку New и выберите New User Agent из выпадающего списка. Заполните предлагаемые поля.


Слайд 78

http://www.zytrax.com/tech/web/mobile_ids.html Тестирование: Список User Agents


Слайд 79

Тестирование: FireFox подробнее http://mobiforge.com/testing/story/testing-mobile-web-sites-using-firefox


Слайд 80

Тестирование: эмуляторы Типы эмуляторов: Эмуляторы устройств Эмуляторы браузеров Эмуляторы операционных систем


Слайд 81

Тестирование: эмуляторы Проблемы: Не всегда эмулятор полностью повторяет поведение устройства Размеры шрифтов могут отличаться (в основном это связано с физическим размером точки)


Слайд 82

Тестирование: эмуляторы Популярные эмуляторы: Research in Motion (BlackBerry) Samsung Palm LG Motorola Эмуляторы операционных систем: Apple (iOS) Microsoft (Windows Mobile) Google (Android) Nokia (Series 40 and Series 60) Эмуляторы браузеров: Opera Mini Openwave


Слайд 83

Тестирование: эмуляторы: где найти: iPhone http://developer.apple.com/iphone/index.action http://www.testiphone.com web based


Слайд 84

Тестирование: эмуляторы: где найти: Opera Mini http://www.opera.com/mobile/demo/ web based


Слайд 85

Тестирование: эмуляторы: где найти: BlackBerry http://na.blackberry.com/eng/developers/


Слайд 86

http://www.microsoft.com/downloads/details.aspx?FamilyID=a6f6adaf-12e3-4b2f-a394-356e2c2fb114&DisplayLang=en Тестирование: эмуляторы: где найти: Windows Mobile


Слайд 87

Тестирование: эмуляторы: где найти: Android http://developer.android.com/sdk/index.html


Слайд 88

Тестирование: эмуляторы: где найти: OpenWave http://developer.openwave.com/dvl/member/downloadManager.htm?softwareId=23


Слайд 89

Тестирование: эмуляторы: где найти: Symbian S60 http://innovator.samsungmobile.com/index.do http://www.forum.nokia.com/


Слайд 90

Тестирование: эмуляторы подробнее http://mobiforge.com/testing/story/a-guide-mobile-emulators


Слайд 91

?


×

HTML:





Ссылка: