HTML 5

HTML5…web is getting sexy

What is HTML5?- It is still HTML, successor of HTML4x- It isENRICHED 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 APIsNew APIs

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

New Attributes New Attributes

- ping, async, custom attr. etc.New Events 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 HTML5In 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” />

HTML4xHTML4x HTML5HTML5

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

9.09.0 1.31.3

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

explorercanvas).

9.09.0

Browser SupportBrowser Support

AUDIO/VIDEO API

AUDIO/VIDEO API

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

1.01.03.53.5

9.09.0 1.31.3

9.09.0

Compatibility CheckCompatibility Check Browser SupportBrowser Support

AUDIO/VIDEO API

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

FallbackFallback

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

AUDIO/VIDEO APICodec problem…Codec 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 APIHow location is determined?How location is determined?

Image Source: Pro HTML5 Programming book

Geo Location API

2.02.03.53.5

10.010.0 4 (iPhone)4 (iPhone)

With Gear PluginWith Gear Plugin

Compatibility CheckCompatibility Check

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

} else { //Geo Location is not supported

}


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

Geo Location API

navigator.geolocation.watchLocation();

navigator.geolocation.clearWatch(gId);

Requesting Location ContinuouslyRequesting Location Continuously

Web Storage API

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

Web Storage APILocal StorageLocal Storage

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

Session StorageSession Storage

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

Web Storage API3.03.03.03.0

10.510.5 4.04.0

8.08.0

Compatibility CheckCompatibility Check

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

}if(window.localStorage) {

//Localstorage is supported}


Web Storage APISet/Get Session StorageSet/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%26%77%77%86%86%

72%72%79%79%

Reference

http://diveintohtml5.org/http://diveintohtml5.org/

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

Question?

HTML 5

Technology

Transcript of HTML 5