Published on

html 5 is latest language of the web

Published in: Technology
  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. HTML 5 Overview
  2. 2. Why we Need it ?
  3. 3. History
  4. 4. WHATWG The Web Hypertext Application Technology Working Group
  5. 5. What's New In HTML 5?
  6. 6. -and much more <canvas> <video> <audio> Local Storage Web Workers Geo Location <input types> Form Elements Micro Data <meter> <progress>
  7. 7. Detecting HTML 5 how can i use it if older browsers doesn't support it?
  8. 8. Detecting HTML 5 Two Ways: 1.Using Java Script 2.Modernizr: An HTML5 Detection Library
  9. 9. Modernizr( An HTML5 Detection Library) <ul><li>It's an open source, MIT-licensed JavaScript library </li></ul><ul><li>How can i use it: </li></ul><ul><ul><ul><ul><li>Download it: </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Include it in your web page head section </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Always use the latest version </li></ul></ul></ul></ul>
  10. 10. Modernizr( An HTML5 Detection Library) <ul><li>Example: </li></ul><ul><ul><li><!DOCTYPE html> </li></ul></ul><ul><ul><li><html> </li></ul></ul><ul><ul><li><head> </li></ul></ul><ul><ul><li><meta charset=&quot;utf-8&quot;> </li></ul></ul><ul><ul><li><title> HTML5</title> </li></ul></ul><ul><ul><li><script src=&quot;modernizr.min.js&quot;></script> </li></ul></ul><ul><ul><li></head> </li></ul></ul><ul><ul><li><body> </li></ul></ul><ul><ul><ul><ul><ul><li>... </li></ul></ul></ul></ul></ul><ul><ul><li></body> </li></ul></ul><ul><ul><li></html> </li></ul></ul>
  11. 11. Modernizr( An HTML5 Detection Library) <ul><li>Let's Detect the video tag support </li></ul><ul><ul><ul><li>if ({ </li></ul></ul></ul><ul><ul><ul><ul><ul><li>// let's play some </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>} </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><li>else { </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>//do something else </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>} </li></ul></ul></ul></ul></ul>
  12. 12. Modernizr( An HTML5 Detection Library) <ul><li>Let's Detect the Local Storage tag support </li></ul><ul><ul><ul><li>if (Modernizr.localstorage){ </li></ul></ul></ul><ul><ul><ul><ul><ul><li>// local storage is available ! </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>} </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><li>else { </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>//do something else </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>try Google Gears </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>} </li></ul></ul></ul></ul></ul>
  13. 13. Dive into HTML 5 <ul><li>The Doctype (Interesting History Behaind it) </li></ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN &quot; </li></ul><ul><li>&quot; &quot;> </li></ul><ul><li>This Doctype is very long and ugly. </li></ul><ul><li>Now the all new HTML 5 doctype </li></ul><ul><ul><ul><ul><ul><li><!DOCTYPE html> </li></ul></ul></ul></ul></ul>
  14. 14. Dive into HTML 5 <ul><li>The ROOT element </li></ul><ul><li><html xmlns=&quot; &quot; lang=&quot;en&quot; xml:lang=”en”> </li></ul><ul><li>It's the old Root Element type (it's also fine with HTML5) </li></ul><ul><li>Now in HTML 5 </li></ul><ul><ul><ul><ul><ul><li><html lang=&quot;en&quot; xml:lang=&quot;en&quot;> </li></ul></ul></ul></ul></ul>
  15. 15. New Semantic Elements
  16. 16. -and much more <section> <nav> <article> <hgroup> <footer> <header> <aside> <time> <figure> <legend>
  17. 19. <header> <nav> <aside> <article> <footer>
  18. 20. <time> <figure> <legend> <meter>
  19. 21. <section> <h1> <h1> <h1>
  20. 22. Dive into HTML 5 <ul><li>The Biggest question is: </li></ul><ul><li>Why i use/need all this if every thing is working fine today with my HTML 4? </li></ul><ul><li>The Answer is: </li></ul><ul><ul><ul><ul><ul><li>It's more practicle. </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>It's search engine friendly. </li></ul></ul></ul></ul></ul>
  21. 23. What happen with OLD Browsers? <ul><li>No Problem with Chrome,Firefox,Safari,Webkit. </li></ul><ul><li>But what happen with Internet Explorer? </li></ul><ul><ul><li>Again the IE is the culprit. </li></ul></ul>
  22. 24. We have two solutions for Mr. IE <ul><ul><ul><li>1. </li></ul></ul></ul><ul><ul><ul><li><!--[if lt IE 9]> </li></ul></ul></ul><ul><ul><ul><ul><li><script> </li></ul></ul></ul></ul><ul><ul><ul><li>var e = (&quot;abbr,article,aside,audio,canvas,datalist,details,&quot; + </li></ul></ul></ul><ul><ul><ul><ul><li>&quot;figure,footer,header,hgroup,mark,menu,meter,nav,output,&quot; + </li></ul></ul></ul></ul><ul><ul><ul><ul><li>&quot;progress,section,time,video&quot;).split(','); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>for (var i = 0; i < e.length; i++) { </li></ul></ul></ul></ul><ul><ul><ul><ul><li>document.createElement(e[i]); </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>} </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li></script> </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li><![endif]--> </li></ul></ul></ul></ul></ul><ul><li>2.Simply use html5.js script </li></ul><ul><ul><li> </li></ul></ul>
  23. 25. <Canvas> <ul><li><canvas width=&quot;300&quot; height=&quot;225&quot;></canvas> </li></ul><ul><li>You can display Text,Image,Gradient etc. </li></ul><ul><li>You can make games without using flash. </li></ul><ul><li>But what happen with Internet Explorer? </li></ul><ul><ul><li>Again the IE is the culprit. </li></ul></ul><ul><ul><li>Use excanvas.js (A java scipt library) </li></ul></ul><ul><ul><li> </li></ul></ul>
  24. 26. <video> <ul><li><video src=&quot;pr6.webm&quot; width=&quot;320&quot; height=&quot;240&quot;></video> </li></ul><ul><li><video src=&quot;pr6.webm&quot; width=&quot;320&quot; height=&quot;240&quot; controls ></video> </li></ul><ul><li><video src=&quot;pr6.webm&quot; width=&quot;320&quot; height=&quot;240&quot; preload ></video> </li></ul><ul><li><video src=&quot;pr6.webm&quot; width=&quot;320&quot; height=&quot;240&quot; autoplay ></video> </li></ul><ul><li>For internet explorer earlier than 9 th version use Flash :( </li></ul><ul><li>I am really sorry we have no solutions yet. </li></ul>
  25. 27. Do you know video Containers?
  26. 28. Video Encoding <ul><li>You can't play all formats of video or audio. </li></ul><ul><li>Only .ogg .webM .H.264 is supported then what? </li></ul><ul><li>Firefogg </li></ul><ul><li>HandBrake </li></ul><ul><li>Ffmpeg </li></ul><ul><li>Always make 3 formats of your video/audio </li></ul>
  27. 29. Biggest Problem with video/audio <ul><li>A single browser doesn't support all formats. </li></ul><ul><li>Then <source> tag can solve the problem and save bandwidth and speed up your website </li></ul><ul><li><video width=&quot;320&quot; height=&quot;240&quot; controls> </li></ul><ul><li><source src=&quot;pr6.mp4&quot; type='video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;'> </li></ul><ul><li><source src=&quot;pr6.webm&quot; type='video/webm; codecs=&quot;vp8, vorbis&quot;'> </li></ul><ul><li><source src=&quot;pr6.ogv&quot; type='video/ogg; codecs=&quot;theora, vorbis&quot;'> </li></ul><ul><li></video> </li></ul><ul><li>You can also use MIME header </li></ul>
  28. 30. Geo-Location <ul><li>You can identify the exact Geo-Location of your user but if user permittes you. </li></ul><ul><li>Do you how Geo-Location is identified? </li></ul><ul><li>You can also identified the speed of the user's web device. </li></ul><ul><li>Use Google Gears for Older browsers. </li></ul><ul><li>Best solution is use geo.js for all browsers including Mobiles. </li></ul>
  29. 31. Offline Storage <ul><li>It's one of the most interesting feature of html5. </li></ul><ul><li>Your website can store data on your computer(like database) and you can use it in offline mode. </li></ul><ul><li>It also require user permission. </li></ul><ul><li>Security issue and automatic update. </li></ul>
  30. 32. Input types <input type=&quot;number&quot;> <input type=&quot;datetime&quot;> <input type=&quot;range&quot;> <input type=&quot;color&quot;> <input type=&quot;tel&quot;> <input type=&quot;url&quot;> <input type=&quot;email&quot;> <input type=&quot;month&quot;> <input type=&quot;date&quot;> <input type=&quot;search&quot;> <input type=&quot;time&quot;> <input type=&quot;week&quot;>
  31. 33. Thank You Queries?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.