Html5
This presentation is the property of its rightful owner.
Sponsored Links
1 / 14

HTML5 PowerPoint PPT Presentation


  • 101 Views
  • Uploaded on
  • Presentation posted in: General

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Html5

HTML5


Html5 s overall theme

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

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

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

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

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

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

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


Html5

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


Html5

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

}


Html5

function storageCount(){

document.getElementById("localCount").innerHTML =

localStorage.length + " objects in localStorage";

}


Html5

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

}

}


Html5

{

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

}

]

}


Html5

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


  • Login