XHTML Mobile Profile и Basic

Подготовили: Анна Лысак и Татьяна Головко Дата публикации: 06.06.2011

XHTML MP разработан на основе XHTML Basic (W3C) и между ними очень много общего. На сайте W3C есть мобильный валидатор http://validator.w3.org/mobile и он принимает XHTML Basic и MP как валидную разметку.

XHTML Mobile Profile является подверсией XHTML. Оба стандарта построены на базе XML, так что мы должны будем соблюдать его строгие правилам. Если в разработке декстопных веб-сайтов ты никогда не сталкивался с XHTML 1.0 и 1.1, давай проанализируем отличия от работы с HTML:

  • У файла должен быть корневой элемент (тег html);
  • Каждое имя и атрибут тега должны быть написаны в нижнем регистре;
  • Каждое значение атрибута должно быть написано в кавычках;
  • Каждый тег должен быть закрыт. Может показаться что это и так очевидно, но это не так: в HTML ты не должен закрывать теги вроде <img>, <input> и <br>, а в XHTML это обязательно. Главное правило : использовать самозакрывающиеся теги вроде <br/>;
  • Теги должны закрываться в обратном порядке. Если ты открыл абзац, а потом ссылку, то сначала нужно закрыть ссылку, а потом абзац;
  • XHTML разметка должна быть хорошо сформирована. Обязательный пробел — это &nbsp;, а символ амперсанда должен быть &amp;;
  • У всех атрибутов должны быть значения. Например, недопустимо использовать <option selected>, должно быть <option selected="selected">;
  • Обязательно объявление DOCTYPE. Открывающий тег XML — опциально. Фактически, мы не должны использовать открывающий тег XML для мобильных браузеров.

Доступные теги

Наконец мы добрались до самого кода. XHTML MP — подмножество XHTML, который в свою очередь является производным от HTML, поэтому большинству веб-разработчиков тут многое будет знакомо.

Пробел перед последним закрывающим слешем

Наверное, в последние годы тебе встречалось использование <br /> в XHTML или HTML. Знаешь ли ты, зачем нужен пробел перед закрывающим слешем? В XML-файле допускается использование <br /> без пробела. Пробел используется для обеспечения обратной совместимости с не-XHTML браузерами, которые не воспринимают закрывающий слеш в теге. При использовании пробела перед закрывающим слешем старые браузеры наверняка поймут тег как разрыв строки.

В таблице 5.6 перечислены теги форматов XHTML Mobile Profile 1.2 и XHTML Basic 1.1. В XHTML MP 1.1 были добавлены некоторые новые функции (например, поддержка скриптов), а поддержка объектов доступна уже в последнем стандарте 1.2.

Табл. 5.6. HTML теги, доступные в XHTML MP 1.2 and Basic 1.1
Категория Перечень тегов входящих в данную категорию
Структурные теги body, head, html, title
Текстовые теги abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1-h6, kbd, p, pre, q, samp, span, strong, var
Ссылки a
Теги представления b, big, hr, i, small
Стили style
Списки dl, dt, dd, ol, ul, li
Формы form, input, label, option, textarea, fieldset, optgroup
Разметка таблиц caption, table, td, th, tr
Другие img, object, param, meta, link, base, script, noscript

Между предыдущими версиями XHTML MP и Basic были существенные различия, но сейчас в XHTML Basic стандарт (1.1) и XHTML MP 1.2 практически идентичны благодаря добавлению в Basic практически всех функций и MP 1.2.

XHTML Mobile Profile 1.2 — это последний стандарт от OMA. Первый проект представили еще в 2004 году, но статус стандарт был получен только в 2008 и именно поэтому на рынке еще достаточно low- и mid-end устройств без поддержки XHTML Mobile Profile 1.2. Всегда помни о том, что разработчикам и браузерам нужно какое-то время для адаптации к новым стандартам, но производителям мобильных устройств нужно значительно больше времени для выпуска устройств с поддержкой новых технологий.

Мы можем применять тег, который не поддерживается в нашем заявленном DOCTYPE. Это может несоответствовать объявленному DTD, но браузеры, не понимающие такой тег, просто его проигнорируют без каких-либо видимых пользователю ошибок.

Официально несовместимые функции

