'

Введение в разработку Metro-приложений на Windows 8

Понравилась презентация – покажи это...





Слайд 0

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


Слайд 1

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 XAML HTML / CSS HTML JavaScript C C++ C# VB Desktop Apps Win32 .NET / SL Internet Explorer System Services View Model Controller Core


Слайд 2

WinRT API


Слайд 3

API Metro-приложений


Слайд 4

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


Слайд 5

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


Слайд 6

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


Слайд 7

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


Слайд 8

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


Слайд 9

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


Слайд 10

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


Слайд 11

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


Слайд 12


Слайд 13

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


Слайд 14


Слайд 15


Слайд 16

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


Слайд 17


Слайд 18

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


Слайд 19


Слайд 20


Слайд 21

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


Слайд 22

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


Слайд 23

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


Слайд 24

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


Слайд 25

Hub Spokes Details My Trips City Guide City Guide


Слайд 26

Hub Spokes Details


Слайд 27

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


Слайд 28

Семантическое масштабирование Проектируйте уменьшенное представление, чтобы показать понятную мета-информацию для ваших групп Постарайтесь уместить контент в 1-3 страницы Линейная компоновка, используйте сетку для больших наборов данных Вы можете добавить операции над группами в уменьшенном виде (выбор или переупорядочивание) Например, в новостном приложении: выбрать источник новостей и закрепить на стартовую страницу или изменить порядок источников новостей При изменении масштаба контекст для контента не должен меняться Семантическое масштабирование не является средством перехода между разными уровнями иерархии http://msdn.microsoft.com/en-us/library/windows/apps/hh465319(v=VS.85).aspx


Слайд 29

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


Слайд 30

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


Слайд 31

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


Слайд 32

demo «Парковка»


Слайд 33

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


Слайд 34

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


Слайд 35

Квадратный (1x1) Широкий (2x1) Обычные плитки


Слайд 36

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


Слайд 37

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


Слайд 38

Очередь обновлений на плитках


Слайд 39

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


Слайд 40

Всплавающие уведомления Toast Notifications


Слайд 41

Шаблоны уведомлений


Слайд 42

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


Слайд 43

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


Слайд 44

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


Слайд 45

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


Слайд 46

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


Слайд 47

Платформа Windows 8 Metro style Apps


Слайд 48

HTML5 и JS


Слайд 49

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 XAML HTML / CSS HTML JavaScript C C++ C# VB Desktop Apps Win32 .NET / SL Internet Explorer System Services View Model Controller Core


Слайд 50

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


Слайд 51

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


Слайд 52

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


Слайд 53

CSS3 Аппаратное ускорение в Windows делает все это красивым и быстрым


Слайд 54

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


Слайд 55

Metro-приложение на HTML5 и JS демонстрация


Слайд 56

WinJS


Слайд 57

Windows Library для JavaScript (WinJS) библиотека для создания приложений в стили Metro с JS


Слайд 58

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


Слайд 59

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


Слайд 60

C# и XAML


Слайд 61

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


Слайд 62

Metro-приложение на C# и XAML демонстрация


Слайд 63

Visual Studio Designer


Слайд 64

Практически всё напрямую отображается между Windows Runtime и .NET Primitives (strings, numbers, etc) Interfaces Enums Structs Delegates Classes Constructors Static Members Methods Properties Events


Слайд 65

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


Слайд 66

.NET автоматически отображает интерфейсы коллекций в их Windows Runtime эквиваленты


Слайд 67

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


Слайд 68

[DllImport("avicap32.dll", EntryPoint="capCreateCaptureWindow")] static extern int capCreateCaptureWindow( string lpszWindowName, int dwStyle, int X, int Y, int nWidth, int nHeight, int hwndParent, int nID); [DllImport("avicap32.dll")] static extern bool capGetDriverDescription( int wDriverIndex, [MarshalAs(UnmanagedType.LPTStr)] ref string lpszName, int cbName, [MarshalAs(UnmanagedType.LPTStr)] ref string lpszVer, int cbVer); // и ещё много такого же кода C# код, который пишут сейчас…


Слайд 69

Управляемый код Обычный Windows API


Слайд 70

C# код для Windows 8 using Windows.Media.Capture; var ui = new CameraCaptureUI(); ui.PhotoSettings.CroppedAspectRatio = new Size(4, 3); var file = await ui.CaptureFileAsync(CameraCaptureUIMode.Photo); if (file != null) { var bitmap = new BitmapImage() ; bitmap.SetSource(await file.OpenAsync(FileAccessMode.Read)); Photo.Source = bitmap; }


Слайд 71

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


Слайд 72

C++


Слайд 73

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


Слайд 74

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


Слайд 75

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


Слайд 76

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


Слайд 77

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


Слайд 78

Metro-приложение на C++ и XAML демонстрация


Слайд 79

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


Слайд 80

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


Слайд 81

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


×

HTML:





Ссылка: