1 / 47

Windows Phone и HTML5

WPH203. Эксперт по технологиям разработки ПО. Microsoft. Windows Phone и HTML5. Константин Кичинский. Мы рассмотрим три вопроса:. Mobile factor. IE9 Mango + HTML5. Going native. 1 Мобильный фактор. Мобильный веб прошел длинный путь. Прошлый век. 4 года назад. Сегодня.

nevin
Télécharger la présentation

Windows Phone и HTML5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

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

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

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

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

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

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

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

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

  12. 2Internet Explorer 9. Mango

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

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

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

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

  17. Поддержка в 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

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

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

  20. Управление через 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" />

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

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

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

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

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

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

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

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

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

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

  31. Использование 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... ") }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

More Related