Создаём WAP-сайты. Часть 2. Основы WML

Прежде чем мы начнём, хочу обратить ваше внимание на пару важных правил, касающихся создания WAP-сайтов. Первое правило – не использовать на сайтах картинок размером больше, чем 100х100 пикселей (а также – придерживаться формата WBMP, если хотите, чтобы ваш сайт могли просмотреть на как можно большем количестве аппаратов), и второе – стараться не делать WAP-странички больше 3-4 Кб, иначе некоторые сотовые телефоны не смогут с ними справиться.

Самое главное о WML

Если вы знакомы с HTML, это значит, что самое главное о WML вы уже знаете. Если нет – тогда внимательно посмотрите на эту строку:



То, что вы видите, называется тег (tag по-английски). В частности, это тег, который служит в WML для разделения текста на абзацы. Всё, что находится между p и /p, браузер воспримет как абзац и выведет на экран без p и прочих «посторонних» символов. Несложно понять, что первая последовательность символов – это открывающая часть тега, вторая – закрывающая. Обратите внимание на то, что в открывающей части тега есть надпись align = « alignment ». Align – это свойство абзаца, которое отвечает за его выравнивание. Например, оно может принимать значения Center (Выровнять по центру), Left (Выровнять по левому краю) и некоторые другие.

Тег абзаца может быть записан и так:



По умолчанию абзац выравнивается по левому краю – то есть, если не указывать в открывающей части тега никаких параметров, то текст, заключённый в нём, будет выровнен по левому краю.

Теперь давайте зададимся простым вопросом: «Как нужно использовать тег p для того, чтобы вывести слово «Привет!» по центру страницы?». Ответ очевиден: написать такой вот текст:



Одни теги могут включать другие, например, тег i используется для того, чтобы сделать шрифт курсивным и т.д.

Весь WML-документ состоит из таких вот тегов. Наверное, у вас уже возник вполне закономерный вопрос о том, как выглядит этот документ. Сейчас мы на него ответим.

Шаблон WML-документа

Ниже приведён шаблон WML-документа. Он почти пустой – если сделать WAP-страничку такого вида, то при загрузке её на телефон будет выведена лишь фраза «Привет!».



Теги, включенные в другие теги, даны с отступом.


Так выглядит страница-шаблон на экране сотового Motorola V535


А так – в браузере Opera

Основная часть документа заключается между тегами wml и /wml. Перед тегом wml находится пролог – он определяет версию XML, URL определения типа документа и кодировку документа. Пролог должен присутствовать в каждом WML-документе.

При конструировании WAP-страниц применяется принцип колоды карт. Документ содержит несколько небольших страничек, лишь одна из которых отображается на экране устройства, в то время как остальные хранятся в памяти устройства и ждут своего часа. Обратите внимание на теги card и /card - это теги одной из карт документа. Таких карт может быть несколько, они различаются по идентификаторам карты – параметром Card id тега card. По идентификатору можно обращаться к карте из других карт. То есть, например, если одна из карт отображается на экране, на ней можно разместить ссылки для перехода на другие карты. Среди параметров тега card можно отметить ещё один – Title. Его содержимое выводится в виде заголовка страницы.

Как вы уже, наверное, поняли, то, что расположено между тегами card и /card, и будет отображаться на экране. В нашем случае это слово «Привет!», выровненное по центру.

Для того, чтобы обратиться к другой карте WAP-документа, можно использовать следующую схему:



Этот текст добавит на WAP-страничку кнопку с надписью «Следующая страница», после щелчка по которой браузер отобразит карту с именем NameOfCard.

Следующий пример WAP-документа представляет собой документ с двумя картами, между которыми осуществляется навигация:




Первая карта документа в браузере Opera


Вторая карта документа в браузере Opera

Думаю, вы сможете разобрать этот пример самостоятельно. А если вы ещё не писали WAP-странички – сейчас как раз самое время это сделать и опробовать ваш инструментарий WAP-разработчика на практике. Если вы сохраняете страничку в Блокноте – при сохранении измените кодировку документа на UTF-8. Если вы используете Денвер в ваших экспериментах – обратите внимание на диск Z, который появится у вас в окне Мой компьютер. На этом диске пройдите по пути Z:\home\localhost\www\wml. Например, поместив в эту папку файл с именем 2m.wml, вы сможете открыть его в браузере Opera по адресу: http://localhost/wml/2m.wml.

Различные элементы WAP-страниц

Выше мы рассмотрели лишь шаблон WAP-странички, особенности навигации по WAP-сайту да добавление текстовых строк. Но обычно на сайтах есть ещё и другое содержимое – это ссылки для перехода на другие сайты и для скачивания файлов, картинки, таблицы.

Для того, чтобы добавить на сайт ссылку на другой ресурс, используйте такую конструкцию:



Между тегами a и /a располагается выводимый текст гиперссылки, а параметр href содержит саму ссылку. Причём, для того, чтобы открыть какой-нибудь файл, расположенный в той же директории, что и тот файл, который вы просматриваете в браузере, достаточно в качестве параметра href указать имя этого файла. Например, для того, чтобы открыть WAP-страничку, можно воспользоваться такой ссылкой:



Такая же конструкция используется для создания ссылок, которые позволят загружать на телефон музыкальные, графические, видеофайлы, файлы программ. Например, тег ссылки для загрузки MIDI-файла может иметь такой вид:



Для того, чтобы добавить на сайт картинку, которая будет отображаться в браузере, используйте такой тег:



Тег img не имеет закрывающей части. Параметр src содержит адрес картинки, которая будет выведена, а параметр alt – текст, который будет выведен, если отображение картинки по каким-либо причинам будет невозможным.

Для того, чтобы вывести таблицу, можно воспользоваться такой конструкцией:




WAP-страничка, насыщенная разнообразными элементами в браузере Opera

Этот код позволит вставить в документ таблицу, состоящую из 3-х столбцов и 2-х строк. Теги table и /table задают начало и конец таблицы. Свойство Border задаёт толщину границ таблицы. Внутри таблицы тегами tr и /tr выделяются отдельные строки, а внутри тегов используются теги td> и /td (ячейки таблицы), внутри которых содержатся элементы строк таблицы. Получается, что количество строк в таблице определяют теги tr, а количество столбцов - td.

Выводы

Описанная методика создания WAP-сайтов универсальна, так как позволяет создавать сайты, поддерживаемые подавляющим большинством современных и достаточно старых телефонов. Если же вы собираетесь разрабатывать сайты, которые рассчитаны на современные телефоны – вам имеет смысл изучить XHTML Mobile – он очень похож на обычный HTML, имеет практически такие же возможности.

Узнать подробности о WAP и других мобильных технологиях можно на следующих сайтах:

http://www.openmobilealliance.org/tech/affiliates/wap/wapindex.html
http://www.w3.org/TR/xhtml1/

Теперь у вас есть возможность поэкспериментировать с WML, а в следующий раз мы поговорим о PHP и MySQL.


© Заика Александр, Mobiset.ru
Дата публикации статьи - 17 июня 2008 г.

Твитнуть

Наша группа ВКонтакте - присоединяйся!

Оперативная и эксклюзивная информация - в 140 знаках! Подписывайтесь на наш канал:
Читать @Mobiset

comments powered by Disqus

Смотрите также:

Создаём WAP-сайты. Часть 4. Тонкости MySQL

Создаём WAP-сайты. Часть 3. PHP и MySQL

Создаём WAP-сайты. Часть 1. Предварительная подготовка: собираем инструменты