WML – Язык разметки для мобильных телефонов(WAP)
WML (Wireless Markup Language) – язык разметки для работы в Интернет беспроводных устройств (WAP), основанный на XML. Назначение WML – описание контента и пользовательского интерфейса для особого класса узкополосных устройств, типа Palm Pilot, сотовых телефонов и пейджеров.
WML специально «заточен» (и продолжает «затачиваться») с ориентацией на ограничения подобных устройств, а именно: малоформатный экран, узкую полосу пропускания канала связи, малую собственную память и ограничения на «вычислительные» способности. По этой причине, и из-за острой нужды в стандартизации, в языке «визуальной разметки» для WAP устройств свое законное место заняла идея хорошо структурированных данных – WML наследует синтаксис XML.
Трудно ожидать, что кто-то будет подключать к сотовому телефону мышь, поэтому модель «point-and-click» для WAP не годится (по крайней мере, видимо так считает группа разработчиков языка), и большая роль в WML отводится другим механизмам событий. Доводы здесь те, что у пользователя должен быть шанс на управление голосом, либо еще какие-то варианты, кроме кнопочных. Экраны WAP устройств выглядят достаточно по-разному, встречаются вертикальные и горизонтальные, но объединяет их все то, что они предельно малоформатны.
Сам WML выглядит как «HTML для бедных», но с чуть более жесткими требованиями к парности тегов, использованию регистра и обрамлению атрибутов кавычками. Используемые компоненты синтаксиса в WML – это символьные сущности, элементы, атрибуты, комментарии, переменные и секции CDATA.
WML скуп на возможности представления – набор поддерживаемых тегов невелик, и язык основан на нетипичной метафоре колоды карт, хотя сильных аргументов в защиту этого построения из просмотренных источников у меня не сложилось. Нельзя сказать, что особым успехом увенчались и попытки осознать до конца модель WML tasks/events. Но, похоже, я не одинок – имеющиеся в сети материалы страдают схожими проблемами.
Метафора игральных карт
Краеугольный камень WML-дизайна – колода игральных карт – набор показываемых по отдельности карточек (экранов), хранящихся в памяти. То есть, если для обычного сайта единицей является Web-page, то единица WML – это т. н. deck, состоящая из одной или нескольких card, составляющих вместе WML-документ (wml-файл).
Как только wml-файл загружен в устройство с сервера, пользователь может листать экраны, переходить к следующему или возвращаться к предыдущему, не ожидая загрузки с сайта, что, конечно, выгодно по скорости.
Пример 1. WML-колода из одной карты
Нетрудно заметить, что структура языка во многом родственна HTML: теги
Впрочем, пример выше еще не вполне завершен. WML — это ветвь XML, а любой XML-документ сначала должен пройти проверку на соответствие своему DTD (Document Type Definition). Следовательно, в любом wml-файле, как документе, необходимо указать полный путь к WML DTD.
В полном примере ниже DTD-ссылка указывает на сайт W@PForum, координирующий сегодня WAP-разработки, и это DTD описывает все обязательные элементы стандарта WML, интерпретируемые всеми микро-броузерами. Впрочем, если кому-то не так важно, что это такое, и не суть важны сторонние расширения, которыми тоже можно пользоваться на предмет правильности разметки, то можно просто копировать эту типовую декларацию, особо не задумываясь.
Пример 2. WML-колода из трех карт
Taler's HP
This is the first card.
This is the second card.
В Web есть программы-имитаторы, с помощью которых wml-файлы можно «видеть» даже без реального устройства, а просто на базе имеющегося броузера. Например здесь
Примечание: размер загружаемых в WAP-устройства файлов ограничен – не более что-то около 1.4k (1397, 1492, .. байт – граница зависит от устройства).
Переменные
В WML есть глобальные переменные, в которых можно запоминать информацию на уровне текущего сеанса. Их присутствие в языке вызвано уменьшением обмена с сервером, и это отличается от традиций HTML.
Если присвоить в одной карте переменной $myname значение Andy, а в другой карте есть текст «Welcome $myname», то он будет выведен как «Welcome Andy». Простенько и со вкусом!
Основные типы тегов WML
Строительные блоки и функциональные средства WML можно условно разделить на четыре категории: форматирование, навигация, ввод данных и управление действиями/событиями. Далее показан ряд конструкций языка с примерами — подчеркну, что здесь могут оказаться не все атрибуты. За дополнительной информацией нужно обращаться к документации.
Форматирование
Поскольку на экран выводится по одной карте, то в элементе card предусмотрен атрибут id — внутренний идентификатор для переходов, а также видимый на экране заголовок title. Для форматирования текста, почти аналогично HTML, используются такие элементы, как:
- p – для параграфов, в можно указывать атрибуты align и mode. align принимает значения right, center или left, а mode задает, будет ли текст на экране с авто-переносом (wrap) или нет (nowrap).
- em и I – для выделения курсивом,
- strong – для «полужирного» начертания,
- u – для подчеркивания,
- big – для текста большего размера,
- small – для текста маленького размера,
- table – для таблиц, с привычными и ,
- br/ – для перехода на новую строку,
- img/ – для графики.
Навигация
Для навигации и установки гиперссылок предусмотрены теги anchor и a.
Семантика a повторяет HTML, а в элементе anchor используется либо подэлемент go с атрибутом href, задающим адрес ссылки, либо prev — вернуться к предыдущему экрану.
Вызвав страницу, мы получаем первую карточку. Чтобы перейти к следующей, необходимо как-то адресоваться к картам, для чего служит id тега card – уникальный идентификатор карты. Обратите внимание также на title – название карточки, имеющее смысл, в частности, для закладок.
Пример 3
В примере 3 ссылки устанавливаются при помощи ‘якоря’ anchor и традиционного тега a. У anchor два атрибута: href определяет объект, на который мы ссылаемся, и title – экранная надпись, идентифицирующая связь, которую браузер может опционально показывать.
Элементы ввода
Безусловно, всю мощь идея переменных приобретает при возможности что-то получить от пользователя. Для этого предусмотрен комплект тегов ввода, достаточно близких к своим HTML аналогам:
- input – для ввода данных пользователем,
- select/option — поле выбора из заранее заданного списка,
- postfield – аналог скрытых input в HTML-формах. На самом деле, это даже более мощная вещь, так как имея переменные, в postfield сейчас можно собирать и перегруппировывать информацию.
Атрибуты name тегов input и select хранятся, как переменные на всем пространстве колоды, и выступают параметрами в переходах по go и a. Посредством других атрибутов input типа type, format и maxlength, можно управлять форматным вводом. Пользуясь тегом fieldset, можно задавать некоторые стили оформления.
Пример 4. Использование input и select
CD:
Type:
CD:
Price:
Здесь атрибут name – имя переменной, куда заносится значение, type – тип формы (текст или число), value – значение по умолчанию (до ввода), a emptyok показывает, допустима ли в качестве значения пустая строка.
Управление действиями
«Действия» (tasks, do) используются для структур типа меню и для описания отдельных действий, например, для выбора новой карты/ссылки. Типовые «исполнительные» теги действий – это go, prev, refresh (перечитать текущую карту) или noop (ничего не делать). Действия на уровне конкретной карты описываются в тегах do, а на уровне всей колоды – в элементе template.
При помощи тега timer и атрибута ontimer тега card можно, например, на время ‘заморозить’ страницу. На практике часто применяется ontimer=»url», говорящий, что некое время карта должна отображаться, а затем должен загрузиться ресурс с адреса url. Время в value выражается в 0,1 сек.
Пример 5
Согласно WML-спецификации, у элементов do должны быть уникальные name, но если какое-либо из имен опущено, то подразумевается, что оно берется из type. В таких случаях различные элементы do легко могут начать пересекаться по именам, что может стать источником трудно диагностируемых ошибок.
Пример 6
В WML есть также возможность назначать клавиши навигации.
Тег действие позволяет приписать к одной из кнопок телефона (зависит от модели) пользовательское событие. В качестве действия обычно используется . Так, добавив к карте строку
Другой вариант переназначения стандартного меню телефона и способа передачи переменных в сервер-ориентированные скрипты:
Значение параметра type показывает, какая именно клавиша будет переопределена (в данном случае кнопка, соответствующая OK). Префикс $ перед именем переменной говорит о том, что будет использовано значение переменной, а не само слово «varsearch».
Графика
В настоящее время в WML поддерживается графический формат, называемый WBMP (Wireless BMP type 0) — монохромные (двуцветные) изображения. Формат WBMP type 0 имеет следующие характеристики :
Для вставки в wml картинки предназначен тег , где, как в HTML, для ссылки на источник картинки используется атрибут src.
Типичные параметры img:
Назначение атрибутов большей частью очевидно. Пояснения требует лишь localsrc, позволяя, как замену src, указать в качестве источника внутреннюю пиктограмму броузера. Атрибут align задает выравнивание картинки с опциями top, bottom и middle.
Home
Для конвертирования в формат WBMP лучше всего выбирать маленькие контрастные изображения.
Максимальный размер картинки в байтах зависит от устройства, но не должен превышать ограничений на размер карты (как упоминалось выше, около 1,4k). Соответственно, предельный размер в пикселах для, скажем, Nokia 7110 составляет около 96 x 65 (width, height), хотя физический экран (без скроллинга) еще меньше и ограничен 96 x 44 (4 строки по 11 пикселов), а к примеру, для Ericsson R320 – 101×52 (строка в 13 пикселов). Следует учитывать, что пикселы отдельных устройств не всегда квадратные.
Список ресурсов для работы с WBMP можно найти, например, здесь.
- Photoshop позволяет сохранять в виде WBMP рисунки или Paintshop Pro на платформе Windows (в команде меню Save As появится пункт «UnWired.wbmp»).
- Wapaint.dll (от Wapaint.com) – ActiveX Server module, предназначенный для работы в ASP-скриптах на сервере и удобный для генерации динамических картинок (типа статистических диаграмм и пр.).
- Присмотритесь также к редактору изображений из Nokia SDK.
WML для вызова динамимических картинок через ASP и Wapaint.dll
REM GRAPH.asp is the image to construct example
Если вы пользуетесь имитатором, необходимо тщательно протестировать страницы на реальном телефоне, потому что многие имитаторы плохо поддерживают графические файлы. Желательно проверить все в реальных условиях – это единственный способ застраховаться от неприятностей.
Советы по разработки WML приложений
Устройства WAP ограничены по возможностям из-за памяти, процессора, скорости передачи т. д., однако кое-что все-таки можно делать, зная об этих ограничениях. А технологии совершенствуются, и появляются новые улучшенные решения.
- Приложения необходимо проектировать, исходя из принципа ‘колоды карт’. Так как она загружается целиком, это уменьшает обмен данными с сервером. Любой запрос на другую колоду инициирует новое соединение с сервером, что потребует дополнительного времени – так устроена WAP-технология.
- Из-за малого размера экрана особое внимание нужно уделить читабельности текста. Размер «страницы» лучше ограничить 4- 5-ю экранами.
- Для удобной навигации и быстрого управления предпочтительнее теги select/option (выбор из списка), чем какие-то другие средства.
- Из-за маленькой памяти стоит избегать графики.
- Не следует пренебрегать alt для изображений (альтернативный текст для случаев, когда броузер не поддерживает картинок) – если среди Internet-броузеров отсутствие такой поддержки является анахронизмом, то в WAP это распространенное явление.
- WAP стандарты не фиксируют соглашений о навигации, типа back, forward и home, как это принято в Internet-броузерах. Проработка этих вопросов остается на усмотрение дизайнера.