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

13,666 views

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
5 Likes
Statistics
Notes
  • Demo & Resources

    Early Access to submit apps to Wins 8 Store and Develop Windows 8 in 30 Days with Consulting& Support
    ◦http://bit.ly/Win8GenApp

    Windows 8 and Tools Download
    ◦http://bit.ly/Wins8Download

    Windows 8 Cheat Sheet
    ◦http://bit.ly/wins8cheatsheet

    Free Windows 8 training & Hackathon Events
    ◦http://bit.ly/wins8Hackathon

    Windows 8 Dev Center: Tutorial, Samples, Download
    ◦http://msdn.microsoft.com/en-US/windows/apps/br229512

    HTML5&CSS3 Feature Specific demo
    ◦http://ie.microsoft.com/testdrive/Views/SiteMap/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
13,666
On SlideShare
0
From Embeds
0
Number of Embeds
10,487
Actions
Shares
0
Downloads
137
Comments
1
Likes
5
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: http://blogs.msdn.com/b/dorischen/  Twitter @doristchen  Email: doris.chen@microsoft.com  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: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
  2. 2. As of March 2012, IDC
  3. 3. PAGE 9 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
  4. 4. PAGE 10 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
  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: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
  6. 6. demo
  7. 7. Internet Explorer Internet Explorer for the desktop
  8. 8. PAGE 17 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
  9. 9. PAGE 18 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
  10. 10. /* Re-arrange and hide/show content */ Full screen Portrait Snap FillPAGE 21 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
  11. 11. 1,1 2,1 1,2 2,2twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
  12. 12. demo
  13. 13. PAGE 26 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
  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: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
  17. 17. PAGE 34 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
  18. 18. PAGE 36 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
  19. 19. PAGE 38 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
  20. 20. PAGE 39 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
  21. 21. http://msdn.microsoft.com/en-us/library/windows/apps/hh700404.aspx http://msdn.microsoft.com/en-us/library/windows/apps/hh465380.aspxhttp://msdn.microsoft.com/en-us/library/windows/apps/hh465373.aspx twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
  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. http://blogs.msdn.com/dorischen twitter to skip lab setup: http://bit.ly/html5setup 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: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischenSlide 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://bit.ly/wins8cheatsheet http://bit.ly/Win8GenApp http:/dev.windows.comPAGE 80 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
  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 http://aka.ms/vLabsWin8  Sign up at http://bit.ly/Win8GenApp
  36. 36. http://ie.microsoft.com/testdrive/Views/SiteMap/ http://www.ietestdrive.com/Links/DevGuide9.html http://www.ietestdrive.com/Links/DevGuide10.html http://blogs.msdn.com/b/ie/archive/2011/09/20/touch-input-for-ie10-and-metro-style-apps.aspxPAGE 82 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen

×