HTML5 …web is getting sexy. What is HTML5? - It is still HTML, successor of HTML4x - It is...

HTML5…web is getting sexy

What is HTML5?- It is still HTML, successor of HTML4x- It is ENRICHED HTML- It is still UNDER DEVELOPMENT- Backward Compatible

Why HTML5?

- Built amazing web apps at ease- Address issues of current standard (html 4.01)- Made for web designers/developers!

What’s new?

New APIs

New Elements – more than hundred. e.g. article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer,

New Attributes

- ping, async, custom attr. etc.New Events – ondrag, ondragstart, ondragend, ondrop etc.

- We will discuss some

Simplicity from beginning<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><meta http-equiv="Content-Type" content="text/html; charset=utf-8”>

<!DOCTYPE html><meta charset=utf-8>

In HTML5

What real web made of?Class: 2.1+ million urls ID: 1.8+ million urls

Sectioning Elements<header><nav><section><aside><article><footer>

HTML5 FORM

HTML5 FORMNo matter where field exists

<form><input /></form>

<form id=“frm1”>1st <input /></form><p>Some texts</p>2nd <input form=“frm1” />

HTML4x HTML5

HTML5 FORMNew Input Types

•URL &Email•Date & Time•Number, Range•Search, Tel, Color

HTML5 FORMNew Attributes

• Required, Pattern• Min, Max, Step• Placeholder, data-*• Autocomplete, Autofocus• Multiple• Form

Not impressed?

Lets go wild!

What are they?• Canvas• Geolocation• WebSocket • Web SQL Database• Web Workers• XMLHttpRequest 2

• MathML• Web Storage• Media • SVG• Cross Document Messaging

CANVAS API

Canvas API<canvas>Not supported! Show alternate content!

</canvas>1.01.5

9.0 1.3

ExploreCanvashttp://code.google.com/p/

explorercanvas).

9.0

Browser Support

Canvas APISomething like this?

Source: http://www.youtube.com/watch?v=00bTqPr2CFM

AUDIO/VIDEO API

AUDIO/VIDEO API

isAudioSupported= !!(document.createElement(‘audio’).canPlayType);

1.03.5

9.0 1.3

9.0

Compatibility Check Browser Support

AUDIO/VIDEO API

<audio src=“file1.ogg”>Audio element is not supported. </audio> Alternate media

Fallback

<video src=“file1.ogv”>Embed the typical flash media</video>

AUDIO/VIDEO APICodec problem…

<audio controls> <source src=“file1.ogg”> <source src=“file1.mp3”> The audio track!</audio>First supported codec will be played and rest will be ignored

Geo Location APITell us where you are now!

Geo Location APIHow location is determined?

Image Source: Pro HTML5 Programming book

Geo Location API

2.03.5

10.0 4 (iPhone)

With Gear Plugin

Compatibility Check

if(navigator.geolocation) {//Geo location is supported

} else { //Geo Location is not supported

}

Browser Support

Geo Location API

navigator.geolocation.getCurrentPosition (success_callback, failure_callback, options);

function success_callback(obj_pos){var latitude = obj_pos.coords.latitude;var longitude = obj_pos.coords.longitude;var accuracy = obj_pos.coords.accuracy;

}

Requesting Location

Geo Location API

navigator.geolocation.watchLocation();

navigator.geolocation.clearWatch(gId);

Requesting Location Continuously

Web Storage API

Web Storage APIWhat is it?• Store data directly on client• Less http requests• Not old friend Cookie• Cross-browser exchange is not possible.

Web Storage APILocal Storage

• Persists beyond current or created window/tab• Persists even creator window/tab is closed

Session Storage

• Persists on only created window/tab• Destroyed as soon as creator window/tab is closed

Web Storage API3.03.0

10.5 4.0

8.0

Compatibility Check

if(window.sessionStorage) {//Session storage is supported

}if(window.localStorage) {

//Localstorage is supported}

Browser Support

Web Storage APISet/Get Session Storage

//set valueswindow.sessionStorage.setItem(key,value); window.sessionStorage.key = value;

//get valueswindow.sessionStorage.getItem(key);window.sessionStorage.key;

HTML5 Readynesshttp://html5readyness.com

26%77%86%

72%79%

Reference

http://diveintohtml5.org/

Who the hell are you?Mohammad Zakir Hossain (Raju) a.k.a The HungryCoderFounder and AdministratorProjanmo Forum (http://forum.projanmo.com)Email: [email protected]/Skype: thehungrycoderBlog: http://hungrycoder.xenexbd.com

Question?

HTML5 …web is getting sexy. What is HTML5? - It is still HTML, successor of HTML4x - It is...

Documents

Transcript of HTML5 …web is getting sexy. What is HTML5? - It is still HTML, successor of HTML4x - It is...