Html5
Upcoming SlideShare
Loading in...5
×
 

Html5

on

  • 2,039 views

html 5 is latest language of the web

html 5 is latest language of the web

Statistics

Views

Total Views
2,039
Views on SlideShare
2,035
Embed Views
4

Actions

Likes
0
Downloads
122
Comments
2

2 Embeds 4

http://www.mashme.tv 3
http://localhost 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Html5 Html5 Presentation Transcript

  • HTML 5 Overview
  • Why we Need it ?
  • History
  • WHATWG The Web Hypertext Application Technology Working Group
  • What's New In HTML 5?
  • -and much more <canvas> <video> <audio> Local Storage Web Workers Geo Location <input types> Form Elements Micro Data <meter> <progress>
  • Detecting HTML 5 how can i use it if older browsers doesn't support it?
  • Detecting HTML 5 Two Ways: 1.Using Java Script 2.Modernizr: An HTML5 Detection Library
  • 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
  • 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>
  • Modernizr( An HTML5 Detection Library)
    • Let's Detect the video tag support
        • if (Modernizr.video){
            • // let's play some
            • }
          • else {
            • //do something else
            • }
  • 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
            • }
  • 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>
  • 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;>
  • New Semantic Elements
  • -and much more <section> <nav> <article> <hgroup> <footer> <header> <aside> <time> <figure> <legend>
  •  
  •  
  • <header> <nav> <aside> <article> <footer>
  • <time> <figure> <legend> <meter>
  • <section> <h1> <h1> <h1>
  • 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.
  • What happen with OLD Browsers?
    • No Problem with Chrome,Firefox,Safari,Webkit.
    • But what happen with Internet Explorer?
      • Again the IE is the culprit.
  • 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
  • <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/
  • <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.
  • Do you know video Containers?
  • 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
  • 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
  • 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.
  • 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.
  • 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;>
  • Thank You Queries?