Intro to Html 5

  • 2,852 views
Uploaded on

 

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

Views

Total Views
2,852
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
76
Comments
0
Likes
3

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 The Good Parts
    by
    Shauvik Roy Choudhary (shauvik.com)http://cc.gatech.edu/~shauvik
  • 2.
  • 3. Goodbye !
    <basefont>
    <big>
    <center>
    <dir>
    <font>
    <frame>
    <frameset>
    <isindex>
    <noframes>
    <s>
    <strike>
    <tt>
    <u>
    <xmp>
  • 4. Lots of New Arrivals !
    Web Forms 2.0
    Multimedia support
    GeoLocation
    Application Cache
    Drag-Drop
    Document Editing
    Cross-Domain Messaging
    Layout Definitions
    Canvas !
    Workers
    3D APIs
    Mozilla Canvas 3D
    Google O3D
  • 5. Layout
  • 6. Web Forms
    <input>
    type=email
    type=url
    type=date
    type=range
    required
    pattern=""
    <input pattern="[0-9]{13,16}" name="credit_card">
    contenteditable="true"
    <output>
    <input name="range" type="range">
    <output onformchange="value = range.value">0</output>
    Google suggest with <datalist>
    <input name="q" list="suggest"oninput=" list.data = '?p=' + encodeURIComponent(value)">
    <datalist id="suggest"></datalist>
    Demos : http://people.opera.com/brucel/demo/html5-forms-demo.htmlhttp://html5demos.com/contenteditable
  • 7. Audio - Video
    <video src="video.ogv" controls poster="poster.jpg"
    width="320" height="240">
    <a href="video.ogv">Download movie</a>
    </video>
    <audio src="music.oga" controls>
    <a href="music.oga">Download song</a>
    </audio>
    <!-- Script Videos -->
    <video src="video.ogg" id="video"></video>
    <script>
    var video = document.getElementById("video");
    </script>
    <button type="button" onclick="video.play();">Play</button>
    <button type="button" onclick="video.pause();">Pause</button>
    <button type="button" onclick="video.currentTime = 0;“> << Rewind</button>
  • 8. GeoLocation
    function showMap(position) {
    // Show a map centered at (position.coords.latitude, position.coords.longitude).
    }
    // One-shot position request.
    navigator.geolocation.getCurrentPosition(showMap);
    //Options to
    Watch position
    Cache position
    http://dev.w3.org/geo/api/spec-source.html
    Demo: http://html5demos.com/geo
  • 9. Application Cache
    Session Storage
    sessionStorage.setItem('value', value);
    sessionStorage.getItem('value');
    sessionStorage.clear();
    Local Storage
    localStorage.setItem('value', value);
    localStorage.getItem('value');
    sessionStorage.clear();
    var status = navigator.onLine ? 'online' : 'offline‘;
    Demo: http://html5demos.com/storage
  • 10. Canvas
    Operations on Canvas
    Draw lines / shapes
    Apply styles/color/transparency
    Add Images
    Transformations, Compositing
    Animations
    Demos:
    http://html5demos.com/canvas
    MSPaint on the web using canvas: http://colorillo.com
    Ref:
    <dev.moz>/Canvas_tutorial
    <dev.moz>/Drawing_Graphics_with_Canvas
  • 11. Manipulating Video on Canvas
    Demo: <dev.moz>/samples/video/chroma-key/index.xhtml
  • 12. Browser Implementation
    Everyone is working on it !
    Canvas supported in all except IE (javascript library)
    Storage & Geolocation support using Google Gears
    Useful Links :
    http://a.deveria.com/caniuse/
    http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)
    http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers
    Quick Tag Reference: http://www.w3schools.com/tags/html5.asp
  • 13. Compatibility
    http://quirksmode.org/compatibility.html
    Details @ http://quirksmode.org/dom/html5.html
  • 14. Present browser market share
    Source: http://www.w3counter.com/globalstats.php
  • 15. Resources
    Demos: http://html5demos.com/
    Specs
    Current Working Draft - http://www.w3.org/TR/html5/
    Diff with HTML 4 -http://dev.w3.org/html5/html4-differences/
    Online
    MDC Samples - https://developer.mozilla.org
    Dive into HTML 5 (http://diveintohtml5.org/) – In Progress