html5 …web is getting sexy. what is html5? - it is still html, successor of html4x - it is...
TRANSCRIPT
![Page 1: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062716/56649e015503460f94aeb3bc/html5/thumbnails/1.jpg)
HTML5…web is getting sexy
![Page 2: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062716/56649e015503460f94aeb3bc/html5/thumbnails/2.jpg)
What is HTML5?- It is still HTML, successor of HTML4x- It is ENRICHED HTML- It is still UNDER DEVELOPMENT- Backward Compatible
![Page 3: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062716/56649e015503460f94aeb3bc/html5/thumbnails/3.jpg)
Why HTML5?
- Built amazing web apps at ease- Address issues of current standard (html 4.01)- Made for web designers/developers!
![Page 4: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062716/56649e015503460f94aeb3bc/html5/thumbnails/4.jpg)
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
![Page 5: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062716/56649e015503460f94aeb3bc/html5/thumbnails/5.jpg)
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
![Page 6: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062716/56649e015503460f94aeb3bc/html5/thumbnails/6.jpg)
What real web made of?Class: 2.1+ million urls ID: 1.8+ million urls
![Page 7: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062716/56649e015503460f94aeb3bc/html5/thumbnails/7.jpg)
Sectioning Elements<header><nav><section><aside><article><footer>
![Page 8: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062716/56649e015503460f94aeb3bc/html5/thumbnails/8.jpg)
HTML5 FORM
![Page 9: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062716/56649e015503460f94aeb3bc/html5/thumbnails/9.jpg)
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
![Page 10: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062716/56649e015503460f94aeb3bc/html5/thumbnails/10.jpg)
HTML5 FORMNew Input Types
•URL &Email•Date & Time•Number, Range•Search, Tel, Color
![Page 11: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062716/56649e015503460f94aeb3bc/html5/thumbnails/11.jpg)
HTML5 FORMNew Attributes
• Required, Pattern• Min, Max, Step• Placeholder, data-*• Autocomplete, Autofocus• Multiple• Form
![Page 12: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062716/56649e015503460f94aeb3bc/html5/thumbnails/12.jpg)
Not impressed?
Lets go wild!
![Page 13: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062716/56649e015503460f94aeb3bc/html5/thumbnails/13.jpg)
What are they?• Canvas• Geolocation• WebSocket • Web SQL Database• Web Workers• XMLHttpRequest 2
• MathML• Web Storage• Media • SVG• Cross Document Messaging
![Page 14: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062716/56649e015503460f94aeb3bc/html5/thumbnails/14.jpg)
CANVAS API
![Page 15: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062716/56649e015503460f94aeb3bc/html5/thumbnails/15.jpg)
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
![Page 16: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062716/56649e015503460f94aeb3bc/html5/thumbnails/16.jpg)
Canvas APISomething like this?
Source: http://www.youtube.com/watch?v=00bTqPr2CFM
![Page 17: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062716/56649e015503460f94aeb3bc/html5/thumbnails/17.jpg)
AUDIO/VIDEO API
![Page 18: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062716/56649e015503460f94aeb3bc/html5/thumbnails/18.jpg)
AUDIO/VIDEO API
isAudioSupported= !!(document.createElement(‘audio’).canPlayType);
1.03.5
9.0 1.3
9.0
Compatibility Check Browser Support
![Page 19: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062716/56649e015503460f94aeb3bc/html5/thumbnails/19.jpg)
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>
![Page 20: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062716/56649e015503460f94aeb3bc/html5/thumbnails/20.jpg)
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
![Page 21: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062716/56649e015503460f94aeb3bc/html5/thumbnails/21.jpg)
Geo Location APITell us where you are now!
![Page 22: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062716/56649e015503460f94aeb3bc/html5/thumbnails/22.jpg)
Geo Location APIHow location is determined?
Image Source: Pro HTML5 Programming book
![Page 23: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062716/56649e015503460f94aeb3bc/html5/thumbnails/23.jpg)
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
![Page 24: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062716/56649e015503460f94aeb3bc/html5/thumbnails/24.jpg)
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
![Page 25: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062716/56649e015503460f94aeb3bc/html5/thumbnails/25.jpg)
Geo Location API
navigator.geolocation.watchLocation();
navigator.geolocation.clearWatch(gId);
Requesting Location Continuously
![Page 26: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062716/56649e015503460f94aeb3bc/html5/thumbnails/26.jpg)
Web Storage API
![Page 27: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062716/56649e015503460f94aeb3bc/html5/thumbnails/27.jpg)
Web Storage APIWhat is it?• Store data directly on client• Less http requests• Not old friend Cookie• Cross-browser exchange is not possible.
![Page 28: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062716/56649e015503460f94aeb3bc/html5/thumbnails/28.jpg)
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
![Page 29: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062716/56649e015503460f94aeb3bc/html5/thumbnails/29.jpg)
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
![Page 30: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062716/56649e015503460f94aeb3bc/html5/thumbnails/30.jpg)
Web Storage APISet/Get Session Storage
//set valueswindow.sessionStorage.setItem(key,value); window.sessionStorage.key = value;
//get valueswindow.sessionStorage.getItem(key);window.sessionStorage.key;
![Page 31: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062716/56649e015503460f94aeb3bc/html5/thumbnails/31.jpg)
HTML5 Readynesshttp://html5readyness.com
26%77%86%
72%79%
![Page 32: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062716/56649e015503460f94aeb3bc/html5/thumbnails/32.jpg)
Reference
http://diveintohtml5.org/
![Page 33: 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](https://reader036.vdocuments.mx/reader036/viewer/2022062716/56649e015503460f94aeb3bc/html5/thumbnails/33.jpg)
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?