Особенности верстки под
мобильные устройства
World Usability Day 2010
Содержание:
• Введение
• Под какие браузеры верстаем
• Выбор языка разметки
• Viewports
• Media queries
• Формы
• Ссылки
•...
Введение
Зачем это нужно
Что будет рассмотрено
Зачем это нужно
• Mobile internet растет быстрее чем desktop internet
• Рост продаж смартфонов
• Снижение продаж телефонов...
Зачем это нужно
Mobile internet растет быстрее чем desktop internet
Зачем это нужно
Рост продаж смартфонов
Зачем это нужно
Снижение продаж телефонов
Зачем это нужно
3G – ключ к успеху мобильного интернета
Что будет рассмотрено
• Как и какой стандарт языка выбрать?
• На что обращать внимание?
• Как проверять результат?
Под какие браузеры верстаем
Виды браузеров
Доля браузеров
Совместимость браузеров
Виды браузеров: полнофункциональные
рендеринг происходит непосредственно на устройстве
WebKit
• Safari
Apple, OS: iOS
• An...
Виды браузеров: mini
рендеринг происходит на сервере
WebKit
• Bolt
Bitstream, OS: BlackBerry,
BlackBerry ol, Symbian, Wind...
Доля браузеров: worldwide
0 5 10 15 20 25 30
Opera
iPhone
Nokia
BlackBerry
Android
iPod Touch
NetFront
UCWEB
Samsung
Other
Доля браузеров: worldwide
0
5
10
15
20
25
30
Opera
iPhone
Nokia
BlackBerry
Android
iPod Touch
NetFront
UCWEB
Samsung
Other
Доля браузеров: North America
0 5 10 15 20 25 30
BlackBerry
iPhone
Android
iPod Touch
Opera
Nokia
NetFront
Sony PSP
Palm
O...
Доля браузеров: North America
0
5
10
15
20
25
30
35
BlackBerry
iPhone
Android
iPod Touch
Opera
Nokia
NetFront
Sony PSP
Pal...
Доля браузеров: Europe
0 5 10 15 20 25 30 35 40
iPhone
BlackBerry
Opera
Nokia
iPod Touch
Android
NetFront
Samsung
Sony PSP...
Доля браузеров: Europe
0
5
10
15
20
25
30
35
40
45
iPhone
BlackBerry
Opera
Nokia
iPod Touch
Android
NetFront
Samsung
Sony ...
Доля браузеров: Russian Federation
0 10 20 30 40 50 60 70 80 90
Opera
Nokia
iPhone
NetFront
Android
iPod Touch
Samsung
UCW...
Доля браузеров: Russian Federation
0
10
20
30
40
50
60
70
80
90
Opera
Nokia
iPhone
Android
NetFront
iPod Touch
Samsung
UCW...
Совместимость браузеров
http://www.quirksmode.
org/mobile/
Выбор языка разметки
Какие стандарты поддерживаются
Отличия стандартов
Какой стандарт выбрать
Какие стандарты поддерживаются
• HTML5
<!DOCTYPE html>
• XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "h...
Отличия стандартов
http://www.w3c.org
Какой стандарт выбрать
• XHTML: Ориентирован на продвинутые мобильные устройства и
смартфоны. Все больше мобильных браузер...
Viewports
Что такое viewport
Visual, Layout and Screen
Meta name=“viewport”
Поддержка
Что такое viewport
Что такое viewport
Разница между CSS-точками и физическими точками
Visual, Layout, Screen
• Visual viewport – часть страницы, которая в данный момент
отображается на экране. Пользователь мо...
Visual, Layout, Screen
Visual, Layout, Screen: как измерять
Измеряется JavaScript:
Viewport Layout ViewPort
Visual window.innerWidth/Height
Layou...
Meta name=“viewport”
Устанавливает размер layout viewport
Meta name=“viewport”
Пример 1:
viewport не установлен
Браузер отображает все содержимое
страницы, увеличивая размер visual...
Meta name=“viewport”
Пример 2:
<meta name=“viewport”
content=“width=320”>
Браузер отображает содержимое
страницы в определ...
Meta name=“viewport”
Пример 3:
<meta name=“viewport”
content=“width=500”>
Браузер отображает содержимое
страницы в определ...
Meta name=“viewport”
Пример 4:
<meta name=“viewport”
content=“width=device-width”>
Браузер отображает содержимое
страницы ...
Meta name=“viewport”
Пример 5:
<meta name=“viewport”
content=“width=device-width”>
Содержимое шире размера visual
viewport...
Meta name=“viewport”
Пример 6:
<meta name=“viewport”
content=“width=device-width”>
Содержимое шире размера visual
viewport...
Meta name=“viewport”
<meta name="viewport"
content="width=device-width;
initial-scale=1.0; maximum-
scale=1.0; user-scalab...
Meta name=“viewport”
Browser
Opera Mobile yes
Opera Mini no
iPhone yes
Android yes
Symbian no
S40 no
BlackBerry yes
Phanto...
Media queries
Что это такое
Кем поддерживается
Media query: что это
• CSS2 - позволяет указать таблицу стилей для конкретного типа
носителей, таких как экран или принтер...
Media query: что это
• Media query состоит из media type и условия
<link rel="stylesheet" media="screen and (color)" href=...
Media query: что это
Feature Value Min/Max Applies to
Width length Yes visual and tactile media types
Height length Yes vi...
Media query: совместимость
Browser
Opera Mobile yes
Opera Mini yes
iPhone yes
Android yes
Symbian static
S40 static
BlackB...
Media query: примеры
Пример 7:
@media screen and (max-device-width: 320px) {
DIV {
background-color: yellow;
color: black;...
Media query: примеры
Пример 7:
Android ведет себя совершенно по другому, после обновления
страницы media-query срабатывает.
Media query: примеры
Пример 8:
@media screen and (orientation: portrait) {
DIV {
background-color: yellow;
color: black;
}...
Media query: примеры
Пример 8:
iPhone 3G не понимает orientation. Android понимает, так же как и iOS.
Media query: примеры
Пример 8.1:
@media screen and (max-width: 320px) {
DIV {
background-color: yellow;
color: black;
}
}
...
Media query: примеры
Пример 8.1:
Багов не замечено.
Формы
Поведение
Что нового
Примеры
Формы: поведение
Увеличение +
экранная
клавиатура
Формы: примеры
Пример 9: placeholder
<input name="f1“ type="text"
placeholder="Search Bookmarks and
History"/>
Формы: примеры
Пример 9: email
<input name="f3" id="f3" type="email"/>
Формы: примеры
Пример 9: URL
<input name="f4" id="f4" type="url"/>
Формы: примеры
Пример 9: tel
<input name="f14" id="f14" type="tel"/>
Формы: примеры
Пример 9: pattern
<input name="f15" id="f15" type="text"
pattern="[0-9]*"/>
Формы: примеры
Пример 9: number
<input name="f5" id="f5" type="number"
min="0" max="10" step="1" value="1"/>
Ссылки
Что нового
Примеры
Ссылки: что нового
• tel:
• sms:
• mmsto:
Ссылки: что нового
<meta name = "format-
detection" content =
"telephone=no">
JavaScript
Что нового?
JavaScript: что нового?
Способы взаимодействия:
• Клавиатура
• Мышь
• Touch screen
JavaScript: touch events
Способы взаимодействия:
• Клавиатура
• keydown
• keypress
• keyup
• Мышь
• mousedown
• mouseup
• ...
JavaScript: touch events
TOUCH != MOUSE
JavaScript: touch events
В теории touchscreen должен вызывать только
touch события, а не события мыши.
Однако, слишком мно...
JavaScript: touch events
Поэтому, обычно события мыши и touch events
вызываются вместе.
http://quirksmode.org/touchevents
...
JavaScript: touch events
http://quirksmode.org/touchevents
Drag & Drop пример
element.onmousedown = function (e) {
// init...
JavaScript: touch events
http://quirksmode.org/touchevents
Drag & Drop пример
element.ontouchstart = function (e) {
// ini...
JavaScript: touch events
http://quirksmode.org/touchevents
Drag & Drop пример
element.onmousedown = function (e) {
documen...
JavaScript: touch events
http://quirksmode.org/touchevents
Drag & Drop 2 пример (iPhone)
Потаскайте несколько элементов од...
Тестирование
Введение
FireFox
Эмуляторы
Тестирование
• Протестируйте ваш сайт сначала на обычном браузере (например
FireFox), чтобы убедится что все работает как ...
Тестирование
• с загрузкой изображений и стилей
• без загрузки изображений
• без загрузки стилей
• с полностью отключенным...
Тестирование: FireFox
Что надо:
• Firefox Web browser
• Modify Headers add-on
• User Agent Switcher add-on
Тестирование: FireFox
Для добавления user
agent в Firefox
Tools -> Default User
Agent -> User Agent
Switcher -> Options
Тестирование: FireFox
Нажмите кнопку New
и выберите New User
Agent из
выпадающего списка.
Заполните
предлагаемые поля.
http://www.zytrax.com/tech
/web/mobile_ids.html
Тестирование: Список User Agents
Тестирование: FireFox подробнее
http://mobiforge.com/testing/
story/testing-mobile-web-
sites-using-firefox
Тестирование: эмуляторы
Типы эмуляторов:
• Эмуляторы устройств
• Эмуляторы браузеров
• Эмуляторы операционных систем
Тестирование: эмуляторы
Проблемы:
• Не всегда эмулятор полностью повторяет поведение устройства
• Размеры шрифтов могут от...
Тестирование: эмуляторы
Популярные эмуляторы:
• Research in Motion (BlackBerry)
• Samsung
• Palm
• LG
• Motorola
Эмуляторы...
Тестирование: эмуляторы: где найти: iPhone
http://developer.apple.com/ip
hone/index.action
http://www.testiphone.com
web b...
Тестирование: эмуляторы: где найти: Opera Mini
http://www.opera.com/mobile
/demo/
web based
Тестирование: эмуляторы: где найти: BlackBerry
http://na.blackberry.com/eng/
developers/
http://www.microsoft.com/downl
oads/details.aspx?FamilyID=a6f6a
daf-12e3-4b2f-a394-
356e2c2fb114&DisplayLang=en
Тестирован...
Тестирование: эмуляторы: где найти: Android
http://developer.android.com/
sdk/index.html
Тестирование: эмуляторы: где найти: OpenWave
http://developer.openwave.co
m/dvl/member/downloadMana
ger.htm?softwareId=23
Тестирование: эмуляторы: где найти: Symbian S60
http://innovator.samsung
mobile.com/index.do
http://www.forum.nokia.
com/
Тестирование: эмуляторы подробнее
http://mobiforge.com/testing/
story/a-guide-mobile-
emulators
?
Upcoming SlideShare
Loading in …5
×

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

11,681 views

Published on

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
11,681
On SlideShare
0
From Embeds
0
Number of Embeds
455
Actions
Shares
0
Downloads
102
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

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

  1. 1. Особенности верстки под мобильные устройства World Usability Day 2010
  2. 2. Содержание: • Введение • Под какие браузеры верстаем • Выбор языка разметки • Viewports • Media queries • Формы • Ссылки • JavaScript • Тестирование
  3. 3. Введение Зачем это нужно Что будет рассмотрено
  4. 4. Зачем это нужно • Mobile internet растет быстрее чем desktop internet • Рост продаж смартфонов • Снижение продаж телефонов • 3G – ключ к успеху мобильного интернета
  5. 5. Зачем это нужно Mobile internet растет быстрее чем desktop internet
  6. 6. Зачем это нужно Рост продаж смартфонов
  7. 7. Зачем это нужно Снижение продаж телефонов
  8. 8. Зачем это нужно 3G – ключ к успеху мобильного интернета
  9. 9. Что будет рассмотрено • Как и какой стандарт языка выбрать? • На что обращать внимание? • Как проверять результат?
  10. 10. Под какие браузеры верстаем Виды браузеров Доля браузеров Совместимость браузеров
  11. 11. Виды браузеров: полнофункциональные рендеринг происходит непосредственно на устройстве 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
  12. 12. Виды браузеров: 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
  13. 13. Доля браузеров: worldwide 0 5 10 15 20 25 30 Opera iPhone Nokia BlackBerry Android iPod Touch NetFront UCWEB Samsung Other
  14. 14. Доля браузеров: worldwide 0 5 10 15 20 25 30 Opera iPhone Nokia BlackBerry Android iPod Touch NetFront UCWEB Samsung Other
  15. 15. Доля браузеров: North America 0 5 10 15 20 25 30 BlackBerry iPhone Android iPod Touch Opera Nokia NetFront Sony PSP Palm Other
  16. 16. Доля браузеров: North America 0 5 10 15 20 25 30 35 BlackBerry iPhone Android iPod Touch Opera Nokia NetFront Sony PSP Palm Other
  17. 17. Доля браузеров: Europe 0 5 10 15 20 25 30 35 40 iPhone BlackBerry Opera Nokia iPod Touch Android NetFront Samsung Sony PSP Other
  18. 18. Доля браузеров: Europe 0 5 10 15 20 25 30 35 40 45 iPhone BlackBerry Opera Nokia iPod Touch Android NetFront Samsung Sony PSP Other
  19. 19. Доля браузеров: Russian Federation 0 10 20 30 40 50 60 70 80 90 Opera Nokia iPhone NetFront Android iPod Touch Samsung UCWEB IEMobile Other
  20. 20. Доля браузеров: Russian Federation 0 10 20 30 40 50 60 70 80 90 Opera Nokia iPhone Android NetFront iPod Touch Samsung UCWEB IEMobile Other
  21. 21. Совместимость браузеров http://www.quirksmode. org/mobile/
  22. 22. Выбор языка разметки Какие стандарты поддерживаются Отличия стандартов Какой стандарт выбрать
  23. 23. Какие стандарты поддерживаются • 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">
  24. 24. Отличия стандартов http://www.w3c.org
  25. 25. Какой стандарт выбрать • XHTML: Ориентирован на продвинутые мобильные устройства и смартфоны. Все больше мобильных браузеров поддерживают XHTML в дополнении к XHTML MP и WML. Однако XHTML не поддерживается большинством мобильных телефонов. • XHTML-MP: Ориентирован на большинство мобильных устройств, как телефонов, так и смартфонов, за исключением iPhone. XHTML-MP – стандарт языка для разметки сайтов для мобильных устройств. • WML: Ориентирован на старые мобильные устройства, с минимальной поддержкой графики, где малый размер документа является приоритетом.
  26. 26. Viewports Что такое viewport Visual, Layout and Screen Meta name=“viewport” Поддержка
  27. 27. Что такое viewport
  28. 28. Что такое viewport Разница между CSS-точками и физическими точками
  29. 29. Visual, Layout, Screen • Visual viewport – часть страницы, которая в данный момент отображается на экране. Пользователь может изменить видимую часть страницы, проскроллировав ее или увеличив масштаб отображения. • Layout viewport – вся страница. Размер разный в зависимости от браузера. Браузер Layout ViewPort Safari iPhone 980 Opera 850 Android WebKit 800 Internet Explorer 974
  30. 30. Visual, Layout, Screen
  31. 31. Visual, Layout, Screen: как измерять Измеряется JavaScript: Viewport Layout ViewPort Visual window.innerWidth/Height Layout document.documentElement.clientWidth/clientHeight Screen screen.width/height
  32. 32. Meta name=“viewport” Устанавливает размер layout viewport
  33. 33. Meta name=“viewport” Пример 1: viewport не установлен Браузер отображает все содержимое страницы, увеличивая размер visual viewport до максимальных размеров.
  34. 34. Meta name=“viewport” Пример 2: <meta name=“viewport” content=“width=320”> Браузер отображает содержимое страницы в определенных размерах visual viewport.
  35. 35. Meta name=“viewport” Пример 3: <meta name=“viewport” content=“width=500”> Браузер отображает содержимое страницы в определенных размерах visual viewport.
  36. 36. Meta name=“viewport” Пример 4: <meta name=“viewport” content=“width=device-width”> Браузер отображает содержимое страницы в размерах visual viewport устанавливаемых устройством.
  37. 37. Meta name=“viewport” Пример 5: <meta name=“viewport” content=“width=device-width”> Содержимое шире размера visual viewport Браузер пытается отобразить все содержимое, несмотря на установленные размеры viewport.
  38. 38. Meta name=“viewport” Пример 6: <meta name=“viewport” content=“width=device-width”> Содержимое шире размера visual viewport Браузер отображает содержимое страницы в размерах visual viewport устанавливаемых устройством.
  39. 39. Meta name=“viewport” <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum- scale=1.0; user-scalable=no;">
  40. 40. Meta name=“viewport” Browser Opera Mobile yes Opera Mini no iPhone yes Android yes Symbian no S40 no BlackBerry yes Phantom buggy Bolt no Firefox no IE Mobile yes • Opera Mobile 10.10 – не позволяет изменять размер страницы • iOS – ширина viewport 320.
  41. 41. Media queries Что это такое Кем поддерживается
  42. 42. Media query: что это • CSS2 - позволяет указать таблицу стилей для конкретного типа носителей, таких как экран или принтер. • CSS3 - вы можете добавить выражения к media type для проверки определенных условиях и применять различные стили.
  43. 43. 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" />
  44. 44. Media query: что это Feature Value Min/Max Applies to Width length Yes visual and tactile media types Height length Yes visual and tactile media types Device-width length Yes visual and tactile media types Device-height length Yes visual and tactile media types Orientation portrait or landscape No bitmap media types Aspect-ratio ratio Yes bitmap media types Device-aspect-ratio ratio Yes bitmap media types Color integer Yes visual media types Color-index integer Yes visual media types Monochrome integer yes visual media types Resolution Integer (dpi or dpcm) Yes bitmap media types scan progressive or interlaced No "tv" media types grid Integer no visual and tactile media types
  45. 45. Media query: совместимость Browser Opera Mobile yes Opera Mini yes iPhone yes Android yes Symbian static S40 static BlackBerry yes Phantom yes Bolt yes Firefox yes IE Mobile no • Static – media query не сработает при изменении размера экрана
  46. 46. 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; } }
  47. 47. Media query: примеры Пример 7: Android ведет себя совершенно по другому, после обновления страницы media-query срабатывает.
  48. 48. 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; } }
  49. 49. Media query: примеры Пример 8: iPhone 3G не понимает orientation. Android понимает, так же как и iOS.
  50. 50. 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; } }
  51. 51. Media query: примеры Пример 8.1: Багов не замечено.
  52. 52. Формы Поведение Что нового Примеры
  53. 53. Формы: поведение Увеличение + экранная клавиатура
  54. 54. Формы: примеры Пример 9: placeholder <input name="f1“ type="text" placeholder="Search Bookmarks and History"/>
  55. 55. Формы: примеры Пример 9: email <input name="f3" id="f3" type="email"/>
  56. 56. Формы: примеры Пример 9: URL <input name="f4" id="f4" type="url"/>
  57. 57. Формы: примеры Пример 9: tel <input name="f14" id="f14" type="tel"/>
  58. 58. Формы: примеры Пример 9: pattern <input name="f15" id="f15" type="text" pattern="[0-9]*"/>
  59. 59. Формы: примеры Пример 9: number <input name="f5" id="f5" type="number" min="0" max="10" step="1" value="1"/>
  60. 60. Ссылки Что нового Примеры
  61. 61. Ссылки: что нового • tel: • sms: • mmsto:
  62. 62. Ссылки: что нового <meta name = "format- detection" content = "telephone=no">
  63. 63. JavaScript Что нового?
  64. 64. JavaScript: что нового? Способы взаимодействия: • Клавиатура • Мышь • Touch screen
  65. 65. JavaScript: touch events Способы взаимодействия: • Клавиатура • keydown • keypress • keyup • Мышь • mousedown • mouseup • mouseover • mouseout • mousemove Способы взаимодействия: • Touch screen • touchstart • touchend • touchmove • touchcancel
  66. 66. JavaScript: touch events TOUCH != MOUSE
  67. 67. JavaScript: touch events В теории touchscreen должен вызывать только touch события, а не события мыши. Однако, слишком много вебсайтов используют события мыши, поэтому производители браузеров вынуждены поддерживать их.
  68. 68. JavaScript: touch events Поэтому, обычно события мыши и touch events вызываются вместе. http://quirksmode.org/touchevents Touch Action Test Page пример
  69. 69. 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; } }
  70. 70. 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; } }
  71. 71. 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. }
  72. 72. JavaScript: touch events http://quirksmode.org/touchevents Drag & Drop 2 пример (iPhone) Потаскайте несколько элементов одновременно!
  73. 73. Тестирование Введение FireFox Эмуляторы
  74. 74. Тестирование • Протестируйте ваш сайт сначала на обычном браузере (например FireFox), чтобы убедится что все работает как ожидалось. • Как только вся функциональная часть сайта работает как надо, переходите на тестирование на эмуляторах. • После этого можно переходить на тестирование на реальных устройствах.
  75. 75. Тестирование • с загрузкой изображений и стилей • без загрузки изображений • без загрузки стилей • с полностью отключенными стилями и изображениями
  76. 76. Тестирование: FireFox Что надо: • Firefox Web browser • Modify Headers add-on • User Agent Switcher add-on
  77. 77. Тестирование: FireFox Для добавления user agent в Firefox Tools -> Default User Agent -> User Agent Switcher -> Options
  78. 78. Тестирование: FireFox Нажмите кнопку New и выберите New User Agent из выпадающего списка. Заполните предлагаемые поля.
  79. 79. http://www.zytrax.com/tech /web/mobile_ids.html Тестирование: Список User Agents
  80. 80. Тестирование: FireFox подробнее http://mobiforge.com/testing/ story/testing-mobile-web- sites-using-firefox
  81. 81. Тестирование: эмуляторы Типы эмуляторов: • Эмуляторы устройств • Эмуляторы браузеров • Эмуляторы операционных систем
  82. 82. Тестирование: эмуляторы Проблемы: • Не всегда эмулятор полностью повторяет поведение устройства • Размеры шрифтов могут отличаться (в основном это связано с физическим размером точки)
  83. 83. Тестирование: эмуляторы Популярные эмуляторы: • Research in Motion (BlackBerry) • Samsung • Palm • LG • Motorola Эмуляторы операционных систем: • Apple (iOS) • Microsoft (Windows Mobile) • Google (Android) • Nokia (Series 40 and Series 60) Эмуляторы браузеров: • Opera Mini • Openwave
  84. 84. Тестирование: эмуляторы: где найти: iPhone http://developer.apple.com/ip hone/index.action http://www.testiphone.com web based
  85. 85. Тестирование: эмуляторы: где найти: Opera Mini http://www.opera.com/mobile /demo/ web based
  86. 86. Тестирование: эмуляторы: где найти: BlackBerry http://na.blackberry.com/eng/ developers/
  87. 87. http://www.microsoft.com/downl oads/details.aspx?FamilyID=a6f6a daf-12e3-4b2f-a394- 356e2c2fb114&DisplayLang=en Тестирование: эмуляторы: где найти: Windows Mobile
  88. 88. Тестирование: эмуляторы: где найти: Android http://developer.android.com/ sdk/index.html
  89. 89. Тестирование: эмуляторы: где найти: OpenWave http://developer.openwave.co m/dvl/member/downloadMana ger.htm?softwareId=23
  90. 90. Тестирование: эмуляторы: где найти: Symbian S60 http://innovator.samsung mobile.com/index.do http://www.forum.nokia. com/
  91. 91. Тестирование: эмуляторы подробнее http://mobiforge.com/testing/ story/a-guide-mobile- emulators
  92. 92. ?

×