1. Building Windows 8 Apps with HTML & JavaScript Jaime Rodriguez Principal Evangelist @jaimerodriguez http://jaimerodriguez.com

2. If you know web technologies, you are ready to build amazing apps for the Windows Store

3. Windows 8 Windows Core OS Services JavaScript (Chakra) C C++ C# VB Windows 8 Store Apps Communication & Data Application Model Devices & Printing WinRT APIs Graphics & Media XAMLHTML / CSS HTML JavaScript CSS C C++ C# VB Desktop Apps Win32.NET / SL Internet Explorer System Services View Model Controller Core Windows Core OS Services Communication & Data Application Model Devices & Printing Graphics & Media System Services Core

4. More web standards

5. IE9 hardware-accelerated 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

6. IE10 hardware-accelerated platform CSS 2D Transforms CSS 3D Transforms CSS Animations CSS Backgrounds & Borders CSS Color CSS Flexbox CSS Fonts CSS Grid 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 BlobBuilder 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 track HTML5 video and audio JavaScript Typed Array ICC Color Profiles IndexedDB Page Visibility Pointer (Mouse, Pen, and Touch) Events RequestAnimationFrame Navigation Timing Selectors API Level 2 SVG Filter Effects SVG, standalone and in HTML Web Messaging Web Sockets Web Workers XHTML/XML XMLHttpRequest (Level 2) XMLHttpRequest CORS

7. Popular CSS3 features in Windows 8 2D & 3D transforms Transforms Animations Transitions Motion Grid Flexbox Layout Gradients Filter Effects Text-shadow Graphics Multi-column, hyphenation Pagination Position float Content flow Windows hardware acceleration makes these beautiful and fast

8. demo

9. Popular HTML5 features in Windows 8 Web 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

10. demo

11. From IE10 web app to Windows app  Minor API differences http://msdn.microsoft.com/en-us/library/windows/apps/hh700404.aspxhttp://msdn.microsoft.com/en-us/library/windows/apps/hh700404.aspx  Different host  No plug-ins in Windows apps  Trust level differences (local and web context)  http://msdn.microsoft.com/en-us/library/windows/apps/hh465373.aspx http://msdn.microsoft.com/en-us/library/windows/apps/hh465373.aspx  UX [recommended]  Windows 8 features [recommended]

12. Context in HTML/JS Windows apps FeatureLocal contextWeb context Windows Run-timeYesNo Windows Library for Javascript YesNo External script referencesNoYes Cross-domain XHR requests YesNo Automatic filtering for script injection on DOM YesNo There are ways to communicate across contexts, ways to give websites access to some web standards features and ways to skip automatic filtering within a function.

13. Tools

14. demo

15. WinJS

16. Windows Library for JavaScript (WinJS) library for building apps using JavaScript Web technologies you’re already familiar with Utilities and patterns for responsive, reliable apps Use interactive design tools Build your apps fast and with high quality Matches the Windows 8 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

17. WinJS Helpers for Namespaces, Constructor Definition Promises App Model Navigation Page & User controls Data binding Controls Animations Templates Utilities Default CSS Styles

18. demo

19. WinJS controls SettingsFlyout Flyout Appbar Semantic Zoom Flipview SemanticZoom Listview Menu Rating Slide does not include all WinJS controls (Tooltip, ViewBox, ToggleSwitch, HTMLControl, etc.) DatePicker

20. Prefer your own library? Go ahead!  Adhere to the Windows UI and personality  Understand our web context & sandboxing model  Mix & match works fine

21. You can build amazing sites and apps with the Windows 8 web platform