Как создать WAP сайт

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

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

Вам приходилось когда-нибудь заходить в Интернет через сотовый телефон?

Если да, то Вам наверное приходилось видеть так называемые WAP сайты (англ. Wireless Application Protocol - протокол беспроводного доступа). Другими словами - сайты для сотовых телефонов.

Это очень простые HTML-странички, содержащие немного текста, ссылок и картинок.

Хотите заиметь такую же?

Оказывается, это совсем не сложно, если:

1. У Вас уже есть свой веб-сайт;

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

Если Вы уже счастливый обладатель такого сайта, то Вам не составит труда добавить на него WAP-раздел.

Самый простой способ сделать WAP-раздел, это установить готовый магазин. Или даже несколько магазинов. Например, это может быть магазин сотовых и аксессуаров от diamondelectric.ru или же магазин мобильного контента (мелодий, картинок и игрушек) от b2m.ru.

Но в любом случае, Вам понадобится главная WAP-страничка, ссылки с которой будут вести на разные разделы Ваших магазинов. К ней же можно будет привязать подходящий поддомен (дочерний домен) Вашего сайта. Например, у моего сайта bestfree.ru поддомен называется wap.bestfree.ru

Поддомен нужен, чтобы посетителям было легче набирать адрес Вашего сайта в своих сотовых телефонах. Согласитесь, гораздо проще набрать и запомнить адрес http://wap.ваш_сайт.ru, чем http://www.ваш_сайт.ru/index.wml. Хотя по сути, они ведут на одну и ту же страницу index.wml.

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

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

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

Вот как выглядит эта страничка на моём сайте:

<?xml version='1.0' encoding='UTF-8'?><!DOCTYPE wml PUBLIC '-//WAPFORUM//DTD WML 1.1//EN' 'http://www.wapforum.org/DTD/wml_1.1.xml'>
<wml>
<card id='main' title='wap.BestFREE.ru'>


РАЗВЛЕЧЕНИЯ: 
<a href='http://wap.dating.playfon.ru/?t=2&d=79814293'>WAP-знакомства</a> 
 

ПАРТНЁРСТВО: 
<a href='http://wap.b2m.ru/register.php?t=2&d=79814293'>Заpаботай</a> 
 

ПРИОБРЕСТИ: 
<a href='http://wapt5v.playfon.ru/?t=2&d=79814293'>Реалтоны</a> 
<a href='http://wapm5v.playfon.ru/?t=2&d=79814293'>Полифония</a> 
<a href='http://wapft5v.playfon.ru/?t=2&d=79814293'>Полные MP3</a> 
<a href='http://wap.playfon.ru/p/prog.wml?t=2&d=79814293'>Пpогpаммы</a> 
 

ЗАКАЗАТЬ: 
<a href='http://wappart.diamondelectric.ru/wap_2.1/types_list.php?deu=4387&categ=23'>Телефоны</a> 
<a href='http://wappart.diamondelectric.ru/wap_2.1/types_list.php?deu=4387&categ=16'>Коммуникатоpы</a> 
<a href='http://wap.BestFREE.ru/zarjadka.php'>Заpядки</a> 
<a href='http://wappart.diamondelectric.ru/wap_2.1/types_list.php?deu=4387&categ=19'>Чехлы для тел/КПК</a> 
<a href='http://wappart.diamondelectric.ru/wap_2.1/types_list.php?deu=4387&categ=32'>Коpпуса для тел/КПК</a> 
<a href='http://wappart.diamondelectric.ru/wap_2.1/types_list.php?deu=4387&categ=33'>Клавиатуpы для тел/КПК</a> 

</card></wml>

Как создать RSS-канал новостей на Вашем сайте. Руслан Богданов

Согласитесь, очень напоминает обычную HTML-страницу.

Всё, что Вам нужно сделать, это скопировать этот код в обычный текстовый файл и заменить мои ссылки и текст на Ваши. Затем просто преобразовать полученный файл в кодировку UTF-8 и загрузить на хостинг.

Давайте рассмотрим всё по порядку:

1. Скопируйте весь вышеприведённый код в простой текстовый редактор (например, в блокнот).

2. Всё, что выше вот этой строчки:

<card id='main' title='wap.BestFREE.ru'>

трогать не нужно. Это информация о протоколе.

В самой строчке замените wap.BestFREE.ru на текст, который Вы бы хотели видеть в заголовке WAP-странички. На рисунке справа этот заголовок показан инвертированным цветом - белый текст на чёрном фоне.

Набор ссылок на рисунке немного не соответствует ссылкам в коде. Не обращайте внимания, я просто убрал самые длинные ссылки, чтобы код был понятнее.

3. В строчке

как Вы верно уже догадались, указано выравнивание текста, ограниченного тегами  и .

