What Web Developers Need to Know to Develop Native HTML5/JS Apps

Uploaded on

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

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.
This session will start with the introduction on new HTML5 and CSS3 features introduced in Internet Explorer. Internet Explorer is the browser for rendering modern (HTML5/CSS3) standards-compliant websites. It is also one of the foundations for Windows 8 app development.
• 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 jump start you with everything you need to know to start building Windows 8 apps with the skills you already have.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. PAGE 2 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  Office Hours http://ohours.org/dorischen  Has over 15 years of experience in the software industry focusing on web technologies  Spoke and published widely at JavaOne, O'Reilly, 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) Blog http://blogs.msdn.com/dorischen
  • 2. PAGE 7
  • 3. PAGE 8
  • 4. demo
  • 5. Media Source Extensions Navigation Timing Screen Orientation API Encrypted Media Extensions Pointer Events Layout Module Fullscreen API Tracking Preferences Expression (DNT) Web Cryptography API HTML5 Custom Data HTML5 Page Transition Events Device Orientation Events DOM4 Mutation Observers Web GL Web Video Text Tracks Format XMLHttpRequest (Level 3) Input Method Editor API
  • 6. PAGE
  • 7. PAGE
  • 8. CSS device adaptation and media queries Use @-ms-viewport to control page scaling Use media queries flexbox, and other adaptive layout techniques Common sizes to consider: 320, 480, 640, 768, 1024px
  • 9. demo
  • 10. Windows app WinJS HTML5 WinRT
  • 11. Windows 8 Windows app app WinJS 1.0 HTML5 WinJS WinRT
  • 12. Windows 8 app Windows 8.1 app WinJS 1.0 WinJS 2.0
  • 13. PAGE
  • 14. PAGE
  • 15. The development tools are FREE! If you use a higher SKU, it just works!
  • 16. PAGE
  • 17. demo
  • 18. xhr //access a web service, cloud service, local resource http://www.example.org/somedata.json
  • 19. PAGE
  • 20. "Code for touch, get mouse and pen for free!"
  • 21. 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); } ... }
  • 22. Join us for this Free, hands-on event and learn how to build a Windows 8.1 and/or Windows Phone game in record time. We’ll cover everything you need to create, upload and publish an amazing game. Expert developers will outline different game frameworks and give you the tools you need to start building. They’ll also explain how to add graphics, level and sound to game starter kits, while sharing other cool ways to make the game your own. In one jam-packed day of learning and coding, you can turn your idea into reality! Register today for a local Game On event. December 4, 2013 December 5, 2013 San Francisco, CA Mountain View, CA http://aka.ms/gameonsf http://aka.ms/gameonsvc
  • 23. http://bit.ly/win8OnePage http://bit.ly/HTML5Wins8Camp http://bit.ly/CampInBox http://Aka.ms/brockschmidtbook PAGE  http:/dev.windows.com
  • 24. • Responsive Web Design and CSS3 • http://bit.ly/CSS3Intro • HTML5, CSS3 Free 1 Day Training • http://bit.ly/HTML5DevCampDownload • Using Blend to Design HTML5 Windows 8 Application (Part II): Style, Layout and Grid • http://bit.ly/HTML5onBlend2 • Using Blend to Design HTML5 Windows 8 Application (Part III): Style Game Board, Cards, Support Different Device, View States • http://bit.ly/HTML5onBlend3 • Feature-specific demos • http://ie.microsoft.com/testdrive/ • Real-world demos PAGE • http://www.beautyoftheweb.com/