Innovation Day. Windows 8 Windows Core OS Services JavaScript (Chakra) C C++ C# VB Metro style Apps Communication & Data Application Model Devices & Printing. - презентация

1 Innovation Day

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

3 WinRT API

4 API Metro-приложений Fundamentals Application ServicesThreading/Timers Memory Management AuthenticationCryptographyGlobalization Devices GeolocationPortableSensorsNFC User Interface SVGTilesInputAccessibilityPrinting HTML5/CSSXAMLDirectXControlsData Binding Communications & Data Memory Management XMLNetworkingSMS NotificationsStreams ContractsLocal & Cloud StorageWeb Media PlaybackCapturePlayToVisual Effects

5 демонстрация

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

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

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

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

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

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

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

13

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

15 42pt 20pt 11pt 9pt

16

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

18

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

20

21

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

23 Использование граней устройства Используйте панель приложения, чтобы при необходимости показать команды, вытянув ее снизу или сверху Используйте Charms как входную точку для контрактов поиска, общего доступа, настроек и доступа к устровствам Панель приложения

24 Используйте всплывающие блоки как легкий способ показать временные и контекстные элементы управления Всплывающие элементы Сбор информации Подтверждения или предупреждения

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

26 Hub Spokes Details Contoso Travel Featured destinations Last minute deals 7 night Alaska Cruise Last Minute Deals Featured destinations Barcelona, Spain Last Minute Deals 7 Night Alaska Cruise 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 My Trips Weather 7 days Chicago (3/11 – 3/19) Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny Attractions My TripsFeatured Destinations Top Destinations for 2012 Barcelona, Spain My Trips City Guide

27 Hub Spokes Details Contoso Travel Featured destinations Last minute deals My Trips 7 night Alaska Cruise Last Minute Deals Featured destinations Barcelona, Spain Last Minute Deals 7 Night Alaska Cruise 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 My Trips Weather 7 days Chicago (3/11 – 3/19) Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny Attractions My Trips Featured Destinations Top Destinations for 2012 Barcelona, Spain

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

29 Проектируйте уменьшенное представление, чтобы показать понятную мета-информацию для ваших групп Постарайтесь уместить контент в 1-3 страницы Линейная компоновка, используйте сетку для больших наборов данных Вы можете добавить операции над группами в уменьшенном виде (выбор или переупорядочивание) Например, в новостном приложении: выбрать источник новостей и закрепить на стартовую страницу или изменить порядок источников новостей При изменении масштаба контекст для контента не должен меняться Семантическое масштабирование не является средством перехода между разными уровнями иерархии

30 Целенаправленные анимации Анимации привносят жизнь в Metro-приложения и поддерживают чувство отточенности и отполированности пользоватлеьского опыта Правильно используемые анимации создают чувство связанности и помогают выстроить доверие пользователя к интерфейсу приложения Используйте встроенные элементы управления со встроенной поддержкой анимаций! Используйте Animation Library, чтобы получить специально подготовленные анимации для различных сценариев Анимации должны иметь цель, а не быть визуальным украшением Смотрите также сессии с BUILD: APP-206T или APP-494T

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

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

33 demo «Парковка»

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

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

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

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

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

39 Очередь обновлений на плитках Возможна цикличная демонстрация пяти последних обновлений По умолчанию показывается только последнее обновления

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

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

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

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

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

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

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

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

48 Платформа Windows 8 Metro style Apps HTML JavaScrip t C C++ C# VB Desktop Apps Win3 2.NE T / SL Internet Explorer Communication & Data Application Model Devices & Printing WinRT APIs Graphics & Media System Services JavaScript (Chakra) C C++ C# VB XAMLHTML / CSS View Model Controller Windows Core OS Services Core

49 HTML5 и JS

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

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

52 Аппаратно ускоренная веб-платформа IE9 CSS 2D Transforms CSS Backgrounds & Borders CSS Color CSS Fonts CSS Media Queries CSS Namespaces CSS OM Views CSS Selectors 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 HTML5 Canvas HTML5 Geolocation HTML5 Selection HTML5 semantic elements HTML5 video and audio ICC Color Profiles Selectors API Level 2 SVG, standalone and in HTML XHTML/XML

53 Аппаратно ускоренная веб-платформа Windows 8 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)

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

55 HTML5 Web Sockets Web Workers IndexedDB Ecmascript 5 File API & Blobs Geolocation Audio tag Video tag Touch-first Pointer events Zoom regions Snap Points Forms Validation Input types Spell checking

56 демонстрация

57 WinJS

58 Windows Library для JavaScript (WinJS) библиотека для создания приложений в стили Metro с JS Знакомые вам веб-технологии Современные шаблоны для отзывчивых и надежных приложений Используйте интерактивные инструменты для дизайна Делайте быстрые и качественные приложения Соответствует Metro-дизайну Элементы управления для основных пользовательских задач Спроектировано как для прикосновений, так и для традиционных средств ввода Масштабируется для разных форм- факторов Делайте прекрасные и удобные приложения

59 WinJS Helpers for Namespaces, Constructor Definition Promises Модель приложения Навигация Page & User controls Связывание данных Элементы управления Анимации Шаблоны Утилиты Стили CSS по умолчанию

60 Если вы знаете веб-технологии, вы готовы создавать прекрасные приложения в стиле Metro

61 C# и XAML

62 У вас уже есть навыки разработки Metro-приложений на C# и VB

63 демонстрация

64 Visual Studio Designer Единый визуальный редактор для всех языков: C#, C++ и VB Общий интерфейс редактирования с Expression Blend Непротиворечивый разбор XAML Общий интерфейс редактирования где имеет смысл Каждый из инструментов оптимизирован для целевого использования и рабочих задач

65 Практически всё напрямую отображается между Windows Runtime и.NET Primitives (strings, numbers, etc) InterfacesEnumsStructsDelegatesClasses Constructors Static Members MethodsPropertiesEvents

66 Большинство различий между Windows Runtime и.NET скрыты

67 .NET автоматически отображает интерфейсы коллекций в их Windows Runtime эквиваленты IReadOnlyDictionary IMapView IEnumerable IIterable IList IVector IReadOnlyList IVectorView IDictionary IMap

68 Методы-расширения устраняют пробелы между Windows Runtime и управляемым кодом

69 C# код, который пишут сейчас…

70 Управляемый код Обычный Windows API Вручную написанные обёртки

71 C# код для Windows 8

72 Управляемый кодWindows 8 API Windows Runtime

73 C++

74 Архитектура Windows Runtime Metro-приложение Языковая поддержка (CLR, WinJS, CRT) Language Projection Windows Metadata & Namespace Web Host (HTML, CSS, JavaScript) Windows Core Runtime Broker Windows Runtime Core UIPickersControlsMedia XAMLStorageNetwork… DirectX Win32

75 C++ возвращается

76 C++ Visual C++ component extensions (C++/CX) Native WinRT Стандартная библиотека и STL Windows Runtime C++ Template Library (WRL) XAML

77 XAML и C++ мощное сочетание декларативной разработки UI и языковой платформы. Обе составляющих – часть ОС.

78 C++ Async Parallel Patterns Library С++ Accelerated Massive Parallelism Win32 DirectX

79 демонстрация

80 XAML/C#/C++HTML5 / JS / C++ HTML5 / JS / C++ / DirectXXAML / C++ / DirectX Гибридные приложения Простой способ миграции существущих приложений в Metro-стиль Игры с богатым интерфейсом и графические приложения

81 Портируйте приложения на Windows 8 и в metro-стиль

82 Спасибо Innovation Day