HTML5

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

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

New tags Menus, navigation sections Multi-column layout, flexible box layout Less direct styling – eg, no direct table styling, do it by CSS3

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 rules.

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

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

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

Input section Key: Value: Save Output section

function saveLocal(){ //Get key and value var localKey = document.getElementById("localKey").value; var localValue = 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(); }

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

function displayLocal(){ //Get the ul listLocal var outputList=document.getElementById("listLocal"); //Clear the list outputList.innerHTML=""; //Get the number of elements to display var numLocal=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); var value=localStorage.getItem(key); //Create the list item var item=document.createElement("li"); item.innerHTML=key + " " + value + " Delete "; outputList.appendChild(item); }

{ "firstName": "John", "lastName" : "Smith", "age" : 25, "address" : { "streetAddress": "21 2nd Street", "city" : "New York", "state" : "NY", "postalCode" : "10021" }, "phoneNumber": [ { "type" : "home", "number": " " }, { "type" : "fax", "number": " " } ] }

var my_JSON_object = {}; var http_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);