Windows Store apps with HTML + Facebook integration

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

HTML platform is built on IE 10

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

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

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

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

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

HTML and DOM changes No plug-ins Host differences It is still the same rendering and JS engine!!

Two contexts FeatureLocal contextWeb context Windows RuntimeYesNo Windows Library for JavaScript YesPartial External script references ( ) NoYes window.closeYesNo Cross-domain XHR requests YesNo

WinJS

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

WinJS Toolkits

Let’s code.. FINALLY!!!

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

THANKS! Jaime Rodriguez Carrete

References  Hands-on-labs for cookbook   My skydrive for the hackathon   Windows 8 Dev samples 

For Windows 8 design and developer content, please visit the Windows Dev Center.

© 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.