HTML 5 HTML 5s overall theme The browser

HTML 5

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

HTML 5 & related standards • • The Core HTML 5 spec Cascading Style Sheets Version 3 (CSS 3) 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 CSS 3

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

Many fancy features in HTML 5, without Javascript • Transitions – eg, when you hover 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 >5 MB per domain Key/value pairs of strings Programmed by Javascript – local. Storage. set. Item(local. Key, local. Value) – local. Storage. get. Item(key) – local. Storage. remove. Item(key) • Object storage indirectly, by JSON serialization – Text-based representation of Javascript objects – Wins over XML in Ajax, as plenty of tools formatting Java server objects into JSON

<section id="input"> <h 1>Input section</h 1> Key: <input type="text" name="local. Key" id="local. Key"/> Value: <input type="text" name="local. Value" id="local. Value"/> <button id="save-local" onclick="save. Local()">Save</button> </section> <section id="output"> <h 1>Output section</h 1> <span id="local. Count"></span><br/> <ul id="list. Local"> </ul> </section>

function save. Local(){ //Get key and value var local. Key = document. get. Element. By. Id("local. Key"). value; var local. Value = document. get. Element. By. Id("local. Value"). value; //Add the key/value pair in the local. Storage. set. Item(local. Key, local. Value); //Empty Key and Value inputs document. get. Element. By. Id("local. Key"). value=""; document. get. Element. By. Id("local. Value"). value=""; } // Returns and prints the number of saved pairs storage. Count(); // change the output section display. Local();

function storage. Count(){ document. get. Element. By. Id("local. Count"). inner. HTML = local. Storage. length + " objects in local. Storage"; }

function display. Local(){ //Get the ul list. Local var output. List=document. get. Element. By. Id("list. Local"); //Clear the list output. List. inner. HTML=""; //Get the number of elements to display var num. Local=local. Storage. length-1; if (num. Local == -1) return; //For each element in the local. Storage add a new li for(i=0; i<=num. Local; i++) { //Get the Key and from this Key, get the value var key=local. Storage. key(i); var value=local. Storage. get. Item(key); //Create the list item var item=document. create. Element("li"); item. inner. HTML=key + " " + value + " <button onclick='delete. Item(""+ key +"")'>Delete</button>"; output. List. append. Child(item);

{ } "first. Name": "John", "last. Name" : "Smith", "age" : 25, "address" : { "street. Address": "21 2 nd Street", "city" : "New York", "state" : "NY", "postal. Code" : "10021" }, "phone. Number": [ { "type" : "home", "number": "212 555 -1234" }, { "type" : "fax", "number": "646 555 -4567" } ]

$var my_JSON_object = {}; var http_request = new XMLHttp. Request(); http_request. open("GET", url, true);$