Верстка под PDA, часть 2
Уже писал о верстке под PocketPC устройства, на неделе доработал все то, что так смущало и подвел небольшие итоги.
1. Резинка.
Верстка под PDA должна быть резиновой. Без дополнительного ПО эмулировать разное разрешение на PDA устройствах нельзя. Да и никому это особо не нужно =) Чаще всего это 320х240 или 640х480, хотя бывают и нестандартные разрешения. В любом случае сайт должен смотреться во всех разрешениях одинаково, т.к. их разброс не такой и большой, а значит верстка должна быть резиновой.
2. Одна колонка.
Есть исключения, но чаще всего скелет сайта должен быть одноколоночным. Т.е. исходник сайта может быть 2-х, 3-х колоночным, но PDA версия чаще всего превращается в одну колонку, т.к. места и так мало. Чаще всего левая колонка (навигация) превращается в <select>, а правая сползает под основной контент.
3. Авто определение PDA устройства + pda.site.ru домен.
Определить PocketPC не так и сложно. HTTP_USER_AGENT содержит «windows ce» + браузер (mobile ie) добавляет ряд своих заголовков, например HTTP_UA_OS. Соответственно при просмотре site.ru с мобильного устройства должна отображаться оптимизированная верстка. Однако помимо этого необходим и безусловный способ получения PDA верстки, самое простое — поддомен «pda». Это просто удобно + важно для всяких поисковых ботов, да и заранее сообщает, что есть и pda версия сайта…
4. Функционал должен сохраняться.
PDA версия сайта просто обязана сохранять весь функционал исходного. Посетитель с мобильным устройство не должен чувствовать себя ущербным! Это касается не только функционала сайта, но и дизайна. Он должен сохранять исходные элементы и техники. Ничего кроме белого фона, черного текста и синих ссылок в PDA версии сайта (примеров не мало) это высшая степень неуважения и презрения к владельцам современных мобильных устройств.
5. CSS.
Mobile IE хвалится поддержкой CSS2, конечно же это все условно =) Чёткого документа по этому поводу на данный момент составить не могу, но у меня возникли проблемы с абсолютным позиционированием, float позиционированием и background свойствах некоторых элементов. Хотя все же базовая поддержка CSS2 существует, можно верстать приятные, красивые сайты.
6. JavaScript.
А вот тут начинается беда… JS с намеками на победу (поддержка xmlhttprequest объекта, попросту — AJAX, других ActiveX и прочее), но порой не умеющий элементарного. Привычные нам id существуют только для чтения, className не существует вовсе (mobile IE с которым я работал — стандартный для WM 5.0. Последний mobile ie уже научился работать и с id и с className). Многие DOM методы отличны (например есть element.children, но нет element.childNodes) и так далее, сюрпризов очень много. Но что самое обидное — AJAX объект возвращает метод responseText, но не возвращает responseXML. У меня на моих проектах используется именно XML, для более понятного API. Пришлось добавлять возможность вывода данных и в JSON формате, чтобы JS на наладонниках смог его «прочитать». Т.е. проще говоря фанатам XML прийдется дописывать\переписывать AJAX интерфейсы, а фанаты JSON и plaint/text пляшут и радуются.
7. PopUp.
Любые необходимые попапы, соответственно, должны открываться как новая страница. Ничего страшного в этом нет, пользователи PDA устройств к этому вполне привыкли. Но кнопка «назад» или «отмена» в таких окнах важна как воздух.
Вот вроде и все, на первое время. Для тестов я советую использовать непосредственно устройство. Либо можно скачать эмулятор с microsoft.com.
Для более удобного тестирования на устройстве я использовался бесплатной утилитой My Mobiler. Она позволяет управлять Pocket`ом из компьютера. Это удобно, воткнул покет в кредл на другом конце стола, а сам свободно им управляешь мышкой…
WAP, PDA, мобильный сайт — где разница и почему все заблуждаются?
Не любитель копировать чужие статьи, но сейчас появился повод.
Знакомый, блоггер, программист и музыкант в одном лице, Akdmeh, попал-таки со своей статьей в Хабрахабр. Кто не в теме, это закрытое информационное комьюнити, для регистрации в котором необходимо получить инвайт от участника, либо написать интересную статью в так называемую «песочницу». Akdmeh справился с этим. Удивление у меня вызвал тот факт, что я вышел на эту статью с поисковика уже сегодня, по специфическому wap-запросу. Молодца, переопубликую заметку чуть позже, но сейчас хотел бы сделать что-то вроде техно-экскурса, потому что у многих товарищей из веба сложились заблуждения по поводу wap’а: «WAP — это протокол доступа. Под WAP-сайтом в данном случае следует понимать WML-сайт.» И в результате этого складывается недопонимание, обсуждение прошло примерно так:
— Wap? Он же дорогой, потому не популярен в России.
— Не понимаю, зачем платить за пользование бешеные деньги.
— Wap-сайты можно юзать и без wap-шлюзов.
— WML-сайты -анахронизм.
С понятиями и терминами нам поможет разобраться Агмата.Нет со статьей WAP-сайт, PDA-сайт, мобильный сайт — где разница и почему все заблуждаются :
«Wap-сайт», «pda-сайт», «мобильный сайт» — все неоднократно слышали эти названия. Печально то, что эти названия в 98% случаях используются без понимания того, что стоит за этими аббревиатурами. Необходимо развеять туман над значениями этих понятий — тогда станет ясно, как же всё-таки правильно назвать сайт, специально сделанный и адаптированный под мобильные устройства. Стоит учитывать, что обычно такой сайт не только обладает измененным интерфейсом и дизайном, но и несёт облегчённое наполнение, ориентированное точно на нужды пользователя.
Правильно называть такой сайт мобильным. Хоть понятия WAP и PDA имеют место быть — они не совсем корректны. Человек, заказывающий PDA сайт на самом деле либо слабо понимает, чего он хочет, либо у него есть неправильно сложившееся впечатление о том, что такое WAP-сайт или PDA-сайт.
В этих понятиях для человека, далёкого от разработки легко потеряться. Но это можно исправить, объяснив человеческим языком, что же всё это такое.
PDA — Personal digital assistant
Этот термин — личный цифровой помощник, если переводить дословно, и карманный персональный компьютер, КПК, если искать аналогичный термин в русском языке — впервые был применён 7 января 1992 года Джоном Скалли (John Sculley) к Apple Newton на выставке Консамер Электроникс Шоу в Лас-Вегасе. С тех пор этим термином называют портативное, мобильное устройство, которое обладает широкими функциональными возможностями, вполне сравнимыми с возможностями настольного компьютера. По сути — это компьютер, умещающийся в руках, удобный и простой в транспортировке.
В начале девяностых годов ПДА задумывались как удобные органайзеры, помогающие человеку в повседневной жизни. Сейчас любой современный мобильный телефон является тем самым электронным помощником — календарь, будильник, записная книжка давно стали его неотьемлемой частью. Гораздо сложнее сейчас найти ПДА, который не являлся бы мобильным телефоном, но всё же они существуют — самым ярким на этот момент примером является, конечно же Эппл Айпэд. Хотя дотянуться до его славы жаждут и другие похожие устройства.
ПДА-сайт — сайт, адаптированный под такие устройства. Но между мобильным телефоном с экраном 320?480 пикселей и Айпэдом с его 1024?768 больше различий, чем сходств. В вопросах юзабилити, удобства пользования (а это 95% успеха сайта) это два совершенно разных устройства с двумя разными подходами к решению задач. И один и тот же сайт не может быть одинаково удобным для пользователей Айпэда и мобильного телефона. Даже меньший брат Айпэда — Айфон, не обеспечит тот же уровень удобства — размеры их экранов отличаются, либо сайт будет слишком мелким на экране Айфона, либо растянутым неудобным на экране Айпэда.
WAP — Wireless access protocol
«Протокол беспроводного доступа» — тот самый ВАП. Это не устройство, не определённая система. Если есть ВАП-сайт, то его аналог, обычный сайт можно было бы называть HTTP-сайтом, TCP/IP-сайтом. Название такое довольно нелепо, так как пользователь не разбирается в протоколах. Его это просто не интересует. Этот протокол задумывался на заре развития беспроводной передачи данных, в 1998 году, чтобы обеспечить доступ к интернету с помощью мобильного телефона, не привязываясь к модему. Горячо всеми любимая Википедия несёт следующую чушь: «По сути, это технический стандарт, описывающий способ, с помощью которого информация из Интернета передаётся на дисплей мобильного телефона. Теоретически, если бы экран мобильного телефона смог отобразить то многообразие информации, что и дисплей компьютера, то WAP ничем не отличался бы от отображения обычных WEB-страниц.» На самом деле WAP — протокол передачи данных от одного устройства другому без помощи проводов. Всё! Его изобрели лишь для того, чтобы связь с одной вышкой «мягко», без обрывов «переходила» на другую при быстром движении устройства. По такому принципу работают GSM-сети.
Поэтому говорить о ВАП-сайте некорректно. В большинстве случаев под ВАП подразумевают информацию поданную в виде ВМЛ.
WML — Wireless Markup Language
WML — язык разметки документов для мобильных устройств. Самое интересное в этом языке то, что он отмирает. На его место уже пришёл современный язык XHTML (Extensible Hypertext Markup Language — Расширяемый язык разметки гипертекста). Но самое главное то, что для пользователя теперь не существует разделения «мобильный и не мобильный интернет». Интернет становится единым для всех типов устройств.
Раньше сайты для мобильных устройств и правда нуждались в языке WML для более-менее быстрой загрузки. Сейчас кроме того, что он поддерживается браузерами «из вежливости», необходимость в этом языке отпала. Но мобильные сайты на WML живут и по сей день. Сейчас создавать мобильный сайт на основе ВМЛ — анахронизм. Мы надеемся, что владельцы таких сайтов всё же увидят неоспоримую мощь современных мобильных сайтов и проведут столь нужную модернизацию.
Мобильный сайт
Если всё называть своими именами, то получится определение, похожее на это: «мобильный сайт — сайт, созданный для просмотра на компактных устройствах». Компактные устройства — те, ширина дисплея которых сейчас усреднённо 300–500 пикселей. Конечно, это название может подойти только для книги или справочника. Мобильный сайт, сайт для мобильного — вот подходящие названия. Мобильность в этом случае подразумевается, как возможность получить информацию, будучи не привязанным к определённому месту.
Следует отметить, что из-за множества факторов спрос пользователей на качественные удобные мобильные сайты растёт сейчас с астрономической скоростью.
В то же время до сих пор существует довольно мало профессионально сделанных мобильных сайтов, и мы прилагаем много усилий, чтобы исправить эту ситуацию.
Алексей Вишмидт,
31 мая 2010
Не исключаю, что после этой заметки вы еще больше запутались %) Следуя этой статье, я должен переименовать свой блог в «блог про мобильный интернет» … �� Однако же, для большинства ваперов слова WAP, PDA и мобильный интернет идентичны, весь все они подразумевают одно и тоже: лёгкие, маленькие сайты, удобные к просмотру как с телефона, так и с компьютера. И плевать, что Wap — это протокол, а WML — анахронизм. Неправда ли?
Pda версия сайта что это
Но, правда, не всегда можно зайти на любой сайт с мобильного телефона. Поэтому говоря об этом все вспоминают про WAP-сайты. С чем же это связано? А это связано с тем, что многие старые мобильные телефоны не поддерживают xHTML и ограничиваются только WAP’ом. Но в настоящее время людей с такими моделями телефонов довольно мало и поэтому специально для них мучаться составлением WAP-версии сайта — просто бессмысленная трата времени. И как сказал Kron: «WAP умер»
Поэтому, все-таки оптимальным вариантом является именно PDA.
Чем отличается обычная версия сайта от PDA ?
Компактностью. В ПДА не должно быть ничего лишнего, а только суть посещенной пользователем страницы. Следовательно, и вес такой страницы будет значительно меньше.
Вот так выглядит обычная версия сайта: 
А вот так PDA: 
Как активировать PDA-версию сайта?
Делается очень просто — в Панели Управления ==> Общие настройки ==> Активизировать шаблоны для PDA версии сайта
Как попасть на эту упрощенную версию сайта?
При входе на сайт с мобильных устройств вы автоматически попадете на PDA-версию. Если же вы хотите туда зайти с обычного компьютера, то необходимо в адресной строке браузера написать адрес: http://ваш_сайт.домен/pda
Можно ли менять дизайн PDA-версии?
Да, конечно. Если ваш сайт уникален как в плане контента, так и дизайна, то вам просто необходимо поменять стандартные шаблоны на свои.
Для того, чтобы поменять дизайн, вы должны выбрать пункт Дизайн ==> Управление дизайном (шаблоны). Затем выбрать Шаблоны для PDA версии сайта и работать с ними, как и с обычными.
Внимание: будьте внимательны и при редактировании шаблонов обращайте внимание на то, какой шаблон вы редактируете — PDA или обычный.
Я активировал PDA-версию, а мне пишет, что модуль не активирован или что-то в этом роде. Что делать?
Отключите PDA и включите заново.
Ну на этом пока-что все. Все предложения по поводу улучшения статьи принимаю в личку =) Желаю удачи в освоении возможностей системы uCoz