Цуканов Павелptsukanov@codereign.netSkype: cpp.tula

РАЗРАБОТКА МОБИЛЬНЫХ

САЙТОВ.

О чём речь?• О том о чём вы и подумали – о

сайтах, которые вы можете просматривать на мобильных устройствах.

• Об истории – WAP, WML, XHTML, XHTML-MP

• Нужны ли они?

• О будущем – HTML5

• О jQuery Mobile Framework

И так история• Экскурс в историю

• Всегда интересно узнать что было и к чему пришли.

• Много интересных абревиатур – WAP, WML, XHTML-MP

• WAP - Средство вытягивания денег

WMLWireless Markup Language (WML), основанный на XML, это язык разметки, предназначенный для устройств, которые реализуют Wireless Application Protocol (WAP) спецификацию, такие как мобильные телефоны. Он обеспечивает навигацию, ввод данных, гиперссылки, текст, изображение и формы, так же, как и HTML

WML

XHTMLXHTML является HTML написанный с синтаксисом XML.Теги в XHTML такие же, как и в HTML. XHTML имеет чистые и строгие структуры, который облегчит обработку документов. Это особенно важно для беспроводных устройств, таких как мобильные телефоны, имеют ограниченные вычислительные мощности. Все основные веб-браузеры поддерживают XHTML.

XHTML

XHTML - BasicXHTML Basic представляет собой упрощенную версию XHTML. Она предназначена для устройств с ограниченной вычислительной мощностью и возможностями, таких как мобильные телефоны, КПК, смарт-часы, пейджеры и т.д. XHTML Basic не содержит XHTML особенностей, которые трудно поддерживать на этих устройствах. Например, каскадные таблицы стилей, фреймы и сценарии не поддерживаются в XHTML Basic. Пример на

http://www.w3.org/People/mimasa/test/schemas/xhtml-basic-sample.xml

XHTML MP (Mobile Profile)XHTML Mobile Profile является официальным языком разметки в самой последней версии WAP 2.0. Это определено WAP Forum. WAP Forum создала XHTML Mobile Profile основываясь на XHTML Basic, с добавлением некоторых элементов и атрибутов из полной версии XHTML, таких как <i>, <b>, <small>, <big> и <hr>. XHTML Mobile Profile поддерживает упрощенную версию каскадных таблиц стилей называется WCSS / WAP CSS.

XHTML MP

XHTML MP

HTML5• 5-ая версия HTML.

• До сих пор находится в разработке!

• Поддержка сильно зависит от браузера

• Проверить свой браузер на готовность к HTML5 можете на http://html5test.com/

Откуда дровишки?

115Кбит/с

473,6 Кбит/с

3,6 Mбит/с

600 Mбит/с (в теории)

1 Гбит/с (в теории)

Браузеры

• Встроенные. Предустановлены изготовителем телефонов. Последние версии подддерживают как минимум XHTML-MP.

• Устанавливаемые. Самые известные−Opera Mini, Mobile−Google Chrome− Firefox

Джентельментский набор

• Смартфон на Android

• IPhone, IPad

• Windows Phone

• Blackberry

Так в чём же проблемаразработать мобильныйсайт?

• Маленький экран.• Другой метод ввода информации.• “Толстые пальцы”.• Проблема низких скоростей и

ограничений траффика всё ещё актуальна.

Мобильный сайт, Обычный сайт или приложение?

