$30 off During Our Annual Pro Sale. View Details »

HTML5, are we there yet?

HTML5, are we there yet?

HTML5 has been touted as the next wave in web apps, mobile and even desktop apps now with Windows 8. This talk will cover what HTML5 really is, why should you care and go over practical approaches to using it now in a cross platform and future compatible way.

Ovidiu Dimulescu

October 06, 2012
Tweet

More Decks by Ovidiu Dimulescu

Other Decks in Technology

Transcript

  1. HTML5, are we there yet?
    Jacksonvile Code Camp, 2012
    Ovidiu Dimulescu
    @odimulescu
    speakerdeck.com/odimulescu

    View Slide

  2. • What is HTML5 ?
    • Features
    • Polyfills and shims
    • Status
    • Resources
    • Questions ?
    Agenda

    View Slide

  3. About @odimulescu
    • Working on the Web since 1997

    • Organizer for JaxMUG.com
    • Co-Organizer for Jax Big Data meetup

    View Slide

  4. What is ?

    View Slide

  5. HTML- A bit of history
    * Credit evolutionofweb.appspot.com

    View Slide

  6. HTML- A bit of history
    * Credit evolutionofweb.appspot.com

    View Slide

  7. * Credit evolutionofweb.appspot.com
    HTML- A bit of history

    View Slide

  8. • W3C, WHATWG
    • HTML, DHTML, XHTML, Quirks mode
    • JSON, AJAX, Web Forms, Web Sockets, Web Workers
    • Navigation History State, CORS
    • DOM (Style, Events, HTML)
    • CSS, Media Queries, Web Fonts
    • Canvas, SVG, Audio, Video, WebGL
    • Local Storage, Offline Apps
    • HTML5 App, Single Page app
    HTML5- What is it?

    View Slide

  9. An evolution of HTML4
    • New DOM elements
    • New JavaScript APIs
    HTML5 is a “brand”
    • CSS3
    • Additional Rich APIs
    • Umbrella term for cool web things
    HTML5 - What is it?

    View Slide

  10. HTML5- Features

    View Slide

  11. HTML5- Document Structure

    View Slide

  12. HTML5 - Semantic Tags

    View Slide

  13. HTML5 - Semantic Tags
    No DIV !?
    *Image Credit: indianlakes.wordpress.com

    View Slide

  14. HTML5 - Semantic Tags
    Text
    *Credit: www.w3.org/wiki/HTML_structural_elements

    View Slide

  15. HTML5 - Semantic Tags
    *Credit: www.w3.org/wiki/HTML_structural_elements

    View Slide

  16. HTML5 - Semantic Tags
    *Credit: www.w3.org/wiki/HTML_structural_elements

    View Slide

  17. HTML5 - Semantic Tags
    *Credit: www.w3.org/wiki/HTML_structural_elements

    View Slide

  18. HTML5 - Semantic Tags
    Browser Support
    Modern Browser, IE9 +
    Problems with unknown tags
    1. Default style inline + Styles not applied (oldIE)
    2. DOM incorrect (oldIE)
    Workarounds
    1. header, footer, nav, section { display: block}
    2. document.createElement("article");
    code.google.com/p/html5shim/

    View Slide

  19. HTML5 - Forms
    New Input Types
    tel, url, email, number, range, color, search, datetime, date,
    month, week, time, datetime-local
    New Form and Input Type Attributes
    placeholder, required, autofocus, autocomplete, pattern,
    step, list, min, max, range, accept, multiple
    New Elements
    progress, meter, datalist, output

    View Slide

  20. HTML5 - Forms
    “Roaming” Form elements
    • Can be outside of form elements
    • Can belong to multiple forms
    Validation Pseudo selectors
    :invalid and :required *
    Constraint Validation API
    checkValidity, setCustomValidity, willValidate
    DOM-less Form Submissions
    FormData -> XMLHttpRequest.send()

    View Slide

  21. HTML5 - Forms - Status
    wufoo.com/html5

    View Slide

  22. HTML5 - Offline applications
    Advantages
    • UX - Offline usage
    • UX - Speed
    • Server - Reduced load
    Caveats
    • No love from IE < 10
    • Size limitation 5MB (iOS 6 is up to 25MB)
    • Server side add text/cache-manifest mime-type
    Reference
    • Extension is not important but mime-type is
    • Absolute (same origin) and relative URI
    • Cached as a regular HTTP resource headers*

    View Slide

  23. HTML5 - Offline Apps - Manifest
    • CACHE MANIFEST is a required first line
    • CACHE section is implicit, default behavior
    • Syntax checking *very* strict. Any error aborts caching
    • If any resources fails loading aborts cache update
    • CACHE does not support wildcards. Explicit path needed
    • A page referencing a manifest file is implicitly cached
    • Relative URIs are relative to the cache manifest's URI
    See appcachefacts.info for various quirks

    View Slide

  24. HTML5 - Offline Apps - Cache
    *Credit: marakana.com/bookshelf/html5_tutorial/offline_applications.html

    View Slide

  25. HTML5 - Web Storage
    Old Way
    Cookies, Flash, Silverlight, AIR, userData in IE, Google Gears
    New Way
    • Isolation per sub-domain and per protocol. Does not expire until cleared
    • 5MB limit. Values are Strings. Webkit stores UTF-16 -> 2.5MB effective storage
    • No mechanism when quota is exceeded to prompt the user
    • Prompts the user first time for permission to store data
    • Well supported: IE8+. Use history.js shim for older browsers

    View Slide

  26. HTML5 - Geolocation
    Geo location detection
    Global Positioning System (GPS)
    Inferred: IP address, MAC, Cellphone IDs, etc.
    User Input
    Required Attributes
    latitude, longitude and accuracy are guaranteed in supporting browsers
    Other attributes will just return null if the information cannot be provided
    Browser Support
    IE9+, Modern Browser
    Privacy Concerns
    User agent has to explicitly ask for user permission to obtain location
    Recipients must disclose the data usage:
    How long the location data is stored?
    Is it shared with other sites/partners?
    Can the location data be updated or deleted by the end user?

    View Slide

  27. HTML5 - Geolocation

    View Slide

  28. HTML5 - Canvas
    Old Way
    • Using plugins such as Flash, Silverlight, JavaFX, SVG, VML
    • VML (Vector Markup Language) only works in IE
    • SVG, IE support since 9+
    New Way
    • element, lacks border and content by default
    • JavaScript 2D API
    Browser Support
    IE9+, Modern Browser
    Older IEs - use explorercanvas.js (emulates Canvas via VML)
    WebGL 3D API - Full support in Chrome only

    View Slide

  29. HTML5 - Canvas
    Markup
    Operations
    Context, Transformation, Pixel Manipulation, Compositing, Image Drawing, Text, Path,
    Rectangles, Colors, Shadows, Styles
    Scripting
    http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.png

    View Slide

  30. HTML5 - Canvas | SVG
    Coolness
    www.chromeweblab.com
    Canvas
    developer.mozilla.org/en-US/demos/tag/tech:canvas
    threejs.org (webgl)
    hakim.se/experiments
    SVG
    raphaeljs.com
    d3js.org
    paperjs.org/about
    Canvas or SVG
    www.sitepoint.com/how-to-choose-between-canvas-and-svg

    View Slide

  31. HTML5 - Media Elements
    Audio & Video tags
    • Modern Browser, IE9+
    • Codecs support not uniform
    • Polyfill - audio.js, videojs.com
    • Audio Codecs: Ogg, Mp3, Wav, Aac
    • Video Codecs: H.264 (mp4), Ogg (ogv), VP8 (webm)
    multiple occurrences allowed
    caption tracks. not implemented yet
    external plugins

    View Slide

  32. HTML5 - Media - videojs.com

    View Slide

  33. Audience
    Old IEs and modern browser
    Solutions
    • Modernizr - Normalized feature detector
    • html5shim
    • FlashCanvas, JebGL, GCF, socket.io, css3pie, amplifyjs
    • GCF - Google Chrome Frame
    Caveats
    Not everything can be detected
    Performance (jsPerf.com, yepnope.js)
    HTML5 - Polyfills, shims

    View Slide

  34. HTML5 - Status - Use or not?
    *Image Credit: Wikipedia

    View Slide

  35. HTML5 - Status - Use or not?
    *Image Credit: coolgraphic.org

    View Slide

  36. diveintohtml5.info
    html5rocks.com
    html5doctor.com
    developer.mozilla.org/en-US/docs/HTML/HTML5
    HTML5 - References

    View Slide

  37. diveintohtml5.info | modernizr.com | iewebgl.com | videojs.com
    caniuse.com | html5test.com | mobilehtml5.org | quirksmode.org
    html5rocks.com | http://coding.smashingmagazine.com/2011/11/18/
    html5-semantics/
    html5demos.com
    html5doctor.com
    html5boilerplate.com
    developer.mozilla.org/en-US/docs/HTML/HTML5
    craftyjs.com
    www.cuttherope.ie/dev/
    www.infoq.com/presentations/Angry-Birds-on-HTML5
    ishtml5readyyet.com
    HTML5 - Resources

    View Slide

  38. Questions ?
    Ovidiu Dimulescu
    @odimulescu
    speakerdeck.com/odimulescu

    View Slide