html5
Download
Skip this Video
Download Presentation
HTML5

Loading in 2 Seconds...

play fullscreen
1 / 14

HTML5 - PowerPoint PPT Presentation


  • 162 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'HTML5' - sloane-burch


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

Input section

Key:

Value:

Output section


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

}

slide11
function storageCount(){

document.getElementById("localCount").innerHTML =

localStorage.length + " objects in localStorage";

}

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

" ";

outputList.appendChild(item);

}

}

slide13
{

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

}

]

}

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

ad