Создание мобильных WAP сайтов

 WAP - средство получения доступа в ресурсам Интернет посредством мобильного телефона. Прим этом пользователь не прибегает к помощи каких бы то ни было дополнительных устройств, таких как компьютер или модем. WAP (Wireless Application Protocol) - это протокол, или технический стандарт, описывающий способ, с помощью которого информация из Интернет передается на небольшой дисплей мобильного телефона. В этом-то и заключается основное отличие WAP от привычных методов доступа во всемирную сеть, которые обеспечивают обмен информацией и просмотр Web - сайтов (протоколы HTTP и TCP/IP).

Теоретически, если бы экран мобильного телефона "умел" отображать столько же информации, как и дисплей компьютера, то и не было бы WAP в таком виде, в каком он предоставляется сейчас. Но дисплеи мобильных телефонов, даже имеющих большое разрешение, не могут "вместить" обычные Web - страницы. Именно это послужило причиной создания специальных способов, позволяющих пользователям мобильных телефонов использовать Интернет.

Чтобы пользоваться WAP, необходимо иметь мобильный телефон с WAP - браузером. WAP-браузер, это программа, записанная в память телефона и отвечающая за обмен информацией и отображение ее на дисплее (Internet Explorer - Web-браузер для обычных компьютеров). WAP-браузер имеют не все телефоны.

С появлением WAP-протокола абоненты сотовых сетей получили возможность пользоваться рядом сервисных услуг и на специальных WAP-сайтах: такими, как электронная почта, электронные магазины, бронирование билетов и мест в гостиницах, доступ к своему банковскому счету, информационные каналы (новости, прогноз погоды, курс валют, и т.д.) и даже электронный гид. Во всемирной сети с каждым днем появляется все больше и больше WAP-ресурсов. Для многих популярных Web-сайтов созданы их WAP-близнецы, которые предоставляют "мобильным" пользователям тот же набор услуг.

Для тех, кто хочет оценить тот или иной WAP-сайт не отходя от своего компьютера, существуют WAP-эмуляторы, которые позволяют воспроизвести работу с WAP на дисплее мобильного телефона. Для отображения информации на экране сотового телефона используется, как правило, четыре строки. Главный принцип представления информации на сотовом телефоне - разбиение данных на небольшие блоки размером в два-три экрана 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-дизайна - колода игральных карт - набор показываемых по отдельности карточек (экранов), хранящихся в памяти. То есть, если для обычного сайта единицей является Web-page, то единица WML - это deck, состоящая из одной или нескольких card, составляющих вместе WML-документ (wml-файл).

Как только wml-файл загружен в устройство с сервера, пользователь может листать экраны, переходить к следующему или возвращаться к предыдущему, не ожидая загрузки с сайта, что, конечно, выгодно по скорости.

WML колода из одной карты

<wml>
<card>
<p>Welcome</p>
</card>
</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">Bestportal<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>

Примечание: размер загружаемых в WAP-устройства файлов ограничен - не более что-то около 1.4k (1397, 1492, .. байт - граница зависит от устройства).

Основные типы тегов 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/ > для графики.

Элементы ввода

Безусловно, всю мощь идея переменных приобретает при возможности что-то получить от пользователя. Для этого предусмотрен комплект тегов ввода, достаточно близких к своим 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 поддерживается графический формат, называемый 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 пикселов). Следует учитывать, что пикселы отдельных устройств не всегда квадратные.

Если вы пользуетесь эмулятором, необходимо тщательно протестировать страницы на реальном телефоне, потому что многие имитаторы плохо поддерживают графические файлы. Желательно проверить все в реальных условиях - это единственный способ застраховаться от неприятностей.

Советы по разработки WML приложений

Устройства WAP ограничены по возможностям из-за памяти, процессора, скорости передачи т. д., однако кое-что все-таки можно делать, зная об этих ограничениях. А технологии совершенствуются, и появляются новые улучшенные решения.

- Приложения необходимо проектировать, исходя из принципа 'колоды карт'. Так как она загружается целиком, это уменьшает обмен данными с сервером. Любой запрос на другую колоду инициирует новое соединение с сервером, что потребует дополнительного времени - так устроена WAP-технология.

- Из-за малого размера экрана особое внимание нужно уделить читабельности текста. Размер "страницы" лучше ограничить 4- 5-ю экранами.

- Для удобной навигации и быстрого управления предпочтительнее теги select/option (выбор из списка), чем какие-то другие средства.

- Из-за маленькой памяти стоит избегать графики.

- Не следует пренебрегать alt для изображений (альтернативный текст для случаев, когда броузер не поддерживает картинок) - если среди Internet-броузеров отсутствие такой поддержки является анахронизмом, то в WAP это распространенное явление.

- WAP стандарты не фиксируют соглашений о навигации, типа back, forward и home, как это принято в Internet-броузерах. Проработка этих вопросов остается на усмотрение дизайнера.