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

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

of 47

  • date post

    15-Jan-2015
  • Category

    Documents

  • view

    3.686
  • download

    7

Embed Size (px)

description

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

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

  • 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 2twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen

2. Blog http://blogs.msdn.com/dorischen 3. As of March 2012, IDC 4. PAGE 7 twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen 5. Internet ExplorerTAB HTML host process App code Web platformApp code Web Windows platformruntime App containerPA 6. Blog http://blogs.msdn.com/dorischen 7. demo 8. Blog http://blogs.msdn.com/dorischenPAGE 9. PAGE 13 twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen 10. PAGE 14 twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen 11. /* Re-arrange and hide/show content */ /* */ Full screenPortrait/* */ /* */ Snap FillPAGE 17 12. PAGE 21 twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen 13. PAGE 22 twitter #wins8camp http://bit.ly/wins8cheatsheet Blog http://blogs.msdn.com/dorischen 14. The development tools are FREE!If you use a higher SKU, it just works! 15. demo 16. Blog http://blogs.msdn.com/dorischenPAGE 17. Blog http://blogs.msdn.com/dorischenPAGE 18. demo 19. Blog http://blogs.msdn.com/dorischenPAGE 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. 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. 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. demo 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 appfor each platform Build for Windows Phone and Port to Windows 8 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. HTML5/JS developers (Game): Construct 2 (Game)Construct2 - cross platform game development for beginners 28. HTML5/JS developers (Game)GameSalad create cross platform games rapidly with no code 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 daysand were 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. 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 teammakers of Windows 8, Windows Phone 8 and XBOX-enabled games! 31. http://bit.ly/HTML5Wins8Camp http://bit.ly/CampInBox Windows 8 Cheat Sheet http://bit.ly/wins8cheatsheet http:/dev.windows.com PAGE 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): StyleGame 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. http://blogs.msdn.com/b/dorischen/archive/2012/10/02/transform-your-html-css-javascript-apps-into-windows-8-application.aspxhttp://msdn.microsoft.com/en-us/library/windows/apps/hh700404.aspxhttp://msdn.microsoft.com/en-us/library/windows/apps/hh465380.aspxhttp://msdn.microsoft.com/en-us/library/windows/apps/hh465373.aspx