Windows Phone и HTML5

WPH203

Windows Phone и HTML5

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

Мы рассмотрим три вопроса:

Mobile factorIE9 Mango + HTML5 Going native

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

Мобильный веб прошел длинный путь

Прошлый век 4 года назад Сегодня

Сегодня более 1 млрд. пользователейширокополосного мобильного интернетав СНГ — 42 млн. пользователей

Source: International Telecom Union (http://www.itu.int/ITU-D/ict/statistics/at_glance/KeyTelecom.html)

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

US/UK China India Egypt0%

10%

20%

30%

40%

50%

60%

70%

80%

25%30%

59%

70%

Mobile only web users

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

Source: Zokem study, September 2010

Откуда такой интерес к веб-приложениям?

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

Возможности веб-приложений догоняют возможности нативных приложенийК 2013 ключевые возможности нативных

приложений будут доступны в “HTML5”, позволяя тем самым делать веб-приложения, сравнимые с нативными.1

GeolocationMotion Detection Media CaptureContactsMessagingCalendarFiles

2010 2011 2012 2013

1Source: Global Intelligence Alliance Apr 2010

Мобильный форм-фактор

Полная клавиатура

Точный указатель (мышь)

Большой экран, несколько мониторов

Мощные CPU / GPU, большой HDD

Ограниченная/виртуальная клавиатура

Пальцы как устройства ввода

Маленький поворачивающийся экран

Менее мощные CPU / GPU, маленький HDDPH

YS

ICA

LE

XPE

RIE

NC

E

Фиксированное и предсказуемоеместо использования

Хорошо для погружения в информацию

Легкое переключение между задачами

Пользователь сконцентрирован

Обычно используется на ходуи в непредсказуемом окружении

Быстрое схватывание информации

Фокус на отдельных задачах

Пользователь часто отвлекается или занят

Адаптация для мобильных устройств

Ничего не делатьБазовая

адаптацияКонтент подходитдля разных целей

Дизайн под мобильную платформу

Нет специальной адаптации, результат — это десктопный вариант, отдаваемый устройству.

Контент проектируется с учетом того, что он будет просматриваться на мобильных устройствах, специальные meta-теги подсказывают, что страница подготовлена для мобильного устройства.

Мобильному и десктопному браузерам отдается одна и тажа страница, но применяются разные стили. Части сайта спроектированы

специально для мобильного устройства, часто в отдельном домене или директории, редирект при необходимости.

2Internet Explorer 9. Mango

Что хотят от нас разработчики?

СовместимостьHTML5, XHTML, SVG, DOM, CSS3, ECMAScript 5 и т. д.

ПроизводительностьЦелостный подход к производительности, быстрый JavaScript, аппаратное ускорение графики

Веб-сайты как нативные приложенияУменьшение площади UI браузера, доступ к железу

Надежность и доверениеНет ActiveX-контролам, Browser Helper Objects и плагинам

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

1 35 69 1031371712052392733073413754094434775115455796136476817150

1000

2000

3000

4000

5000

6000

7000

8000

API Usage Over Top 7200 Sites

API (By Rank)

Nu

mb

er

of

Sit

es

API Rank %

indexOf 1 94%

getElementById 13 80%

addEventListener 27 65%

getComputedStyle 62 26%

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

Мобильные рыбки!

Наш подход к “HTML5”

"HTML5" в широком смысле — это огромный набор технологий (>50 спецификаций)

Будут появляться новые спецификацииНе все спецификации готовы для реального внедрения

Некоторые заморожены в предварительном состоянииСовместимость может нарушаться от версии к версииНедостаточная кросс-браузерность реализаций

Подход Microsoft:Активно внедрять готовые для использования спецификации“Platform Preview” для разрабатываемых спецификацийHTML5 Labs (http://www.html5labs.com/) для нестабильных

Поддержка в IE9 Mango (не полный список!)Media & Graphics

HTML5 Video

HTML5 Canvas

SVG

HTML5 Audio

Cascading Style Sheets (CSS3)

Background/Borders

2D Transforms

Fonts ModuleCSS Media Queries

Namespaces

Colors Module

Values & Units

Selectors

Additional Standards & Web Applications Support

Traversal & Range

DOM Core Level 2/.3

DOM Events Level 2/3L2 HTML & Style

ECMAScript 5

Geolocation

Selector APIs Level 2ICC Color Profiles

XML Parse/Serial

Semantic Elements

DataURIs

CSSOM View

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

IE9 Mango + HTML5 Demos

Viewport

Viewport контролирует, как контент размещается на экране мобильного устройства

Device Screen Document

Viewport

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

Страницы, разработанные для мобильных устройств должны об этом сказать:

Управление через Viewport

Viewport разводит размер страницы и размер окна

опции для контроля за отображением страницы и тем, как пользователь может с ней взаимодействоватьViewport Property Description

width Ширина Viewport в пикселях или "device-width". Windows Phone — 1024 (device-width=320), iPhone — 980.

height Высота Viewport в пикселях или "device-height".

initial-scale Начальный масштаб проекции. По умолчанию 1.0.

maximum-scale Максимальный масштаб проекции. От 0.1 до 10.0.

minimum-scale Минимальный масштаб проекции. От 0.1 до 10.0.

user-scalable Может ли пользовать изменять масштаб проекции.

Использование CSS3 Media Queries

<link rel="stylesheet" media="screen and (max-width:800)" href="example.css" />

или

@media screen and (max-width:800) {...

}

Управление применением стилей в зависимости от разных характеристик устройства отображения

Размер окна, размер экрана, соотношение сторон, глубина цвета...

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

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

Viewport & CSS3 Media Queries

Использование геолокации

Геолокация позволяет телефону понять, где онпо IP-адресу или данным о беспроводных сетяхчерез триангуляцию по точкам сотовых вышекчерез GPS по сигналу от спутника

Можно определить просто один раз или отслеживать Определение местоположения требует разрешения

“User Agents must not send location information to Web sites without the express permission of the user.”

Использование геолокации

getCurrentPosition(successFn, errFn, options)watchPosition(successFn, errFn, options)clearWatch(watchID)

successFn(positionObject)errFn(positionErrorObject)

Geolocation APInavigator.geolocation

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

HTML5 Geolocation

Локальное хранение данных

getItem(key)setItem(key, value)removeItem(key)clear()key(index)length

Удобный способ хранения данных (“cookies on steroids”)

window.localStorage & window.sessionStorage

Что важно помнить о Web Storage

Данные хранятся как строки, если у вас не строковый тип данных, а например, объект, его надо самостоятельно сериализовывать и десериализовывать

Используйте JSON — нативная поддержка в IE9 (ECMAScript5)

Ограничение в 5Mb на домен

Использование data:// URI

Встраивание контента (например, изображений) прямо в разметку или стили

Уменьшение количества HTTP-запросовIE9 разрешает “data URIs” до 4GbОбщий формат:data:[mime-type][;base64],<image data as text>

Использование data:// URI

HTML<img src="http://imagename.png" /><img src="data:image/png;base64,00af037491806ed... " />

CSS.rule { background-image:url("http://imagename.png") }.rule { background-image:

url("data:image/png;base64,00af037491806ed... ") }

data URIs вместо обычных указателей на ресурсы (URI)

IE9 Mango — основные возможности

Минимальный интерфейс самого браузераФокус на сайте, а не браузере

Уппаратное ускорение для HTML5Видео, рендеринг текста, отрисовка Canvas и SVG

Сильно улучшенная производительностьНовый движок для JavaScript "Chakra"

Совместимость через тот же движок, что и на десктопе

Поддержка готовых для использования стандартов

IE9 Mango — ключевые технологии

Поддержка ключевых технологий мобильного веба

Поддержка Viewport <meta> тегаПоддержка W3C Geolocation, включая GPSПолная поддержка CSS3 Media Queries HTML5 Audio, Video (полноэкранное проигрывание), Canvas

DOM Local Storage и Session StorageЛокальное кеширование данных без использования куки

Data URIsУменьшение HTTP-запросов и улучшение скоростиМаксимальный размер увеличен до 4GB

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

Встраиваемый WebBrowser-контрол

Windows Phone предоставляет контрол для встраивания браузера

Тот же движок, что и в IE => HTML5, CSS3, JS, DOM…Не включает пользовательского интерфейса

Двусторонняя комуникация между приложением и страницей в контроле

Основные сценарии для WebBrowser

Remote Hosted Content

Доверяем или нет?

Locally Hosted Content

Dynamic Content

Выполнение JavaScript

Использование AJAX

Взаимодействие с управляемым кодом

Доступ к WebStorage

WebBrowser APIНавигация

Navigate(Uri uri);NavigateToString(string html);string SaveToString();

string Base { get; set; }bool IsScriptEnabled { get; set; }bool IsGeolocationEnabled { get; set; }

Управление поведением

Взаимодействите управляемого кода и скриптовInvokeScript(string script, string[] params)

Что нужно помнить

JavaScript и Geolocation по умолчанию выключены

Не пытайтесь получить доступ к контенту раньше, чем он будет готов

Локальный контент имеет меньше ограничений

Внимательно смотрите, что вы передаете в скрипт

Куки не могут быть расшарены с Internet Explorer

PhoneGap для Windows Phone и не только

http://phonegap.com

HTML5 + CSS3 JavaScript Code Native FeaturesMultiple

Platforms

PhoneGap для Windows Phone и не только

AccelerometerCameraCompassContactsFileGeolocationMediaNetworkNotification (Alert, Sound, Vibration)

}

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

PhoneGap

PhoneGap для Windows Phone и не только

http://bit.ly/PhoneGapMangoIntrohttp://github.com/callback/callback-windows-phone

Код PhoneGap был внесен в Apache Software Foundation (ASF) под именем “Apache Callback” для развития в виде проекта с открытым исходным кодом.

Резюме

1. Мобильный рынок — это важно(и уж точно важнее рынка IE6)

2. Помните о мобильном форм-факторе3. В Windows Phone настоящий Internet Explorer 9

С аппаратным ускорением и стандартамиНачинайте получать выгоду от использования "HTML5"

4. Расширяйтесь через native-возможностиНо помните о важности дизайна

Обратная связь

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

Спасибо!

Вопросы

WPH203Константин Кичинский

Эксперт по технологиям разработки ПО[email protected] http://blogs.msdn.com/kichinskyhttp://html5insight.ru

Вы сможете задать вопросы докладчику в зоне Microsoft в зале №17 в течение часа после завершения этой сессии