Как сделать свой Wap-сайт?(статья)

[russ]

Всё давно спрашивают а как сделать свой вап сайт, так вот как, нашел я статью одного мужика и решил заценить вам.



Wap-сайт: сделай сам (Август 2001)
Максим Лопатин (km@mypsion.ru)

Теория
Все, кто хотя бы раз пользовался мобильным Интернетом, прекрасно знают, что скорость связи по каналам, предоставляемым сетями GSM, составляет, как правило, 9,6 кбит/с. А современные сайты не рассчитаны на то, что кто-то будет их просматривать на столь низких скоростях. И в самом деле, вряд ли кто пойдет на развлекательный сайт с помощью суперпортативного ПК - ведь доступ к Интернету с помощью сотового телефона для основной массы потенциальных пользователей стоит дорого. Но информационный сайт (который как раз мог бы быть интересен пользователям WAP) - это другое дело, иной раз, бывает, пользователь запускает браузер именно для того, чтобы просмотреть новости, прочитать материалы узла или обсудить в web-конференции какую-либо проблему.
Как известно, фирмы - изготовители сотовых телефонов пытались решить эту задачу, создавая протокол WAP, но... Минусы WAP известны, главный - он не позволяет нормально просматривать обычные HTML-страницы, а сайтов, поддерживающих WAP-протокол для своих страниц, очень мало (российские можно вообще пересчитать по пальцам). При этом большинство существующих настроено только на то, чтобы предоставлять информацию о погоде, курсе доллара, пробках на дорогах и тому подобных мелочах, чего совершенно недостаточно. К тому же для разработчика очень неудобно создавать дополнительные версии своих страниц (плюс их приходится делать разными для 4- и 8-строчных дисплеев телефонов).
Одна из основных причин, по которым работать с современной Сетью при наличии низкоскоростного канала связи, мягко говоря, затруднительно, - перегруженность web-узлов многочисленными элементами оформления, красивым, но тяжеловесным в смысле объема передаваемой информации дизайном. Например, домашняя страница web-узла, о котором мы будем говорить, в своем исходном варианте занимает приблизительно 70 кбайт и при подключении на скорости 9,6 кбит/с загружается немного дольше 1 мин. Не спасет положения и развертывание сетей GPRS, пользователь будет платить за трафик, и проблема оптимизации сайта станет даже актуальнее.
При этом многие из "красивостей" пользователям браузеров для ручных ПК, в принципе, недоступны - поскольку ориентированные на ограниченную память и сравнительно маломощные ЦП, используемые в PDA, программы просмотра web, как правило, просто "не понимают" многих приемов HTML-программирования. Особенно это относится к динамическим эффектам, основанным на использовании языков сценариев JavaScript и, тем более, VBScript. С Java ситуация несколько лучше - виртуальная машина Java имеется для основных популярных платформ, но не принципиально, как правило, пользователи избегают инсталлировать эту подсистему, поскольку виртуальная машина Java занимает заметное место в ограниченной памяти PDA.
Кроме того, очень сильно затрудняют и осложняют работу со многими современными web-узлами пользователям браузеров для PDA и просчеты дизайнеров. Проблемы можно распределить по нескольким категориям: длительная загрузка web-страницы, медленная обработка (рендеринг) страницы, уже загруженной браузером из Сети, и неудобная навигация (поскольку современные web-узлы создаются в расчете на мониторы с разрешением 800 x 600, с возможностью отображения миллионов цветов, тогда как многие PDA имеют черно-белые экраны с разрешением 640 x 240, что считается достаточно хорошим разрешением для карманного компьютера). Конечно, это справедливо для любой платформы и любого браузера, но мощности настольных компьютеров и обычных линий соединения с Интернетом достаточно велики, чтобы практически оградить пользователя от неудобств. В случае же с карманными компьютерами эффект "современного дизайна" проявляет себя в полной мере, просмотр "навороченного" web-узла - тяжелое испытание как для нервов пользователя, так и для мобильного устройства.
Мы рассмотрим теоретические аспекты оптимизации содержимого web-узла для корректного его отображения на суперпортативных ПК. Затем обратимся к их практическому воплощению на конкретном примере оптимизации web-сайта для пользователей карманных компьютеров Psion, работающих под управлением операционной системы EPOC32. Указанная платформа была выбрана по нескольким причинам. Во-первых, это единственный, насколько известно автору, российский проект, полностью оптимизированный для браузеров PDA. В настоящее время существует несколько распространенных платформ для суперпортативных ПК. Это EPOC (Psion), PalmOS и Windows CE/PocketPC. Каждая из них предоставляет возможность работы в Интернете с помощью собственного программного обеспечения, которое включает все привычные для пользователя приложения: браузер, почтовая программа, FTP-клиент, эмуляторы терминала и др. Мы же выбрали платформу EPOC как наиболее приспособленную к работе в Интернете.
Сегодня существуют два браузера для Psion: это стандартный бесплатный браузер Psion Web 1.5 и 2.0 и версия популярного браузера Opera для EPOC32. При этом новейшие модели машин Psion (Psion Revo Plus и некоторые модели семейства Psion Netbook) комплектуются именно пакетом Opera, поскольку она превосходит Psion Web по многим показателям. Тем не менее идеального браузера (в нашем представлении это Microsoft Internet Explorer 5.0) для платформы Psion нет, какие-то проблемы есть у Psion Web, какие-то - у Opera. В данной статье мы попытались указать на некоторые из них, однако полный перечень особенностей всех браузеров составить сложно, поскольку эти "ошибки конструкции" проявляются вполне спорадически, при каком-то определенном сочетании тэгов HTML. Такой подход, в принципе, верен с точки зрения стандарта, но не совсем правилен с точки зрения EPOC-браузеров. Причем, проявившись в одной ситуации, ошибки могут исчезнуть, если что-то незначительно поменять в определенных тэгах или их порядке. На перманентных же моментах мы остановимся подробнее.
Говоря об организации сайта, невозможно не сделать отступление и не сказать, что HTML является одним из стандартных средств разработки для платформы Symbian Version 6.0, следующей версии операционной системы Psion, которая легла в основу таких изделий, как Ericsson R380s (в ней используется EPOC Release 5u; более подробно об Ericsson R380s - см. "Алло плюс" № 1-2 за 2001) и Nokia Communicator 9210 (в ней используется Symbian OS). Именно на ней функционируют "типовые модели" бесклавиатурных (Quartz) и клавиатурных коммуникаторов (Crystal, Nokia Communicator 9210 - как раз пример такой машины). Web-браузер платформы Symbian Version 6.0 соответствует спецификации HTML 3.2 с полной поддержкой фреймов, HTTPS и встроенных Java-апплетов. Компания Symbian предоставляет соответствующие средства разработки контента на базе HTML и WAP, которые позволяют подготавливать вручную страницы на языках WML или HTML, выполнять функции, обеспечивающие удобную работу в среде эмулятора, а также разрабатывать web-страницы на реальном устройстве. Правда, следует заметить, что данные средства нельзя использовать для разработки динамического контента, который формируется "на лету", в зависимости от запроса пользователя.
Ну а теперь вернемся к теоретическим положениям. Итак, какие же проблемы необходимо решить при оптимизации web-узла, который можно будет без затруднений просматривать с помощью, в общем-то, любого суперпортативного ПК, подключенного к Интернету через сотовый телефон?

