Upload
frederic-harper
View
1.117
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Citation preview
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 [email protected]@fharper
http://webnotwar.cahttp://outofcomfortzone.net