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.

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