1 / 30

Anatomy of HTML5 sites and Metro style apps using HTML5

PLAT-384P. Anatomy of HTML5 sites and Metro style apps using HTML5. Tony Ross Program Manager Microsoft Corporation. Agenda. What can I do with HTML5? Changing content on-the-fly Fetching data behind-the-scenes Keeping your code in-check. What can I do with HTML5?.

bevis
Download Presentation

Anatomy of HTML5 sites and Metro style apps using HTML5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. PLAT-384P Anatomy of HTML5 sites and Metro style apps using HTML5 Tony Ross Program Manager Microsoft Corporation

  2. Agenda • What can I do with HTML5? • Changing content on-the-fly • Fetching data behind-the-scenes • Keeping your code in-check

  3. What can I do with HTML5? • Play media (<audio> and <video>) • Build complex and attractive interfaces (CSS3) • Manipulate pixels (<canvas>) • Scale across devices (SVG) • Load and save files (File API) • Incorporate location awareness (Geolocation API) • And much more…

  4. You can use HTML5 to build Metro style apps

  5. demo HTML5 Example Tony Ross Program Manager Internet Explorer

  6. Basic StructureHTML <!DOCTYPE html> • <!DOCTYPEhtml> • <html> • <head> • <title>My App</title> • <linkrel="stylesheet"href="my.css"> • <linkrel="stylesheet"href="more.css"> • ... • </head> • <body> • ... content ... • <scriptsrc="my.js"></script> • <scriptsrc="more.js"></script> • </body> • </html> <html> <head> <link rel="stylesheet" href="my.css"> <link rel="stylesheet" href="more.css"> </head> <body> <script src="my.js"></script> <script src="more.js"></script> </body> </html>

  7. Basic StructureCSS button • button{ • color: #000; • padding: 4px; • } • .page{ • background-color: #fff; • } • #my { • font-weight: bold; • } color: #000; padding: 4px; .page #my

  8. Basic StructureJavaScript • // variables and objects • vara = {first : 1, second : 2}; • // functions • function add(x, y) { • returnx + y; • } • // function calls • a.result = add(a.first, a.second); {first : 1, second : 2} var a = function add (x, y) return a.result = add(a.first, a.second)

  9. HTML5 apps are navigation-free

  10. Changing Content On-the-Fly

  11. Locating ElementsUsing “querySelector” and “querySelectorAll” • HTML • <aclass="tab"value="1">...</a> • <aclass="tab"value="2">...</a> • <aclass="tab"value="3">...</a> • CSS • .tab { • border-radius: 5px5px00; • } • JavaScript • var tabs = document.querySelectorAll(".tab"); • for(vari = 0; i < tabs.length; i++) { • tabs[i].onclick = showTab; • } class="tab" class="tab" class="tab" .tab document.querySelectorAll(".tab"); tabs[i].onclick = showTab;

  12. Listening to EventsUsing “on*” and “addEventListener” • JavaScript • // Simple registration • tabs[i].onclick = showTab; • // Alternate registration • tabs[i].addEventListener("click", showTab, false); onclick = showTab addEventListener("click", showTab, false)

  13. Changing TextUsing “textContent” • HTML • <h2id="title">Section 1</h2> • CSS • #title { • font-size: 20px; • } • JavaScript • var title = document.querySelector("#title"); • functionsetTitle(name) { • title.textContent = name; • } id="title" #title var title = document.querySelector("#title"); title.textContent = name;

  14. Adding ElementsUsing “createElement” and “appendChild” • HTML • <body> • <imgsrc="my.png"/> • </body> • JavaScript • functionaddImage() { • varimg = document.createElement("img"); • img.src = "my.png"; • document.body.appendChild(img); • } document.createElement("img"); document.body.appendChild(img);

  15. Hiding ElementsUsing “display” • HTML • <sectionid="p1"class="page">...</section> • <sectionid="p2"class="page">...</section> • CSS • .page { • font-size: 20px; • } • JavaScript • function swap(oldPage, newPage) { • oldPage.style.display = "none"; • newPage.style.display = ""; • } oldPage.style.display = "none"; newPage.style.display = "";

  16. demo Changing Content

  17. Fetching Data Behind-the-Scenes

  18. Sending and Receiving DataUsing “XMLHttpRequest” • JavaScript • function load(url, data, callback) { • varxhr = newXMLHttpRequest(); • xhr.open("GET", url, true); • xhr.onload= function() { • callback(xhr.responseText); • } • xhr.send(data); • } varxhr = new XMLHttpRequest(); xhr.open("GET", url, true); xhr.onload = callback(xhr.responseText); xhr.send(data);

  19. Transmitting Complex ObjectsUsing “JSON.parse” and “JSON.stringify” • JavaScript • functionloadJSON(url, data, callback) { • varxhr = newXMLHttpRequest(); • xhr.open("GET", url, true); • xhr.onload = function() { • callback( JSON.parse(xhr.responseText) ); • } • xhr.send( JSON.stringify(data) ); • } • loadJSON("my.json", { id : 1 }, function(response) { • setTitle(response.title); • }); JSON.parse(xhr.responseText) JSON.stringify(data) response { id : 1 } response.title

  20. demo Fetching Data

  21. Keeping your CodeIn-Check

  22. Isolating JavaScriptUsing the Module Pattern • JavaScript • (function(){ • var title = document.querySelector("#title"); • functionsetTitle(name) { • title.textContent = name; • } • setTitle("My Title"); • })(); (function(){ setTitle("My Title"); })();

  23. Exposing Public APIsUsing the Module Pattern • JavaScript • var module = (function(){ • var title = document.querySelector("#title"); • functionsetTitle(name) { • title.textContent = name; • } • return { setTitle : setTitle }; • })(); • module.setTitle("Custom Title"); var module = return { setTitle : setTitle }; module.setTitle("Custom Title");

  24. demo Module Pattern

  25. Recap • Build Metro style apps using HTML5 • Keep your apps navigation-free • Use XMLHttpRequest and JSON between client and server • Organize JavaScript using the module pattern

  26. Related sessions • PLAT-373C: Building real-time web apps with HTML5 WebSockets • PLAT-376T: Building offline access in Metro style apps and websites using HTML5 • PLAT-379P: Building responsive apps and sites with HTML5 web workers • PLAT-381T: Building beautiful and interactive apps with HTML5 & CSS3 • Plat-382T: What's new with HTML5, Javascript, and CSS3 • PLAT-386T: 50 performance tricks to make your Metro style apps and sites using HTML5 faster • PLAT-551P: Programming SVG and canvas graphics in a Metro style app based on HTML5 • PLAT-873T: Designing Metro style apps using CSS3

  27. Further reading and documentation • JavaScript: The Language http://channel9.msdn.com/events/mix/mix11/HTM06 • More HTML5 Examples:http://ietestdrive.com/http://www.beautyoftheweb.com/

  28. thank you Feedback and questions http://forums.dev.windows.com Session feedbackhttp://bldw.in/SessionFeedback

  29. © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

More Related