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• <audio> <video>

• 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 CSS3’s @media 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

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

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 +

" <button onclick='deleteItem(\""+ key +"\")'>Delete</button>"; 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": "212 555-1234" }, { "type" : "fax", "number": "646 555-4567" } ] }

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);