Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3


Published on

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 Metro style app development on Windows 8.
Get started writing Metro 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 Metro style apps with the skills you already have.

Published in: Technology, Design
1 Comment
  • Demo & Resources

    Early Access to submit apps to Wins 8 Store and Develop Windows 8 in 30 Days with Consulting& Support

    Windows 8 and Tools Download

    Windows 8 Cheat Sheet

    Free Windows 8 training & Hackathon Events

    Windows 8 Dev Center: Tutorial, Samples, Download

    HTML5&CSS3 Feature Specific demo
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Building Beautiful and Interactive Metro 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 #devcamp lab setup: Blog
  2. 2. As of March 2012, IDC
  3. 3. PAGE 9 twitter #devcamp lab setup: Blog
  4. 4. PAGE 10 twitter #devcamp lab setup: Blog
  5. 5. Internet Explorer TAB HTML host process App code Web platform App code Web Windows platform runtime App containerPAGE 12 twitter #devcamp lab setup: Blog
  6. 6. demo
  7. 7. Internet Explorer Internet Explorer for the desktop
  8. 8. PAGE 17 twitter #devcamp lab setup: Blog
  9. 9. PAGE 18 twitter #devcamp lab setup: Blog
  10. 10. /* Re-arrange and hide/show content */ Full screen Portrait Snap FillPAGE 21 twitter #devcamp lab setup: Blog
  11. 11. 1,1 2,1 1,2 2,2twitter #devcamp lab setup: Blog
  12. 12. demo
  13. 13. PAGE 26 twitter #devcamp lab setup: Blog
  14. 14. demo
  15. 15. The development tools are FREE!If you use a higher SKU, it just works!
  16. 16. PAGE 33 twitter #devcamp lab setup: Blog
  17. 17. PAGE 34 twitter #devcamp lab setup: Blog
  18. 18. PAGE 36 twitter #devcamp lab setup: Blog
  19. 19. PAGE 38 twitter #devcamp lab setup: Blog
  20. 20. PAGE 39 twitter #devcamp lab setup: Blog
  21. 21. twitter #devcamp lab setup: Blog
  22. 22. Feature Local context Web context Windows Run-time Yes No Windows Library for Yes Yes* 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 #devcamp automatic filtering within a function. twitter to skip lab setup: Blog
  23. 23. demo
  24. 24. "Code for touch, get mouse and pen for free!"
  25. 25. API surface CSS Properties DOM Attributes DOM Events overflow -ms-scroll-rails -ms-scroll-snap-x scrollLeftScrolling scroll -ms-scroll-snap-y scrollTop -ms-scroll-chaining -ms-scroll-boundary -ms-content-zooming -ms-content-zoom-Zooming msContentZoomFactor MSContentZoom boundary -ms-content-zoom-snapBoth MSManipulationStateChanged -ms-scroll-snap-typeSnap-points -ms-scroll-snap-point-x
  26. 26. <div id="smallListIconTextTemplate" data-win-control="WinJS.Binding.Template"style="display: none"> <div class="smallListIconTextItem"> <img src="#" class="smallListIconTextItem-Image" data-win-bind="src: picture" /> <div class="smallListIconTextItem-Detail"> </div> </div></div><!-- Call WinJS.UI.processAll() in your initialization code --><div id="listView" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: myData.dataSource, itemTemplate: smallListIconTextTemplate, selectionMode: none, tapBehavior: none, swipeBehavior: none, layout: { type: WinJS.UI.GridLayout } }"></div>
  27. 27. <!– Step1: declare control --><div id=“list” data-win-control="WinJS.UI.ListView"data-win-options="{ selectionMode: none }"></div>/* Step 2: Call WinJS.UI.processAll() *//* Step 3: Use the control */document.getElementById(‘list’).winControl.addEventListener (‘selectionchanged’, onSelChanged );
  28. 28. DatePicker SettingsFlyoutListview SemanticZoom Semantic Zoom Flipview Menu Flyout Rating Appbar twitter #devcamp lab setup: Blog does not include all WinJS controls (Tooltip, ViewBox, ToggleSwitch, HTMLControl, etc.)
  29. 29. <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>
  30. 30. Windows.Media.Capture
  31. 31. // Handle click events from the Photo command capture.CameraCaptureUI() // Capture a photo and display the share UI
  32. 32. Contracts
  33. 33. demo
  34. 34.  Windows 8 Cheat Sheet http:/ 80 twitter #devcamp lab setup: Blog
  35. 35. Launch your Windows 8 App in 30 days Generation App  Online training and tips from insiders  Tele-support with a Windows 8 architect  Exclusive one-on-one Metro style design consultation  Virtual Labs- 90 min labs  Sign up at
  36. 36. 82 twitter #devcamp lab setup: Blog