Building Beautiful and Interactive Metro apps with JavaScript, HTML5 & CSS3
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 13,156 views

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

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.

Statistics

Views

Total Views
13,156
Views on SlideShare
2,821
Embed Views
10,335

Actions

Likes
3
Downloads
129
Comments
1

7 Embeds 10,335

http://windows8center.sourceforge.net 7948
http://blogs.msdn.com 2270
http://www.scoop.it 112
https://www.linkedin.com 2
http://translate.googleusercontent.com 1
http://webcache.googleusercontent.com 1
http://ppe.blogs.msdn.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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/
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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. As of March 2012, IDC
  • 3. PAGE 9 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
  • 4. PAGE 10 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
  • 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. demo
  • 7. Internet Explorer Internet Explorer for the desktop
  • 8. PAGE 17 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
  • 9. PAGE 18 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
  • 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. 1,1 2,1 1,2 2,2twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
  • 12. demo
  • 13. PAGE 26 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
  • 14. demo
  • 15. The development tools are FREE!If you use a higher SKU, it just works!
  • 16. PAGE 33 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
  • 17. PAGE 34 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
  • 18. PAGE 36 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
  • 19. PAGE 38 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
  • 20. PAGE 39 twitter #devcamp lab setup: http://bit.ly/html5setup Blog http://blogs.msdn.com/dorischen
  • 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. 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. demo
  • 24. "Code for touch, get mouse and pen for free!"
  • 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. <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. <!– 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. 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. <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. Windows.Media.Capture
  • 31. // Handle click events from the Photo command capture.CameraCaptureUI() // Capture a photo and display the share UI
  • 32. Contracts
  • 33. demo
  • 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. 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. 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