• Like
Html5
Upcoming SlideShare
Loading in...5
×

Html5

  • 1,902 views
Uploaded on

html 5 is latest language of the web

html 5 is latest language of the web

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to like this
No Downloads

Views

Total Views
1,902
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
128
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?