XHTML Mobile Profile и Basic

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.

Между предыдущими версиями 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" ?&gt
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd"&gt
<html xmlns="http://www.w3.org/1999/xhtml"&gt
<head&gt
	<title&gtFirst Template</title&gt
</head&gt
<body&gt
	<h1&gtFirst Template</h1&gt
	<h2&gtProgramming the Mobile Web</h2&gt
	<p&gtWelcome to the first template of this book</p&gt
	<p&gtIt <strong&gtshould work</strong&gt in every mobile browser in the market</p&gt
	<ol&gt
		<li&gt<a href="http://m.yahoo.com" accesskey="1"&gtYahoo!</a&gt</li&gt
		<li&gt<a href="http://m.google.com" accesskey="2"&gtGoogle</a&gt</li&gt
		<li&gt<a href="http://m.bing.com" accesskey="3"&gtBing</a&gt</li&gt
	</ol&gt
	<p&gt<img src="images/copyright.gif" width="150" height="50"
	alt="(C) mobilexweb.com" /&gt</p&gt
</body&gt
</html&gt

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

• используем XHTML MP DOCTYPE;
• только стандартные теги для заголовков: h1-h6, никаких тегов <p> или <div>;
• для обрамления текста мы используем тег параграф (<p>);
• для отображения меню ссылок используем упорядоченный список. Номера опций должны соответствовать атрибутам accesskey тега <a>;
• для всех изображений прописываем размеры и альтернативный текст.

Рис. 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.

Куда дальше

• следующая — CSS для мобильных
• предыдущая — Актуальные стандарты
• содержание