windows phone и html5
DESCRIPTION
WPH203. Эксперт по технологиям разработки ПО. Microsoft. Windows Phone и HTML5. Константин Кичинский. Мы рассмотрим три вопроса:. Mobile factor. IE9 Mango + HTML5. Going native. 1 Мобильный фактор. Мобильный веб прошел длинный путь. Прошлый век. 4 года назад. Сегодня. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/1.jpg)
![Page 2: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/2.jpg)
WPH203
Windows Phone и HTML5
Константин КичинскийЭксперт по технологиям разработки ПОMicrosoft
![Page 3: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/3.jpg)
Мы рассмотрим три вопроса:
Mobile factorIE9 Mango + HTML5 Going native
![Page 4: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/4.jpg)
1Мобильный фактор
![Page 5: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/5.jpg)
Мобильный веб прошел длинный путь
Прошлый век 4 года назад Сегодня
![Page 6: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/6.jpg)
Сегодня более 1 млрд. пользователейширокополосного мобильного интернетав СНГ — 42 млн. пользователей
Source: International Telecom Union (http://www.itu.int/ITU-D/ict/statistics/at_glance/KeyTelecom.html)
![Page 7: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/7.jpg)
Мобильный веб быстро становится основным способом доступа в интернетособенно в развивающихся странах
US/UK China India Egypt0%
10%
20%
30%
40%
50%
60%
70%
80%
25%30%
59%
70%
Mobile only web users
![Page 8: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/8.jpg)
Браузер — это приложение #1 по проведенному пользователем времени, съедающее 50% мобильного траффика.
Source: Zokem study, September 2010
![Page 9: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/9.jpg)
Откуда такой интерес к веб-приложениям?
Идеально при быстрой итерационной разработке и отдаче контента по подпискеАрхитектурное удобство при разработке под множество мобильных (и десктопных) платформПростая модель распространения и обновленияЗначительная экономия на QA и повторном использовании кода
![Page 10: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/10.jpg)
Возможности веб-приложений догоняют возможности нативных приложенийК 2013 ключевые возможности нативных
приложений будут доступны в “HTML5”, позволяя тем самым делать веб-приложения, сравнимые с нативными.1
GeolocationMotion Detection Media CaptureContactsMessagingCalendarFiles
2010 2011 2012 2013
1Source: Global Intelligence Alliance Apr 2010
![Page 11: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/11.jpg)
Мобильный форм-фактор
Полная клавиатура
Точный указатель (мышь)
Большой экран, несколько мониторов
Мощные CPU / GPU, большой HDD
Ограниченная/виртуальная клавиатура
Пальцы как устройства ввода
Маленький поворачивающийся экран
Менее мощные CPU / GPU, маленький HDDPH
YS
ICA
LE
XPE
RIE
NC
E
Фиксированное и предсказуемоеместо использования
Хорошо для погружения в информацию
Легкое переключение между задачами
Пользователь сконцентрирован
Обычно используется на ходуи в непредсказуемом окружении
Быстрое схватывание информации
Фокус на отдельных задачах
Пользователь часто отвлекается или занят
![Page 12: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/12.jpg)
Адаптация для мобильных устройств
Ничего не делатьБазовая
адаптацияКонтент подходитдля разных целей
Дизайн под мобильную платформу
Нет специальной адаптации, результат — это десктопный вариант, отдаваемый устройству.
Контент проектируется с учетом того, что он будет просматриваться на мобильных устройствах, специальные meta-теги подсказывают, что страница подготовлена для мобильного устройства.
Мобильному и десктопному браузерам отдается одна и тажа страница, но применяются разные стили. Части сайта спроектированы
специально для мобильного устройства, часто в отдельном домене или директории, редирект при необходимости.
![Page 13: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/13.jpg)
2Internet Explorer 9. Mango
![Page 14: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/14.jpg)
Что хотят от нас разработчики?
СовместимостьHTML5, XHTML, SVG, DOM, CSS3, ECMAScript 5 и т. д.
ПроизводительностьЦелостный подход к производительности, быстрый JavaScript, аппаратное ускорение графики
Веб-сайты как нативные приложенияУменьшение площади UI браузера, доступ к железу
Надежность и доверениеНет ActiveX-контролам, Browser Helper Objects и плагинам
![Page 15: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/15.jpg)
Понимание современных сайтов
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%
![Page 16: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/16.jpg)
демонстрация
Мобильные рыбки!
![Page 17: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/17.jpg)
Наш подход к “HTML5”
"HTML5" в широком смысле — это огромный набор технологий (>50 спецификаций)
Будут появляться новые спецификацииНе все спецификации готовы для реального внедрения
Некоторые заморожены в предварительном состоянииСовместимость может нарушаться от версии к версииНедостаточная кросс-браузерность реализаций
Подход Microsoft:Активно внедрять готовые для использования спецификации“Platform Preview” для разрабатываемых спецификацийHTML5 Labs (http://www.html5labs.com/) для нестабильных
![Page 18: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/18.jpg)
Поддержка в 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
![Page 19: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/19.jpg)
демонстрация
IE9 Mango + HTML5 Demos
![Page 20: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/20.jpg)
Viewport
Viewport контролирует, как контент размещается на экране мобильного устройства
Device Screen Document
Viewport
![Page 21: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/21.jpg)
Управление через 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" />
Страницы, разработанные для мобильных устройств должны об этом сказать:
![Page 22: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/22.jpg)
Управление через 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 Может ли пользовать изменять масштаб проекции.
![Page 23: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/23.jpg)
Использование CSS3 Media Queries
<link rel="stylesheet" media="screen and (max-width:800)" href="example.css" />
или
@media screen and (max-width:800) {...
}
Управление применением стилей в зависимости от разных характеристик устройства отображения
Размер окна, размер экрана, соотношение сторон, глубина цвета...
![Page 24: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/24.jpg)
Устройство Media Queries
![Page 25: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/25.jpg)
демонстрация
Viewport & CSS3 Media Queries
![Page 26: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/26.jpg)
Использование геолокации
Геолокация позволяет телефону понять, где онпо IP-адресу или данным о беспроводных сетяхчерез триангуляцию по точкам сотовых вышекчерез GPS по сигналу от спутника
Можно определить просто один раз или отслеживать Определение местоположения требует разрешения
“User Agents must not send location information to Web sites without the express permission of the user.”
![Page 27: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/27.jpg)
Использование геолокации
getCurrentPosition(successFn, errFn, options)watchPosition(successFn, errFn, options)clearWatch(watchID)
successFn(positionObject)errFn(positionErrorObject)
Geolocation APInavigator.geolocation
![Page 28: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/28.jpg)
демонстрация
HTML5 Geolocation
![Page 29: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/29.jpg)
Локальное хранение данных
getItem(key)setItem(key, value)removeItem(key)clear()key(index)length
Удобный способ хранения данных (“cookies on steroids”)
window.localStorage & window.sessionStorage
![Page 30: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/30.jpg)
Что важно помнить о Web Storage
Данные хранятся как строки, если у вас не строковый тип данных, а например, объект, его надо самостоятельно сериализовывать и десериализовывать
Используйте JSON — нативная поддержка в IE9 (ECMAScript5)
Ограничение в 5Mb на домен
![Page 31: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/31.jpg)
Использование data:// URI
Встраивание контента (например, изображений) прямо в разметку или стили
Уменьшение количества HTTP-запросовIE9 разрешает “data URIs” до 4GbОбщий формат:data:[mime-type][;base64],<image data as text>
![Page 32: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/32.jpg)
Использование 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)
![Page 33: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/33.jpg)
IE9 Mango — основные возможности
Минимальный интерфейс самого браузераФокус на сайте, а не браузере
Уппаратное ускорение для HTML5Видео, рендеринг текста, отрисовка Canvas и SVG
Сильно улучшенная производительностьНовый движок для JavaScript "Chakra"
Совместимость через тот же движок, что и на десктопе
Поддержка готовых для использования стандартов
![Page 34: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/34.jpg)
IE9 Mango — ключевые технологии
Поддержка ключевых технологий мобильного веба
Поддержка Viewport <meta> тегаПоддержка W3C Geolocation, включая GPSПолная поддержка CSS3 Media Queries HTML5 Audio, Video (полноэкранное проигрывание), Canvas
DOM Local Storage и Session StorageЛокальное кеширование данных без использования куки
Data URIsУменьшение HTTP-запросов и улучшение скоростиМаксимальный размер увеличен до 4GB
![Page 35: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/35.jpg)
3Нативные приложения на HTML5
![Page 36: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/36.jpg)
Встраиваемый WebBrowser-контрол
Windows Phone предоставляет контрол для встраивания браузера
Тот же движок, что и в IE => HTML5, CSS3, JS, DOM…Не включает пользовательского интерфейса
Двусторонняя комуникация между приложением и страницей в контроле
![Page 37: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/37.jpg)
Основные сценарии для WebBrowser
Remote Hosted Content
Доверяем или нет?
Locally Hosted Content
Dynamic Content
Выполнение JavaScript
Использование AJAX
Взаимодействие с управляемым кодом
Доступ к WebStorage
![Page 38: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/38.jpg)
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)
![Page 39: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/39.jpg)
Что нужно помнить
JavaScript и Geolocation по умолчанию выключены
Не пытайтесь получить доступ к контенту раньше, чем он будет готов
Локальный контент имеет меньше ограничений
Внимательно смотрите, что вы передаете в скрипт
Куки не могут быть расшарены с Internet Explorer
![Page 40: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/40.jpg)
PhoneGap для Windows Phone и не только
http://phonegap.com
HTML5 + CSS3 JavaScript Code Native FeaturesMultiple
Platforms
![Page 41: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/41.jpg)
PhoneGap для Windows Phone и не только
AccelerometerCameraCompassContactsFileGeolocationMediaNetworkNotification (Alert, Sound, Vibration)
}
![Page 42: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/42.jpg)
демонстрация
PhoneGap
![Page 43: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/43.jpg)
PhoneGap для Windows Phone и не только
http://bit.ly/PhoneGapMangoIntrohttp://github.com/callback/callback-windows-phone
Код PhoneGap был внесен в Apache Software Foundation (ASF) под именем “Apache Callback” для развития в виде проекта с открытым исходным кодом.
![Page 44: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/44.jpg)
Резюме
1. Мобильный рынок — это важно(и уж точно важнее рынка IE6)
2. Помните о мобильном форм-факторе3. В Windows Phone настоящий Internet Explorer 9
С аппаратным ускорением и стандартамиНачинайте получать выгоду от использования "HTML5"
4. Расширяйтесь через native-возможностиНо помните о важности дизайна
![Page 45: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/45.jpg)
Обратная связь
Уважаемые участники!Ваше мнение очень важно для нас!В блокноте, который находится в инфопаке участника, вы найдете анкету для оценки докладовПожалуйста, оцените доклад и сдайте анкету при выходе из зала модераторуДля участия в конкурсе заполненных анкет, отметьте в анкете номер, который указан на вашем бейдже
Спасибо!
![Page 46: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/46.jpg)
Вопросы
WPH203Константин Кичинский
Эксперт по технологиям разработки ПО[email protected] http://blogs.msdn.com/kichinskyhttp://html5insight.ru
Вы сможете задать вопросы докладчику в зоне Microsoft в зале №17 в течение часа после завершения этой сессии
![Page 47: Windows Phone и HTML5](https://reader036.vdocument.in/reader036/viewer/2022062321/56813fe7550346895daad633/html5/thumbnails/47.jpg)