windows 8 camp ottawa - 2012-04-14 - building metro style apps with html & javascript
TRANSCRIPT
![Page 1: Windows 8 Camp Ottawa - 2012-04-14 - Building metro style apps with html & javascript](https://reader035.vdocuments.site/reader035/viewer/2022062419/5585945ed8b42ac76d8b4ae7/html5/thumbnails/1.jpg)
Building Metro style apps
with HTML & JavascriptFrédéric HarperDeveloper Evangelist @ Microsoft Canada
@fharper | outofcomfortzone.net
![Page 2: Windows 8 Camp Ottawa - 2012-04-14 - Building metro style apps with html & javascript](https://reader035.vdocuments.site/reader035/viewer/2022062419/5585945ed8b42ac76d8b4ae7/html5/thumbnails/2.jpg)
You can build amazing sites and Metro style apps with the Windows 8 web platform
![Page 3: Windows 8 Camp Ottawa - 2012-04-14 - Building metro style apps with html & javascript](https://reader035.vdocuments.site/reader035/viewer/2022062419/5585945ed8b42ac76d8b4ae7/html5/thumbnails/3.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 4: Windows 8 Camp Ottawa - 2012-04-14 - Building metro style apps with html & javascript](https://reader035.vdocuments.site/reader035/viewer/2022062419/5585945ed8b42ac76d8b4ae7/html5/thumbnails/4.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 5: Windows 8 Camp Ottawa - 2012-04-14 - Building metro style apps with html & javascript](https://reader035.vdocuments.site/reader035/viewer/2022062419/5585945ed8b42ac76d8b4ae7/html5/thumbnails/5.jpg)
HTML 5
![Page 6: Windows 8 Camp Ottawa - 2012-04-14 - Building metro style apps with html & javascript](https://reader035.vdocuments.site/reader035/viewer/2022062419/5585945ed8b42ac76d8b4ae7/html5/thumbnails/6.jpg)
IE9 hardware-accelerated web platform
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
![Page 7: Windows 8 Camp Ottawa - 2012-04-14 - Building metro style apps with html & javascript](https://reader035.vdocuments.site/reader035/viewer/2022062419/5585945ed8b42ac76d8b4ae7/html5/thumbnails/7.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 8: Windows 8 Camp Ottawa - 2012-04-14 - Building metro style apps with html & javascript](https://reader035.vdocuments.site/reader035/viewer/2022062419/5585945ed8b42ac76d8b4ae7/html5/thumbnails/8.jpg)
CSS3
2D & 3D transforms
Transforms Animations
Transitions
MotionGrid
Flexbox
Layout
Gradients
Text-shadow
GraphicsMulti-column, hyphenation
Pagination
Position float
Content flow
Windows hardware acceleration makes these beautiful and fast
![Page 9: Windows 8 Camp Ottawa - 2012-04-14 - Building metro style apps with html & javascript](https://reader035.vdocuments.site/reader035/viewer/2022062419/5585945ed8b42ac76d8b4ae7/html5/thumbnails/9.jpg)
CSS3 demos
demo
![Page 10: Windows 8 Camp Ottawa - 2012-04-14 - Building metro style apps with html & javascript](https://reader035.vdocuments.site/reader035/viewer/2022062419/5585945ed8b42ac76d8b4ae7/html5/thumbnails/10.jpg)
HTML5Web 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
![Page 11: Windows 8 Camp Ottawa - 2012-04-14 - Building metro style apps with html & javascript](https://reader035.vdocuments.site/reader035/viewer/2022062419/5585945ed8b42ac76d8b4ae7/html5/thumbnails/11.jpg)
HTML5 demos
demo
![Page 12: Windows 8 Camp Ottawa - 2012-04-14 - Building metro style apps with html & javascript](https://reader035.vdocuments.site/reader035/viewer/2022062419/5585945ed8b42ac76d8b4ae7/html5/thumbnails/12.jpg)
Tools
![Page 13: Windows 8 Camp Ottawa - 2012-04-14 - Building metro style apps with html & javascript](https://reader035.vdocuments.site/reader035/viewer/2022062419/5585945ed8b42ac76d8b4ae7/html5/thumbnails/13.jpg)
Visual Studio 2011 Beta & Blend for Visual Studio 11 Beta
demo
![Page 14: Windows 8 Camp Ottawa - 2012-04-14 - Building metro style apps with html & javascript](https://reader035.vdocuments.site/reader035/viewer/2022062419/5585945ed8b42ac76d8b4ae7/html5/thumbnails/14.jpg)
WinJS
![Page 15: Windows 8 Camp Ottawa - 2012-04-14 - Building metro style apps with html & javascript](https://reader035.vdocuments.site/reader035/viewer/2022062419/5585945ed8b42ac76d8b4ae7/html5/thumbnails/15.jpg)
Windows Library for JavaScript (WinJS)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 fast 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 16: Windows 8 Camp Ottawa - 2012-04-14 - Building metro style apps with html & javascript](https://reader035.vdocuments.site/reader035/viewer/2022062419/5585945ed8b42ac76d8b4ae7/html5/thumbnails/16.jpg)
WinJSHelpers for Namespaces, Constructor Definition
Promises
App Model
Navigation
Page & User controls
Data binding
Controls
Animations
Templates
Utilities
Default CSS Styles
![Page 17: Windows 8 Camp Ottawa - 2012-04-14 - Building metro style apps with html & javascript](https://reader035.vdocuments.site/reader035/viewer/2022062419/5585945ed8b42ac76d8b4ae7/html5/thumbnails/17.jpg)
The Contoso Cookbook
demo
![Page 18: Windows 8 Camp Ottawa - 2012-04-14 - Building metro style apps with html & javascript](https://reader035.vdocuments.site/reader035/viewer/2022062419/5585945ed8b42ac76d8b4ae7/html5/thumbnails/18.jpg)
Prefer your own library? Go ahead! Adhere to the Metro UI and Windows personality
Understand our webcontext & sandboxing model
Mix & match works fine
![Page 19: Windows 8 Camp Ottawa - 2012-04-14 - Building metro style apps with html & javascript](https://reader035.vdocuments.site/reader035/viewer/2022062419/5585945ed8b42ac76d8b4ae7/html5/thumbnails/19.jpg)
If you know web technologies, you are ready to build amazing Metro style apps.
![Page 20: Windows 8 Camp Ottawa - 2012-04-14 - Building metro style apps with html & javascript](https://reader035.vdocuments.site/reader035/viewer/2022062419/5585945ed8b42ac76d8b4ae7/html5/thumbnails/20.jpg)
Thank You
![Page 21: Windows 8 Camp Ottawa - 2012-04-14 - Building metro style apps with html & javascript](https://reader035.vdocuments.site/reader035/viewer/2022062419/5585945ed8b42ac76d8b4ae7/html5/thumbnails/21.jpg)
![Page 22: Windows 8 Camp Ottawa - 2012-04-14 - Building metro style apps with html & javascript](https://reader035.vdocuments.site/reader035/viewer/2022062419/5585945ed8b42ac76d8b4ae7/html5/thumbnails/22.jpg)
Appendix
![Page 23: Windows 8 Camp Ottawa - 2012-04-14 - Building metro style apps with html & javascript](https://reader035.vdocuments.site/reader035/viewer/2022062419/5585945ed8b42ac76d8b4ae7/html5/thumbnails/23.jpg)
More details & cool demos IE 9 Dev guide http://www.ietestdrive.com/Links/DevGuide9.html
IE 10 Dev guide http://www.ietestdrive.com/Links/DevGuide10.html
Touch in IE 10 and Metro style apps http://blogs.msdn.com/b/ie/archive/2011/09/20/touch-input-for-ie10-and-metro-style-apps.aspx
![Page 24: Windows 8 Camp Ottawa - 2012-04-14 - Building metro style apps with html & javascript](https://reader035.vdocuments.site/reader035/viewer/2022062419/5585945ed8b42ac76d8b4ae7/html5/thumbnails/24.jpg)
More details & cool demos
http://www.ietestdrive.com/Links/DevGuide10.html
http://www.ietestdrive.com/Links/DevGuide9.html
What’s new in IE10?
What’s new in IE9?