1 / 14

HTML5

HTML5. HTML5’s overall theme. The browser as a rich application platform r ich, cross-device user interfaces offline operation capability h ardware access capabilities geolocation. HTML5 & related standards. The Core HTML5 spec Cascading Style Sheets Version 3 (CSS3) Web Workers

Download Presentation

HTML5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

More Related