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

Windows 8

WinRT API

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

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

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

Языковые проекции

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

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

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

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

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

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

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

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

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

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

Всплывающие элементы Используйте всплывающие блоки как легкий способ показать временные и контекстные элементы управления

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

demo

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

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

Сначала проектируйте для прикосновений Следуйте языку жестов в Windows 8 и используйте только этот набор:

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

demo

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

Живые плитки

Обычные плитки

Живые плитки

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

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

Дополнительные плитки Secondary Tiles

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

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

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

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

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

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

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

Платформа Windows 8

HTML5 и JS

Windows 8

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

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

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

CSS3

HTML5

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

WinJS

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

WinJS

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

C# и XAML

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

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

Visual Studio Designer

Практически всё напрямую отображается между Windows Runtime и .NET

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

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

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

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

C# код для Windows 8

C++

Архитектура Windows Runtime

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

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

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

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

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

Гибридные приложения XAML/C#/C++

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