HTML5

ContentsHTML5Origin IntroductionFeaturesWhy HTMl5?ResourcesDemo HTML5 Applications.

Origin HTML5 introduces many cutting-edge features that

enable developers to create apps and websites with the functionality, speed, performance, and experience of desktop applications

HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).

WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML.

Steve Jobs thrashed Adobe Flash in an Open Letter April 2010

Introduction HTMl* is the core technology of the World Wide

Web With HTML, authors describe the structure of Web

pages using Markup <tags> The new standard for HTML, XML, and HTML DOM New features should be based on HTML, CSS,

DOM, and JavaScript Reduce the need for external plugins (like Flash) Better error handling More markup to replace scripting HTML5 should be device independent The development process should be visible to the

public

FeaturesStorage

File Access

Offline

Multimedia

Graphics

Geolocation

Storage With HTML5, web pages can store data locally

within the user's browser.

Earlier, this was done with cookies. However, Web Storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for. It is also possible to store large amounts of data, without affecting the website's performance.

The data is stored in key/value pairs, and a web page can only access data stored by itself

StorageTwo new objects for storing data on the client

side: localStorage - stores data with no expiration date sessionStorage - stores data for one session

The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.

Set an Item Value: localStorage.setItem("bar", foo); Get the Item Value: localStorage.getItem("bar") Remove the Item Value:

localStorage.removeItem(“bar”)

Storage The sessionStorage object is equal to the

localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the browser window.

Set an Item Value: sessionStorage.setItem("bar", foo);

Get the Item Value: sessionStorage.getItem("bar")

Remove the Item Value: sessionStorage.removeItem(“bar”)

File Access HTML5 provides very powerful APIs to interact

with binary data and a user's local file system.

The File APIs give web applications the ability to do things like read files [a]synchronously, create arbitrary Blobs, write files to a temporary location, recursively read a file directory, perform file drag and drop from the desktop to the browser, and upload binary data usingXMLHttpRequest2.

You could use client-side logic to verify an upload's mimetype matches its file extension or restrict the size of an upload

File Accessfunction onInitFs(fs) {

fs.root.getFile('log.txt', {}, function(fileEntry) {

// Get a File object representing the file,

// then use FileReader to read its contents.

fileEntry.file(function(file) {

var reader = new FileReader();

reader.onloadend = function(e) {

var txtArea = document.createElement('textarea');

txtArea.value = this.result;

document.body.appendChild(txtArea); };

reader.readAsText(file);

}, errorHandler);

}, errorHandler); }

window.requestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, errorHandler);

File Access

Offline It's becoming increasingly important for web-based

applications to be accessible offline. Yes, all browsers have caching mechanisms, but

they're unreliable and don't always work as you might expect. HTML5 addresses some of the annoyances of being offline with the ApplicationCache interface.

Offline browsing - users can navigate your full site when they're offline

Speed - cached resources are local, and therefore load faster.

Reduced server load - the browser will only download resources from the server that have changed.

Offline The manifest file is a simple text file, which tells the

browser what to cache (and what to never cache). The manifest file has three sections:

CACHE MANIFEST - Files listed under this header will be cached after they are downloaded for the first time

NETWORK - Files listed under this header require a connection to the server, and will never be cached

FALLBACK - Files listed under this header specifies fallback pages if a page is inaccessible

Offline <!DOCTYPE HTML>

<html manifest="demo.appcache"></html>

CACHE MANIFEST# 2012-02-21 v1.0.0/theme.css/logo.gif/main.js

NETWORK:login.asp

FALLBACK:/html/ /offline.html

MultiMedia Audio and Video became first-class citizens on the

Web with HTML5 the same way that other media types like images did in the past.

Through their new APIs you can access, control and manipulate timeline data and network states of the files. With the coming additions to the APIs you will be able to read and write raw data to audio files (Audio Data API) or manipulate captions in videos (Timed Track API).

But the real power of these new HTML elements stands out when they are combined with the other technologies of the web stack, be it Canvas, SVG, CSS or even WebGL.

MultiMedia To play an audio file in HTML5:

<audio controls>  <source src="horse.ogg" type="audio/ogg">  <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>

To play a Video in HTML5:

<video width="320" height="240" controls>  <source src="movie.mp4" type="video/mp4">  <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>

Graphics The web has always been a visual medium, but a

restricted one at best.

Until recently, HTML developers were limited to

CSS and JavaScript in order to produce animations or visual effects for their websites, or they would have to rely on a plugin like Flash.

There are many new features which deal with graphics on the web: 2D Canvas, SVG, 3D CSS transforms etc.

Graphics The HTML5 <canvas> element is used to draw

graphics, on the fly, via scripting (usually JavaScript).

The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.

<script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,75);</script>

Geolocation The HTML5 Geolocation API is used to get the

geographical position of a user. Since this can compromise user privacy, the position is

not available unless the user approves it.

This functionality could be used as part of user queries, e.g.

to guide someone to a destination point. It could also be used for "geo-tagging" some content the

user has created, e.g. to mark where a photo was taken.

The API is device-agnostic; it doesn't care how the browser determines location, so long as clients can request and receive location data in a standard way.

Geolocation<script>

var x=document.getElementById(“geo");

function getLocation()

{

if (navigator.geolocation)

{

navigator.geolocation.getCurrentPosition(showPosition);

}

else{

x.innerHTML="Geolocation is not supported by this browser."; }

}

function showPosition(position)

{

x.innerHTML="Latitude: " + position.coords.latitude +

"<br>Longitude: " + position.coords.longitude;

}

</script>

Why HTML5? Non - Monolithic technology A collection of features, technologies, and APIs Fast. Secure. Responsive. Interactive. Stunningly

beautiful – Words associated with HTML5. Accelerates the pace of your innovation Enables you to seamlessly roll out your latest

work to all your users simultaneously. Frees your users from the hassles of having to

install apps across multiple devices. Fifth revision of the HTML markup language,

CSS3, and a series of JavaScript APIs

Why HTML5? Enables you to create complex applications that

previously could be created only for desktop platforms.

Belong to W3C & WHATWG that includes Google, Microsoft, Apple, Mozilla, Facebook, IBM, HP, Adobe.

Next Generation -web Apps can run high-performance graphics, work offline, store a large amount of data on the client, perform calculations fast, More interactivity and collaboration.

Resources http://w3c.orghttp://html5readiness.comhttps://developer.mozilla.org/en/HTML/HTML5http://w3schools.com/html5http://caniuse.comhttp://html5test.comhttp://dev.chromium.org/developers/web-plat

form-statushttp://html5demos.comhttp://developer.apple.com/safari

Demo

Demo