presentation
DESCRIPTION
"Сайты для мобильный платформ"TRANSCRIPT
Организационные моментыПрезентация будет доступна:
– PowerPoint: http://buyanov.ru/phpconf/– Flash: http://slideshare.net/Efreeti/
Вопросы
Задавайте по мере возникновения, что бы не забыть.
История вопроса1995 г. – фирма Unwired Planet представляет HDML1997 г. – Создание WAPforum (wapforum.org)
Основатели Ericsson, Motorola, Nokia + UnwiredPlanet
1998 г. – Создание WAP 1.0 Очень сырой стандарт
1999 г. – Выпуск новой версии, WAP 1.12000 г. – Обновление до версии WAP 1.22002 г. – Совершенно новая версия, WAP 2.02003 г. – Вхождение WAPForum в состав OMA
На данный момент в OMA состоит более 500 компаний
Особенности WAP сайтов• На данный момент – 14 миллионов пользователей
мобильного интернета– Многие из них не используют «большой» интернет– Прирост – более 50% в год– В основном wap сайты (PDA около 1 миллиона)
• Меньше спама, больше доверия– Дорвеи ещё не пришли
• Выгодная реклама – CTR ~1%• В основном молодая аудитория
– Основные запросы: «порно» и «халява»
Типы сайтовСервисы• Погода, новости, афиша• Знакомства, чаты• Блоги
Мобильный контент• Мелодии, картинки, видео
Сайты компаний• Визитки с краткой информацией
Примеры
Откуда брать пользователей• Из WWW
– Основной сайт (если wap/pda это только дублирование)– Реклама и оптимизация в поиске– Ресурсы (в т.ч. форумы) по теме
• WAP ресурсы– Счётчики (например wapstart.ru)– Тематические каталоги и поиск– Реклама
• Реклама в оффлайне
SMS и WAP-pushРазработка собственной платформы
– Большие вложения– Много операторов (для обеспечения полного покрытия)– Недостаточная загрузка (если услуга идёт на продажу)
Технические операторы– Только платформа и номера
Полный аутсорсинг– Достаточно предоставить контент– Простота подключения– Может быть небольшой объём
Ссылки по SMSНесколько компаний
devinosms.com plasticmedia.ru smstraffic.ru
Технические ресурсыsmsforum.net – подробное описание SMPP
Kannel (С) и OpenSmpp (Java) – Open Source gateways
PHP SMPP API
Техническая частьМатериалы
– Спецификации на сайте OMA– developershome.com – куча туториалов
Инструментарий разработчикаРасширения FireFox:
– wmlbrowser (WBMP не поддерживается) – XHTML Mobile Profile (application/vnd.wap.xhtml+xml)– Modify Headers– User Agent Switcher
Opera– Нативная поддержка WML
Настоящие телефоны и КПК– Никакие эмуляторы не спасают
Средства создания прототипов
Обычный сайт в PDA• Семантическая верстка (DIV’ами)
– Таблицы будут вжиматься на маленький экран
• Специальный лист стилей– <link media=“handheld” href="styles.css" />
• xHTML не обязателен– Но желателен, чтобы избежать неопределённостей
• Незаточенность под JS– Rich Applications приходится переписывать
Часто не нужно менять наполнение, но в некоторых случаях стоит менять структуру сайта.
Что нужно помнить о WAP• Повсеместный UTF-8
– В заголовках: charset=UTF-8– В начале файла: <?xml encoding="UTF-8"?>
• xHTML– Если ошибка «не могу отобразить страницу» -
первым делом идём в валидатор
• Правильный content-type
Content Types• WAP 1.1
– text/vnd.wap.wml (основной для WML)
– image/vnd.wap.wbmp (картинка WBMP)
– text/vnd.wap.wmlscript (WMLScript)
• WAP 2.0– application/vnd.wap.xhtml+xml (основной)
– application/xhtml+xml
Структура WML страницы<?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="card" title="Заголовок">
<onevent type="ontimer">
<go href="/" />
</onevent>
<timer value="1000"/>
<p>
Текст.
<br />
<anchor><go href=“#card2“ />Ссылка</anchor>
<!-- Комментарий -->
</p>
</card>
<card id="card2" title="Заголовок2"><p></p></card>
</wml>
Структура WML страницы<?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="card" title="Заголовок"><onevent type="ontimer">
<go href="/" />
</onevent>
<timer value="1000"/>
<p>
Текст.
<br />
<anchor><go href=“#card2“ />Ссылка</anchor>
<!-- Комментарий -->
</p>
</card>
<card id="card2" title="Заголовок2"><p></p></card></wml>
Структура WML страницы<?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="card" title="Заголовок">
<onevent type="ontimer">
<go href="/" />
</onevent>
<timer value="1000"/><p>
Текст.
<br />
<anchor><go href=“#card2“ />Ссылка</anchor>
<!-- Комментарий -->
</p>
</card>
<card id="card2" title="Заголовок2"><p></p></card>
</wml>
Структура WML страницы<?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="card" title="Заголовок">
<onevent type="ontimer">
<go href="/" />
</onevent>
<timer value="1000"/>
<p>
Текст.
<br />
<anchor><go href=“#card2“ />Ссылка</anchor>
<!-- Комментарий -->
</p></card>
<card id="card2" title="Заголовок2"><p></p></card>
</wml>
Формы в WML <input name="myName"/><br/>
<anchor>
<go method="get" href="processing.php">
<postfield name="name" value="$(myName)"/>
</go>
Submit Data
</anchor>
WML Eventsontimer
срабатывает через value*0.1 секунд
onenterbackward / onenterforwardпри нажатии кнопки back / forward в браузере телефона
onpickпри выборе пункта в select
Внутри <onevent> можно использовать<go />, <prev> и <refresh>
Для чего нужно:– Перезагрузка страницы, перенарправление– Возврат к форме
XHTML MP (WAP 2.0)<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
<style type="text/css"> a:link {color:#0000cc;} </style>
<title> Заголовок </title>
</head>
<body></body>
</html>
ПереадресацияНе мало телефонов
– Не воспринимают HTTP переадресацию– Код 201 для них равен 200
Ограниченная поддержка WAP 2.0– Некоторые просто забивают на <meta http-equiv="refresh"
Нужно перенаправить?– Выдаём HTTP заголовок– Пишем WML c таймером– Ставим ссылку (на всякий случай)
Cookies и кешМногие телефоны не поддерживают cookies
– Процент гораздо выше, чем в WEB
Идентификатор сессии – в URL– Ссылку не пересылают– Добавят в избранное – можно будет узнать
Кеш очень маленький– Не стоит забивать его неповторяющимся контентом– Но дизайн кешировать навечно
Выдача нужного контентаЖестко по субдоменам
– Wap.site.ru – WAP, pda.site.ru – PDA – Ещё вариант – короткий домен (например li.ru)
Определяем по запросу– По USER_AGENT– Заголовок Accept
Комбинированный– Определяем по запросу– Перенаправляем на нужный субдомен (алиас)– Субдомен – дополнительный фактор определения
Устранение дублированияДублирование в шаблонах полностью не устранить.
Можно только уменьшить будущие проблемы.
Методы:– Инкапсуляция отдельных элементов (например форм)– Единый дизайн– Для «раскраски» в WAP 2.0 использовать <style>– Избегать специфики (например WMLScript)
ЮзабилитиПрактически любой сайт можно автоматически
преобразовать в формат для телефона (в т.ч. заменив/убрав картинки и прочее).
Но это не сделает его удобным для пользователя
W3C выпустила !рекомендации! для создателей wap сайтов. К ним стоит прислушаться.
Среда пользователя• Не основное занятие
– Работа при перемещении– Частые прерывания (не единственная задача)
• Более конкретные цели– Не сёрфят от нечего делать– Нет желания читать (исключение – книги)
• Маленький экран, неудобный ввод– Небольшой контекст, не видно остального– Много вводить сложно (исключение – чаты)– Скроллинг и выбор ссылки – одна и та же кнопка.
Параметры телефоновСильно различающиеся экраны
– Размер экранов может отличаться в разы– Абсолютные размеры «не работают»– Кол-во цветом может быть сильно разным (в т.ч. 2)
Не стадартизированный интерфейс телефона– Кнопки back иногда нет (или пользователь о ней не знает)
Не все символы одинаковы– Многие служебные символы вводятся 4-6 нажатиями– Не стоит требовать сложных паролей
