Your SlideShare is downloading. ×
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
HTML 5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML 5

1,289

Published on

HTML 5

HTML 5

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,289
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
60
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • a
  • Transcript

    • 1. HTML5…web is getting sexy
    • 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
    • 7. Sectioning Elements <header> <nav> <section> <aside> <article> <footer>
    • 8. HTML5 FORM
    • 9. HTML5 FORM No matter where field exists <form> <input /> </form> <form id=“frm1”> 1st <input /> </form> <p>Some texts</p> 2nd <input form=“frm1” /> HTML4xHTML4x HTML5HTML5
    • 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 <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
    • 16. AUDIO/VIDEO API
    • 17. AUDIO/VIDEO API isAudioSupported= !! (document.createEle ment(‘audio’).canPla yType); 1.01.03.53.5 9.09.0 1.31.3 9.09.0 Compatibility CheckCompatibility Check Browser SupportBrowser Support
    • 18. 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>
    • 19. 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
    • 20. Geo Location API How location is determined?How location is determined? Image Source: Pro HTML5 Programming book
    • 21. 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
    • 22. 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
    • 23. Geo Location API navigator.geolocation.watchLocation(); navigator.geolocation.clearWatch(gId); Requesting Location ContinuouslyRequesting Location Continuously
    • 24. Web Storage API
    • 25. 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.
    • 26. 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
    • 27. 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
    • 28. 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;
    • 29. HTML5 Readyness http://html5readyness.com 26%26% 77%77% 86%86% 72%72% 79%79%
    • 30. Reference http://diveintohtml5.org/http://diveintohtml5.org/
    • 31. 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?

    ×