1. Windows Store apps with HTML + Facebook integration Jaime Rodriguez @jaimerodriguez @jaimerodriguez http://jaimerodriguez.com

2. Windows Store apps can be built using standards-based HTML, CSS and JavaScript

3. HTML platform is built on IE 10 http://aka.ms/ieprogress

4. 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 RequestAnimationFra me 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

5. Web developer must knows… 1. Apps != websites 2. User confidence & context 3. WinJS

6. Apps != Sites  Navigation  App Model  OS integration  Off-line & disconnected  Trust ....

7. Creating user confidence OS User dataDevicesCommunicationsHandlersTilesCryptography…… Windows Store app (WWAHost.exe) Local context Web context AppData LocalTempRoaming Internet Explorer Web context WinRT APIs

8. Creating user confidence OS User dataDevicesCommunicationsHandlersTilesCryptography…… Windows Store app (WWAHost.exe) Local context Web context AppData LocalTempRoaming Internet Explorer Web context WinRT APIs Two hosts Two contexts

9. HTML and DOM changes http://msdn.microsoft.com/en-us/library/windows/apps/hh700404.aspx No plug-ins Host differences It is still the same rendering and JS engine!!

10. Two contexts http://msdn.microsoft.com/en-us/library/windows/apps/hh465373.aspx FeatureLocal contextWeb context Windows RuntimeYesNo Windows Library for JavaScript YesPartial External script references ( ) NoYes window.closeYesNo Cross-domain XHR requests YesNo

11. WinJS

12. Windows Library for JavaScript Style sheets Core (promises, class, namespace, etc.) Utilities App model Data model (binding, lists, etc.) Controls model Animations Personality controls A collection of toolkits to make building Windows 8 apps fast and easy

13. WinJS Toolkits

14. Let’s code.. FINALLY!!!

15. Facebook must knows... 1. WebAuthenticationBroker 2. Async & Promises 3. WinJS.xhr

16. THANKS! Jaime Rodriguez Carrete (on Facebook) @jaimerodriguez @jaimerodriguez jaimer@microsoft.com

17. References  Hands-on-labs for cookbook  http://aka.ms/windows8campinabox http://aka.ms/windows8campinabox  My skydrive for the hackathon  http://aka.ms/win8fbhack http://aka.ms/win8fbhack  Windows 8 Dev samples  http://code.msdn.microsoft.com/windowsapps/ http://code.msdn.microsoft.com/windowsapps/

18. For Windows 8 design and developer content, please visit the Windows Dev Center. | @microsoft.com http://dev.windows.com

19. © 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.