Обилие картинок
Одна из основных проблем. Многие дизайнеры убеждены, что чем больше разноцветных картинок, тем красивее выглядит web-узел. Это распространенная практика, которая, однако, имеет два отрицательных момента. Во-первых, время загрузки такого web-узла сильно увеличивается по сравнению с сайтом, где используется только необходимое их количество (мера этой необходимости - отдельная проблема). Во-вторых, несоразмерное задаче обилие картинок снижает функциональность сайта и мешает как восприятию основной информации, так и навигации по web-узлу. Поэтому, по возможности, все ненужные для функциональности картинки следует исключить.
Первый пример: как правило, заголовок сайта всегда делается в виде большой (на ширину экрана) и красивой (много цветов, эффекты, анимация) картинки. Как театр начинается с вешалки, так и сайт начинается с заголовка - он должен запоминаться. Но в случае с суперпортативным ПК такая заставка неактуальна: на черно-белом экране, как правило, хорошо различимы только четыре оттенка серого цвета (белый, светло-серый, темно-серый и темный), на устройствах с цветными экранами картинка видна лучше, но цветная анимированная картинка, как правило, имеет намного больший размер, нежели монохромная. Поэтому мы можем для мобильного варианта сайта сделать отдельный заголовок: попроще, без эффектов, без анимации, с минимальным количеством цветов или монохромный. Таким образом сократим время на загрузку, сбережем память и снизим нагрузку на ЦП-устройства.
Второй пример: навигационное меню по разделам. Зайдите на любой современный сайт - в 99% случаев это будет графическое меню в виде набора картинок. Для ручного ПК не нужны картинки меню, нужны только его функциональность и скорость загрузки. Заменив картинки на обычные текстовые ссылки (которые, разумеется, надо оформить в виде, который бы делал меню отличным от обычных ссылок, - к примеру, увеличенным шрифтом), мы полностью сохраняем функциональность, но делаем загрузку моментальной.
Третий пример: всевозможные графические элементы внутреннего оформления. Это точки, значки, пиктограммы, полоски, которые выполнены в виде картинок. Нам это не нужно, поэтому такие картинки убираем.
Четвертый пример: фоновое изображение для страницы. Нет ничего более загружающего процессор и память. Поэтому такое изображение не используем, достаточно фонового цвета.
Разумеется, в предыдущих примерах речь шла только о внешнем оформлении страницы. Репрессивные меры не должны касаться картинок, которые входят в содержание страницы.

