Your SlideShare is downloading. ×
0
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
Html5
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

Html5

2,001

Published on

html 5 is latest language of the web

html 5 is latest language of the web

Published in: Technology
2 Comments
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
2,001
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
133
Comments
2
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

Transcript

  • 1. HTML 5 Overview
  • 2. Why we Need it ?
  • 3. History
  • 4. WHATWG The Web Hypertext Application Technology Working Group
  • 5. What's New In HTML 5?
  • 6. -and much more <canvas> <video> <audio> Local Storage Web Workers Geo Location <input types> Form Elements Micro Data <meter> <progress>
  • 7. Detecting HTML 5 how can i use it if older browsers doesn't support it?
  • 8. Detecting HTML 5 Two Ways: 1.Using Java Script 2.Modernizr: An HTML5 Detection Library
  • 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: http://www.modernizr.com </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. 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. Modernizr( An HTML5 Detection Library) <ul><li>Let's Detect the video tag support </li></ul><ul><ul><ul><li>if (Modernizr.video){ </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. 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. 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; http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd &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. Dive into HTML 5 <ul><li>The ROOT element </li></ul><ul><li><html xmlns=&quot; http://www.w3.org/1999/xhtml &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. New Semantic Elements
  • 16. -and much more <section> <nav> <article> <hgroup> <footer> <header> <aside> <time> <figure> <legend>
  • 17.  
  • 18.  
  • 19. <header> <nav> <aside> <article> <footer>
  • 20. <time> <figure> <legend> <meter>
  • 21. <section> <h1> <h1> <h1>
  • 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>
  • 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>
  • 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>http://html5shiv.googlecode.com/svn/trunk/html5.js </li></ul></ul>
  • 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>http://code.google.com/p/explorercanvas/ </li></ul></ul>
  • 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>
  • 27. Do you know video Containers?
  • 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>
  • 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>
  • 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>
  • 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>
  • 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;>
  • 33. Thank You Queries?

×