CFA LogoCFA Logo Computer
Новости Статьи Магазин Драйвера Контакты
Новости
RSS канал новостей
В конце марта компания ASRock анонсировала фирменную линейку графических ускорителей Phantom Gaming. ...
Компания Huawei продолжает заниматься расширением фирменной линейки смартфонов Y Series. Очередное ...
Компания Antec в своем очередном пресс-релизе анонсировала поставки фирменной серии блоков питания ...
Компания Thermalright отчиталась о готовности нового высокопроизводительного процессорного кулера ...
Компания Biostar сообщает в официальном пресс-релизе о готовности флагманской материнской платы ...
Самое интересное
Программаторы 25 SPI FLASH Адаптеры Optibay HDD Caddy Драйвера nVidia GeForce Драйвера AMD Radeon HD Игры на DVD Сравнение видеокарт Сравнение процессоров

АРХИВ СТАТЕЙ ЖУРНАЛА «МОЙ КОМПЬЮТЕР» ЗА 2003 ГОД

сW@Pгань страничку

Дмитрий СВИРЕПЧУК dima_sdi@i.com.ua

Мобильник давно перестал быть просто «мобильным телефоном». Сейчас, кроме всего прочего, в довесок к собственно телефону прилагается еще и такая полезная вещь как WAP. Все знают, что это такое, но известно ли вам, дорогие читатели, как устроен этот самый WAP и что такое WML, с помощью которого производится создание мобильных интернет-страничек?

Для тех, кто не сведущ в аббревиатурах, скажу, что WML — Wireless Markup Language, язык разметки, на котором пишутся (правильнее сказать, «размечаются») странички для WAP (Wireless Application Protocol). Сегодня мы разберем основы этого чудо-языка. Те, кому неинтересно, могут в любой момент перевернуть страницу. Для тех, кто еще не решил, нужен ему WML или нет, могу сказать следующее: если в трамвае или метро обратиться к девушке со словами: «Девушка, а я WML знаю. Хотите научу?» — то пара-тройка приятных «уроков» вам обеспечена.

Есть еще несколько менее полезных способов применения WML. Например, для того чтобы создать WAP-портал своей фирмы, на котором можно публиковать самую свежую информацию о текущих разработках, услугах, товарах, ценах или выводить котировки акций. Затраты на разработку и поддержку такого сайта мизерны по сравнению с ожидаемой прибылью. Также можно сделать виртуальную доску объявлений только для персонала, который не всегда находится на рабочем месте. Если случилось так, что у тебя нет своей фирмы (ты всего лишь автор лучшего в мире компьютерного издания), то можешь поместить на сайте небольшой скрипт, который позволял бы проверять e-mail с твоего мобильного телефона.

Перед тем как начать «Курс WML для молодого W@Pщика», хочу обратить внимание на следующее:

1) Созданные страницы будут просматриваться при помощи мобильного телефона, у которого клавиш в пять раз меньше, чем у рояля.

2) Размер страницы не должен превышать 1.4 — 2.5 Кб. Возможные последствия превышения лимита:

а) страница усечется в соответствии с указанным объемом (зависит от модели телефона);

б) страница не загрузится (зависит от модели телефона);

в) пользователь уйдет сам, не дождавшись загрузки (зависит от модели пользователя);

3) Не тестируйте созданные страницы при помощи телефона. Ведь если в страницу вкралась хотя бы одна «очепятка», то страница не захочет отображаться вовсе (а Рис. 1юниты будут улетать в «трубу»). В этом плане WML строг.

4) Вывод из § 3: запасись такой программой, которая показывает wml-файлы прямо на компьютере. Такие программы есть. Мне больше всего нравится M3Gate (http://www.m3gate.com/). Ориентировочный размер 1.4 — 2.0 Мб. Программа стилизована под телефон, кроме того, в комплекте есть скин, который превращает телефон в Palm. См. на Рис. 1.

Это основные положения, о которых нужно помнить во время разработки WAP-страничек.

Теперь начнем собственно разработку первой странички на WML. В основе WML лежит принцип колод (deck) и карт (card). Он состоит в том, что в одном wml-файле (колоде) может храниться несколько карт. Каждая карта представляет собой один экран wap-устройства (дальше я буду писать «телефона», так как это основной тип wap-устройств, используемых у нас). То есть, если единица измерения в WWW — web-страница, то в WAP — это одна карта. На экране никогда не могут быть отображены две карты одновременно. У каждой карты есть свой заголовок и прочие атрибуты.

В чем состоит прелесть использования принципа карт? В том, что мобилка получает один файл, в котором может храниться несколько блоков информации, которые вызывать без подключения к сети, даже если была открыта только одна карта.

Хватит теории, перейдем к практике. Вот пример простейшего WML-документа:

Казалось бы, все правильно, но в том же M3Gate страница не откроется. Все дело в том, что каждая WML-страница должна проходить проверку на соответствие своему DTD (Document Type Definition). Полный код нашей страницы с декларацией проверки DTD выглядит так:

Теперь сохраним этот текст в текстовом файле с расширение .wml и откроем его в M3Gate (Рис. 2). Получили надпись !!!First WML PAGE!!!

Несложно заметить, что синтаксис очень похож на HTML. Все элементы колоды вложены в элемент <wml>. В HTML аналогом является тэг <html>. Но есть еще одна особенность. В WML весь текст должен лежать в пределах параграфа, то есть между тэгами <p> и </p>, в противном случае страница не откроется. Также, если в HTML можно опускать многие закрывающие тэги (</tr>, </td>, </p>) то в WML так поступать нельзя.

Теперь рассмотрим более интересный пример WML-станицы, состоящей из трех карт, между которыми будет осуществляться переход.

Я объясню много часто употребляемых конструкций, показанных в этом примере. Результат же можно увидеть на Рис. 3.

Рис. 2   Рис. 3

Для начала разберемся с тэгом <card>. Как видно, у него везде два параметра: id и title. Первый из них применяется для задания карте уникального идентификатора. Он нужен в основном для того, чтобы правильно ссылаться на данную карту из других карт или даже файлов. Параметр title тоже весьма очевиден. Текст, присвоенный ему, отображается в верхней части браузера как заголовок. Иногда возникает вопрос: какая карта открывается на экране первой? Если не задано дополнительных параметров, то отображается первая карта, описанная в колоде.

В первой карте мы видим, что выводится текст приветствия, а за ним меню. Остановлюсь на нем подробнее. Для задания гиперсвязей в WML есть два тэга: привычный <a> и <anchor>. На <a> нет смысла останавливаться, так как его использование абсолютно идентично HTML.

Тэг <anchor> работает несколько иначе. В него должен быть вложен элемент: либо <go href=”url”>, либо <prev/> — для возвращения на предыдущую страницу:

Для того чтобы обратиться к какой-то карте, в параметре href указываем так: href=”#id_карты”. Если же нужно открыть страницу, но не с первой карты, пишем так: href=”файл.wml#id_карты”. Все просто. Итак, мы создали меню из трех гиперссылок. При этом одна из них указывает на другой файл.

Честно говоря, <anchor> применяется не только для переходов на другие карты и страницы. Если в <anchor> задать параметр title, то его значение может быть интерпретировано телефоном как «всплывающая подсказка».

Семантика <a> абсолютна аналогична HTML.

Во второй карте есть следующая конструкция:

Что она делает? Создает интерактивную кнопку «Назад» в области управления микробраузером. Такая кнопка часто бывает привязана к клавише телефона. Аналогичная ссылка есть и в третей карте.

Тэг <do> применяется и для других целей, но о них умолчу, так как я планировал довести до сведения читателя лишь азы WML.

Еще хочу обратить внимание на то, что все непарные тэги (те, которые не требуют закрывающего тэга) должны заканчиваться заключающим слэшэм: <br/>, <go href=”#card2”/>, <prev/> и т.д.

Теперь разберемся с форматированием текста. В этом смысле WML практически аналогичен HTML, только намного беднее. Для того чтобы начать новый абзац, используется тэг <p>. В WML, в отличие от HTML, у каждого тэга <p> обязательно должен быть закрывающий тэг </p>. И, как уже упоминалось, весь текст, предназначенный для вывода, должен быть в пределах пары <p></p>.

Для выделения курсивом используется парный тэг <I>.

Для полужирного текста —<b>.

Для подчеркивания —Рис. 4<u>.

Для увеличения и уменьшения шрифта, соответственно, используются тэги <big> и <small>.

В WML есть такой тэг как <table> (c привычными <tr> и <td>). Стандарт стандартом, но не все wap-браузеры поддерживают таблицы, потому их лучше не использовать.

Самый насущный вопрос в wap-технологии —графика. В те времена, когда web был медленным, все ратовали за минимальное количество графики. Сейчас же, когда web стал достаточно быстрым, отсутствие графики на сайте неприятно удивляет. С WAP другая история. Скорость передачи крайне мала (9600 bps), поэтому графика на wap-сайтах сейчас является скорее исключением, чем нормой.

Стандартом графики для WAP/WML является формат WBMP (нетрудно догадаться — Wireless BMP).

Естественно, все изображения создаются на компьютере. Мне неизвестен ни один графический редактор, который «от рождения» мог бы сохранять картинки в таком формате. Выход из положения есть.

Существует специальный плагин для Photoshop’а и Paintshop’а (один плагин подходит для обеих программ). Называется он UnWired plug-in, взять его можно здесь: http://www.rcp.co.uk/downloads/WBMPplugin.zip(15 Кб). После копирования файла в соответствующую папку, в окнах Открыть/Сохранить появляется новый формат: UnWired (.wbm, .wbmp).

На файлы накладываются ограничения. Палитра рисунка ограничивается двумя цветами: черным и белым. Размер файла рисунка не должен превышать 1.4 Кб. Также накладываются ограничения на размер изображения. Честно скажу, мне неизвестно максимальное значение для всех существующих моделей телефонов. Но знаю, что для Nokia это примерно 9665 (это больше размера самого мониторчика); для Ericsson — 10252; для Motorola — 10096. Но это не значит, что все изображения должны быть такими гигантскими (гм… а на компьютере такую картинку толком и не рассмотришь). Хотя, с другой стороны, у мобилок пиксели крупней. Также следует обращать внимание на то, что у многих моделей устройств пиксели не квадратные, а прямоугольные (как правило, высота больше ширины).

Осталось лишь сказать, при помощи какого тэга эта картинка вставляется в страницу. Для этого, как и в HTML используется тэг <img>:

Ни в коем случае нельзя забывать о закрывающем слэше. Для <img> также можно использовать атрибут alt. Есть еще один атрибут, который может заменять src —localsrc. Он помещает на страницу картинку, взятую из прошивки телефона. То есть нельзя точно знать, какого результата ожидать. Значение localsrc — это порядковый номер рисунка в памяти. Например:

Естественно, графические изображения можно использовать как гиперссылки. Для этого достаточно поместить в <a> или <anchor> элемент <img> как вложенный. Не советую делать единую ссылку из изображения и текста. Иногда верстка происходит абсолютно неправильно. Ниже я приведу некоторые советы по использовании графики в WAP.

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

Всегда нужно задавать параметр alt, так как достаточно много браузеров не поддерживают графику вовсе.

Udachnogo W@M W@Pa!

Рекомендуем ещё прочитать:






Данную страницу никто не комментировал. Вы можете стать первым.

Ваше имя:
Ваша почта:

RSS
Комментарий:
Введите символы или вычислите пример: *
captcha
Обновить





Хостинг на серверах в Украине, США и Германии. © sector.biz.ua 2006-2015 design by Vadim Popov