Баннеры
Практически каждый сайт имеет на своих страницах баннеры, которые размещаются в рамках программ обмена баннерами или являются чистой рекламой. Каждый баннер "весит" 5-13 кбайт - примерно столько же заняло бы несколько страниц текста. Если учесть, что баннер почти никогда не бывает один (как правило, их на странице не менее трех), то суммарный объем увеличивает время загрузки в несколько раз, и это особенно сильно заметно при низкоскоростных каналах связи, свойственных сотовому Интернету. Кроме того, вполне возможна ситуация, когда пользователь вынужден ждать, пока не загрузится баннер, чтобы увидеть нужную ему картинку со страницы (кроме того, бывают задержки, которые привносят серверы баннерной сети - нередки случаи, когда из-за нагрузки они передают картинку с паузами). Для браузера нет разницы - он не знает, где нужная картинка, а где просто реклама, но для пользователя, который подключается по сотовому телефону, это проблема, поскольку он платит за каждую минуту соединения.
Поэтому, по возможности, следует отказаться от размещения баннеров на страницах, предназначенных для мобильных пользователей. Конечно, это сократит объем показываемых баннеров, но зато мобильные пользователи оценят заботу дизайнера web-узла об их времени и кошельках. Увы, оптимизировать баннеры, как правило, невозможно. То же касается и счетчиков рейтинговых систем. Если вам не слишком важна статистика путешествия мобильных пользователей (а она с большой долей вероятности точно такая же, как и у обычных), то счетчики ставьте только на главную страницу.

Содержимое страницы, заключенное в обрамляющую таблицу
Да, это красиво, это помогает форматировать содержимое страницы. Весьма популярный и распространенный прием - в противном случае при большом разрешении экрана страница сайта бесконтрольно "расползается" и может выглядеть не очень хорошо. Поэтому многие сайты (практически 100%) используют таблицы для построения структуры страницы. Таким способом легко держать все в рамках, просто делать боковые колонки, меню и прочее. Проблема заключается в том, что пока браузер не загрузит такую страницу целиком, он не будет показывать ее на экране. Точнее говоря, пока браузер не получит полностью информацию, как должно выглядеть содержимое таблицы (весь текст, а также габариты - высота и ширина - картинок, если они есть). Особенно это касается браузера Netscape Navigator независимо от версии для ПКи абсолютно любого браузера для платформы EPOC.
Когда пользователь работает на PDA, ему интересно максимально быстро извлечь информацию. Ведь время сотовой связи дорого и в прямом, и в переносном смысле. Быть может, нам вообще не нужна страница, загрузки которой мы дожидаемся в данный момент. А ведь если бы она появлялась на экране сразу же по мере загрузки, мы могли бы уже читать ее содержимое либо, определив по первым строчкам ее надобность, прервать загрузку, если страница не нужна.
Действительно важным моментом в использовании такого элемента, как таблица, можно назвать то, что навигационное меню можно разместить, к примеру, в ее левой ячейке, где оно будет заметно и удобно для пользования. Но когда дело касается маленького экрана КПК, то меню, занимающее колонку, "отъедает" полезную площадь экрана, которая могла бы использоваться под контент. Но если мы переместим текстовое меню в верх или низ страницы, то функциональность сохранится, а от таблицы можно будет отказаться. Резюме: необходимо отказаться от использования таблиц, а меню, если оно было сбоку, перенести вниз или вверх.

