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

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

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

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

Windows 8/RT

Windows 8/RT Keyboard (Touch) Touch (Keyboard) Keyboard (Touch)

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

ПОКАЗ МЕНЮ

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

Значения -ms-touch-action

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

КОТИКИ

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

ЕЩЕ КОТИКИ

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

ВВОД

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

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

Рекомендации • Pointer Events • См. запись доклада Алены Гилевской с HTML5Camp • http://www.techdays.ru/series/html5_camp_2013 • http://www.techdays.ru/videos/6728.html

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

Для жестов • 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"/> <badgevalue="newMessage" /> <badgevalue="15" />

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

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

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

Управление текстом и превью // заголовок // обрезается до 160 символов <metaname="title"content="My Title Text"/> <title>My Title Text</title> // описание // обрезается до 160 символов <meta name="description"content="My description text." /> // превью <linkrel="image_src"href="my_image_link.jpg" /> <metaname="image" content="my_image_link.jpg" /> <metaname="thumbail"content="my_image_link.jpg" /> <metaproperty="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." /> <metaproperty="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 (листание страниц) • Укажите дополнительную мета-информацию на странице, используя стандартные механизмы: • HTML4.01rel-атрибут в link-элементе.

Код для Flip Ahead // 1st page <linkrel="next"href="/news/article1.aspx?page=2"/> // 2nd page <linkrel="next" href="/news/article2.aspx"/> <linkrel="prev"href="/news/article1.aspx"/> // 3rd page <linkrel="prev"href="/news/article1.aspx"/>

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

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

Стандарты

modern.ie

ПРИЛОЖЕНИЯ

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

Разметка через мета-теги /* Required. Package-relative app ID from the application manifest. */ <metaname="msApplication-ID"content="microsoft.build.App"/> /* Required. Package family name of the app created by Microsoft Visual Studio when the app is published. */ <metaname="msApplication-PackageFamilyName"content="microsoft.build_8wekyb3d8bbwe"/> /* 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 konkich@microsoft.com & @kichinsky blogs.msdn.com/kichinsky & html5insight.ru

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