Применение нейронных сетей и генетических алгоритмов при торговле на бирже.
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
1. РАЗРАБОТКА
МОБИЛЬНЫХ САЙТОВ.
Цуканов Павел
ptsukanov@codereign.net
Skype: cpp.tula
2. О чѐм речь?
• О том о чѐм вы и подумали – о сайтах,
которые вы можете просматривать на
мобильных устройствах.
• Об истории – WAP, WML, XHTML, XHTML-
MP
• Нужны ли они?
• О будущем – HTML5
• О jQuery Mobile Framework
3. И так история
• Экскурс в историю
• Всегда интересно узнать что было и к
чему пришли.
• Много интересных абревиатур – WAP,
WML, XHTML-MP
• WAP - Средство вытягивания денег
4.
5. WML
Wireless Markup Language (WML), основанный на
XML, это язык разметки, предназначенный для
устройств, которые реализуют Wireless
Application Protocol (WAP) спецификацию, такие
как мобильные телефоны. Он обеспечивает
навигацию, ввод данных, гиперссылки, текст,
изображение и формы, так же, как и HTML
7. XHTML
XHTML является HTML написанный с синтаксисом
XML.Теги в XHTML такие же, как и в HTML. XHTML
имеет чистые и строгие структуры, который
облегчит обработку документов. Это особенно
важно для беспроводных устройств, таких как
мобильные телефоны, имеют ограниченные
вычислительные мощности. Все основные веб-
браузеры поддерживают XHTML.
9. XHTML - Basic
XHTML Basic представляет собой упрощенную
версию XHTML. Она предназначена для устройств с
ограниченной вычислительной мощностью и
возможностями, таких как мобильные телефоны,
КПК, смарт-часы, пейджеры и т.д. XHTML Basic не
содержит XHTML особенностей, которые трудно
поддерживать на этих устройствах. Например,
каскадные таблицы стилей, фреймы и сценарии не
поддерживаются в XHTML Basic. Пример на
http://www.w3.org/People/mimasa/test/schemas/x
html-basic-sample.xml
10. XHTML MP (Mobile Profile)
XHTML Mobile Profile является официальным
языком разметки в самой последней версии
WAP 2.0. Это определено WAP Forum. WAP
Forum создала XHTML Mobile Profile
основываясь на XHTML Basic, с добавлением
некоторых элементов и атрибутов из полной
версии XHTML, таких как <i>, <b>, <small>,
<big> и <hr>. XHTML Mobile Profile
поддерживает упрощенную версию каскадных
таблиц стилей называется WCSS / WAP CSS.
13. HTML5
• 5-ая версия HTML.
• До сих пор находится в разработке!
• Поддержка сильно зависит от браузера
• Проверить свой браузер на готовность к
HTML5 можете на http://html5test.com/
14. Откуда дровишки?
115Кбит/с
473,6 Кбит/с
3,6 Mбит/с
600 Mбит/с (в
теории)
1 Гбит/с (в
теории)
15. Браузеры
• Встроенные. Предустановлены
изготовителем телефонов. Последние
версии подддерживают как минимум XHTML-
MP.
• Устанавливаемые. Самые известные
− Opera Mini, Mobile
− Google Chrome
− Firefox
17. Так в чѐм же проблема
разработать мобильный
сайт?
• Маленький экран.
• Другой метод ввода информации.
• ―Толстые пальцы‖.
• Проблема низких скоростей и ограничений
траффика всѐ ещѐ актуальна.
18. Мобильный сайт, Обычный сайт
или приложение?
Исследования проведѐнные
экспертом по юзабилити Якобом Нельсоном
(http://www.useit.com/alertbox/mobile-
usability.html) показывают
1. Для мобильных пользователей нужен
отдельный сайт.
2. Нужна связь между мобильным и обычным
сайтом.
3. Приложения предпочтителнее если ваши
услуги ориентированы на мобильное
использование
19. Рекомендации
• Существуют множество рекомендаций но
основные сводятся к следующим приципам
− Сокращение функциональности, необходимо
устранить вещи, неявляющимися основными на
мобильном сайте;
− Сокращение содержание, необходимо
уменьшить количество слов на основных
страницах и переместить вторичную на других
страницах
− Увеличить элементы интерфейса, для решения
проблемы "толстых пальцев".
20. Однако не все с этим
согласны
• Далеко не всем понравится урезанная версия
сайта
• Растѐт количество смартфонов, планшетников
для которых такие ограничения становятся
менее актуальны. В США 25% людей используют
мобильные устройства как единственный
способ выхода в Интернет.
• Однако в других странах преобладает выход в
Интернет с низкобюджетных устройств
22. Best practices
• http://www.w3.org/TR/mobile-bp
• http://mobilewebslinger.com/2012/04/2
0/16-mobile-website-best-practices/
• http://sixrevisions.com/web-
development/mobile-web-design-best-
practices/ (Содержит ссылки на
эмуляторы мобильных устройств).
23. Мои рекомендации
• Определится с целевой аудиторией
вашего сайта
• Если это пользователи с
низкобюджетными устройствами, то
использовать XHTML-MP
• Если хотите больше – HTML5
• Список браузеров и их характеристик
можно найти на
http://www.quirksmode.org/mobile/
24. Небольшой демо сайт
• На
http://tuladev.sitesmobile.codereign.net
представлен небольшой демо сайт с
примерами из текущего доклада.
• Можете взять IPad или IPhone и
попробовать как это работает.
• После запуска сайта вы увидите,
возможности HTML5 на мобильных
устройствах
• Итак по порядку.
27. Viewport на демо сайте
• Устанавливает ширину = физической ширине
устройства
• Без начального масштабирования
• С максимальным масштабированием = 2
• А это наиболее часто встречаемая комбинация
параметров.
40. Javascript
• Добавилась поддержка касания
• Можно отлавливать такие события как
− touchstart
− touchend
− touchmove
− touchcancel
• Touch != Mouse
• В теории touch должен вызывать только на события
касания, а не события мыши.Однако, слишком много
вебсайтов используют события мыши, поэтому
производители браузеров вынуждены поддерживать
их.
41. Тестирование
• Нет ничего лучше чем реальное устройство.
• Но если его нет - есть эмуляторы. Но они к
сожалению не всегда повторяют поведение
устройства.
• Уже упоминал но повторю ссылку с эмуляторами
http://sixrevisions.com/web-development/mobile-web-
design-best-practices/
• И http://www.asp.net/Mobile/device-simulators
42. JQuery Mobile
http://jquerymobile.com
• Apple iOS: iPhone, iPod Touch,
iPad (все версии)
• Android: все устройства (все
версии)
• Blackberry
• Windows Phone
• ОЧЕНЬ внушительный список
поддерживаемых браузеров на
http://jquerymobile.com/gbs/
43. Ключевые особенности
• Построенный на JQuery знакомый синтаксис
• Совместимость со всеми основными мобильными платформами — iOS, Android,
Blackberry, Palm WebOS, Nokia/Symbian, Windows Mobile, bada, MeeGo и с базовой
поддержкой всех устройств которые понимают HTML
• Небольшой размер файла (12кб включающий функциональность для всех
мобильных) и минимальная зависимость от изображений для увеличения
скорости
• Автоматическая инициализация с помощью HTML5 date-role атрибутов в разметке
HTML, автоматически инициализирует все JQuery Mobile виджеты найденные на
странице.
• Простое API, рационализирующее процесс поддержки Touch, мыши, и других
видов устройств ввода.
• Новые модули расширяющие возможности сенсорного управления.
• Мощные темы визуализации приложения делают весьма простым построение
интерфейсов.
46. JQuery Mobile версия
моего примера
• Использовать реально легко.
• Очень доступная и понятная документация. Все
доступные возможности на
http://jquerymobile.com/demos/1.1.1/
• Поддержка как стандартных элементов ввода так и
своих.
• Решена моя головная боль – фиксированный
Header/Footer.
• Хотя без сюрпризов не обошлось. Framework по
умолчанию загружает ссылки через AJAX.
49. Таким образом
• Минимум кодирования превращает ваш HTML в
мобильный.
• Мало того использование AJAX при загрузке
страниц уменьшает скорость загрузки и
соответственно траффик.
• На сайте можно запустить билдер, который
позволит создать свою версию Framework с
только необходимыми контролами.
• На сайте есть неплохая подборка реальных
мобильных сайтов на JQuery Mobile.
