Строим свой wap-сайт

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

С чего же начинать?

Для начала нужно определиться, что вы хотите от своего будущего сайта: будет ли это целый портал или просто домашняя страничка. Исходя из этого, следует выбрать место, где будет физически размещаться сайт. Это место называется хостинг. Он может быть как платным, так и бесплатным, последний лучше использовать для проб и простеньких домашних страничек.

Наиболее часто для создания wap-сайтов используют хостинги nm.ru () и fatal.ru (). Разумеется, у них есть свои минусы, например, адрес странички будет иметь вид “your name.fatal.ru” или “your name.nm.ru”. И еще один существенный минус — на сайт, находящийся на nm.ru, будет невозможен вход с аппаратов, подключенных к сети “БиЛайн”. Но как я уже говорила, для проб и он подойдет. Для предварительного просмотра на компьютере сгодятся элементарные эмуляторы wap типа WinWap () или привычный многим пользователям браузер Opera (). К слову, обычный Internet Explorer не умеет отображать wap-страницы. Основное же, что потребуется, — это редакторWML-страниц, из которых и состоит сайт.

Все, наверное, обратили внимание, что структура таких сайтов отличается от структуры своих старших братьев структурой и отсутствием “наворотов”. “А почему бы и не навернуть?” — спросите вы. Да все потому, что размер одной “ваповской” странички ограничен до 4 Кбайт, да и расширение экрана у большинства телефонов не слишком велико, одним словом — “маленький Интернет”. Одно радует, что постепенно уходят в прошлое телефоны с монохромными дисплеями, и теперь мы можем строить цветные сайты.

Инструменты

В качестве редактора может выступать как и обыкновенный блокнот, так и специальные программы. Я предлагаю использовать “apoo editor” (wap.commandus.com) — это простой редактор, позволяющий вводить русский текст в соответствующей кодировке (UTF-8). Дело в том, что если просто писать код в блокноте, то при просмотре созданной странички через телефон вы вряд ли обнаружите на экране русские буквы. Только браузер WinWap с ней не справляется, и его лучше использовать только для отладки сложных страниц со скриптами. Итак — будут использоваться две основные программы: apoo editor для написания и редактирования кода и Opera для просмотра результатов.

Язык разметки WML

Теперь приступим к самому главному — синтаксису WML. Открываем редактор и видим следующий код:

Это заголовок страницы, который дает браузеру понять, что перед ним — WML-страница в кодировке UTF-8. Заголовок этот должен обязательно присутствовать, но в редакторе он вставляется автоматически. На экране телефона он, конечно же, не отображается.

и — это основные тэги, между которыми и будет заключаться страничка.

Она может состоять из нескольких карт, между которыми возможен моментальный переход. Если страница состоит из 2-х карт и более, то при загрузке страницы (а грузится она вся целиком) отображается только одна. Код с двумя картами выглядит следующим образом:

Редактор WML-страниц “apoo editor” подойдет начинающим wap-мастерам.

Вход

Добро пожаловать!

Это полностью готовая страничка, ей можно дать название test.wml и проверить работоспособность в браузере. Как она выглядит в телефоне, можно увидеть на Рис.1:

Рис.1: Файл test.wml.

Код отображаемой карты выглядит следующим образом:

Вход

Как видно на Рис.1, на экране отобразилась только одна карта. При нажатии на Вход мы попадаем на вторую карту (см. Рис.2).

Рис.2: Вторая карта.

Ее код:

Добро пожаловать!

Теперь рассмотрим теги, находящиеся внутри нее.

id — идентификатор карты. Если карта одна, то он необязателен.

title — это название карты — заголовок страницы.

и

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

— идет выравнивание по центру, при

— по правому краю.


— полезный тэг, действует аналогично клавише Enter на клавиатуре: это принудительный перенос текста на следующую строку.

Пример основной страницы wap-сайта, созданного таким методом. (Вид из браузера Opera).

Теперь давайте рассмотрим вывод рисунков и ссылок на экран.

рисунок

Здесь “picture.gif” — ссылка на графический файл, в случае, если находится в той же папке, что и wml-страница, иначе — нужно прямо указывать путь. Например:

рисунок

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

Те же правила применяются и к ссылкам:

Вход — ссылка на файл, лежащий в одной директории с этим.

Анкета — ссылка на файл, лежащий в поддиректории.

Вход — ссылка на файл, лежащий в корневой директории.

Сайт друзей — ссылка на другой ресурс.

Карта — ссылка на карту “karta”.

Также могут применяться и графические ссылки:

Вход

Эмулятор, который не говорит по-русски.

Тому, кто имел дело с синтаксисом HTML, должно быть все понятно. Есть только одно небольшое отличие: все тэги нужно писать строчными буквами.

Интересным способом сделать красивый WAP-сайт будет использование софт-кнопок. Их не видно на экране мобильника, а их вызов происходит нажатием клавиши “Меню”.

Пример кода софт-кнопки:

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

Проверили? Загрузили? Замечательно! Теперь можно и с телефона проверить. Для этого вводим адрес страницы в браузере. Если все сделано правильно, то страница отобразится на экране.

Термины

Тэг — набор символов, управляющий отображением текста и картинок на экране, но при этом не отображаемых при выводе страницы.

Карта — код странички, заключенный между тегами и , своего рода страничка в страничке.






Рекомендуемый контент




Copyright © 2010-2019 housea.ru. Контакты: info@housea.ru При использовании материалов веб-сайта Домашнее Радио, гиперссылка на источник обязательна.