Using Web tech to build for Windows 8 & Metro UIFrédéric HarperTechnical Evangelist - Microsoft Canada

@fharper | outofcomfortzone.net

Go Beyond Pixels – 2012-05-25

Sorry

I wanted to talk about Responsive Design…

I wanted to talk about Responsive Design… but Ethan Marcotte is here…

I wanted to talk about Web Standards…

I wanted to talk about Web Standards…but Jeffrey Zeldman is here…

So I figured it out that I could talk about cool stuff you can do with Web skills...

So I figured it out that I could talk about cool stuff you can do with Web skills... Windows 8 apps

I want to answers 3 questions today

I want to answers 3 questions today1. Is Windows 8 as awesome as it looks like?

I want to answers 3 questions today1. Is Windows 8 as awesome as it looks like?

2. What is this Metro Design thing?

I want to answers 3 questions today1. Is Windows 8 as awesome as it looks like?

2. What is this Metro Design thing?

3. Can I leverage my actual skills to create Metro Apps?

Windows 8

demo

I have good news for you…

If you know HTML, CSS, and JavaScript, you are ready to build amazing Metro style apps.

Windows 8

Windows Core OS Services

JavaScript(Chakra)

CC++

C#VB

Metro style Apps

Communication

& Data

Application Model

Devices & Printing

WinRT APIsGraphics &

Media

XAML HTML / CSS

HTMLJavaScri

pt

CC++

C#VB

Desktop Apps

Win32

.NET / SL

Internet Explore

r

Syst

em

Serv

ices

Vie

wM

od

el

Contr

olle

rC

ore

Windows 8

Windows Core OS Services

JavaScript(Chakra)

CC++

C#VB

Metro style Apps

Communication

& Data

Application Model

Devices & Printing

WinRT APIsGraphics &

Media

XAML HTML / CSS

HTMLJavaScri

pt

CC++

C#VB

Desktop Apps

Win32

.NET / SL

Internet Explore

r

Syst

em

Serv

ices

Vie

wM

od

el

Contr

olle

rC

ore Windows Core OS Services

Communication

& Data

Application Model

Devices & Printing

Graphics & Media

Syst

em

Serv

ices

Core

HTML 5

Windows 8 hardware-accelerated web platformAnimation 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)

HTML5 demos

demo

Tools

Visual Studio 2011 Beta & Blend for Visual Studio 11 Beta

demo

WinJS

Windows Library for JavaScript (WinJS)A library for building Metro style apps using JavaScript

Web technologies you’re already familiar with

Modern patterns for responsive, reliable apps

Use interactive design tools

Build your apps faster and with high quality

Matches the Windows Metro design style

Controls for common user experiences

Designed for touch as well as traditional input

Scales across form factors

Make your apps look and feel great

WinJSHelpers for Namespaces, Constructor Definition

Promises

App Model

Navigation

Page & User controls

Data binding

Controls

Animations

Templates

Utilities

Default CSS Styles

The Contoso Cookbook

demo

Prefer your own library? Go ahead! Adhere to the Metro UI and Windows personality

Understand our webcontext & sandboxing model

Mix & match work fine

You can build amazing sites and Metro style apps with the Windows 8 web platform

For a successful application, features are not enough

Windows 8 is all about UX, UI, and sexiness

8 Traits of a Metro-Styled App

1. Metro style design2. Fast and fluid3. Snap and scale beautifully4. Use the right contracts5. Invest in a great Tile6. Feel connected & alive7. Roam to the cloud8. Embrace Metro principles

Metro Style Design

Content Before Chrome

Content Before Chrome

Content comes first. Immerse users in the things they love

Leave only the most relevant elements on screen to minimize distractions

Layout

Layout

Give content breathing room

Use Typography to create a sense of structure and hierarchy in your contentRemove lines and boxes as a way to group and organize content

Interactions

Interaction

Integrate commands into the contentLeverage the edgeProvide commands contextually

Flyout

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

Collecting information Confirmations or warnings

Use Flyout as a lightweight way of showing transient, contextual UI

Navigation

Contoso Travel Featured destinations Last minute deals My Trips

Hu

bSpoke

sD

eta

ilsContoso 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 viewsFrom $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 viewFrom $2,099 — only $150/night/person do

My Trips Weather7 days

Chicago (3/11 – 3/19)Today54/43 Mostly Sunny

Today54/43 Mostly Sunny

Today54/43 Mostly Sunny

Today54/43 Mostly Sunny

Today54/43 Mostly Sunny

Attractions

My Trips Featured Destinations Top Destinations for 2012

Barcelona, Spain

My Trips City Guide City Guide

Hu

bSpoke

sD

eta

ilsContoso 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 viewsFrom $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 viewFrom $2,099 — only $150/night/person do

My Trips Weather7 days

Chicago (3/11 – 3/19)Today54/43 Mostly Sunny

Today54/43 Mostly Sunny

Today54/43 Mostly Sunny

Today54/43 Mostly Sunny

Today54/43 Mostly Sunny

Attractions

My Trips Featured Destinations

Top Destinations for 2012

Barcelona, Spain

Semantic Zoom

demo

Fast and Fluid

Design for touch first

Press and hold to learn

Tap for primary action Slide to pan Swipe to select

Turn to rotateSwipe from edge for app commandsPinch to zoom

Swipe from edge for system commands

Follow the Windows 8 touch language and use only the prescribed gesture set

Snap and Scale Beautifully

Design for Multiple Views

Widescreen (1366x768+) Snap view (required)Minimum (1024x768)

Portrait

People multi-task. An application can be displayed any one of these layouts:

Screen sizes

10” 1024x76813” 1400x105020” 1920x108030” 2560x160011.6” 1366x768

Snapped

demo

Use the Right Contracts

Windows 8 Contracts

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

1+1=3. Leverage other apps to complete scenariosCharms provide a consistent invocation model that users can always confidently rely onStart with the VS Item Template (available for Search, Share, File Picker extension)

We did the big workShare

Search

File Picker Extension

Setting

Contracts

demo

Connected and Alive

Notifications

Embrace Metro Principles

Metro Style Design PrinciplesPride in craftsmanshipSweat the details. Pixels matter

Do more with lessContent before chrome

Be fast and fluidPurposeful motions and direct interactions

Authentically digitalGo beyond real world metaphors and material

Win as oneLeverage the ecosystem

Let me repeat myself...

If you know web technologies, you are ready to build amazing Metro style apps.

Where can I get started? Try Windows 8http://windows.com

Windows 8 Developers guide http://dev.windows.com Design resourceshttp://design.windows.com

Awesome Canadian bloghttp://w00t.ms

Questions

Frédéric Harper

Technical Evangelistfredh@microsoft.com@fharper

http://webnotwar.cahttp://outofcomfortzone.net