пальцы, пальцы, пальцы

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; pollinguri=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 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. */
<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"/>
/* 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
© 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.