Верстка под 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`ом из компьютера. Это удобно, воткнул покет в кредл на другом конце стола, а сам свободно им управляешь мышкой…
Pda версия сайта что это
Кроме того, как видно на той же картинке, в версии PDA страница адаптирована для небольшого экрана (размещение материала, шрифт и т.д.). Вот как выглядит меню сайта на экране смартфона.
Не надо перемещать страницу, чтобы попасть в нужную часть, можно даже не увеличивать, а сразу пользоваться.
Конечно, при пользовании мобильным устройством такая версия для многих будет предпочтительней, даже несмотря на недоступность ряда возможностей полной версии.
Создание PDA-версии сайта: определение мобильных пользователей
Очень часто при изготовлении сайта встаёт необходимость в создании облегченной версии (PDA) для телефонов, планшетов и смартфонов.
Чтобы определить, какую версию сайта показывать пользователю для его устройства и реализовать загрузку той версии мобильного приложения, которая больше всего подходит советую использовать API Яндекс.Детектор .
API Яндекс.Детектор предоставляет возможность определения модели и характеристик мобильного устройства пользователя сайта по заголовкам HTTP-запросов, передаваемых браузером его устройства.
Пишем простенькую функцию для определения мобильных браузеров, основанную на примере от Яндекса.
Теперь создаём поддомен на вашем основном домене. Например, если у меня был домен www.peacekeeper.ru , то я создал поддомен pda.peacekeeper.ru (можно и m.peacekeeper.ru ).
Использовать нашу функцию будем примерно так: если человек зашел на сайт с мобильного телефона — редиректим его на ту же самую страницу, которую он запросил, только на поддомене pda.peacekeeper.ru .
Пример можно посмотреть здесь (заходить, естественно, через мобилку). Продолжение следует ヅ
Pda версия сайта что это
Но, правда, не всегда можно зайти на любой сайт с мобильного телефона. Поэтому говоря об этом все вспоминают про WAP-сайты. С чем же это связано? А это связано с тем, что многие старые мобильные телефоны не поддерживают xHTML и ограничиваются только WAP’ом. Но в настоящее время людей с такими моделями телефонов довольно мало и поэтому специально для них мучаться составлением WAP-версии сайта — просто бессмысленная трата времени. И как сказал Kron: «WAP умер»
Поэтому, все-таки оптимальным вариантом является именно PDA.
Чем отличается обычная версия сайта от PDA ?
Компактностью. В ПДА не должно быть ничего лишнего, а только суть посещенной пользователем страницы. Следовательно, и вес такой страницы будет значительно меньше.
Вот так выглядит обычная версия сайта: 
А вот так PDA: 
Как активировать PDA-версию сайта?
Делается очень просто — в Панели Управления ==> Общие настройки ==> Активизировать шаблоны для PDA версии сайта
Как попасть на эту упрощенную версию сайта?
При входе на сайт с мобильных устройств вы автоматически попадете на PDA-версию. Если же вы хотите туда зайти с обычного компьютера, то необходимо в адресной строке браузера написать адрес: http://ваш_сайт.домен/pda
Можно ли менять дизайн PDA-версии?
Да, конечно. Если ваш сайт уникален как в плане контента, так и дизайна, то вам просто необходимо поменять стандартные шаблоны на свои.
Для того, чтобы поменять дизайн, вы должны выбрать пункт Дизайн ==> Управление дизайном (шаблоны). Затем выбрать Шаблоны для PDA версии сайта и работать с ними, как и с обычными.
Внимание: будьте внимательны и при редактировании шаблонов обращайте внимание на то, какой шаблон вы редактируете — PDA или обычный.
Я активировал PDA-версию, а мне пишет, что модуль не активирован или что-то в этом роде. Что делать?
Отключите PDA и включите заново.
Ну на этом пока-что все. Все предложения по поводу улучшения статьи принимаю в личку =) Желаю удачи в освоении возможностей системы uCoz