'

Сайты для мобильных платформ

Понравилась презентация – покажи это...





Слайд 0

Сайты для мобильных платформ Александр Буянов alexander@buyanov.ru


Слайд 1

Организационные моменты Презентация будет доступна: PowerPoint: http://buyanov.ru/phpconf/ Flash: http://slideshare.net/Efreeti/ Вопросы Задавайте по мере возникновения, что бы не забыть.


Слайд 2

История вопроса 1995 г. – фирма Unwired Planet представляет HDML 1997 г. – Создание WAPforum (wapforum.org) Основатели Ericsson, Motorola, Nokia + UnwiredPlanet 1998 г. – Создание WAP 1.0 Очень сырой стандарт 1999 г. – Выпуск новой версии, WAP 1.1 2000 г. – Обновление до версии WAP 1.2 2002 г. – Совершенно новая версия, WAP 2.0 2003 г. – Вхождение WAPForum в состав OMA На данный момент в OMA состоит более 500 компаний


Слайд 3

Особенности WAP сайтов На данный момент – 14 миллионов пользователей мобильного интернета Многие из них не используют «большой» интернет Прирост – более 50% в год В основном wap сайты (PDA около 1 миллиона) Меньше спама, больше доверия Дорвеи ещё не пришли Выгодная реклама – CTR ~1% В основном молодая аудитория Основные запросы: «порно» и «халява»


Слайд 4

Типы сайтов Сервисы Погода, новости, афиша Знакомства, чаты Блоги Мобильный контент Мелодии, картинки, видео Сайты компаний Визитки с краткой информацией


Слайд 5

Примеры


Слайд 6

Откуда брать пользователей Из WWW Основной сайт (если wap/pda это только дублирование) Реклама и оптимизация в поиске Ресурсы (в т.ч. форумы) по теме WAP ресурсы Счётчики (например wapstart.ru) Тематические каталоги и поиск Реклама Реклама в оффлайне


Слайд 7

SMS и WAP-push Разработка собственной платформы Большие вложения Много операторов (для обеспечения полного покрытия) Недостаточная загрузка (если услуга идёт на продажу) Технические операторы Только платформа и номера Полный аутсорсинг Достаточно предоставить контент Простота подключения Может быть небольшой объём


Слайд 8

Ссылки по SMS Несколько компаний devinosms.com plasticmedia.ru smstraffic.ru Технические ресурсы smsforum.net – подробное описание SMPP Kannel (С) и OpenSmpp (Java) – Open Source gateways PHP SMPP API


Слайд 9

Техническая часть Материалы Спецификации на сайте OMA developershome.com – куча туториалов


Слайд 10

Инструментарий разработчика Расширения FireFox: wmlbrowser (WBMP не поддерживается) XHTML Mobile Profile (application/vnd.wap.xhtml+xml) Modify Headers User Agent Switcher Opera Нативная поддержка WML Настоящие телефоны и КПК Никакие эмуляторы не спасают Средства создания прототипов


Слайд 11

Обычный сайт в PDA Семантическая верстка (DIV’ами) Таблицы будут вжиматься на маленький экран Специальный лист стилей <link media=“handheld” href="styles.css" /> xHTML не обязателен Но желателен, чтобы избежать неопределённостей Незаточенность под JS Rich Applications приходится переписывать Часто не нужно менять наполнение, но в некоторых случаях стоит менять структуру сайта.


Слайд 12

Что нужно помнить о WAP Повсеместный UTF-8 В заголовках: charset=UTF-8 В начале файла: <?xml encoding="UTF-8"?> xHTML Если ошибка «не могу отобразить страницу» - первым делом идём в валидатор Правильный content-type


Слайд 13

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


Слайд 14

Структура 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>


Слайд 15

Структура 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>


Слайд 16

Структура 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>


Слайд 17

Структура 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>


Слайд 18

Формы в WML <input name="myName"/><br/> <anchor> <go method="get" href="processing.php"> <postfield name="name" value="$(myName)"/> </go> Submit Data </anchor>


Слайд 19

WML Events ontimer срабатывает через value*0.1 секунд onenterbackward / onenterforward при нажатии кнопки back / forward в браузере телефона onpick при выборе пункта в select Внутри <onevent> можно использовать <go />, <prev> и <refresh> Для чего нужно: Перезагрузка страницы, перенарправление Возврат к форме


Слайд 20

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>


Слайд 21

Переадресация Не мало телефонов Не воспринимают HTTP переадресацию Код 201 для них равен 200 Ограниченная поддержка WAP 2.0 Некоторые просто забивают на <meta http-equiv="refresh" Нужно перенаправить? Выдаём HTTP заголовок Пишем WML c таймером Ставим ссылку (на всякий случай)


Слайд 22

Cookies и кеш Многие телефоны не поддерживают cookies Процент гораздо выше, чем в WEB Идентификатор сессии – в URL Ссылку не пересылают Добавят в избранное – можно будет узнать Кеш очень маленький Не стоит забивать его неповторяющимся контентом Но дизайн кешировать навечно


Слайд 23

Выдача нужного контента Жестко по субдоменам Wap.site.ru – WAP, pda.site.ru – PDA Ещё вариант – короткий домен (например li.ru) Определяем по запросу По USER_AGENT Заголовок Accept Комбинированный Определяем по запросу Перенаправляем на нужный субдомен (алиас) Субдомен – дополнительный фактор определения


Слайд 24

Устранение дублирования Дублирование в шаблонах полностью не устранить. Можно только уменьшить будущие проблемы. Методы: Инкапсуляция отдельных элементов (например форм) Единый дизайн Для «раскраски» в WAP 2.0 использовать <style> Избегать специфики (например WMLScript)


Слайд 25

Юзабилити Практически любой сайт можно автоматически преобразовать в формат для телефона (в т.ч. заменив/убрав картинки и прочее). Но это не сделает его удобным для пользователя W3C выпустила !рекомендации! для создателей wap сайтов. К ним стоит прислушаться.


Слайд 26

Среда пользователя Не основное занятие Работа при перемещении Частые прерывания (не единственная задача) Более конкретные цели Не сёрфят от нечего делать Нет желания читать (исключение – книги) Маленький экран, неудобный ввод Небольшой контекст, не видно остального Много вводить сложно (исключение – чаты) Скроллинг и выбор ссылки – одна и та же кнопка.


Слайд 27

Параметры телефонов Сильно различающиеся экраны Размер экранов может отличаться в разы Абсолютные размеры «не работают» Кол-во цветом может быть сильно разным (в т.ч. 2) Не стадартизированный интерфейс телефона Кнопки back иногда нет (или пользователь о ней не знает) Не все символы одинаковы Многие служебные символы вводятся 4-6 нажатиями Не стоит требовать сложных паролей


Слайд 28

That’s all Спасибо за внимание Александр Буянов alexander@buyanov.ru


×

HTML:





Ссылка: