go beyond pixels - 2012-05-25 - using web tech to build for windows 8 & metro ui
DESCRIPTION
TRANSCRIPT
![Page 1: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/1.jpg)
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
![Page 2: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/2.jpg)
Sorry
![Page 3: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/3.jpg)
I wanted to talk about Responsive Design…
![Page 4: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/4.jpg)
I wanted to talk about Responsive Design… but Ethan Marcotte is here…
![Page 5: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/5.jpg)
I wanted to talk about Web Standards…
![Page 6: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/6.jpg)
I wanted to talk about Web Standards…but Jeffrey Zeldman is here…
![Page 7: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/7.jpg)
So I figured it out that I could talk about cool stuff you can do with Web skills...
![Page 8: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/8.jpg)
So I figured it out that I could talk about cool stuff you can do with Web skills... Windows 8 apps
![Page 9: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/9.jpg)
I want to answers 3 questions today
![Page 10: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/10.jpg)
I want to answers 3 questions today1. Is Windows 8 as awesome as it looks like?
![Page 11: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/11.jpg)
I want to answers 3 questions today1. Is Windows 8 as awesome as it looks like?
2. What is this Metro Design thing?
![Page 12: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/12.jpg)
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?
![Page 13: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/13.jpg)
Windows 8
demo
![Page 14: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/14.jpg)
I have good news for you…
![Page 15: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/15.jpg)
If you know HTML, CSS, and JavaScript, you are ready to build amazing Metro style apps.
![Page 16: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/16.jpg)
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
![Page 17: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/17.jpg)
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
![Page 18: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/18.jpg)
HTML 5
![Page 19: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/19.jpg)
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)
![Page 20: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/20.jpg)
HTML5 demos
demo
![Page 21: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/21.jpg)
Tools
![Page 22: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/22.jpg)
Visual Studio 2011 Beta & Blend for Visual Studio 11 Beta
demo
![Page 23: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/23.jpg)
WinJS
![Page 24: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/24.jpg)
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
![Page 25: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/25.jpg)
WinJSHelpers for Namespaces, Constructor Definition
Promises
App Model
Navigation
Page & User controls
Data binding
Controls
Animations
Templates
Utilities
Default CSS Styles
![Page 26: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/26.jpg)
The Contoso Cookbook
demo
![Page 27: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/27.jpg)
Prefer your own library? Go ahead! Adhere to the Metro UI and Windows personality
Understand our webcontext & sandboxing model
Mix & match work fine
![Page 28: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/28.jpg)
You can build amazing sites and Metro style apps with the Windows 8 web platform
![Page 29: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/29.jpg)
For a successful application, features are not enough
![Page 30: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/30.jpg)
Windows 8 is all about UX, UI, and sexiness
![Page 31: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/31.jpg)
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
![Page 32: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/32.jpg)
Metro Style Design
![Page 33: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/33.jpg)
Content Before Chrome
![Page 34: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/34.jpg)
![Page 35: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/35.jpg)
![Page 36: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/36.jpg)
Content Before Chrome
Content comes first. Immerse users in the things they love
Leave only the most relevant elements on screen to minimize distractions
![Page 37: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/37.jpg)
Layout
![Page 38: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/38.jpg)
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
![Page 39: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/39.jpg)
![Page 40: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/40.jpg)
Interactions
![Page 41: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/41.jpg)
Interaction
Integrate commands into the contentLeverage the edgeProvide commands contextually
![Page 42: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/42.jpg)
![Page 43: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/43.jpg)
![Page 44: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/44.jpg)
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
![Page 45: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/45.jpg)
![Page 46: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/46.jpg)
Navigation
![Page 47: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/47.jpg)
Contoso Travel Featured destinations Last minute deals My Trips
![Page 48: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/48.jpg)
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
![Page 49: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/49.jpg)
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
![Page 50: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/50.jpg)
Semantic Zoom
demo
![Page 51: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/51.jpg)
Fast and Fluid
![Page 52: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/52.jpg)
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
![Page 53: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/53.jpg)
Snap and Scale Beautifully
![Page 54: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/54.jpg)
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:
![Page 55: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/55.jpg)
Screen sizes
10” 1024x76813” 1400x105020” 1920x108030” 2560x160011.6” 1366x768
![Page 56: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/56.jpg)
Snapped
demo
![Page 57: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/57.jpg)
Use the Right Contracts
![Page 58: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/58.jpg)
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)
![Page 59: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/59.jpg)
We did the big workShare
Search
File Picker Extension
Setting
![Page 60: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/60.jpg)
Contracts
demo
![Page 61: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/61.jpg)
Connected and Alive
![Page 62: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/62.jpg)
![Page 63: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/63.jpg)
Notifications
![Page 64: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/64.jpg)
Embrace Metro Principles
![Page 65: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/65.jpg)
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
![Page 66: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/66.jpg)
Let me repeat myself...
![Page 67: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/67.jpg)
If you know web technologies, you are ready to build amazing Metro style apps.
![Page 68: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/68.jpg)
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
![Page 69: Go Beyond Pixels - 2012-05-25 - Using Web tech to build for Windows 8 & Metro UI](https://reader037.vdocument.in/reader037/viewer/2022110303/54bea60a4a79597e5b8b4594/html5/thumbnails/69.jpg)
Questions
Frédéric Harper
Technical [email protected]@fharper
http://webnotwar.cahttp://outofcomfortzone.net