Andy Taler
Цель этой статьи - представить базовые возможности 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-файл загружен в устройство с сервера, пользователь может
листать экраны, переходить к следующему или возвращаться к предыдущему, не
ожидая загрузки с сайта, что, конечно, выгодно по скорости.
WML колода из одной карты <wml>
<card>
<p>Welcome</p>
</card>
</wml>
Нетрудно заметить, что структура языка во многом родственна HTML: теги
<wml>...</wml> начинают и завершают документ, а тело карт
заключается в <card>...</card>. Впрочем, пример выше еще не
вполне завершен. WML - это ветвь XML, а любой XML-документ сначала должен пройти
проверку на соответствие своему DTD (Document Type Definition). Следовательно, в
любом wml-файле, как документе, необходимо указать полный путь к WML DTD.
В полном примере ниже DTD-ссылка указывает на сайт http://www.wapforum.org/ координирующий сегодня
WAP-разработки, и это DTD описывает все обязательные элементы стандарта WML,
интерпретируемые всеми микро-броузерами. Впрочем, если кому-то не так важно, что
это такое, и не суть важны сторонние расширения, которыми тоже можно
пользоваться на предмет правильности разметки, то можно просто копировать эту
типовую декларацию, особо не задумываясь.
WML колода из трех карт <?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="home" title="Welcome">
<p align="center">Taler's HP<br/>
<img src="logo.wbmp" alt="home"/><br/>
<do type="accept" label="next"><go href="#card1"/></do></p>
</card>
<card id="card1" title="Page 1">
<p>This is the first card.</p>
<do type="accept" label="next"><go href="#card2"/></do>
<do type="prev" label="back"><prev/></do>
</card>
<card id="card2" title="Page 2">
<p>This is the second card.</p>
<do type="accept" label="home"><go href="#home"/></do>
</card>
</wml>
В Web есть программы-имитаторы, с помощью которых wml-файлы можно
"видеть" даже без реального устройства, а просто на базе имеющегося
броузера. К примеру, это посредник M3Gate
(Dubna, Numeric Algorithm Lab) для платформы PC-Windows (1,4mb).
Для того, чтобы все
выглядело "по настоящему", я реально поместил свой пример по адресу
{home.wml}. И сейчас, если обратиться к этому
адресу при установленном, скажем, M3Gate, вы увидите нечто, аналогичное рисунку
справа.
Примечание: размер загружаемых в WAP-устройства файлов ограничен - не более
что-то около 1.4k (1397, 1492, .. байт - граница зависит от устройства).
Переменные
В WML есть глобальные переменные, в которых можно запоминать информацию на
уровне текущего сеанса. Их присутствие в языке вызвано уменьшением обмена с
сервером, и это отличается от традиций HTML. Если присвоить в одной карте
переменной $myname значение Andy, а в другой карте есть текст "Welcome
$myname", то он будет выведен как "Welcome Andy". Простенько и со
вкусом!
Основные типы тегов WML
Строительные блоки и функциональные средства WML можно условно разделить на
четыре категории: форматирование, навигация, ввод данных и управление
действиями/событиями. Далее показан ряд конструкций языка с примерами -
подчеркну, что здесь могут оказаться не все атрибуты. За дополнительной
информацией нужно обращаться к документации.
Форматирование
Поскольку на экран выводится по одной карте, то в элементе card
предусмотрен атрибут id - внутренний идентификатор для переходов, а также
видимый на экране заголовок title. Для форматирования текста, почти
аналогично HTML, используются такие элементы, как:
- p для параграфов, В <p> можно указывать атрибуты align и mode.
align принимает значения right, center или left, а mode задает, будет ли текст
на экране с авто-переносом (wrap) или нет (nowrap).
- em и I - для выделения курсивом,
- strong - для "полужирного начертания.
- u - для подчеркивания,
- big - для текста большего размера
- small - для текста маленького размера.
- table для таблиц, с привычными <tr> и <td>
- <br/ > - для перехода на новую строку,
- <img/ > для графики.
Навигация
Для навигации и установки гиперссылок предусмотрены теги
Семантика a повторяет HTML, а в элементе anchor используется
либо подэлемент go с атрибутом href, задающим адрес ссылки, либо
prev - вернуться к предыдущему экрану.
Вызвав страницу, мы получаем первую карточку. Чтобы перейти к следующей,
необходимо как-то адресоваться к картам, для чего служит id тега <card> -
уникальный идентификатор карты. Обратите внимание также на "title" -
название карточки, имеющее смысл, в частности, для закладок. <anchor>List of Tales
<go href="tales.wml"/></anchor>
<anchor>Previous page<prev/></anchor>
<a href="story.wml">goto Story</a><br/>
В примере выше ссылки устанавливаются при помощи 'якоря' anchor и
традиционного тега <a>. У anchor два атрибута: "href" определяет
объект, на который мы ссылаемся, и "title" - экранная надпись,
идентифицирующая связь, которую броузер может опционально показывать.
Элементы ввода
Безусловно, всю мощь идея переменных приобретает при возможности что-то
получить от пользователя. Для этого предусмотрен комплект тегов ввода,
достаточно близких к своим HTML аналогам:
- Поле input предназначено для ввода данных пользователем
- select/option - поле выбора из заранее заданного списка.
- postfield - аналог скрытых input в HTML-формах. На самом деле, это
даже более мощная вещь, так как имея переменные, в postfields сейчас можно
собирать и перегруппировывать информацию.
Атрибуты name тегов <input> и <select> хранятся как
переменные на всем пространстве колоды и выступают параметрами в переходах по
go и a. Посредством других атрибутов <input,> типа type,
format и maxlength, можно управлять форматным вводом. Пользуясь тегом
fieldset, можно задавать некоторые стили оформления.
Пример input и select <wml>
<card id="search" title="search">
<p align="left">
CD: <input name="band" title="JazzBand:" size="18"
value="Rolling Stones" emptyok="false"/><br/>
Type: <select name="type" value="double" title="Type:">
<option value="single">Single CD</option>
<option value="double">Double CD</option>
</select>
</p>
</card>
<card id="add" title="Add CD">
CD: <input name="CD" size="18" type="text" /><br/>
Price: <input name="Price" size="8"/><br/>
</card>
</wml>
Здесь атрибут name - имя переменной, куда заносится значение, type - тип
формы (текст или число), value - значение по умолчанию (до ввода), a emptyok
показывает, допустима ли в качестве значения пустая строка.
Управление действиями
"Действия" (tasks, do) используются для структур типа меню и для
описания отдельных действий, например, для выбора новой карты/ссылки. Типовые
"исполнительные" теги действий - это go, prev, refresh
(перечитать текущую карту) или noop (ничего не делать). Действия на
уровне конкретной карты описываются в тегах do, а на уровне всей колоды -
в элементе template.
При помощи тега timer и атрибута
ontimer тега card можно, например, на время 'заморозить' страницу. На практике
часто применяется ontimer="url", говорящий, что некое время карта
должна отображаться, а затем должен загрузиться ресурс с адреса url. Время в
value выражается в 0,1 сек. <wml>
<card id="variable" title="Variable" ontimer="WMLScript.wml">
<timer value="5"/>
<p align="left"> Wait for 5 seconds ... </p>
</card>
<!-- Card and deck linking -->
<card id="input1" title="Input">
<do type="Next input properties">
<go href="#input2"/> </do>
<do type="Task properties">
<go href="Task.wml"/> </do>
...
</card>
</wml>
Согласно WML-спецификации, у элементов do должны быть уникальные name, но
если какое-либо из имен опущено, то подразумевается, что оно берется из type. В
таких случаях различные элементы do легко могут начать пересекаться по именам,
что может стать источником трудно диагностируемых ошибок. <do type="accept" name="yeah" label="Menu">
<go href="Menu.asp#menu"/>
</do>
<do type="accept" name="blah" label="Back">
<prev/>
</do>
В WML есть также возможность назначать клавиши навигации. Тег <onevent
type="button"><действие></onevent> позволяет приписать
к одной из кнопок телефона (зависит от модели) пользовательское событие. В
качестве действия обычно используется <go href="url"/>. Так,
добавив к карте строку <onevent type= "GO"><go
href="#card2"/></onevent>, мы назначим кнопке GO переход
непосредственно в меню. Вариант <do type="accept" label="Search">
<go href="table.asp?srch=$varsearch"/></do>
иллюстрирует другой вариант переназначения стандартного меню телефона и
способ передачи переменных в сервер-ориентированные скрипты. Значение параметра
type показывает, какая именно клавиша будет переопределена (в данном случае
кнопка, соответствующая OK). Префикс $ перед именем переменной говорит о том,
что будет использовано значение переменной, а не само слово
"varsearch".
Графика
В настоящее время в WML поддерживается графический формат, называемый WBMP
(Wireless BMP type 0) - монохромные (двуцветные) изображения. Формат WBMP type 0
имеет следующие характеристики :
- No compression
- One bit color (white=1, black=0)
- One bit color deep (monochrome)
Для вставки в wml картинки предназначен тег <img />, где, как в
HTML, для ссылки на источник картинки используется атрибут "src".
Типичные параметры img: <img alt= src="url" localsrc="icon"
align= height= width= vspace= hspace= />.
Назначение атрибутов большей частью очевидно. Пояснения требует лишь
localsrc, позволяя, как замену src, указать в качестве источника внутреннюю
пиктограмму броузера. Атрибут "align" задает выравнивание картинки с
опциями top, bottom и middle.
WBMP в качестве ссылки <anchor title="Home">
<img alt="Home" src="url" localsrc="house" />Home
<go href="default.wml"/>
</anchor><br/>
Для конвертирования в формат WBMP лучше всего выбирать маленькие контрастные
изображения.
Максимальный размер картинки в байтах зависит от
устройства, но не должен превышать ограничений на размер карты (как упоминалось
выше, около 1,4k). Соответственно, предельный размер в пикселах для, скажем,
Nokia 7110 составляет около 96 x 65 (width, height), хотя физический экран (без
скроллинга) еще меньше и ограничен 96 x 44 (4 строки по 11 пикселов), а к
примеру, для Ericsson R320 - 101x52 (строка в 13 пикселов). Следует учитывать,
что пикселы отдельных устройств не всегда квадратные.
Список ресурсов для работы с WBMP можно найти, например, здесь.
- Небольшой плагин UnWired plug-in фирмы RCP Distributed
Systems. Позволяет сохранять в виде WBMP рисунки из Photoshop 5.x или Paintshop
Pro на платформе Windows (в команде меню Save As появится пункт
"UnWired.wbmp").
Q: Why doesn't the UnWired filter appear in the
Filters menu? A: The plug-in is NOT a filter. It is a File Format plug-in.
You will then be able to save any two colour bitmap image as a UnWired wbmp
file.
- Wapaint.dll (от Wapaint.com) - ActiveX Server module,
предназначенный для работы в ASP-скриптах на сервере и удобный для генерации
динамических картинок (типа статистических диаграмм и пр.).
- Присмотритесь также к редактору изображений из Nokia
SDK.
WML для вызова динам. картинок через ASP и Wapaint.dll <wml>
<card id="home" title="example">
REM GRAPH.asp is the image to construct
<p align="center">example<br/>
<img src="GRAPH.asp" alt="problem"/><br/></p>
<do type="prev" label="prev"> <prev/> </do>
</card>
</wml>
Если вы пользуетесь имитатором, необходимо тщательно протестировать страницы
на реальном телефоне, потому что многие имитаторы плохо поддерживают графические
файлы. Желательно проверить все в реальных условиях - это единственный способ
застраховаться от неприятностей.
Советы по разработки WML приложений
Устройства WAP ограничены по возможностям из-за памяти, процессора, скорости
передачи т. д., однако кое-что все-таки можно делать, зная об этих ограничениях.
А технологии совершенствуются, и появляются новые улучшенные решения.
- Приложения необходимо проектировать, исходя из принципа 'колоды карт'. Так
как она загружается целиком, это уменьшает обмен данными с сервером. Любой
запрос на другую колоду инициирует новое соединение с сервером, что потребует
дополнительного времени - так устроена WAP-технология.
- Из-за малого размера экрана особое внимание нужно уделить читабельности
текста. Размер "страницы" лучше ограничить 4- 5-ю экранами.
- Для удобной навигации и быстрого управления предпочтительнее теги
select/option (выбор из списка), чем какие-то другие средства.
- Из-за маленькой памяти стоит избегать графики.
- Не следует пренебрегать alt для изображений (альтернативный текст для
случаев, когда броузер не поддерживает картинок) - если среди Internet-броузеров
отсутствие такой поддержки является анахронизмом, то в WAP это распространенное
явление.
- WAP стандарты не фиксируют соглашений о навигации, типа back, forward и
home, как это принято в Internet-броузерах. Проработка этих вопросов остается на
усмотрение дизайнера.
Вместо заключения: в настоящее время в поисковой системе Pinpoint.com ,
предназначенной для индексирования сайтов с использованием WML, уже более 1,5
миллионов веб-страниц.
Языки программирования: разное
|