Владимир Колесников Эксперт по технологиям разработки ПО vladkol@microsoft.com @ vladkol

1. Innovation Day Владимир Колесников Эксперт по технологиям разработки ПО vladkol@microsoft.com @vladkol Введение в разработку Metro-приложений на Windows 8

2. Windows 8 Metro style Apps Desktop Apps HTML JavaScript XAML HTML / CSS View JavaScript (Chakra) C C++ C# VB Model Controller C# VB C C++ WinRT APIs Communication & Data Graphics & Media Devices & Printing System Services Internet Explorer Win32 .NET / SL Application Model Windows Core OS Services Core

3. WinRT API

4. APIMetro-приложений User Interface HTML5/CSS XAML DirectX Controls Data Binding SVG Tiles Input Accessibility Printing Devices Communications & Data Contracts Local & Cloud Storage Web Geolocation Portable Sensors NFC Notifications Streams Media Memory Management XML Networking SMS Playback Capture PlayTo Visual Effects Fundamentals Application Services Threading/Timers Memory Management Authentication Cryptography Globalization

5. демонстрация WinRTвC#

6. WinRT API — асинхронные WinRTAPI обеспечивают доступ к устройствам, операционной системе и сервисам WinRT API— native для C#, JavaScript и C++ Что мы увидели

7. Языковые проекции C++ App Объекты (или компоненты) WindowsRuntime Написаны на C++, C#, VB Проекиця C#/VB App CLR Проекция HTML App Chakra Проекция Windows Metadata

8. Дизайн в стиле Metro

9. Дизайн в стиле Metro Быстрое и подвижное Прекрасно при «парковке» и масштабировании Использует правильные контракты Инвестирует в великолепную плитку Кажется соединенным и живым Синхронизируется через облако Принимает принципы Metro 8 характеристик Metro-приложений

10. Контент на первом месте

11. Все начинается с контента. Дайте пользователям возможность погрузиться в то, что им нравится Оставьте на экране только самые важные элементы, чтобы уменьшить раздражители Обычно «оболочка» добавляется для: Компоновки Взаимодействий Навигации Контент на первом месте

12. Обеспечьте достаточно пространства контенту Свободное пространство обрамляет контент и позволяет глазам сфокусироваться в нужном месте Не используйте линии и рамки как способ группировки и организации контента Компоновка

14. Используйте типографику, чтобы добавить ощущение структуры и иерархии вашему контенту Фиксированный набор размеров, насыщенностей и цветов позволяет передать важность блока информации Используйте стили по умолчанию, чтобы соответсвовать базовым размерам шрифта Компоновка

15. 42pt 20pt 11pt 9pt

17. Позвольте контенту заполнить пространство Используйте промотку только вдоль одного направления, чтобы создать чувство стабильности и поддержать механизм выбора элемента (подробнее далее) Помните об эргономике. Делайте промотку контента вдоль самой длинной стороны Горизонтальная — в ландшафтном режиме Вертикальная — в привязанном (snapped) режиме Компоновка

19. Создайте визуальное выравнивание, структуру и ясность, используя силуэт Metro-приложений Привязывайте элементы к сетке, чтобы создать структуру и баланс в композиции Используйте шаблоны Visual Studio для правильной компоновки Компоновка

22. Взаимодействие

23. Используйте панель приложения, чтобы при необходимости показать команды, вытянув ее снизу или сверху Используйте Charmsкак входную точку для контрактов поиска, общего доступа, настроек и доступа к устровствам Панель приложения Использование граней устройства http://msdn.microsoft.com/en-us/library/windows/apps/hh465302(v=VS.85).aspx

24. Используйте всплывающие блоки как легкий способ показать временные и контекстные элементы управления Всплывающие элементы Подтверждения или предупреждения Сбор информации http://msdn.microsoft.com/en-us/library/windows/apps/hh465341(v=VS.85).aspx

25. Представления должны показывать, где вы, а не куда вы можете пойти Используйте модель хаба и спицдля иерархии информации: Хаб: основная страница, содержащая верхнеуровневые секции, позволяет погрузиться в «спицы» Спица: показывает контент одной из секций, позволяет перейти к детальному представлению Избегайте постоянных элементов навигации вроде вкладок Используйте семантическое масштабирование для перехода между группами внутри списка в уплощенной иерархии Навигация по контенту

26. Hub Contoso Travel My Trips City Guide City Guide Last minute deals Featured destinations Spokes Featured Destinations Last Minute Deals My Trips Top Destinations for 2012 Barcelona, Spain Details 7 night Alaska Cruise Featured destinations Last Minute Deals My Trips 7 Night Alaska Cruise Barcelona, Spain Chicago (3/11 – 3/19) Weather7 days Attractions Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny Ocean View Cabins Upgrade from an inside cabin and save $43/night/person! Picture windows with ocean and port views From $2,099 — only $150/night/person based on double occupancy Suites Upgrade from an inside cabin and save $43/night/person! Picture windows with ocean and port view From $2,099 — only $150/night/person do Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny

