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

4,197 views

Published on

An updated presentation (30 minutes) presented for San Francisco JavaScript meetup on Jan 7, 2012.

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,197
On SlideShare
0
From Embeds
0
Number of Embeds
2,838
Actions
Shares
0
Downloads
81
Comments
0
Likes
3
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 #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen
  2. 2. Blog http://blogs.msdn.com/dorischen
  3. 3. As of March 2012, IDC
  4. 4. PAGE 7 twitter #wins8camp http://bit.ly/wins8cheatsheet 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 containerPA
  6. 6. Blog http://blogs.msdn.com/dorischen
  7. 7. demo
  8. 8. Blog http://blogs.msdn.com/dorischenPAGE
  9. 9. PAGE 13 twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen
  10. 10. PAGE 14 twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen
  11. 11. /* Re-arrange and hide/show content */ /* */ Full screen Portrait /* …*/ /* …*/ Snap FillPAGE 17
  12. 12. PAGE 21 twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen
  13. 13. PAGE 22 twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen
  14. 14. The development tools are FREE!If you use a higher SKU, it just works!
  15. 15. demo
  16. 16. Blog http://blogs.msdn.com/dorischenPAGE
  17. 17. Blog http://blogs.msdn.com/dorischenPAGE
  18. 18. demo
  19. 19. Blog http://blogs.msdn.com/dorischenPAGE
  20. 20. "Code for touch, get mouse and pen for free!"
  21. 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. 22. 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; }};
  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. demo
  25. 25. HTML5/JS developers• Free open source cross platform framework for apps on mobile devices• Renders UI using HTML5 and CSS; Web browser encased in a native app for each platform• Build for Windows Phone and Port to Windows 8
  26. 26. HTML5/JS developers (Game)GameMaker - family of products that caters to entry-level developers and seasoned game developmentprofessionals to create cross platform games
  27. 27. HTML5/JS developers (Game): Construct 2 (Game)Construct2 - cross platform game development for beginners
  28. 28. HTML5/JS developers (Game)GameSalad – create cross platform games rapidly with no code
  29. 29. 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 http://bit.ly/Win8GenApp
  30. 30. Join http://bit.ly/FreeStoreRegPublish your app to the Windows Store and/or Windows Phone Store betweenDecember 20, 2012 through February 28, 2013 and qualify for the following rewards:1. A store registration reimbursement* AND a copy of Halo 4 for Xbox 360!2. A chance to win one of 12 Xbox 360 consoles with Kinect. The more apps you enter, the more chances youll have to win.3. The Grand Prize: Three devs with the best apps will win an ultimate backstage pass to Microsoft Studios and spend the day with the Windows 8 Games Studios team—makers of Windows 8, Windows Phone 8 and XBOX-enabled games!
  31. 31. http://bit.ly/HTML5Wins8Camp http://bit.ly/CampInBox Windows 8 Cheat Sheet http://bit.ly/wins8cheatsheet http:/dev.windows.com PAGE
  32. 32. • 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 demosPAGE • http://www.beautyoftheweb.com/
  33. 33. http://blogs.msdn.com/b/dorischen/archive/2012/10/02/transform-your-html-css-javascript-apps-into-windows-8-application.aspx http://msdn.microsoft.com/en-us/library/windows/apps/hh700404.aspx http://msdn.microsoft.com/en-us/library/windows/apps/hh465380.aspx http://msdn.microsoft.com/en-us/library/windows/apps/hh465373.aspx

×