Исследования проведённые экспертом по юзабилити Якобом Нельсоном (http://www.useit.com/alertbox/mobile-usability.html) показывают1. Для мобильных пользователей нужен

отдельный сайт.2. Нужна связь между мобильным и

обычным сайтом.3. Приложения предпочтителнее если ваши

услуги ориентированы на мобильное использование

Рекомендации

• Существуют множество рекомендаций но основные сводятся к следующим приципам−Сокращение функциональности,

необходимо устранить вещи, неявляющимися основными на мобильном сайте;

−Сокращение содержание, необходимо уменьшить количество слов на основных страницах и переместить вторичную на других страницах

− Увеличить элементы интерфейса, для решения проблемы "толстых пальцев".

Однако не все с этим согласны

• Далеко не всем понравится урезанная версия сайта

• Растёт количество смартфонов, планшетников для которых такие ограничения становятся менее актуальны. В США 25% людей используют мобильные устройства как единственный способ выхода в Интернет.

• Однако в других странах преобладает выход в Интернет с низкобюджетных устройств

Немного цифр

Best practices• http://www.w3.org/TR/mobile-bp

• http://mobilewebslinger.com/2012/04/20/16-mobile-website-best-practices/

• http://sixrevisions.com/web-development/mobile-web-design-best-practices/ (Содержит ссылки на эмуляторы мобильных устройств).

Мои рекомендации• Определится с целевой

аудиторией вашего сайта

• Если это пользователи с низкобюджетными устройствами, то использовать XHTML-MP

• Если хотите больше – HTML5

• Список браузеров и их характеристик можно найти на http://www.quirksmode.org/mobile/

Небольшой демо сайт• На http://

tuladev.sitesmobile.codereign.net представлен небольшой демо сайт с примерами из текущего доклада.

• Можете взять IPad или IPhone и попробовать как это работает.

• После запуска сайта вы увидите, возможности HTML5 на мобильных устройствах

• Итак по порядку.

Viewports

Visual viewport, Layout viewport

Viewport на демо сайте

• Устанавливает ширину = физической ширине устройства

• Без начального масштабирования

• С максимальным масштабированием = 2

• А это наиболее часто встречаемая комбинация параметров.

Video

Video

Audio

Audio

Input Text pattern="[0-9]*"

Input Numbers

Input Phone

Link Call Phone, Send SMSMMS

Input E-Mail

Input File

Input DateTime

Input URL

Javascript• Добавилась поддержка касания

• Можно отлавливать такие события как− touchstart− touchend− touchmove− touchcancel

• Touch != Mouse

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

Тестирование

• Нет ничего лучше чем реальное устройство.

• Но если его нет - есть эмуляторы. Но они к сожалению не всегда повторяют поведение устройства.

• Уже упоминал но повторю ссылку с эмуляторами http://sixrevisions.com/web-development/mobile-web-design-best-practices/

• И http://www.asp.net/Mobile/device-simulators

JQuery Mobilehttp://jquerymobile.com

• Apple iOS: iPhone, iPod Touch, iPad (все версии)

• Android: все устройства (все версии)

• Blackberry

• Windows Phone

• ОЧЕНЬ внушительный список поддерживаемых браузеров на http://jquerymobile.com/gbs/

Ключевые особенности

• Построенный на JQuery знакомый синтаксис

• Совместимость со всеми основными мобильными платформами — iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Mobile, bada, MeeGo и с базовой поддержкой всех устройств которые понимают HTML

• Небольшой размер файла (12кб включающий функциональность для всех мобильных) и минимальная зависимость от изображений для увеличения скорости

• Автоматическая инициализация с помощью HTML5 date-role атрибутов в разметке HTML, автоматически инициализирует все JQuery Mobile виджеты найденные на странице.

• Простое API, рационализирующее процесс поддержки Touch, мыши, и других видов устройств ввода.

• Новые модули расширяющие возможности сенсорного управления.

• Мощные темы визуализации приложения делают весьма простым построение интерфейсов.

Типичный шаблон

Результат

JQuery Mobile версиямоего примера

• Использовать реально легко.

• Очень доступная и понятная документация. Все доступные возможности на http://jquerymobile.com/demos/1.1.1/

• Поддержка как стандартных элементов ввода так и своих.

• Решена моя головная боль – фиксированный Header/Footer.

• Хотя без сюрпризов не обошлось. Framework по умолчанию загружает ссылки через AJAX.

Конструктор

Редактор тем

Таким образом

• Минимум кодирования превращает ваш HTML в мобильный.

• Мало того использование AJAX при загрузке страниц уменьшает скорость загрузки и соответственно траффик.

• На сайте можно запустить билдер, который позволит создать свою версию Framework с только необходимыми контролами.

• На сайте есть неплохая подборка реальных мобильных сайтов на JQuery Mobile.

Пожалуйста, Ваши Вопросы!!!