Если выравнивание по центру Вам нравится - можете не менять.

Если хотите прижать к левому краю, замените 'center' на 'left', если же к правому - на 'right'.

Тег   создаёт перенос строки, как и аналогичный тег   в языке HTML.

4. Осталось только поменять тексты и адреса ссылок в строчках вроде этой:

<a href='http://wapt5v.playfon.ru/?t=2&d=79814293'>Реалтоны</a>

Но здесь есть два нюанса:

а) Некоторые скрипты магазинов не заменяют автоматически значок & (амперсанд) на & , как того требует синтаксис языка WML. В результате браузер выдаёт ошибку.

В таком случае нужно вручную заменить & на & в ошибочных ссылках.

В качестве примера скажу, что в ссылках на разделы магазина diamondelectric.ru приходится заменять амперсанд, а в ссылках на b2m.ru - они работают и так.

б) При переводе в кодировку UTF-8, загадочным образом кракозябрится русская буква "р" (эр) маленькая. Пока я не придумал ничего лучше, чем заменять её на английскую "p" (пи) маленькую.

5. В этом примере не показано, как вставлять изображения на WAP-страницу. Поскольку пока ещё не все телефоны понимают форматы GIF и JPEG, то чтобы добавить изображение, Вам понадобиться специальный конвертер для подготовки картинок в формате WBMP. Ссылка на один из таких конвертеров есть в конце этой статьи.

Если Вам всё же хочется добавить хоть одну картинку, вставьте туда, где хотите её видеть, вот этот тег:

<img src="picture.wbmp" alt="описание картинки" />

Затем измените адрес src="picture.wbmp" и описание картинки.

6. Теперь сохраните этот файл с именем, которое будет отличаться от index. Например я сохранил под именем index-test. Это нужно для того, чтобы у Вас был исходный файл в кодировке Windows-1251, на случай, если Вы в дальнейшем решите внести изменения в него. Уверен, что он не раз Вам пригодится.

7. Итак, исходный файл у нас готов, нужно перевести его в кодировку UTF-8. Где-то в Рунете есть специальные программы-переводчики, но мне пока не удалось заставить работать те из них, которые смог найти.

Пришлось придумать обходной путь. Есть хороший бесплатный текстовый редактор TigerPad. Его можно скачать по ссылке:

http://www.bestfree.ru/soft/office/notepad.php

Чтобы преобразовать текст в кодировку UTF-8, я копирую его в редактор TigerPad и выбираю в командном меню Кодировки / Другие / Перевести из Win в UTF-8 кодировку.

Если все русские буквы кракозябрятся, значит всё в порядке. Результат сохраняем в файл index.wml.

8. Теперь загрузите эту страницу на сервер, в папку с Вашим сайтом. Наберите в адресной строке браузера путь к файлу (например: http://www.ваш_сайт.ru/index.wml).

К сожалению, браузер Internet Explorer версий 6 и ниже не умеет отображать WAP-страницы. Поэтому Вам понадобиться браузер Opera или Mozilla Firefox. Или же можно попробовать набрать путь к файлу index.wml в сотовом телефоне, поддерживающем протокол WAP.

Если страница открывается - всё в порядке, можно устанавливать магазины и создавать поддомен.

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

В таком случае внимательно сверьте код Вашей странички с моим кодом. Возможно, проблему создаёт амперсанд (об этом рассказано в п.4.а этой статьи), или же Вы удалили какой-то необходимый символ, например закрывающий слеш "/" в тегах   или <img src="picture.wbmp" alt="picture" />.

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

Теперь у Вас точно всё должно получиться.

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

И напоследок - обещанная ссылка на конвертер изображений DotWAP. Вот она:

http://www.bestfree.ru/soft/inet/wapeditor.php

На самом деле, это не просто конвертер, а настоящий редактор, позволяющий создавать WAP-странички, даже не заглядывая в код. Вы можете воспользоваться им и вообще не использовать код, который я привёл в этой статье...

Но мне всё-таки хотелось бы, чтобы прочитав эту статью, Вы могли "ручками" создать свой WAP-сайт. Ведь это действительно совсем не сложно, правда? :)

Руслан Богданов 31.10.2008

Сайт автора: http://www.BestFREE.ru

P.S. Эта статья предназначена для свободного распространения в Интернете. Приветствуется её копирование с сохранением авторства Руслана Богданова и всех P.S. - P.P.S.

P.P.S. Если Вас заинтересовала эта статья, возможно, Вам будет интересно узнать, как легко установить RSS-канал новостей на Ваш сайт. Вот ссылка на статью:

http://www.bestfree.ru/article/webdesign/rss.php

Как Сделать Флэш сайт, Флэш баннер самостоятельно, используя Флэш технологию.