Windows Phone и HTML5

2. WPH203 Эксперт по технологиям разработки ПО Microsoft Windows Phone и HTML5 Константин Кичинский

3. Мы рассмотрим три вопроса: Mobile factor IE9 Mango + HTML5 Going native

4. 1Мобильныйфактор

5. Мобильный веб прошел длинный путь Прошлый век 4 года назад Сегодня

6. Сегодня более 1 млрд. пользователейширокополосного мобильного интернета • в СНГ — 42 млн. пользователей        Source: International Telecom Union (http://www.itu.int/ITU-D/ict/statistics/at_glance/KeyTelecom.html)

7. Мобильный веб быстро становится основным способом доступа в интернет • особенно в развивающихся странах

8. Браузер — это приложение #1 по проведенному пользователем времени, съедающее 50% мобильного траффика. Source: Zokem study, September 2010

9. Откуда такой интерес к веб-приложениям? • Идеально при быстрой итерационной разработке и отдаче контента по подписке • Архитектурное удобство при разработке под множество мобильных (и десктопных) платформ • Простая модель распространения и обновления • Значительная экономия на QA и повторном использовании кода

10. Возможности веб-приложений догоняют возможности нативных приложений • К 2013 ключевые возможности нативных приложений будут доступны в “HTML5”, позволяя тем самым делать веб-приложения, сравнимые с нативными.1 Files Geolocation Motion Detection Media Capture Contacts Messaging Calendar 2012 2010 2011 2013 1Source: Global Intelligence Alliance Apr 2010

11. Мобильный форм-фактор Ограниченная/виртуальная клавиатура Пальцы как устройства ввода Маленький поворачивающийся экран Менее мощные CPU / GPU, маленький HDD Полная клавиатура Точный указатель (мышь) Большой экран, несколько мониторов Мощные CPU / GPU, большой HDD Physical Обычно используется на ходуи в непредсказуемом окружении Быстрое схватывание информации Фокус на отдельных задачах Пользователь часто отвлекается или занят Фиксированное и предсказуемоеместо использования Хорошо для погружения в информацию Легкое переключение между задачами Пользователь сконцентрирован Experience

12. Адаптация для мобильных устройств Мобильному и десктопному браузерам отдается одна и тажа страница, но применяются разные стили. Нет специальной адаптации, результат — это десктопный вариант, отдаваемый устройству. Контент проектируется с учетом того, что он будет просматриваться на мобильных устройствах, специальные meta-теги подсказывают, что страница подготовлена для мобильного устройства. Части сайта спроектированы специально для мобильного устройства, часто в отдельном домене или директории, редирект при необходимости.

13. 2Internet Explorer 9. Mango

14. Что хотят от нас разработчики? • Совместимость • HTML5, XHTML, SVG, DOM, CSS3, ECMAScript 5 и т. д. • Производительность • Целостный подход к производительности, быстрыйJavaScript, аппаратное ускорение графики • Веб-сайты как нативные приложения • Уменьшение площади UI браузера, доступ к железу • Надежность и доверение • Нет ActiveX-контролам, Browser Helper Objects и плагинам

15. Понимание современных сайтов

16. Мобильные рыбки! демонстрация

17. Наш подход к “HTML5” • "HTML5" в широком смысле — это огромный набор технологий(>50 спецификаций) • Будут появляться новые спецификации • Не все спецификации готовы для реального внедрения • Некоторые заморожены в предварительном состоянии • Совместимость может нарушаться от версии к версии • Недостаточная кросс-браузерность реализаций • Подход Microsoft: • Активно внедрять готовые для использования спецификации • “Platform Preview” для разрабатываемых спецификаций • HTML5 Labs (http://www.html5labs.com/) для нестабильных

18. Поддержка в IE9 Mango (не полный список!) Cascading Style Sheets (CSS3) Media & Graphics 2D Transforms Colors Module HTML5 Canvas HTML5 Video Background/Borders Namespaces SVG Fonts Module Values & Units HTML5 Audio CSS Media Queries Selectors Additional Standards & Web Applications Support DOM Core Level 2/.3 Geolocation Semantic Elements Traversal & Range ECMAScript 5 XML Parse/Serial DOM Events Level 2/3 Selector APIs Level 2 DataURIs L2 HTML & Style ICC Color Profiles CSSOM View

19. IE9 Mango + HTML5 Demos демонстрация

20. Viewport • Viewport контролирует, как контент размещается на экране мобильного устройства Device Screen Document Viewport

21. Управление через Viewport • Страницы, разработанные для мобильных устройств должны об этом сказать: <meta name="HandheldFriendly" content="true" /> <meta name="MobileOptimized" content="320" /> <meta name="viewport" content="width=420" /> <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />

22. Управление через Viewport • Viewport разводит размер страницы и размер окна • опции для контроля за отображением страницы и тем, как пользователь может с ней взаимодействовать

23. Использование CSS3 Media Queries • Управление применением стилей в зависимости от разных характеристик устройства отображения • Размер окна, размер экрана, соотношение сторон, глубина цвета... <link rel="stylesheet" media="screen and (max-width:800)" href="example.css" /> или @media screen and (max-width:800){ ... }

24. Устройство Media Queries

25. Viewport & CSS3 Media Queries демонстрация

26. Использование геолокации • Геолокация позволяет телефону понять, где он • по IP-адресу или данным о беспроводных сетях • через триангуляцию по точкам сотовых вышек • через GPS по сигналу от спутника • Можно определить просто один раз или отслеживать • Определение местоположения требует разрешения • “User Agents must not send location information to Web sites without the express permission of the user.”

27. Использование геолокации • Geolocation API • navigator.geolocation getCurrentPosition(successFn, errFn, options) watchPosition(successFn, errFn, options) clearWatch(watchID) successFn(positionObject) errFn(positionErrorObject)

28. HTML5 Geolocation демонстрация

29. Локальное хранение данных • Удобный способ хранения данных (“cookies on steroids”) • window.localStorage& window.sessionStorage getItem(key) setItem(key, value) removeItem(key) clear() key(index) length

30. Что важно помнить о WebStorage • Данные хранятся как строки, если у вас не строковый тип данных, а например, объект, его надо самостоятельно сериализовывать и десериализовывать • Используйте JSON — нативная поддержка в IE9 (ECMAScript5) • Ограничение в 5Mb на домен

31. Использование data:// URI • Встраивание контента (например, изображений) прямо в разметку или стили • Уменьшение количества HTTP-запросов • IE9 разрешает“data URIs” до 4Gb • Общий формат: • data:[mime-type][;base64],<image data as text>

32. Использование data:// URI • data URIs вместо обычных указателей на ресурсы (URI) HTML <imgsrc="http://imagename.png" /> <imgsrc="data:image/png;base64,00af037491806ed... " /> CSS .rule { background-image:url("http://imagename.png") } .rule { background-image: url("data:image/png;base64,00af037491806ed... ") }

33. IE9 Mango — основные возможности • Минимальный интерфейс самого браузера • Фокус на сайте, а не браузере • Уппаратное ускорение дляHTML5 • Видео, рендеринг текста, отрисовка Canvas и SVG • Сильно улучшенная производительность • Новый движок для JavaScript "Chakra" • Совместимость через тот же движок, что и на десктопе • Поддержка готовых для использования стандартов

34. IE9 Mango — ключевые технологии • Поддержка ключевых технологий мобильного веба • Поддержка Viewport <meta> тега • Поддержка W3C Geolocation, включая GPS • Полная поддержка CSS3Media Queries • HTML5 Audio, Video (полноэкранное проигрывание), Canvas • DOM Local Storage и Session Storage • Локальное кеширование данных без использования куки • Data URIs • Уменьшение HTTP-запросов и улучшение скорости • Максимальный размер увеличен до 4GB

35. 3Нативные приложения на HTML5

36. Встраиваемый WebBrowser-контрол • Windows Phone предоставляет контрол для встраивания браузера • Тот же движок, что и в IE => HTML5, CSS3, JS, DOM… • Не включает пользовательского интерфейса • Двусторонняя комуникация между приложением и страницей в контроле

37. Основные сценарии для WebBrowser • Доверяем или нет? • Выполнение JavaScript • Использование AJAX • Взаимодействие с управляемым кодом • Доступ к WebStorage Dynamic Content LocallyHosted Content Remote Hosted Content

38. WebBrowserAPI Навигация Navigate(Uri uri); NavigateToString(string html); string SaveToString(); Управление поведением string Base { get; set; } boolIsScriptEnabled { get; set; } boolIsGeolocationEnabled { get; set; } Взаимодействите управляемого кода и скриптов InvokeScript(string script, string[] params)

39. Что нужно помнить • JavaScript и Geolocation по умолчанию выключены • Не пытайтесь получить доступ к контенту раньше, чем он будет готов • Локальный контент имеет меньше ограничений • Внимательно смотрите, что вы передаете в скрипт • Куки не могут быть расшарены с Internet Explorer

40. PhoneGapдля Windows Phone и не только • http://phonegap.com JavaScript Code Native Features Multiple Platforms HTML5 + CSS3

41. } PhoneGapдля Windows Phone и не только • Accelerometer • Camera • Compass • Contacts • File • Geolocation • Media • Network • Notification (Alert, Sound, Vibration)

42. PhoneGap демонстрация

43. PhoneGapдля Windows Phone и не только • http://bit.ly/PhoneGapMangoIntro • http://github.com/callback/callback-windows-phone • КодPhoneGapбыл внесен в Apache Software Foundation (ASF) под именем “Apache Callback” для развития в виде проекта с открытым исходным кодом.

44. Резюме • Мобильный рынок — это важно • (и уж точно важнее рынка IE6) • Помните о мобильном форм-факторе • В Windows Phone настоящий Internet Explorer 9 • С аппаратным ускорением и стандартами • Начинайте получать выгоду от использования "HTML5" • Расширяйтесь через native-возможности • Но помните о важности дизайна

45. Обратная связь Уважаемые участники! Ваше мнение очень важно для нас! В блокноте, который находится в инфопаке участника, вы найдете анкету для оценки докладов Пожалуйста, оцените доклад и сдайте анкету при выходе из зала модератору Для участия в конкурсе заполненных анкет, отметьте в анкете номер, который указан на вашем бейдже Спасибо!

46. Вопросы • WPH203 • Константин Кичинский • Эксперт по технологиям разработки ПО • konkich@microsoft.com • http://blogs.msdn.com/kichinsky • http://html5insight.ru • Вы сможете задать вопросы докладчику в зоне Microsoft в зале №17 в течение часа после завершения этой сессии