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

Содержание

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

Слайд 1


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

vladkol@microsoft.com
@vladkol
Введение в разработку Metro-приложений на Windows

8





Innovation Day

Слайд 2Windows 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

Слайд 3WinRT API

Слайд 4API Metro-приложений

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

Слайд 6Что мы увидели
WinRT API — асинхронные
WinRT API обеспечивают доступ к устройствам,

операционной системе и сервисам
WinRT API — native для C#, JavaScript и C++

Слайд 7Языковые проекции
Объекты
(или компоненты) Windows Runtime

Написаны
на C++, C#, VB
Windows Metadata
C++

App

Проекиця

CLR

C#/VB App

Проекция

HTML App

Chakra

Проекция

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

Слайд 98 характеристик Metro-приложений
Дизайн в стиле Metro
Быстрое и подвижное
Прекрасно при «парковке» и

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

Слайд 10Контент на первом месте

Слайд 11Контент на первом месте
Все начинается с контента.
Дайте пользователям возможность погрузиться

в то, что им нравится

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

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

в нужном месте

Не используйте линии и рамки как способ группировки и организации контента

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

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

Слайд 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
Spokes
Details
My Trips
City Guide


City Guide

Слайд 27


Hub
Spokes
Details

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

Слайд 29Семантическое масштабирование
Проектируйте уменьшенное представление, чтобы показать понятную мета-информацию для ваших групп
Постарайтесь

уместить контент в 1-3 страницы
Линейная компоновка, используйте сетку для больших наборов данных

Вы можете добавить операции над группами в уменьшенном виде (выбор или переупорядочивание)
Например, в новостном приложении: выбрать источник новостей и закрепить на стартовую страницу или изменить порядок источников новостей

При изменении масштаба контекст для контента не должен меняться
Семантическое масштабирование не является средством перехода между разными уровнями иерархии

http://msdn.microsoft.com/en-us/library/windows/apps/hh465319(v=VS.85).aspx

Слайд 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

Слайд 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

Слайд 49HTML5 и JS

Слайд 50Windows 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


Слайд 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)



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

Слайд 55HTML5
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

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

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

с JS

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

CSS по умолчанию

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

Metro

Слайд 61C# и XAML

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

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

Слайд 64Visual Studio Designer

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


Interfaces

Enums

Structs

Delegates

Classes

Constructors

Static Members

Methods

Properties

Events

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

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

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

Слайд 69[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# код, который пишут сейчас…





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

Слайд 71C# код для 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; }


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

Слайд 74Архитектура 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

Слайд 75C++ возвращается

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

Template Library (WRL)
XAML

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

составляющих – часть ОС.

Слайд 78C++
Async
Parallel Patterns Library
С++ Accelerated Massive Parallelism

Win32
DirectX

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

Слайд 80XAML/C#/C++
HTML5 / JS / C++
HTML5 / JS / C++ / DirectX
XAML

/ C++ / DirectX

Гибридные приложения

Простой способ миграции существущих приложений в Metro-стиль
Игры с богатым интерфейсом и графические приложения

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

Слайд 82
Спасибо



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

vladkol@microsoft.com
@vladkol

Похожие презентации

Шаблон презентации 233
Импорт прайс-листовв базу данных ПК Мастер-Тур 548
Шаблон презентации Солнечная поляна Автор: Федотова Виктория Александровна, учитель начальных классов МОУ СОШ с. Лохово Черемховского р-на Иркутской. 228
Рекомендации учащимся начальной школы по оформлению презентаций 226
Шаблон 9 мая 256
Шаблон презентации 213

Обратная связь

Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое ThePresentation.ru?

Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.

Для правообладателей

Яндекс.Метрика