Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3


Published on

The demo and resrouces are available at
This session outlines some of what you can do with new HTML5 and CSS3 features introduced in Internet Explorer 10. Internet Explorer 10 is the browser for rendering modern (HTML5/CSS3) standards-compliant websites. It is also one of the foundations for Windows 8 style app development on Windows 8.

Get started writing Windows 8 style apps using your HTML5, JavaScript, and CSS skills today! You already have a Web app on the Internet and want to reach customers with a new, targeted experience on Windows 8. Come get practical guidance and best practices on how to reuse your Web assets. Come dive into the specifics of this exciting platform and see how you can use your Web skills to build deeply-integrated Windows apps.
◦You’ll discover how this mirrors or differs from traditional Web programming and how to harness the rich capabilities of Windows 8 through JavaScript and the Windows Runtime.
◦You'll learn techniques for turning your HTML5, CSS and JavaScript into a great Windows app including touch-enablement, adopting the Windows look and feel, and system integration.

This session will arm you with everything you need to know to start building Windows 8 style apps with the skills you already have.

  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3

  1. 1. Who am I?  Developer Evangelist at Microsoft based in Silicon Valley, CA  Blog:  Twitter @doristchen  Email:  Has over 15 years of experience in the software industry focusing on web technologies  Spoke and published widely at JavaOne, OReilly, Silicon Valley Code Camp, SD West, SD Forum and worldwide User Groups meetings  Doris received her Ph.D. from the University of California at Los Angeles (UCLA)PAGE 2 twitter #wins8camp Blog
  2. 2. Blog
  3. 3. As of March 2012, IDC
  4. 4. PAGE 7 twitter #wins8camp Blog
  5. 5. Blog
  6. 6. demo
  7. 7. Blog
  8. 8. PAGE 13 twitter #wins8camp Blog
  9. 9. PAGE 14 twitter #wins8camp Blog
  10. 10. /* Re-arrange and hide/show content */ /* */ Full screen Portrait /* …*/ /* …*/ Snap FillPAGE 17
  11. 11. PAGE 21 twitter #wins8camp Blog
  12. 12. PAGE 22 twitter #wins8camp Blog
  13. 13. The development tools are FREE!If you use a higher SKU, it just works!
  14. 14. demo
  15. 15. Blog
  16. 16. Feature Local context Web context Windows Run-time Yes No Windows Library for Yes No * Javascript External script No Yes references Cross-domain XHR Yes No requests Automatic filtering for Yes No script injection on DOMThere are ways to communicate across contexts, ways to give websites access to some web standardsfeatures and ways to skip automatic filtering within a function.
  17. 17.
  18. 18. Blog
  19. 19. PAGE 40 twitter #devcamp lab setup: Blog
  20. 20. demo
  21. 21. Blog
  22. 22. "Code for touch, get mouse and pen for free!"
  23. 23. function onLoad() { ... var workSpaces = document.getElementsByClassName("workspace"); for (i = 0; i < workSpaces.length; i++) { workSpaces[i].addEventListener("MSPointerDown", pointerDownHandler, false); workSpaces[i].addEventListener("MSPointerMove", pointerMoveHandler, false); workSpaces[i].addEventListener("MSPointerUp", pointerUpHandler, false); workSpaces[i].addEventListener("MSManipulationStateChanged", resetInteractions, false); } ...}
  24. 24. this.MSPointerDown = function(evt){ context.beginPath(); context.moveTo(evt.offsetX, evt.offsetY); x = evt.offsetX; y = evt.offsetY; brush.started = true;};this.MSPointerUp = function(evt){ if (brush.started) { brush.MSPointerMove(evt); context.closePath(); brush.started = false; }};
  25. 25. demo
  26. 26. DatePicker SettingsFlyoutListview SemanticZoom Semantic Zoom Flipview Menu Flyout Rating AppbarSlide does not include all WinJS controls (Tooltip, ViewBox, ToggleSwitch, HTMLControl, etc.)
  27. 27. Blog
  28. 28. <div id="appbar" data-win-control="WinJS.UI.AppBar"> <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:brag, label:Brag, icon:emoji2,section:selection, type:flyout,flyout:bragFlyout}"></button> </div> <div id="bragFlyout" data-win-control="WinJS.UI.Menu"> <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:photo, label:Photo}"></button> <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:video, label:Video }"></button> </div>
  29. 29.  Use what you already know  Best practices Adopt the right look and feel for your app  Touch, UI Control, View State, Scroll, Zoom Follow the app model  App Bar, Hardware Blog
  30. 30. YOUR IDEA. Week 1 App designYOUR APP . Week 2 Coding your app30 DAYS. Week 3 Making your app shine Week 4 Get publishedYou can develop a Windows 8 app in 30 days—and we’re here to help.• Insider tips and tricks on Windows 8 application development.• Personal on-the-phone access to a Windows 8 architect*.• An exclusive one-on-one Metro style design consultation*.• An opportunity to get expert help from a Microsoft Services Engineer at an App Excellence Lab. Sign Up
  31. 31. • Responsive Web Design and CSS3 • • HTML5, CSS3 Free 1 Day Training • • Using Blend to Design HTML5 Windows 8 Application (Part II): Style, Layout and Grid • • Using Blend to Design HTML5 Windows 8 Application (Part III): Style Game Board, Cards, Support Different Device, View States • • Feature-specific demos • • Real-world demosPAGE •
  32. 32. Windows 8 Cheat Sheet http:/ PAGE