Your SlideShare is downloading. ×
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ

1,118

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,118
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. РАЗРАБОТКА МОБИЛЬНЫХ САЙТОВ.Цуканов Павелptsukanov@codereign.netSkype: cpp.tula
  • 2. О чѐм речь?• О том о чѐм вы и подумали – о сайтах, которые вы можете просматривать на мобильных устройствах.• Об истории – WAP, WML, XHTML, XHTML- MP• Нужны ли они?• О будущем – HTML5• О jQuery Mobile Framework
  • 3. И так история• Экскурс в историю• Всегда интересно узнать что было и к чему пришли.• Много интересных абревиатур – WAP, WML, XHTML-MP• WAP - Средство вытягивания денег 
  • 4. WMLWireless Markup Language (WML), основанный наXML, это язык разметки, предназначенный дляустройств, которые реализуют WirelessApplication Protocol (WAP) спецификацию, такиекак мобильные телефоны. Он обеспечиваетнавигацию, ввод данных, гиперссылки, текст,изображение и формы, так же, как и HTML
  • 5. WML
  • 6. XHTMLXHTML является HTML написанный с синтаксисомXML.Теги в XHTML такие же, как и в HTML. XHTMLимеет чистые и строгие структуры, которыйоблегчит обработку документов. Это особенноважно для беспроводных устройств, таких какмобильные телефоны, имеют ограниченныевычислительные мощности. Все основные веб-браузеры поддерживают XHTML.
  • 7. XHTML
  • 8. XHTML - BasicXHTML Basic представляет собой упрощеннуюверсию XHTML. Она предназначена для устройств сограниченной вычислительной мощностью ивозможностями, таких как мобильные телефоны,КПК, смарт-часы, пейджеры и т.д. XHTML Basic несодержит XHTML особенностей, которые трудноподдерживать на этих устройствах. Например,каскадные таблицы стилей, фреймы и сценарии неподдерживаются в XHTML Basic. Пример наhttp://www.w3.org/People/mimasa/test/schemas/xhtml-basic-sample.xml
  • 9. XHTML MP (Mobile Profile)XHTML Mobile Profile является официальнымязыком разметки в самой последней версииWAP 2.0. Это определено WAP Forum. WAPForum создала XHTML Mobile Profileосновываясь на XHTML Basic, с добавлениемнекоторых элементов и атрибутов из полнойверсии XHTML, таких как <i>, <b>, <small>,<big> и <hr>. XHTML Mobile Profileподдерживает упрощенную версию каскадныхтаблиц стилей называется WCSS / WAP CSS.
  • 10. XHTML MP
  • 11. XHTML MP
  • 12. HTML5• 5-ая версия HTML.• До сих пор находится в разработке!• Поддержка сильно зависит от браузера• Проверить свой браузер на готовность к HTML5 можете на http://html5test.com/
  • 13. Откуда дровишки? 115Кбит/с 473,6 Кбит/с 3,6 Mбит/с 600 Mбит/с (в теории) 1 Гбит/с (в теории)
  • 14. Браузеры• Встроенные. Предустановлены изготовителем телефонов. Последние версии подддерживают как минимум XHTML- MP.• Устанавливаемые. Самые известные − Opera Mini, Mobile − Google Chrome − Firefox
  • 15. Джентельментский набор• Смартфон на Android• IPhone, IPad• Windows Phone• Blackberry
  • 16. Так в чѐм же проблемаразработать мобильныйсайт? • Маленький экран. • Другой метод ввода информации. • ―Толстые пальцы‖. • Проблема низких скоростей и ограничений траффика всѐ ещѐ актуальна.
  • 17. Мобильный сайт, Обычный сайтили приложение? Исследования проведѐнные экспертом по юзабилити Якобом Нельсоном (http://www.useit.com/alertbox/mobile- usability.html) показывают 1. Для мобильных пользователей нужен отдельный сайт. 2. Нужна связь между мобильным и обычным сайтом. 3. Приложения предпочтителнее если ваши услуги ориентированы на мобильное использование
  • 18. Рекомендации• Существуют множество рекомендаций но основные сводятся к следующим приципам − Сокращение функциональности, необходимо устранить вещи, неявляющимися основными на мобильном сайте; − Сокращение содержание, необходимо уменьшить количество слов на основных страницах и переместить вторичную на других страницах − Увеличить элементы интерфейса, для решения проблемы "толстых пальцев".
  • 19. Однако не все с этимсогласны• Далеко не всем понравится урезанная версия сайта• Растѐт количество смартфонов, планшетников для которых такие ограничения становятся менее актуальны. В США 25% людей используют мобильные устройства как единственный способ выхода в Интернет.• Однако в других странах преобладает выход в Интернет с низкобюджетных устройств
  • 20. Немного цифр
  • 21. 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/ (Содержит ссылки на эмуляторы мобильных устройств).
  • 22. Мои рекомендации • Определится с целевой аудиторией вашего сайта • Если это пользователи с низкобюджетными устройствами, то использовать XHTML-MP • Если хотите больше – HTML5 • Список браузеров и их характеристик можно найти на http://www.quirksmode.org/mobile/
  • 23. Небольшой демо сайт • На http://tuladev.sitesmobile.codereign.net представлен небольшой демо сайт с примерами из текущего доклада. • Можете взять IPad или IPhone и попробовать как это работает. • После запуска сайта вы увидите, возможности HTML5 на мобильных устройствах • Итак по порядку.
  • 24. Viewports
  • 25. Visual viewport,Layout viewport
  • 26. Viewport на демо сайте• Устанавливает ширину = физической ширине устройства• Без начального масштабирования• С максимальным масштабированием = 2• А это наиболее часто встречаемая комбинация параметров.
  • 27. Video
  • 28. Video
  • 29. Audio
  • 30. Audio
  • 31. Input Text pattern="[0-9]*"
  • 32. Input Numbers
  • 33. Input Phone
  • 34. Link Call Phone, Send SMSMMS
  • 35. Input E-Mail
  • 36. Input File
  • 37. Input DateTime
  • 38. Input URL
  • 39. Javascript• Добавилась поддержка касания• Можно отлавливать такие события как − touchstart − touchend − touchmove − touchcancel• Touch != Mouse• В теории touch должен вызывать только на события касания, а не события мыши.Однако, слишком много вебсайтов используют события мыши, поэтому производители браузеров вынуждены поддерживать их.
  • 40. Тестирование• Нет ничего лучше чем реальное устройство.• Но если его нет - есть эмуляторы. Но они к сожалению не всегда повторяют поведение устройства.• Уже упоминал но повторю ссылку с эмуляторами http://sixrevisions.com/web-development/mobile-web- design-best-practices/• И http://www.asp.net/Mobile/device-simulators
  • 41. JQuery Mobilehttp://jquerymobile.com • Apple iOS: iPhone, iPod Touch, iPad (все версии) • Android: все устройства (все версии) • Blackberry • Windows Phone • ОЧЕНЬ внушительный список поддерживаемых браузеров на http://jquerymobile.com/gbs/
  • 42. Ключевые особенности• Построенный на JQuery знакомый синтаксис• Совместимость со всеми основными мобильными платформами — iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Mobile, bada, MeeGo и с базовой поддержкой всех устройств которые понимают HTML• Небольшой размер файла (12кб включающий функциональность для всех мобильных) и минимальная зависимость от изображений для увеличения скорости• Автоматическая инициализация с помощью HTML5 date-role атрибутов в разметке HTML, автоматически инициализирует все JQuery Mobile виджеты найденные на странице.• Простое API, рационализирующее процесс поддержки Touch, мыши, и других видов устройств ввода.• Новые модули расширяющие возможности сенсорного управления.• Мощные темы визуализации приложения делают весьма простым построение интерфейсов.
  • 43. Типичный шаблон
  • 44. Результат
  • 45. JQuery Mobile версия моего примера• Использовать реально легко.• Очень доступная и понятная документация. Все доступные возможности на http://jquerymobile.com/demos/1.1.1/• Поддержка как стандартных элементов ввода так и своих.• Решена моя головная боль – фиксированный Header/Footer.• Хотя без сюрпризов не обошлось. Framework по умолчанию загружает ссылки через AJAX.
  • 46. Конструктор
  • 47. Редактор тем
  • 48. Таким образом• Минимум кодирования превращает ваш HTML в мобильный.• Мало того использование AJAX при загрузке страниц уменьшает скорость загрузки и соответственно траффик.• На сайте можно запустить билдер, который позволит создать свою версию Framework с только необходимыми контролами.• На сайте есть неплохая подборка реальных мобильных сайтов на JQuery Mobile.
  • 49. Пожалуйста, Ваши Вопросы!!!

×