Upload
mohammad-raju
View
1.284
Download
0
Tags:
Embed Size (px)
DESCRIPTION
HTML 5
Citation preview
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
}
Browser SupportBrowser 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 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}
Browser SupportBrowser Support
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?