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

A Chronicle of the Nebulous HTML5

A Chronicle of the Nebulous HTML5

Why is EVERYTHING called HTML5, how did we get here, and what's in it for me?

Brandon Keepers

May 23, 2013
Tweet

More Decks by Brandon Keepers

Other Decks in Programming

Transcript

  1. HTML5
    A CHRONICLE OF THE NEBULOUS
    extracted from the annals of history by Brandon Keepers, a.k.a. @bkeepers.

    View full-size slide

  2. 1. OVERVIEW
    2. HISTORY
    3. CHANGES

    View full-size slide

  3. why is EVERYTHING called HTML5?!?
    OVERVIEW

    View full-size slide

  4. HTML5
    Hyper Trendy Marketing Lingo v5
    @kplawver
    |ˌeɪtʃ ˌti ˌɛm ˈɛl fīv |
    noun Computing

    View full-size slide

  5. What is HTML5, really?
    good question.

    View full-size slide

  6. whatwg.org/html

    View full-size slide

  7. w3.org/TR/html5

    View full-size slide

  8. According to W3C:
    1. Defines a single language called HTML5
    2. Defines detailed processing models
    3. Improves markup for documents
    4. Introduces markup and APIs for emerging idioms

    View full-size slide

  9. HTML5 is technically not…
    Web Workers
    Web Storage
    Web Messaging
    Web SQL Database
    Web Audio API
    WebRTC
    WebSocket
    Geolocation
    Indexed Database
    File API
    [other web standard…]

    View full-size slide

  10. Ian Hickson
    http://blog.whatwg.org/html-is-the-new-html5
    "[HTML5] is now basically
    being used to mean anything
    Web-standards-related..."

    View full-size slide

  11. it’s complicated,
    let me explain…

    View full-size slide

  12. how did we even get here?
    HISTORY

    View full-size slide

  13. HTML 4.0 published
    December 1997

    View full-size slide

  14. …working group shut downText
    HTML 4.0 published
    December 1997

    View full-size slide

  15. XML 1.0
    February 1998

    View full-size slide

  16. lemmings
    XML 1.0
    February 1998

    View full-size slide

  17. XHTML draft
    December 1998

    View full-size slide

  18. application/xhtml+xml with the
    “Appendix C” loophole
    XHTML draft
    December 1998

    View full-size slide

  19. XHTML 1.1
    May 2001

    View full-size slide

  20. “Appendix C” loophole removed.
    XHTML 1.1
    May 2001

    View full-size slide

  21. “Appendix C” loophole removed.
    99% estimated error rate on
    existing pages.
    XHTML 1.1
    May 2001

    View full-size slide

  22. Workshop on Web Applications
    and Compound Documents
    June 2004

    View full-size slide

  23. Competing vision to evolve HTML4
    Workshop on Web Applications
    and Compound Documents
    June 2004

    View full-size slide

  24. Competing vision to evolve HTML4
    voted 14:8 against
    Workshop on Web Applications
    and Compound Documents
    June 2004

    View full-size slide

  25. WHATWG
    June 2004

    View full-size slide

  26. Web Hypertext Application
    Technology Working Group
    WHATWG
    June 2004

    View full-size slide

  27. Web Hypertext Application
    Technology Working Group
    WHATWG
    June 2004
    FAILED OPPORTUNITY
    TASK FORCE!

    View full-size slide

  28. Document how browsers parse
    HTML
    WHATWG

    View full-size slide

  29. Document how browsers parse
    HTML
    Web Applications 1.0
    WHATWG

    View full-size slide

  30. W3C — WHATWG
    October 2006

    View full-size slide

  31. “Some things are clearer with hindsight
    of several years. It is necessary to
    evolve HTML incrementally.”
    W3C — WHATWG
    October 2006

    View full-size slide

  32. HTML5 working draft
    January 2008

    View full-size slide

  33. end of story?
    HTML5 working draft
    January 2008

    View full-size slide

  34. end of story?
    Nope.
    HTML5 working draft
    January 2008

    View full-size slide

  35. WHATWG drops "5"
    January 2012

    View full-size slide

  36. HTML is a living standard
    WHATWG drops "5"
    January 2012

    View full-size slide

  37. W3C
    February 2012

    View full-size slide

  38. advances to "Last call" status
    W3C
    February 2012

    View full-size slide

  39. WHATWG <> W3C
    July 2012

    View full-size slide

  40. decided on a “degree of separation”
    WHATWG <> W3C
    July 2012

    View full-size slide

  41. W3C
    Current Status

    View full-size slide

  42. hopes to release stable HTML5
    standard by end of 2014
    W3C
    Current Status

    View full-size slide

  43. WHATWG
    Current Status

    View full-size slide

  44. living standard is never complete and
    is always being updated and improved.
    WHATWG
    Current Status

    View full-size slide

  45. what does it really offer me?
    CHANGES

    View full-size slide

  46. PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    doctype

    View full-size slide

  47. PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    doctype

    View full-size slide


  48. The Root Element

    View full-size slide

  49. Content-Type: text/html; charset="utf-8"
    content="text/html; charset=utf-8">
    Character Encoding

    View full-size slide

  50. Content-Type: text/html; charset="utf-8"
    content="text/html; charset=utf-8">
    Character Encoding

    View full-size slide

  51. Content-Type: text/html; charset="utf-8"

    Character Encoding

    View full-size slide

  52. Implicit Type


    View full-size slide

  53. Implicit Type


    View full-size slide

  54. Implicit Type


    View full-size slide

  55. XML Compatible



    Example document


    Example paragraph


    View full-size slide

  56. New Attributes

    View full-size slide

  57. Semantic Input Types












    View full-size slide

  58. Form Element Attributes



    <fieldset disabled>

    View full-size slide

  59. Data Attributes

    // JS API
    var input = document.querySelector('.users');
    var url = input.dataset['href'];

    View full-size slide

  60. New Elements

    View full-size slide

  61. Structural Elements







    <figure>
    <figcaption>

    View full-size slide

  62. Ineractive Elements





    View full-size slide

  63. Inline Elements









    View full-size slide

  64. Multimedia Elements






    View full-size slide

  65. Canvas

    canvas#a { height: 200px; width: 200px; }

    View full-size slide

  66. Canvas
    var a = document.getElementById("a");
    var context = a.getContext("2d");
    context.fillRect(0, 0, 150, 150);

    View full-size slide

  67. 2D Context
    Rectangles
    c.fillRect(x, y, w, h);
    c.strokeRect(x, y, w, h);
    Transformations
    c.scale(x, y);
    c.rotate(angle);
    c.translate(x, y);
    c.transform(a, b, c, d, e, f);
    c.setTransform(a, b, c, d, e, f);
    Colors and Styles
    c.strokeStyle = color;
    c.fillStyle = color;
    Text
    c.fillText(text, x, y, maxWidth);
    Paths
    c.moveTo(x, y);
    c.lineTo(x, y);
    c.arcTo(x1, y1, x2, y2, radius);
    c.rect(x, y, w, h);
    c.fill();
    c.stroke();
    State
    c.save();
    c.restore();

    View full-size slide

  68. Drag & Drop
    http://www.w3.org/TR/html5/editing.html#dnd

    View full-size slide

  69. …and so much more!

    View full-size slide

  70. Let’s review, HTML[5] is
    important because:
    1. Defines a single language called HTML5
    2. Defines detailed processing models
    3. Improves markup for documents
    4. Introduces markup and APIs for emerging idioms

    View full-size slide

  71. References
    Dive Into HTML5
    http://diveintohtml5.info/past.html
    HTML5 differences from HTML4
    http://www.w3.org/TR/2011/WD-html5-diff-20110405/
    HTML5 gets the splits
    http://www.netmagazine.com/news/html5-gets-splits-122102
    Wikipedia
    http://en.wikipedia.org/wiki/HTML5

    View full-size slide

  72. Questions?
    @bkeepers bit.ly/nebulous-html5

    View full-size slide