Актуальные стандарты

Что касается современного мобильного веба, то работать мы будем с такими стандартами и псевдостандартами:

• XHTML Mobile Profile 1.0, 1.1, и 1.2;
• XHTML Basic 1.0 и 1.1;
• XHTML 1.0 и 1.1;
• HTML 3.2 и 4.0;
• HTML 5.0 draft;
• Фактические стандартные расширения (X)HTML;
• WAP CSS;
• CSS Mobile Profile;
• CSS 2.1;
• CSS 3.0;
• CSS пользовательские расширения.

Может показаться, что стандартов слишком много, но не паникуй. На самом деле все стандарты можно разделить на две группы: на основе HTML и на основе СSS.

Политика мобильного Веба

Спрашиваешь, почему так много стандартов? Так вот ответ нужно искать в политике. Да, именно в политике. В мобильном мире очень много участников и каждый хочет влиять на принятие важных решений и развитие отрасли. Какие организации принимают решения по поводу мобильных веб-стандартов: Open Mobile Alliance (OMA), или, может W3C? А может производитель мобильных устройств сам создать свою собственную разметку? На рисунке 5.4 указаны все действующие и находящиеся в разработке мобильные и общие веб-стандарты.

Рис. 5.4. Сегодня существуют многие стандарты разметки для мобильных устройств сети.

Именно из-за таких вопросов и получаются «кошмары» в разметке. Вот ниже еще один взгляд на информацию из рисунка 5.4, но уже в виде сгруппированного списка стандартов:

• Мобильные стандарты, принятые W3C:
  • XHTML Basic 1.0 и 1.1;
  • CSS Mobile Profile (CSS MP).
• Мобильные стандарты от OMA:
  • XHTML Mobile Profile (MP) 1.0, 1.1 и 1.2;
  • Wireless CSS (WCSS) или WAP CSS.
• Не-мобильные (общие) веб-стандарты, поддерживаемые производителями:
  • XHTML 1.0;
  • HTML 3.2 и 4.0;
  • CSS 2.1
• Поддерживаемые в мобильных устройствах общие веб-стандарты, которые сейчас находятся в разработке:
  • HTML 5.0;
  • CSS 3.0.
• Расширения веб-стандратов:
  • Фактически стандартные расширения (X)HTML;
  • CSS расщирения.

Когда сразу несколько стандартов

Первая хорошая новость: все стандарты, кроме новых функций в HTML5 и CSS3, очень похожи и совместимы друг с другом. Вторая хорошая новость: во всех HTML-браузерах — то есть практических во всех браузерах установленных на современных устройствах — есть отличный механизм для работы с незнакомыми тегами и атрибутами. В этом, можно сказать, сердце эволюции HTML.

Я помню свои первые декстопные проекты в 1996 году. Тогда для каждого браузера на рынке (Mosaic, Netscape Navigator, the AOL Browser, а немного позже и Internet Explorer) был свой отдельный перечень тегов. Но даже такая ситуация не была проблемой: если браузер не понимал какой-то тег, то он просто его пропускал. Точно также работает большинство мобильных браузеров, что позволит нам работать со всеми стандартами одновременно (ну исключая разработку под некоторые старые устройства).

Так как производители мобильных устройств все-таки ближе к OMA, чем к W3C, они официально придерживаются стандарта WAP 2.0, используя XHTML MP и WAP CSS. Но, несмотря на это практически все браузеры понимают XHTML Basic и CSS MP, а большинство mid- и high-end устройств уже поддерживает полные версии декстопных веб-стандратов (HTML и CSS).

Но не полагайтесь полностью на стандарты: в двух похожих устройствах, поддерживающих одинаковые стандарты могут быть совершенно разные результаты. Мы рассмотрим разные варианты и выберем лучшие.

Доставка разметки

Прежде чем начнем разбирать различия между стандартами, поговорим как этот стандарт попадает на мобильное устройство. Во-первых, как и в обычном Веб, все статические документы имеют расширение .html, стили используют расширение .css. Конечно, мы можем доставить XHTML MP или XHTML Basic используя динамические шаблоны типа .php, .aspx или сервлеты Java.

Рис. 5.5. MIME-тип отправляется вместе с заголовками файла, а DOCTYPE описывается внутри HTML документа.

Как же устройство узнает, в соответствии с каким стандартом написан сайт? Об этом ему скажут MIME-тип и DOCTYPE. MIME-тип — строка, которая отправляется сервером и сообщает браузеру тип формат документа, DOCTYPE — это первая строка в HTML-файле. Если вы проигнорируете DOCTYPE, страница, конечно, сможет работать во многих браузерах, но лучше так не делайте. Кроме того, нужно помнить что в HTML 3.2, 4.0 и 5.0 открывающий тег должен быть таким:

