2. What is HTML5?
- It is still HTML, successor of HTML4x
- It isENRICHED HTML
- It is still UNDER DEVELOPMENT
- Backward Compatible
3. Why HTML5?
-Built amazing web apps at ease
-Address issues of current standard
(html 4.01)
- Made for web designers/developers!
4. What’s new?
New APIsNew APIs
New ElementsNew Elements
– more than hundred. e.g. article, aside, audio, canvas,
command, datalist, details, embed, figcaption, figure, footer,
New AttributesNew Attributes
- ping, async, custom attr. etc.
New EventsNew Events
– ondrag, ondragstart, ondragend, ondrop etc.
- We will discuss some
5. 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
6. What real web made of?
Class: 2.1+ million urls ID: 1.8+ million urls
15. Canvas API
<canvas>
Not supported! Show alternate content!
</canvas>
1.01.01.51.5
9.09.0 1.31.3
ExploreCanvas
http://code.google.com/p/expl
orercanvas).
9.09.0
Browser SupportBrowser Support
19. 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>
20. AUDIO/VIDEO API
Codec 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
21.
22. Geo Location API
How location is determined?How location is determined?
Image Source: Pro HTML5 Programming book
23. 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
27. Web Storage API
What is it?What is it?
• Store data directly on client
• Less http requests
• Not old friend Cookie
• Cross-browser exchange is not possible.
28. Web Storage API
Local 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
29. Web Storage API
3.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
30. Web Storage API
Set/Get Session StorageSet/Get Session Storage
//set values
window.sessionStorage.setItem(key,value)
;
window.sessionStorage.key = value;
//get values
window.sessionStorage.getItem(key);
window.sessionStorage.key;
33. Who the hell are you?
Mohammad ZakirHossain (Raju) a.k.a The HungryCoder
Founder and Administrator
Projanmo Forum (http://forum.projanmo.com)
Email: thehungrycoder@gmail.com
Yahoo/Skype: thehungrycoder
Blog: http://hungrycoder.xenexbd.com
Question?
