msdevcon.ru#msdevcon

ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8 Константин Кичинский Microsoft

Содержание Пальцы, пальцы, пальцы Адаптация Закрепление Контракты, листание Стандарты, плагины и т.п. Приложения

ПАЛЬЦЫ, ПАЛЬЦЫ, ПАЛЬЦЫ

Windows 8/RT

Touch (Keyboard) Keyboard (Touch) Keyboard (Touch)

Рекомендации Забудьте про hover Не открывайте содержимое при наведение указателя. Планшеты не распознают пальцы над экраном. Если нужно показать меню, переведите это на событие onclick Быстрый фикс: сказать, что за ссылкой скрывается popup

DEMO ПОКАЗ МЕНЮ

Рекомендации Учитывайте поведение браузера Сжатие/расширение для масштабирования, прокрутка и т.п. Используйте -ms-touch-action для задания корректного поведения для вашего сайта.

Значения -ms-touch-action значениеповедение autoНачальное значение. Браузер определяет поведение для элемента. noneЭлемент не разрешает сенсорное поведение по умолчанию. pan-xЭлемент разрешает сдвиг по горизонтальной оси с помощью касания. pan-yЭлемент разрешает сдвиг по вертикальной оси с помощью касания. pinch-zoomЭлемент разрешает уменьшение. manipulation Элемент разрешает сдвиг и уменьшение с помощью касания. (Краткий эквивалент "pan-x pan-y pinch-zoom".) double-tap-zoomЭлемент разрешает масштабирование с помощью двойного касания. inherit Элемент наследует значение сенсорного действия с префиксом -ms от родительского элемента.

Пример canvas { /* запретить сдвиги, масштабирование и т.п. */ -ms-touch-action: none; } /* or */ canvas { /* запретить сдвиги, но разрешить масштабирование */ -ms-touch-action: double-tap-zoom; }

DEMO КОТИКИ

Рекомендации Подумайте, как ведут себя области с прокруткой. Вы можете управлять, каким образом осуществляется сдвиг и где размещены точки привязки. Используйте: -ms-scroll-snap-type -ms-scroll-snap-points-x -ms-scroll-snap-points-y

DEMO ЕЩЕ КОТИКИ

Рекомендация Учитывайте типы ввода, чтобы сенсорная клавиатура адаптировалась под тип данных Используйте правильные типы для input

DEMO ВВОД

Рекомендация Учитывайте размеры пальцев и способы держания устройств. 7 mm 2 mm

ЖЕСТЫ И СЕНСОРНОЕ УПРАВЛЕНИЕ

Рекомендации Pointer Events См. запись доклада Алены Гилевской с HTML5Camp

DEMO ВВОД ОТ ПАЛЬЦЕВ И НЕ ТОЛЬКО

Для жестов MSGesture Events Hammer.js eightmedia.github.com/hammer.js

АДАПТАЦИЯ

Адаптивные сайты Резиновые сайты адаптивные сайты CSS Media quiries Смена шаблонов/картинок, адаптация данных Мобильные версии сайтов Иногда имеет смысл рассмотреть отдельные мобильные сайты Большинство «адаптивных» сайтов, даже красивых, не приводят к снижению нагрузки на мобильный траффик.

ЗАКРЕПЛЕНИЕ

Pinned Sites ++ Сайты можно закреплять на стартовом экране То же самое, что было и раньше + Возможность отправлять нотификации на плитку

Нотификации

Feature Internet Explorer for the desktop Internet Explorer in the Windows UI Application NameYes 32x32 pixel iconYes Nav button colorYesNo TooltipYes Windows sizeYesNo Start URLYesNo Static jump listYes Dynamic jump listYes Overlay iconsYesNo FlashingYesNo Thumbnail toolbarYesNo Notifications offlineNoYes 144x144px Png badgeNoYes

DEMO ЗАКРЕПЛЕНИЕ САЙТА

КОНТРАКТЫ, ЛИСТАНИЕ

Превью сайта при использовании Share Идея: управлять тем, как ваш сайт будет выглядеть при отправке в другие приложения при использовании контракта общего доступа (Share). Заголовок Описание Превью

Управление текстом и превью // заголовок // обрезается до 160 символов My Title Text // описание // обрезается до 160 символов // превью

Silver Book There are no silver bullets. Just silver books.

Flip Ahead (листание страниц) Идея: листать сайт как страницы журнала (вперед и назад). Ориентировано на жесты, доступно в IE с новым Windows UI. Дополнение к существующим средствам перехода между страницами. IE может самостоятельно пытаться угадать «следующую» страницу, либо вы можете указать ее явно.

Flip Ahead (листание страниц) Укажите дополнительную мета-информацию на странице, используя стандартные механизмы: HTML 4.01 rel-атрибут в link-элементе.

Код для Flip Ahead // 1 st page // 2nd page // 3rd page

СТАНДАРТЫ, ПЛАГИНЫ

Стандарты и плагины Используйте актуальные стандарты Feature detection Рассчитывайте на будущую совместимость Старайтесь не использовать плагины В IE10 (desktop, new Windows UI) встроенная поддержка Flash. Это вопрос совместимости, а не потому что так правильно «для будущего». В IE c новым Windows UI отключены все другие плагины.

Стандарты ПлагиныСтандарты Видео и звукFlash, Silverlight, Apple Quicktime HTML5 audio, video ГрафикаFlash, Apple QuickTime, Silverlight, Java-приложения HTML5 Canvas CSS Animations, Tranitions, Transformatoins SVG Оффлайн и хранение данныхFlash, Java-приложения, Google Gears (устаревшее) Web Storage, File API, Indexed DB, Application Cache Сеть, передача данныхFlash, Java-приложенияWeb Sockets, XMLHttpRequest, CORS

modern.ie

ПРИЛОЖЕНИЯ

Связь сайта с приложением Идея: если у вас есть приложение для вашего сервиса, можно подсказать пользователю поставить его или даже запустить в нужном месте.

Разметка через мета-теги /* Required. Package-relative app ID from the application manifest. */ /* Required. Package family name of the app created by Microsoft Visual Studio when the app is published. */ /* Optional msApplication-Arguments msApplication-MinVersion msApplication-OptOut */

Обработка аргументов WinJS.Application.onmainwindowactivated = function (e) { if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) { if (e.detail.arguments) { // YOUR CODE HERE }

Контакты Константин Кичинский Microsoft & blogs.msdn.com/kichinskyblogs.msdn.com/kichinsky & html5insight.ruhtml5insight.ru

© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.