Download presentation
Presentation is loading. Please wait.
1
Anatomy of HTML5 sites and Metro style apps using HTML5
2/5/ :15 PM PLAT-384P Anatomy of HTML5 sites and Metro style apps using HTML5 Tony Ross Program Manager Microsoft Corporation © 2010 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.
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
Tony Ross Program Manager Internet Explorer
2/5/ :15 PM demo HTML5 Example Tony Ross Program Manager Internet Explorer © 2010 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.
6
Basic Structure HTML <!DOCTYPE html> <html> <head>
<title>My App</title> <link rel="stylesheet" href="my.css"> <link rel="stylesheet" href="more.css"> ... </head> <body> ... content ... <script src="my.js"></script> <script src="more.js"></script> </body> </html> <!DOCTYPE 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> © 2010 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.
7
Basic Structure CSS button { button color: #000; padding: 4px;
} .page { background-color: #fff; #my { font-weight: bold; button color: #000; padding: 4px; .page #my © 2010 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.
8
Basic Structure JavaScript
// variables and objects var a = {first : 1, second : 2}; // functions function add(x, y) { return x + y; } // function calls a.result = add(a.first, a.second); var a = {first : 1, second : 2} function add (x, y) return a.result = add(a.first, a.second) © 2010 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.
9
HTML5 apps are navigation-free
10
Changing Content On-the-Fly
11
Locating Elements Using “querySelector” and “querySelectorAll”
HTML <a class="tab" value="1">...</a> <a class="tab" value="2">...</a> <a class="tab" value="3">...</a> CSS .tab { border-radius: 5px 5px 0 0; } JavaScript var tabs = document.querySelectorAll(".tab"); for(var i = 0; i < tabs.length; i++) { tabs[i].onclick = showTab; class="tab" class="tab" class="tab" .tab document.querySelectorAll(".tab"); tabs[i].onclick = showTab; © 2010 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.
12
Listening to Events Using “on*” and “addEventListener”
JavaScript // Simple registration tabs[i].onclick = showTab; // Alternate registration tabs[i].addEventListener("click", showTab, false); onclick = showTab addEventListener("click", showTab, false) © 2010 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.
13
Changing Text Using “textContent”
HTML <h2 id="title">Section 1</h2> CSS #title { font-size: 20px; } JavaScript var title = document.querySelector("#title"); function setTitle(name) { title.textContent = name; id="title" #title var title = document.querySelector("#title"); title.textContent = name; © 2010 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.
14
Adding Elements Using “createElement” and “appendChild”
HTML <body> <img src="my.png"/> </body> JavaScript function addImage() { var img = document.createElement("img"); img.src = "my.png"; document.body.appendChild(img); } document.createElement("img"); document.body.appendChild(img); © 2010 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.
15
Hiding Elements Using “display”
HTML <section id="p1" class="page">...</section> <section id="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 = ""; © 2010 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.
16
demo Changing Content 2/5/2019 12:15 PM
© 2010 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.
17
Fetching Data Behind-the-Scenes
18
Sending and Receiving Data Using “XMLHttpRequest”
JavaScript function load(url, data, callback) { var xhr = new XMLHttpRequest(); xhr.open("GET", url, true); xhr.onload = function() { callback(xhr.responseText); } xhr.send(data); var xhr = new XMLHttpRequest(); xhr.open("GET", url, true); xhr.onload = callback(xhr.responseText); xhr.send(data); © 2010 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.
19
Transmitting Complex Objects Using “JSON.parse” and “JSON.stringify”
JavaScript function loadJSON(url, data, callback) { var xhr = new XMLHttpRequest(); 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) { id : 1 } response response.title © 2010 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.
20
demo Fetching Data 2/5/2019 12:15 PM
© 2010 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.
21
Keeping your Code In-Check
22
Isolating JavaScript Using the Module Pattern
(function(){ var title = document.querySelector("#title"); function setTitle(name) { title.textContent = name; } setTitle("My Title"); })(); (function(){ setTitle("My Title"); })(); © 2010 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.
23
Exposing Public APIs Using the Module Pattern
JavaScript var module = (function(){ var title = document.querySelector("#title"); function setTitle(name) { title.textContent = name; } return { setTitle : setTitle }; })(); module.setTitle("Custom Title"); var module = return { setTitle : setTitle }; module.setTitle("Custom Title"); © 2010 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.
24
demo Module Pattern 2/5/2019 12:15 PM
© 2010 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.
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 More HTML5 Examples:
28
thank you Feedback and questions http://forums.dev.windows.com
Session feedback
29
2/5/ :15 PM © 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. © 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.
Similar presentations
