1 / 33

HTML5

HTML5. …web is getting sexy. - It is still HTML, successor of HTML4x - It is Enriched HTML - It is still under development - B ackward Compatible. What is HTML5?. B uilt amazing web apps at ease Address issues of current standard (html 4.01) Made for web designers/developers!.

perry
Télécharger la présentation

HTML5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML5 …web is getting sexy

  2. - It is still HTML, successor of HTML4x - It isEnriched HTML - It is still under development - Backward Compatible What is HTML5?

  3. Built amazing web apps at ease • Address issues of current standard (html 4.01) • Made for web designers/developers! Why HTML5?

  4. What’s new? 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. New APIs - 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”> In HTML5 <!DOCTYPE html> <meta charset=utf-8>

  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 HTML5 HTML4x <form> <input /> </form> <form id=“frm1”> 1st <input /> </form> <p>Some texts</p> 2nd <input form=“frm1” />

  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 Browser Support <canvas> Not supported! Show alternate content! </canvas> 1.0 1.5 9.0 1.3 9.0 ExploreCanvas http://code.google.com/p/explorercanvas).

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

  17. AUDIO/VIDEO API

  18. AUDIO/VIDEO API Browser Support Compatibility Check isAudioSupported= !!(document.createElement(‘audio’).canPlayType); 1.0 3.5 9.0 1.3 9.0

  19. AUDIO/VIDEO API Fallback <audio src=“file1.ogg”> Audio element is not supported. </audio> Alternate media • <video src=“file1.ogv”> Embed the typical flash media </video>

  20. AUDIO/VIDEO API 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. 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 Compatibility Check Browser Support if(navigator.geolocation) { //Geo location is supported } else { //Geo Location is not supported } 2.0 3.5 10.0 4 (iPhone) With Gear Plugin

  24. Geo Location API Requesting Location 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; }

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

  26. Web Storage API

  27. Web Storage API 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 Compatibility Check Browser Support if(window.sessionStorage) { //Session storage is supported } • if(window.localStorage) { • //Localstorage is supported • } 3.0 3.0 10.5 4.0 8.0

  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% 79% 72%

  32. Reference http://diveintohtml5.org/

  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?

More Related