27. Hub Contoso Travel My Trips Last minute deals Featured destinations Spokes Top Destinations for 2012 Featured Destinations Last Minute Deals My Trips Barcelona, Spain Details 7 night Alaska Cruise Featured destinations Last Minute Deals My Trips 7 Night Alaska Cruise Chicago (3/11 – 3/19) Barcelona, Spain Weather7 days Attractions Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny Ocean View Cabins Upgrade from an inside cabin and save $43/night/person! Picture windows with ocean and port views From $2,099 — only $150/night/person based on double occupancy Suites Upgrade from an inside cabin and save $43/night/person! Picture windows with ocean and port view From $2,099 — only $150/night/person do Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny

28. demo Семантическое масштабирование

29. Следуйте языку жестов в Windows 8 и используйте только этот набор: Сначала проектируйте для прикосновений Повернитедля поворота Сведитедля масштабирования Проведите для перемещения Нажмитедля основного действия Смотрите сессию с BUILD APP-391T: Designing Metro Style apps that are touch-optimized Нажмите и удерживайте, чтобы изучить Потяните с грани, чтобы вытищить панель Потяните, чтобы выбрать

30. Обеспечьте мгновенный визуальный отзыв при нажатиии реакцию при отпускании пальцев Действия должны быть отменяемы, чтобы пользователь мог безопасно исследовать Думайте не только о нажатиях, пользуйтесь жестами. Контент должен следовать за вашими пальцами. Прокрутка только в одном направлении.Это необходимо для операций выделения и более стабильного поведения Сначала проектируйте для прикосновений

31. demo «Парковка»

32. ИнтеграцияЖивые плитки, уведомления, контракты

33. Живые плитки Презентуют приложение пользователю Еще один способ взаимедействия и доставки контента Продолжают работать всегда Заставляют вернуться к себе

34. Обычные плитки Оба размера поддерживают обновление Запускают приложение Статический заголовок Два размера: Широкий (2x1) Квадратный (1x1)

35. Живые плитки Обновляются через несколько техник-шаблонов Шаблоны представляют собой способы отрисовки Текст, изображения или комбинация JPEG или PNG не более150 KB Анимация Локальное обновление или из «облака»

36. демонстрация Живые плитки

37. Дополнительные плиткиSecondary Tiles Закрепление контента или элементов приложения Инциируется приложением Необходимо подтверждение пользователя Создает персонализированный срез приложения Те же возможности, что и у обычных плиток

38. Всплавающие уведомленияToast Notifications Позволяют пользователю переходить сразу к соответствующему разделу приложения Показывают сообщения от приложений и сервисов вне UI приложений Привлекают внимание Отключаемы Инициируются локально или из «облака»

39. Шаблоны уведомлений Таже архитектура шаблонов, что и у живых плиток

40. демонстрация Уведомления

41. App to App Picking contract Contact Picker File activation Play To contract Print task settings Protocol activation Search contract Settings contract Share contract Контракты – часть большого семейства

42. Контракты позволяют приложениям интегрироваться в систему и между собой

43. демонстрация Контракты в Windows 8

44. Разнообразие языков и библиотек для разработки

45. Платформа Windows 8 Metro style Apps Desktop Apps HTML JavaScript HTML / CSS XAML View JavaScript (Chakra) C C++ C# VB Model Controller C# VB C C++ WinRT APIs Devices & Printing Communication & Data Graphics & Media System Services .NET / SL Internet Explorer Win32 Application Model Windows Core OS Services Core

46. HTML5 и JS

47. Windows 8 Metro style Apps Desktop Apps HTML JavaScript XAML HTML / CSS View JavaScript (Chakra) C C++ C# VB Model Controller C# VB C C++ WinRT APIs Communication & Data Graphics & Media Devices & Printing System Services Internet Explorer Win32 .NET / SL Application Model Windows Core OS Services Core Devices & Printing Communication & Data Graphics & Media System Services Application Model Windows Core OS Services Core

48. Вы можете создавать прекрасные сайты и Metro-приложенияс помощью веб-платформы Windows 8

49. Animation Frames CSS 2D Transforms CSS 3D Transforms CSS Animations CSS Backgrounds & Borders CSS Color CSS Flexbox CSS Fonts CSS Grid Alignment CSS Hyphenation CSS Image Values (Gradients) CSS Media Queries CSS multi-column Layout CSS Namespaces CSS OM Views CSS Positioned Floats (Exclusions) CSS Selectors CSS Transitions CSS Values and Units Data URI DOM Element Traversal DOM HTML DOM Level 3 Core DOM Level 3 Events DOM Style DOM Traversal and Range DOMParser and XMLSerializer ECMAScript 5 File Reader API File Saving FormData HTML5 Application Cache HTML5 async HTML5 Canvas HTML5 Drag and drop HTML5 Forms and Validation HTML5 Geolocation HTML5 History API HTML5 Parser HTML5 Sandbox HTML5 Selection HTML5 semantic elements HTML5 video and audio ICC Color Profiles IndexedDB Page Visibility Pointer (Mouse, Pen, and Touch) Events Resource Timing Selectors API Level 2 SVG Filter Effects SVG, standalone and in HTML Timing callbacks Web Messaging Web Sockets Web Workers XHTML/XML XMLHttpRequest (Level 2) Аппаратно ускоренная веб-платформа Windows 8

50. CSS3 Transforms Motion Layout Graphics Content flow 2D & 3D transforms Animations Transitions Grid Flexbox Gradients Text-shadow Multi-column, hyphenation Pagination Position float Аппаратное ускорение в Windows делает все это красивым и быстрым