| В этой статье мне бы хотелось поделиться своим опытом создания wap-страниц и вообще wap-сайта.
Для
того, чтобы сайт можно было просматривать в мобильном браузере не
всегда подойдет формат *.html, ведь совсем малая часть мобильные
телефонов его отображает. Но все равно знаний языка html вам хватит.
Поддерживаемый формат мобильными браузерами – это *.wml . Я его
опробовал и могу сказать, что он даже легче чем сам html. Может это
потому что здесь никакие скрипты и специальные возможности не
поддерживаются.
Я постараюсь объяснить вам все на простом примере создания wap-страницы в формате *.wml . Итак, начнем:
Во-первых,
надо сказать что стандартный браузер internet explorer формат wml не
поддерживает и не может отобразить wap-страницу, поэтому для того,
чтобы работать с такими страницами рекомендую приобрести, например,
браузер opera. Здесь можно будет предпросматривать страницу. Также
необходим текстовый html-редактор страниц – именно текстовый, потому
что не получится создать страницу на визуальном редакторе. Сам я
использую для создания wap-страниц программу microsoft office
frontpage. Тут можно и кодом писать, и визуальным ректором попробовать
(в случае с прописанием начального кода вручную визуальный редактор
подойдет). Вы можете найти программу подходящую именно вам.
В
отличии от компьютеров мобильные телефоны не воспринимают всех
кодировок шрифтов, поэтому жестко ограничены эти элементы страниц.
Необходимо в каждой странице для того, чтобы все правильно
отображалось, исходный код начинать с:
xml version="1.0" encoding="utf-8"?>
<!doctype wml public "-//wapforum//dtd wml 1.2//en" "http://www.wapforum.org/dtd/wml12.dtd">
Кодировку с этого сайта использует почти
90 % русскоязычных wap-сайтов, поэтому переживать не о чем. Я не считаю
необходимым объяснять значение всего этого, потому что знающий html
человек итак все поймет, а не очень хорошо знающему это не надо.
Как
и в html основной код страницы обозначен тегом <html> и
</html>, ак и здесь обозначаем основной код страницы <wml>
и </wml>.
<wml> </wml>
Конечно открытие и закрытие этого тега
соответственно должно быть в начале и в конце кода страницы (вначале то
есть после кодов для кодировок).
В теге head, который здесь также присутствует, пишем:
<head><meta http-equiv="cache-control" content="no-cache" forua="true"/></head>
Чем-то вроде тега body в *.wml является
тег card. Именно в этом теге пишется содержание страницы. Итак, вот как
выглядит код для card:
<card id="index" title="Первая wap-страница">
</card>
Здесь в поле «id» пишется название
страницы, а в «index» пишется ее заголовок. Между первой и второй
строчкой кода выше конечно пишется код содержания страницы.
Итак, давайте попробуем написать чего-нибудь, а потом поставить еще ссылку и картинку.
Пишем:
<p align="center">
Это чтобы все содержимое было по центру,
по-другому нельзя, потому что не так отобразится на экране мобильных
телефонов. После, в конце закроем тег «p».
Для того, чтобы
написать простой текст, просто пишем его на отдельной строчке и в конце
ставим «<br/>». Причем этот тег нигде не начинается, он просто
говорит о конце строчки и пишется во всех строчках в отображении.
Например, напишем:
wap-страница<br/>
Написав это, получим сточку со словами «wap-страница» посередине.
Теперь поставим ссылку, самую простую ссылку. Это можно сделать кодом:
<a href="http://wap.site.ru/index.wml">Главная </a><br/>
Здесь думаю все понятно. Заметьте и в
этой строчке поставлен тег «<br/>, потому что его ставят в каждой
строчке, только не строчке кода, а строчке самой страницы.
Думаю, с текстом и ссылками разобрались, теперь скажу о картинках. Поставить картинку можно кодом:
<img src="logohallo.gif" alt="wap.site.ru"/><br/>
Здесь тоже наверно все понятно. Картинку
вы можете своб поставить, для этого напишете вместо «logohallo.gif»
ссылку на свою картинку. Обратите внимание, тег <alt> обязателен.
Все
что осталось узнать, это тег, который выдает содержимое через строчку.
Как и в html здесь это тег «p». То есть для выделения текста через
строчку необходимо ввести его код между:
<p> </p>
Итак, вот я и показал вам коды для
вставки теста, картинки и ссылки. Не удивляйтесь, но это все что вам
понадобится для создания целого wap-сайта. Мобильные браузеры не
поддерживают ни скриптов, ни таблиц, ни чего-нибудь подобного.
Но
все же необходимо посмотреть, что получится из всего этого, из того,
что мы сейчас делали, итак, вот код, который у нас получился:
xml version="1.0" encoding="utf-8"?>
<!doctype wml public "-//wapforum//dtd wml 1.2//en" "http://www.wapforum.org/dtd/wml12.dtd">
<wml>
<card id="index" title="Первая wap-страница">
<p align="center">
wap-страница<br/>
<a href="http://wap.site.ru/index.wml">Главная </a><br/>
<img src="logohallo.gif" alt="wap.site.ru"/><br/>
</p>
</card>
</wml>
Если вы решите просмотреть страницу в
браузере, то не разберете ничего из слов. Все русские буквы будут в
виде вопросительных знаков. Поэтому тут работа еще не заканчивается,
осталась самая важная часть – перевод кода в формат wml. Для этого
существуют такие программы, которые переводят этот код, а именно его
русские буквы на нужный формат. Их совсем мало и трудно найти, поэтому
специально для вас, я разместил один простейший такой «переводчик» и вы
можете скачать его здесь. Распакуйте оба файла в одну папку и запустите
приложение. Тут для вас откроет окошко с двумя полями. В первое мы
вводим наш код и тут же в соседнем поле появляется новый вариант этого
же кода, тот что нам и нужен. Итак, получится:
xml version="1.0" encoding="utf-8"?>
<!doctype wml public "-//wapforum//dtd wml 1.2//en" "http://www.wapforum.org/dtd/wml12.dtd">
<wml>
<card id="index" title="Первая wap-страница">
<p align="center">
wap-страница<br/>
<a href="http://wap.site.ru/index.wml">Главная </a><br/>
<img src="logohallo.gif" alt="wap.site.ru"/><br/>
</p>
</card>
</wml>
Теперь все русские буквы будут правильно
отображаться. Вы можете просмотреть страницу и убедиться в этом. Вот
что должно получится при просмотре в браузере opera:
(Здесь картинка, расположена она по адресу : http://welikeit.ru/files/wappage.gif ).
Теперь вы можете приступать к созданию собственного wap-сайта, вы знаете все что для этого нужно.
|
Копирование материалов разрешено,