<html>

Во всех подверсиях XHTML открывающий тег выглядит так:

<html xmlns="http://www.w3.org/1999/xhtml">

Во всех стандартах CSS используется тот же тип MIME, что и для декстопных сайтов (text/css) и здесь в CSS нет никакого определителя формата документа. Поэтому для файлов стилей нет необходимости определять, какой стандарт ты используешь в разработке. Совместимость определяется используемыми селекторами и атрибутами. На рисунке 5.5 показано перемещение в Сети MIME и DOCTYPE.

В таблице 5.3 перечислены все привилегированные типы MIME и DOCTYPE.

Рис. 5.6. Так выглядит один и тот же документ в Safari на iOS с одним и тем же MIME-типом, но с разным DOCTYPE. Экран слева с XHTML Mobile Profile DOCTYPE, а экран справа с немобильным XHTML DOCTYPE.

В браузере iPhone страница будет выглядеть по-разному, в зависимости от того, какой на странице используется DOCTYPE — XHTML Mobile Profile или XHTML Basic 1.0 (рисунок 5.6). Самое большое различие будет в используемой области просмотра. Эти особенности мы рассмотрим чуть позже, но ты должен знать, что в отличие от обычного HTML-файла, страница с разметкой XHTML MP не будет запускаться сразу в уменьшенном размере.

В разметке нужно использовать мета тег, который скажет браузеру, какой тип контента (content-type) содержится в файле; правильный MIME-тип или text/html (даже если используется XHTML или XHTML MP — таковы рекомендации W3C) и определить используемую кодировку (чаще всего это UTF-8):

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Этот тег не является обязательным, но если по каким-то причинам кодировка не указана в HTTP заголовках или в XML заголовке, лучше иметь такой вот альтернативный способ указать кодировку. Лишним это точно не будет с точки зрения совместимости.

Некоторые low- и mid-end устройства могут «не понимать» MIME-тип text/html, а некоторые смартфоны — XHTML MP MIME, при использовании базовой, совместимой со всеми стандартами разметки. В следующей главе мы узнаем, как динамично изменять этот атрибут во время поставки разметки на мобильное устройство.

При помощи OMA MIME-тип (application/vnd.wap.xhtml +xml) можно доставить XHTML MP или с тем же успехом можно использовать XHTML-тип (application/xhtml+xml) или даже HTML-тип (text/html). OMA рекомендует использовать первый вариант, но XHTML-тип будет хорошо работать в любом случае. В зависимости от используемого типа MIME в некоторых старых и low-end страницы могут отображаться по-разному.

В таблице 5.4 показаны результаты тестирования использования различных типов MIME и DOCTYPE, а также результаты тестирования совместимости XHTML MP со всеми из перечисленных браузеров (результат показан на рисунке 5.7). Этот тест можно найти на сайте http://www.mobilexweb.com/tests/ch6.

Топ мобильных сайтов

В таблице 5.5 приведены девять самых посещаемых мобильных сайтов Великобритании (по результатам Opera State of the Mobile Web) при помощи юзер агентов Nokia 5800 XpressMusic и iPhone и отчет о том, как они доставили документы.

Рис. 5.7. Safari на iOS не понимает XHTML MP MIME-тип, поэтому для него нужно использовать в заголовках не мобильный MIME-тип.

Кодировка

Для лучшей совместимости с латиницей мы должны в XHTML указать кодировку UTF-8 в заголовке страницы или это же сделать в HTTP заголовке Content-Type. Если у нас только разметка HTML или контент на других языках (не латинице), то можно использовать и другие кодировки.

В заключение о MIME-типах и DOCTYPE

Как мы убедились, практически все браузеры понимают HTML MIME-тип и DOCTYPE. Рекомендуется использовать XHTML MP 1.0 DOCTYPE и XHTML MIME-тип.

В чем преимущество использования такого заголовка? Это семантически правильное решение, потому что на некоторых устройствах (например тех, которые используют мобильный Safari) существуют определенные различия в поведении. Это что-то вроде объявления: «Эй это мобильный веб-сайт и он не предназначен для обычного компьютера». Эти метаданные помогут роботу поисковой системы определить мобильные веб-страницы.

Если мы будем использовать некоторые функции HTML5 или несовместимые с мобильными устройствами теги, то для обеспечения валидности разметки мы должны использовать HTML DOCTYPE (и только в этом случае).

Куда дальше

• следующая — XHTML Mobile Profile и Basic
• предыдущая — Во-первых, старые языки
• содержание