Upgrade to Pro — share decks privately, control downloads, hide ads and more …

5 Ways to Embrace HTML5 Today

Daniel Ryan
October 22, 2011

5 Ways to Embrace HTML5 Today

Presented at DevChatt 2010.

Daniel Ryan

October 22, 2011
Tweet

More Decks by Daniel Ryan

Other Decks in Technology

Transcript

  1. ( )
    5 ways to embrace
    HTML5 today
    Daniel Ryan
    DevChatt
    March 2010

    View Slide

  2. ( )
    What is HTML5?
    HTML5 is the next major revision of the
    HTML spec.
    It is currently in “Last Call” phase at the
    WHATWG.
    It was written both to define new features
    and ratify current behavior.
    It is scheduled to be a “Proposed
    Recommendation” in 2022.




    View Slide

  3. ( )
    What browsers
    support HTML5?
    All of them. Sort of.
    Most of the proposed features can be
    implemented today through either native
    browser support or a combination of CSS and
    JavaScript.


    View Slide

  4. ( )
    5 Features Ready to
    Implement
    New elements (tags) and attributes
    Client side storage
    and
    Geolocation
    New form types





    View Slide

  5. ( )
    0: the Doctype

    View Slide

  6. ( )
    1: New Elements
    section
    article
    aside
    hgroup
    header
    footer
    nav
    figure
    figcaption
    video
    audio
    embed
    mark
    progress
    meter
    time
    ruby
    rt
    rp
    canvas
    command
    details
    datalist
    keygen
    output
    dialog

    View Slide

  7. ( )
    1: New Elements —
    Implementation
    Add this tag just after <head>:<br/><!--[if lt IE 9]><script<br/>src="http://html5shiv.googlecode.com/svn/trunk/html5.js"><br/>
    Add this line to the top of your CSS file:
    section, article, aside, header, footer, nav, figure,
    dialog { display: block; }


    View Slide

  8. ( )
    1: New Elements —
    Sample — chattarati.com







    Chattarati


    Metro






    School Board Upholds Normal Park's Current
    Zone

    By class="author vcard url fn">Aaron Collier
    The debate over Normal Park Museum Magnet's
    zone came to a head Thursday evening when the




    Summary
    Thursday evening, the
    Hamilton County School Board voted 6 to 3 to approve a
    plan to maintain Normal Park Museum Magnet's current zone
    and pre-K program despite a 2007 decision to expand the
    school's zone.


    View Slide

  9. ( )
    1: New Attributes —
    Forms & Inputs
    autofocus
    form
    required
    autocomplete, min, max, multiple, pattern,
    step
    novalidate





    View Slide

  10. ( )
    1: New Attributes —
    Miscellaneous
    ol[reversed]
    iframe[sandbox]
    script[async]
    see more at http://www.w3.org/TR/html5-
    diff/#new-attributes




    View Slide

  11. ( )
    1: New Attributes —
    Global
    contenteditable
    contextmenu
    data-*
    draggable
    hidden
    role and aria-* (http://www.w3.org/TR/wai-
    aria/)
    spellcheck







    View Slide

  12. ( )
    2: Client Side Storage
    Store data in the browser via a JavaScript
    API (http://bit.ly/b95AIS)
    Enable offline syncing or speed up heavy
    web apps
    Gracefully degrade with
    http://plugins.jquery.com/project/jStorage
    Store static assets in a manifest for offline
    access (http://bit.ly/dnOQYc)




    View Slide

  13. ( )
    3:
    Native support for audio file playback with a
    full JavaScript API for controls
    Go full native (http://bit.ly/awkhmZ)
    Fallback with



    Or, get around the format war with
    http://bit.ly/bwny0J




    View Slide

  14. ( )
    4:
    Native support for video file playback with a
    full JavaScript API for controls
    Go full native (http://bit.ly/cdmRVx)
    Fallback with



    Or, get around the format war with
    http://bit.ly/b3AeXi
    See some demos at
    http://youtube.com/html5 or http://bit.ly/cfI2ML





    View Slide

  15. ( )
    5: New Form Types
    search
    tel
    url
    email
    datetime
    date
    month
    week
    time
    datetime-local
    number
    range
    color

    View Slide

  16. ( )
    5: New Form Types
    Write your own JavaScript validation
    Use http://code.google.com/p/webforms2/
    Be sure to still do server-side validation, the
    client-side is mainly to benefit your users



    View Slide

  17. ( )
    Thanks for
    listening
    http://dryan.com/html5 for more info

    View Slide