Неоптимизированные картинки и непродуманное использование графических форматов
Графических форматов, использующихся в Интернете, фактически всего два: GIF и JPEG (есть и другие, например, PNG, но они используются редко). При решении вопроса: "А в каком формате мне делать картинки?" - надо придерживаться одного правила. Если цветов мало (схемы, графики, копии экрана либо маленькие картинки), то GIF. Если цветов много (фотография), то - JPEG. Формат GIF к тому же еще дает возможность создания изображений с прозрачным фоном, а также анимированных картинок.
Формат GIF способен сохранять изображения с палитрой не более 256 цветов, причем количеством цветов можно управлять, убирая ненужные, - таким образом сокращается размер конечного файла. К примеру, скриншоты приложений Psion выполнены в 4 градациях серого - то есть правильный GIF-файл должен содержать только 4 цвета. Негласно в Windows приняты два формата файлов с количеством цветов до 256: 4 бита на пиксель (палитра 16 цветов) и 8 бит на пиксель (палитра 256 цветов). Но у нас цветов еще меньше: 4, - а это всего 2 бита на пиксель, поэтому в графическом редакторе не забудьте принудительно уменьшить количество цветов в палитре. Разница по сравнению с 4-битным изображением может достигать 20-25%, а это прилично, тем более что лишнее место используется впустую.
Сделать правильный GIF несложно, зато картинка будет идеальной для использования в Интернете.
Формат JPEG "заточен" под многоцветные изображения и позволяет хранить картинки с количеством цветов до 16 млн. Используется алгоритм сжатия с потерей качества, но для человеческого глаза эта потеря не слишком заметна (если, конечно, не доводить ее до крайности). Поэтому если вы хотите разместить на странице многоцветную иллюстрацию или фотографию, то ваш выбор - JPEG. Для изготовления файла с минимальным объемом существуют специальные утилиты. Самая популярная из них - Ulead SmartSaver (www.ulead.com). Она имеет широкий спектр настроек, включая даже разбивку изображения на зоны с различной степенью компрессии. К примеру, небо на фотографии пейзажа практически однородно (голубое, без деталей), поэтому ему можно назначить более высокую степень компрессии (в ущерб качеству), потому что визуально качество однородной зоны практически не пострадает даже при очень высоком уровне компрессии. Нужно еще раз обратить внимание на то, что JPEG - это формат с потерей качества и каждый раз, когда вы открываете такой файл, а потом его сохраняете, качество ухудшается все больше и больше. Поэтому многоцветные файлы для обработки лучше хранить в формате TIFF, а в JPEG переводить только при сохранении.
Есть и еще один момент, касающийся JPEG-файлов. Абсолютно все графические программы, сохраняющие картинки в этом формате, записывают в файлы дополнительные комментарии и/или еще и уменьшенные копии картинки (так называемые thumbnails), также обыкновенный "мусор". Для использования в Интернете это не нужно и только замедляет загрузку. Размер комментариев может колебаться от 18 байт (но это редкий случай), до 7-12 кб (это уже чаще - особенно такими вещами отличается PhotoShop последних версий). Ненужные комментарии легко вырезаются специальной утилитой JPEG Cleaner (lanserv1.kemsu.ru/~jek). Это уникальная программа, аналогов которой нет.

Неоптимизированный код HTML-страниц
Этим грешат все страницы, изготовленные при помощи визуальных HTML-редакторов, таких, как, например, Microsoft FrontPage. Пробелы либо символы табуляции между тэгами, лишние кавычки в параметрах, комментарии - все это не нужно пользователю. Фактически даже символы перевода строки не нужны - хотя без него очень сложно редактировать документ вручную, поэтому переводы строки приходится сохранять. Конечно, текстовые "излишки" даже на скорости 9,6 кбит/c загружаются быстро (когда-то работали и на скорости 2,4 кбит/c), но и их можно избежать. Существуют специальные программы для оптимизации HTML-документов. Несколько вариантов автоматических оптимизаторов встроено в редактор HomeSite, но, к сожалению, ни один из них не даст вам стопроцентно качественного результата. Оптимизация - ручная работа. Кстати, когда вы удалите ненужные пробелы, кавычки и комментарии, то обнаружите еще один плюс: теперь исходный текст HTML-документа проще понимать при дальнейшем редактировании.
Есть и еще одно важное правило при составлении HTML-документа: размеры картинок (высота и ширина) обязательно должны быть прописаны в соответствующих тэгах. Тогда браузер, не дожидаясь загрузки картинки (чтобы узнать ее габариты и правильно показать страницу), может загружать страницу дальше.
Неоптимизированные цвета основного текста, фона и ссылок
Между этими параметрами существует одно основное правило, которое выражается всего одним словом: контраст. Какие бы цвета вы ни выбирали для фона, текста и ссылок, нужно придерживаться тех оттенков, которые обеспечат пользователю максимально контрастное сочетание цветов. Если дело касается жидкокристаллических дисплеев ручных ПК, то можно вывести очевидное правило: нужно писать черным по белому. Черный цвет виден лучше всего на белом фоне, к тому же белый фон есть не что иное, как "выключенные" пиксели ЖК-дисплея, что дополнительно экономит батарейки PDA. Итак, выбираем следующие цвета: текст - черный, фон - белый.
Теперь о ссылках. Здесь опять следует придерживаться правила максимального контраста между новой ссылкой и той, которую пользователь уже посетил. К примеру, по умолчанию, у браузеров на настольном ПК для обычной ссылки назначается синий цвет, а для посещенной - фиолетовый. На черно-белом же экране они будут выглядеть идентично. Поэтому надо избегать мало отличающихся друг от друга (в черно-белом режиме) комбинаций "синяя-зеленая", "красная-фиолетовая", "желтая-розовая" и т. д. Наилучший вариант для браузера PDA - в том случае, когда ссылка, которую пользователь пока не посетил, обозначена черным цветом, а та, где он уже был, - серым.
В последнее время на страницах часто используются так называемые стили. Их, к примеру, поддерживает и браузер Opera для платформы EPOC. При помощи стилей можно ссылку сделать неотличимой от обычного текста, то есть убрать подчеркивание, что делают многие дизайнеры. Однако это грубая ошибка - ссылки становятся просто незаметными на фоне текста. Ссылка должна быть подчеркнутой, поэтому применение стиля, убирающего подчеркивания, неуместно.