Любой из присутствующих сегодня на рынке WAP 2.0 браузеров должен понимать теги, приведенные в таблице 5.6. Но в XHTML MP (и в Basic) есть некоторые функции, техники и технологии, которые официально не поддерживаются. Безусловно, мы их все протестируем в каждом браузере, но, насколько мне известно, сегодня на рынке есть достаточно полноценных HTML браузеров, которые понимают некоторые из несовместимых функций. Официально не поддерживаются следующие функции:

  • Вложенные таблицы (таблица внутри других таблиц);
  • Табличные теги: thead, tbody, и атрибуты rowspan и colspan;
  • Теги формы: input type="image", input type="file";
  • Редактирование: ins, del;
  • Карты изображений (map, area и т. д.);
  • Фреймы;
  • iframe;
  • Устаревшие теги форматирования: font, dir, menu, strike, u и center;

Мы проверим все браузеры на совместимость с этими и указанными ниже функциями:

  • Adobe Flash;
  • Microsoft Silverlight;
  • XMLHttpRequest объект (Ajax);
  • SVG;
  • тег <canvas>;
  • другие встроенные объекты: Windows Media, QuickTime, Java-апплеты
  • мультимедиа-теги: <audio> и <video>;
  • открытие ссылки в новой вкладке или новом окне.

Также для каждого браузера определим доступные схемы URL.

Создание нашего первого совместимого шаблона

Давай сделаем простой и совместимый со всеми устройствами шаблон. Рекомендую использовать функцию просмотра исходного кода если работаешь с такими визуальными веб-редакторами как Adobe Dreamweaver или Microsoft Expression Web.

Выглядеть наш шаблон будет следующим образом:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>First Template</title>
</head>
<body>
	<h1>First Template</h1>
	<h2>Programming the Mobile Web</h2>
	<p>Welcome to the first template of this book</p>
	<p>It <strong>should work</strong> in every mobile browser in the market</p>
	<ol>
		<li><a href="http://m.yahoo.com" accesskey="1">Yahoo!</a></li>
		<li><a href="http://m.google.com" accesskey="2">Google</a></li>
		<li><a href="http://m.bing.com" accesskey="3">Bing</a></li>
	</ol>
	<p><img src="images/copyright.gif" width="150" height="50"
	alt="(C) mobilexweb.com" /></p>
</body>
</html>

Результат показан на рисунке 5.8, а сейчас некоторые комментарии к самому коду:

  • используем XHTML MP DOCTYPE;
  • только стандартные теги для заголовков: h1-h6, никаких тегов <p> или <div>;
  • для обрамления текста мы используем тег параграф (<p>);
  • для отображения меню ссылок используем упорядоченный список. Номера опций должны соответствовать атрибутам accesskey тега <a>;
  • для всех изображений прописываем размеры и альтернативный текст.
Простой шаблон без CSS в WebOS, Android, Safari, BlackBerry, Nokia S60, Windows Mobile, Nokia S40 (бюджетный устройства), Motorola, и NetFront (на устройствах Sony Ericsson) Рис. 5.8. Простой шаблон без CSS в WebOS, Android, Safari, BlackBerry, Nokia S60, Windows Mobile, Nokia S40 (бюджетный устройства), Motorola, и NetFront (на устройствах Sony Ericsson)

Как видно на изображениях, этот код работает на любой платформе. Хотя, ты можешь подумать, что как раз в iPhone все будет ужасно. И если у тебя появилось желание прямо сейчас выбросить книгу — подожди! Дай мне еще один шанс! Я расскажу, как используя этот код можно разрабатывать отличные проекты для iPhone или любого другого смартфона. Ну да, может в этот код будут внесены некоторые изменения, но их будет не так уж и много. Наша основная цель в том, чтобы этот шаблон оставался таким же простым даже в очень сложных веб-приложениях на HTML5.

Дополнения к разметке

Так как WML — специфический язык «мобильной» разметки, для него характерны мобильные теги и атрибуты. Но с XHTML MP или Basic все по другому, именно поэтому в 2000-м году многие разработчики были против WAP 2.0. Некоторые производители мобильных устройств даже пытались создать свою собственную версию XHTML со специальными тегами и функциями.

В XHTML Basic 1.1 есть специальное дополнение для разработки под мобильные технологии, но даже с XHTML MP DOCTYPE это дополнение будет работать, если браузер способен понимать такую разметку. Под дополнением имеется в виду атрибут inputmode для тегов <input> и <textarea>, что позволяет нам определять режимы ввода, которые указывают на ожидаемый тип символов (ожидаемый язык, например, арабский, латиница, тайские символы), а также модификаторы для текстового ввода, например, predictOff для отключения режима интеллектуального ввода). В XHTML MP поддержка аналогичных возможностей добавлена в СSS WAP, который мы рассмотрим позже.

В WML был еще похожий на режим ввода (input mode) атрибут format для тега input. В XHTML-файлах этот атрибут до сих пор поддерживается некоторыми браузерами вроде Openwave.

Куда дальше

Показать комментарии