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

1,968

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
1,968
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
132
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)
    • It's an open source, MIT-licensed JavaScript library
    • How can i use it:
          • Download it: http://www.modernizr.com
          • Include it in your web page head section
          • Always use the latest version
  • 10. Modernizr( An HTML5 Detection Library)
    • Example:
      • <!DOCTYPE html>
      • <html>
      • <head>
      • <meta charset=&quot;utf-8&quot;>
      • <title> HTML5</title>
      • <script src=&quot;modernizr.min.js&quot;></script>
      • </head>
      • <body>
            • ...
      • </body>
      • </html>
  • 11. Modernizr( An HTML5 Detection Library)
    • Let's Detect the video tag support
        • if (Modernizr.video){
            • // let's play some
            • }
          • else {
            • //do something else
            • }
  • 12. Modernizr( An HTML5 Detection Library)
    • Let's Detect the Local Storage tag support
        • if (Modernizr.localstorage){
            • // local storage is available !
            • }
          • else {
            • //do something else
            • try Google Gears
            • }
  • 13. Dive into HTML 5
    • The Doctype (Interesting History Behaind it)
    • <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN &quot;
    • &quot; http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd &quot;>
    • This Doctype is very long and ugly.
    • Now the all new HTML 5 doctype
            • <!DOCTYPE html>
  • 14. Dive into HTML 5
    • The ROOT element
    • <html xmlns=&quot; http://www.w3.org/1999/xhtml &quot; lang=&quot;en&quot; xml:lang=”en”>
    • It's the old Root Element type (it's also fine with HTML5)
    • Now in HTML 5
            • <html lang=&quot;en&quot; xml:lang=&quot;en&quot;>
  • 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
    • The Biggest question is:
    • Why i use/need all this if every thing is working fine today with my HTML 4?
    • The Answer is:
            • It's more practicle.
            • It's search engine friendly.
  • 23. What happen with OLD Browsers?
    • No Problem with Chrome,Firefox,Safari,Webkit.
    • But what happen with Internet Explorer?
      • Again the IE is the culprit.
  • 24. We have two solutions for Mr. IE
        • 1.
        • <!--[if lt IE 9]>
          • <script>
        • var e = (&quot;abbr,article,aside,audio,canvas,datalist,details,&quot; +
          • &quot;figure,footer,header,hgroup,mark,menu,meter,nav,output,&quot; +
          • &quot;progress,section,time,video&quot;).split(',');
          • for (var i = 0; i < e.length; i++) {
          • document.createElement(e[i]);
            • }
            • </script>
            • <![endif]-->
    • 2.Simply use html5.js script
      • http://html5shiv.googlecode.com/svn/trunk/html5.js
  • 25. <Canvas>
    • <canvas width=&quot;300&quot; height=&quot;225&quot;></canvas>
    • You can display Text,Image,Gradient etc.
    • You can make games without using flash.
    • But what happen with Internet Explorer?
      • Again the IE is the culprit.
      • Use excanvas.js (A java scipt library)
      • http://code.google.com/p/explorercanvas/
  • 26. <video>
    • <video src=&quot;pr6.webm&quot; width=&quot;320&quot; height=&quot;240&quot;></video>
    • <video src=&quot;pr6.webm&quot; width=&quot;320&quot; height=&quot;240&quot; controls ></video>
    • <video src=&quot;pr6.webm&quot; width=&quot;320&quot; height=&quot;240&quot; preload ></video>
    • <video src=&quot;pr6.webm&quot; width=&quot;320&quot; height=&quot;240&quot; autoplay ></video>
    • For internet explorer earlier than 9 th version use Flash :(
    • I am really sorry we have no solutions yet.
  • 27. Do you know video Containers?
  • 28. Video Encoding
    • You can't play all formats of video or audio.
    • Only .ogg .webM .H.264 is supported then what?
    • Firefogg
    • HandBrake
    • Ffmpeg
    • Always make 3 formats of your video/audio
  • 29. Biggest Problem with video/audio
    • A single browser doesn't support all formats.
    • Then <source> tag can solve the problem and save bandwidth and speed up your website
    • <video width=&quot;320&quot; height=&quot;240&quot; controls>
    • <source src=&quot;pr6.mp4&quot; type='video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;'>
    • <source src=&quot;pr6.webm&quot; type='video/webm; codecs=&quot;vp8, vorbis&quot;'>
    • <source src=&quot;pr6.ogv&quot; type='video/ogg; codecs=&quot;theora, vorbis&quot;'>
    • </video>
    • You can also use MIME header
  • 30. Geo-Location
    • You can identify the exact Geo-Location of your user but if user permittes you.
    • Do you how Geo-Location is identified?
    • You can also identified the speed of the user's web device.
    • Use Google Gears for Older browsers.
    • Best solution is use geo.js for all browsers including Mobiles.
  • 31. Offline Storage
    • It's one of the most interesting feature of html5.
    • Your website can store data on your computer(like database) and you can use it in offline mode.
    • It also require user permission.
    • Security issue and automatic update.
  • 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?

×