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

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

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

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

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

Web developer must knows… • Apps != websites • User confidence & context • WinJS

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

Creating user confidence Internet Explorer Windows Store app (WWAHost.exe) Web context Web context Local context AppData Local Temp Roaming WinRT APIs OS User data Devices Communications Handlers Tiles Cryptography … …

Creating user confidence Internet Explorer Windows Store app (WWAHost.exe) Web context Web context Local context AppData Local Temp Roaming WinRT APIs Two contexts Two hosts OS User data Devices Communications Handlers Tiles Cryptography … …

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

Two contexts http://msdn.microsoft.com/en-us/library/windows/apps/hh465373.aspx

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 • Async & Promises • WinJS.xhr

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

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

For Windows 8 design and developer content, please visit the Windows Dev Center. http://dev.windows.com <your twitter handle>| <your email>@microsoft.com

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

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