ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К windows 8

msdevcon.ru #msdevcon

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

Microsoft

СодержаниеПальцы, пальцы, пальцы

Адаптация

Закрепление

Контракты, листание

Стандарты, плагины и т.п.

Приложения

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

Windows 8/RT

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

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

Рекомендации 1. Pointer Events

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

• http://www.techdays.ru/series/html5_camp_2013

• http://www.techdays.ru/videos/6728.html

DEMO

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

Для жестовMSGesture Events

Hammer.js eightmedia.github.com/hammer.js

АДАПТАЦИЯ

Адаптивные сайтыРезиновые сайты адаптивные сайтыCSS Media quiries

Смена шаблонов/картинок, адаптация данных

Мобильные версии сайтовИногда имеет смысл рассмотреть отдельные мобильные сайты

Большинство «адаптивных» сайтов, даже красивых, не приводят к снижению нагрузки на мобильный траффик.

ЗАКРЕПЛЕНИЕ

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

Возможность отправлять нотификации на плитку

http://www.buildmypinnedsite.com/

Нотификации<meta name="msapplication-badge" content="frequency=30; polling-uri=http://mysite.com/id45453245/polling.xml"/>

<badge value="newMessage" /> <badge value="15" />

Feature Internet Explorer for the desktop

Internet Explorer in the Windows UI

Application Name Yes Yes

32x32 pixel icon Yes Yes

Nav button color Yes No

Tooltip Yes Yes

Windows size Yes No

Start URL Yes No

Static jump list Yes Yes

Dynamic jump list Yes Yes

Overlay icons Yes No

Flashing Yes No

Thumbnail toolbar Yes No

Notifications offline No Yes

144x144px Png badge No Yes

DEMO

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

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

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

Описание

Превью

Управление текстом и превью// заголовок// обрезается до 160 символов<meta name="title" content="My Title Text" /><title>My Title Text</title>

// описание// обрезается до 160 символов<meta name="description" content="My description text." />

// превью<link rel="image_src" href="my_image_link.jpg" /> <meta name="image" content="my_image_link.jpg" /> <meta name="thumbail" content="my_image_link.jpg" /> <meta property="og:image" content="my_image_link.jpg" />

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Silver Book</title> <meta name="description" content="Примеры к слайдикам на DevCon." /> <meta property="og:image" content="{site}/Hello_kitty.png" /> </head><body> <h1>There are no silver bullets.

Just silver books.</h1></body></html>

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

Дополнение к существующим средствам перехода между страницами.

IE может самостоятельно пытаться угадать «следующую» страницу, либо вы можете указать ее явно.

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

Код для Flip Ahead// 1st page<link rel="next" href="/news/article1.aspx?page=2"/>

// 2nd page<link rel="next" href="/news/article2.aspx"/> <link rel="prev" href="/news/article1.aspx"/>

// 3rd page<link rel="prev" href="/news/article1.aspx"/>

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

Стандарты и плагиныИспользуйте актуальные стандарты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 CanvasCSS Animations, Tranitions, TransformatoinsSVG

Оффлайн и хранение данных

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. */<meta name="msApplication-ID" content="microsoft.build.App"/>

/* Required. Package family name of the app created by Microsoft Visual Studio when the app is published. */<meta name="msApplication-PackageFamilyName" content="microsoft.build_8wekyb3d8bbwe"/>

/* OptionalmsApplication-ArgumentsmsApplication-MinVersionmsApplication-OptOut

*/

Обработка аргументовWinJS.Application.onmainwindowactivated = function (e) {

if (e.detail.kind ===Windows.ApplicationModel.Activation.ActivationKind.launch) { if (e.detail.arguments) {

// YOUR CODE HERE

} }

}

Контакты

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

konkich@microsoft.com & @kichinsky

blogs.msdn.com/kichinsky & html5insight.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.