[russ]

Неудобная навигация
Неудобной навигация считается в том случае, когда, чтобы попасть в нужный раздел или вернуться назад, приходится пользоваться кнопками "Назад"/"Вперед" на панели браузера или же совершать более двух кликов мышью/пером. А, к примеру, у браузера Opera для платформы EPOC на панель управления в целях экономии места вообще не вынесены навигационные кнопки "Назад"/"Вперед" - их заменяют лишь функциональные клавиши, о которых надо помнить, либо пользоваться соответствующими пунктами в меню программы. Это очень неудобно, когда посетитель хочет вернуться на предыдущую страницу. А такая операция при навигации по сайту самая частая, потому что любой сайт состоит из одного отправочного пункта меню и нескольких статей, к нему относящихся. Поэтому на каждой странице должна быть ссылка "Вернуться назад", при нажатии на которую посетитель возвращался бы в предыдущее меню.
Кроме того, если ваш сайт состоит из нескольких различных разделов, то на каждой странице необходимо предусмотреть "главное меню" (главное - потому что имеются в виду переходы в сильно отличающиеся разделы). Его лучше делать внизу страницы - таким образом, оно не будет занимать места в начале, но будет всегда доступно.
Сайты, имеющие многоуровневую структуру, которую можно выделить в четкую цепочку, к примеру, "Главная - Обзоры - Обзоры программ - Калькуляторы", должны иметь и строчку-меню с этой структурой. Здесь каждый элемент будет являться ссылкой на соответствующий уровень. Таким образом, очень просто из обзоров программ-калькуляторов перейти в меню с обзорами аксессуаров. Как правило, такие навигационные строки располагают в верхней части страницы.

Разные мелочи
Фреймы. Не следует поддаваться соблазну воспользоваться фреймами. Иногда действительно фреймы незаменимы, но в случае с суперпортативными ПК они неприемлемы. При использовании фреймов затруднена навигация по ним, а также замечено, что браузер Psion Web не поддерживает параметр TARGET у форм, в результате чего они "ведут себя" совсем не так, как задумывал создатель страницы.
Апплеты и JavaScript. Да, браузеры EPOC32 поддерживают Java applets, но при условии установленной Java Virtual Machine, которая занимает около 2 Мбайт места в памяти устройства (которой, в общем 8-16 Мбайт). Поэтому пользователи редко ее инсталлируют. Язык JavaScript работает в среде браузера Opera, но не Psion Web, поэтому это нужно иметь в виду: если и использовать JavaScript, то только в таких ситуациях, когда его отсутствие повредит функциональности.
Модные штучки. Следует забыть про Flash, MIDI, Vivo и другие продвинутые web-технологии на основе подключаемых компонентов браузера (plugins). Они все равно не будут показываться на карманном браузере (надо, правда, заметить, что не исключено появление версий этих программ для Psion - но это дело отдаленного будущего).
Формы. Здесь нужно обратить внимание на то, что разные браузеры по-разному трактуют заданную ширину полей формы. Особенно странно проявляет себя Opera: при заданной ширине поля ввода текста в 30 символов она рисует его даже немного превышающим размеры экрана 640 х 240. Поэтому здесь приходится экспериментировать шириной полей формы готовой страницы.

Вот и все!

[russ]

Спецификация WML (создание WAP страниц для просмотра средствами сотовых телефонов)

Вступление
Описание тегов (переведено из документации Motorola SDK)
Правильные WML элементы

http://roboweb.narod.ru/t0.htm