1. HTML5 …web is getting sexy

2. What is HTML5? - It is still HTML, successor of HTML4x - It is ENRICHED 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 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

5. Simplicity from beginning In HTML5

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

7. Sectioning Elements

8. HTML5 FORM

9. No matter where field exists 1 st Some texts 2 nd HTML4x HTML5

10. HTML5 FORM New Input Types URL &Email Date & Time Number, Range Search, Tel, Color

11. HTML5 FORM New Attributes Required, Pattern Min, Max, Step Placeholder, data-* Autocomplete, Autofocus Multiple Form

12. Not impressed? Lets go wild!

13. What are they? Canvas Geolocation WebSocket Web SQL Database Web Workers XMLHttpRequest 2 MathML Web Storage Media SVG Cross Document Messaging

14. CANVAS API

15. Canvas API Not supported! Show alternate content! 1.0 1.5 9.0 1.3 ExploreCanvas http://code.google.com/p/expl orercanvas). 9.0 Browser Support

16. Canvas API Something like this? Source: http://www.youtube.com/watch?v=00bTqPr2CFM

17. AUDIO/VIDEO API

18. isAudioSupported= !!(document.createE lement(‘audio’).canP layType); 1.0 3.5 9.0 1.3 9.0 Compatibility Check Browser Support

19. AUDIO/VIDEO API Audio element is not supported. Alternate media Fallback Embed the typical flash media

20. AUDIO/VIDEO API Codec problem… The audio track! First supported codec will be played and rest will be ignored

21. Geo Location API Tell us where you are now!

22. Geo Location API How location is determined? Image Source: Pro HTML5 Programming book

23. Geo Location API 2.0 3.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

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

25. Geo Location API navigator.geolocation.watchLocation(); navigator.geolocation.clearWatch(gId); Requesting Location Continuously

26. Web Storage API

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

29. Web Storage API 3.0 10.5 4.0 8.0 Compatibility Check if(window.sessionStorage) { //Session storage is supported } if(window.localStorage) { //Localstorage is supported } Browser Support

30. Web Storage API Set/Get Session Storage //set values window.sessionStorage.setItem(key,value); window.sessionStorage.key = value; //get values window.sessionStorage.getItem(key); window.sessionStorage.key;

31. HTML5 Readyness http://html5readyness.com 26% 77% 86% 72% 79%

32. Reference http://diveintohtml5.org/

33. Who the hell are you? Mohammad Zakir Hossain (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?