HTML5

1. HTML5

2. HTML5’s overall theme The browser as a rich application platform • rich, cross-device user interfaces • offline operation capability • hardware access capabilities • geolocation

3. HTML5 & related standards • The Core HTML5 spec • Cascading Style Sheets Version 3 (CSS3) • Web Workers • Web Storage • Web Sockets • Geolocation, access to hardware • Microdata • Device API and File API

4. New tags • Menus, navigation sections • Multi-column layout, flexible box layout • <audio> <video> • Less direct styling • eg, no direct table styling, do it by CSS3

5. Browsing context • Developers can even use CSS3 to specify a style per device • for example, to differentiate styling between TVs, mobile devices, and print views using CSS3’s @media rules.

6. Many fancy features in HTML5, without Javascript • Transitions • eg, when you hover over a link change the color of the link • Potentially added dynamically • Animations • Could run on GPU – as opposed to Javascript

7. Conclusion • Rich, browser-contextual presentation • Reduces reliance on Javascript • Removes needs for plug-in’s • the Flash ended in 2012 • by boosting web apps over native apps, the Apple App Store may also lose its importance

8. Web Storage • Will soon make cookies obsolete • Local storage of >5MB per domain • Key/value pairs of strings • Programmed by Javascript • localStorage.setItem(localKey,localValue) • localStorage.getItem(key) • localStorage.removeItem(key) • Object storage indirectly, by JSON serialization • Text-based representation of Javascript objects • Wins over XML in Ajax, as plenty of tools for formatting Java server objects into JSON

9. <section id="input"> <h1>Input section</h1> Key: <input type="text" name="localKey" id="localKey"/> Value: <input type="text" name="localValue" id="localValue"/> <button id="save-local" onclick="saveLocal()">Save</button> </section> <section id="output"> <h1>Output section</h1> <span id="localCount"></span><br/> <ul id="listLocal"> </ul> </section>

10. function saveLocal(){ //Get key and value varlocalKey = document.getElementById("localKey").value; varlocalValue = document.getElementById("localValue").value; //Add the key/value pair in the localStorage localStorage.setItem(localKey,localValue); //Empty Key and Value inputs document.getElementById("localKey").value=""; document.getElementById("localValue").value=""; // Returns and prints the number of saved pairs storageCount(); // change the output section displayLocal(); }

11. function storageCount(){ document.getElementById("localCount").innerHTML = localStorage.length + " objects in localStorage"; }

12. function displayLocal(){ //Get the ullistLocal varoutputList=document.getElementById("listLocal"); //Clear the list outputList.innerHTML=""; //Get the number of elements to display varnumLocal=localStorage.length-1; if (numLocal == -1) return; //For each element in the localStorage add a new li for(i=0;i<=numLocal;i++) { //Get the Key and from this Key, get the value var key=localStorage.key(i); varvalue=localStorage.getItem(key); //Create the list item var item=document.createElement("li"); item.innerHTML=key + " " + value + " <button onclick='deleteItem(\""+ key +"\")'>Delete</button>"; outputList.appendChild(item); } }

13. { "firstName": "John", "lastName" : "Smith", "age" : 25, "address" : { "streetAddress": "21 2nd Street", "city" : "New York", "state" : "NY", "postalCode" : "10021" }, "phoneNumber": [ { "type" : "home", "number": "212 555-1234" }, { "type" : "fax", "number": "646 555-4567" } ] }

14. varmy_JSON_object = {}; varhttp_request = new XMLHttpRequest(); http_request.open("GET", url, true); http_request.onreadystatechange = function () { var done = 4, ok = 200; if (http_request.readyState == done && http_request.status == ok) { my_JSON_object = JSON.parse(http_request.responseText); } }; http_request.send(null);