ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8
description
Transcript of ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8
![Page 2: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/2.jpg)
ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8Константин Кичинский
Microsoft
![Page 3: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/3.jpg)
СодержаниеПальцы, пальцы, пальцы
Адаптация
Закрепление
Контракты, листание
Стандарты, плагины и т.п.
Приложения
![Page 4: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/4.jpg)
ПАЛЬЦЫ, ПАЛЬЦЫ, ПАЛЬЦЫ
![Page 5: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/5.jpg)
Windows 8/RT
![Page 6: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/6.jpg)
Windows 8/RT
Touch(Keyboard)
Keyboard(Touch)
Keyboard(Touch)
![Page 7: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/7.jpg)
Рекомендации Забудьте про hoverНе открывайте содержимое при наведение указателя. Планшеты не распознают пальцы над экраном. Если нужно показать меню, переведите это на событие onclick
Быстрый фикс: сказать, что за ссылкой скрывается popup
![Page 8: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/8.jpg)
DEMO
ПОКАЗ МЕНЮ
![Page 9: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/9.jpg)
Рекомендации Учитывайте поведение браузераСжатие/расширение для масштабирования, прокрутка и т.п.
Используйте -ms-touch-action для задания корректного поведения для вашего сайта.
![Page 10: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/10.jpg)
Значения -ms-touch-actionзначение поведение
auto Начальное значение. Браузер определяет поведение для элемента.
none Элемент не разрешает сенсорное поведение по умолчанию.
pan-x Элемент разрешает сдвиг по горизонтальной оси с помощью касания.
pan-y Элемент разрешает сдвиг по вертикальной оси с помощью касания.
pinch-zoom Элемент разрешает уменьшение.
manipulation Элемент разрешает сдвиг и уменьшение с помощью касания. (Краткий эквивалент "pan-x pan-y pinch-zoom".)
double-tap-zoom Элемент разрешает масштабирование с помощью двойного касания.
inherit Элемент наследует значение сенсорного действия с префиксом -ms от родительского элемента.
![Page 11: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/11.jpg)
Примерcanvas {
/* запретить сдвиги, масштабирование и т.п. */-ms-touch-action: none;
}
/* or */
canvas { /* запретить сдвиги, но разрешить масштабирование */-ms-touch-action: double-tap-zoom;
}
![Page 12: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/12.jpg)
DEMO
КОТИКИ
![Page 13: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/13.jpg)
Рекомендации Подумайте, как ведут себя области с прокруткой.Вы можете управлять, каким образом осуществляется сдвиг и где размещены точки привязки.
Используйте: -ms-scroll-snap-type
-ms-scroll-snap-points-x
-ms-scroll-snap-points-y
![Page 14: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/14.jpg)
DEMO
ЕЩЕ КОТИКИ
![Page 15: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/15.jpg)
РекомендацияУчитывайте типы ввода, чтобы сенсорная клавиатура адаптировалась под тип данныхИспользуйте правильные типы для input
![Page 16: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/16.jpg)
DEMO
ВВОД
![Page 17: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/17.jpg)
РекомендацияУчитывайте размеры пальцев и способы держания устройств.
7 mm
2 mm
![Page 18: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/18.jpg)
ЖЕСТЫ И СЕНСОРНОЕ УПРАВЛЕНИЕ
![Page 19: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/19.jpg)
Рекомендации 1. Pointer Events
2. См. запись доклада Алены Гилевской с HTML5Camp
• http://www.techdays.ru/series/html5_camp_2013
• http://www.techdays.ru/videos/6728.html
![Page 20: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/20.jpg)
DEMO
ВВОД ОТ ПАЛЬЦЕВ И НЕ ТОЛЬКО
![Page 21: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/21.jpg)
Для жестовMSGesture Events
Hammer.js eightmedia.github.com/hammer.js
![Page 22: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/22.jpg)
АДАПТАЦИЯ
![Page 23: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/23.jpg)
Адаптивные сайтыРезиновые сайты адаптивные сайтыCSS Media quiries
Смена шаблонов/картинок, адаптация данных
Мобильные версии сайтовИногда имеет смысл рассмотреть отдельные мобильные сайты
Большинство «адаптивных» сайтов, даже красивых, не приводят к снижению нагрузки на мобильный траффик.
![Page 24: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/24.jpg)
ЗАКРЕПЛЕНИЕ
![Page 25: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/25.jpg)
Pinned Sites ++Сайты можно закреплять на стартовом экранеТо же самое, что было и раньше +
Возможность отправлять нотификации на плитку
http://www.buildmypinnedsite.com/
![Page 26: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/26.jpg)
Нотификации<meta name="msapplication-badge" content="frequency=30; polling-uri=http://mysite.com/id45453245/polling.xml"/>
<badge value="newMessage" /> <badge value="15" />
![Page 27: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/27.jpg)
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
![Page 28: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/28.jpg)
DEMO
ЗАКРЕПЛЕНИЕ САЙТА
![Page 29: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/29.jpg)
КОНТРАКТЫ, ЛИСТАНИЕ
![Page 30: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/30.jpg)
Превью сайта при использовании ShareИдея: управлять тем, как ваш сайт будет выглядеть при отправке в другие приложения при использовании контракта общего доступа (Share).Заголовок
Описание
Превью
![Page 31: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/31.jpg)
Управление текстом и превью// заголовок// обрезается до 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" />
![Page 32: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/32.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>
![Page 33: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/33.jpg)
Flip Ahead (листание страниц)Идея: листать сайт как страницы журнала (вперед и назад).Ориентировано на жесты, доступно в IE с новым Windows UI.
Дополнение к существующим средствам перехода между страницами.
IE может самостоятельно пытаться угадать «следующую» страницу, либо вы можете указать ее явно.
![Page 34: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/34.jpg)
Flip Ahead (листание страниц)Укажите дополнительную мета-информацию на странице, используя стандартные механизмы:HTML 4.01 rel-атрибут в link-элементе.
![Page 35: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/35.jpg)
Код для 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"/>
![Page 36: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/36.jpg)
СТАНДАРТЫ, ПЛАГИНЫ
![Page 37: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/37.jpg)
Стандарты и плагиныИспользуйте актуальные стандартыFeature detection
Рассчитывайте на будущую совместимость
Старайтесь не использовать плагиныВ IE10 (desktop, new Windows UI) встроенная поддержка Flash. Это вопрос совместимости, а не потому что так правильно «для будущего».
В IE c новым Windows UI отключены все другие плагины.
![Page 38: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/38.jpg)
СтандартыПлагины Стандарты
Видео и звук 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
![Page 39: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/39.jpg)
modern.ie
![Page 40: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/40.jpg)
ПРИЛОЖЕНИЯ
![Page 41: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/41.jpg)
Связь сайта с приложениемИдея: если у вас есть приложение для вашего сервиса, можно подсказать пользователю поставить его или даже запустить в нужном месте.
![Page 42: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/42.jpg)
Разметка через мета-теги/* 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
*/
![Page 43: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/43.jpg)
Обработка аргументовWinJS.Application.onmainwindowactivated = function (e) {
if (e.detail.kind ===Windows.ApplicationModel.Activation.ActivationKind.launch) { if (e.detail.arguments) {
// YOUR CODE HERE
} }
}
![Page 44: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/44.jpg)
Контакты
Константин КичинскийMicrosoft
[email protected] & @kichinsky
blogs.msdn.com/kichinsky & html5insight.ru
![Page 45: ТЫК-ТЫК, ЖМАК-ЖМАК, ИЛИ КАК ПОДГОТОВИТЬ САЙТ К WINDOWS 8](https://reader036.fdocuments.us/reader036/viewer/2022062315/56815aad550346895dc85184/html5/thumbnails/45.jpg)
© 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.