A Chronicle of the Nebulous HTML5

20bfe76b3d6105641f879fe45cfc9272?s=47 Brandon Keepers
May 23, 2013
Programming
11
680

A Chronicle of the Nebulous HTML5

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

20bfe76b3d6105641f879fe45cfc9272?s=128

Brandon Keepers

May 23, 2013
Tweet

More Decks by Brandon Keepers

See All by Brandon Keepers
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
1
83
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
0
58
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
2
410
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
2
570
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
6
980
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
1
160
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
1
230
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
2
410
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
3
420

Other Decks in Programming

See All in Programming
F929f5d80ef8a23b67ad8ac6f08416cd?s=48 melix
0
350
D4b7a3e2ed10f86e0b52498713ba2601?s=48 ubiratansoares
5
440
0b8ad408b31cb9d5cff2828086c65d58?s=48 temoki
5
2.5k
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
1
340
70adfe7679427fa498899769e632b672?s=48 itok
1
230
D8a3623b157508fecdae1f8e756f362f?s=48 cmota
1
120
Aa2ed090fd893f58f4d139c3285106bc?s=48 universato
0
150
49833977598de9524fa85cacb93a42ce?s=48 philcalcado
0
110
0ed10d1154c696886ca483fe827cb299?s=48 thatjeffsmith
0
870
5b8d20aa7d63c5d391b1c881e1764460?s=48 quasilyte
2
240
2bedb1eb8f841cd3c3ae584600b016e0?s=48 okunokentaro
1
460
264b44c0c6d60336f8b6a0fbab118984?s=48 mmazour
0
140

Featured

See All Featured
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
165
6.9k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
241
20k
170b760e0147792d0140e59ec78e9893?s=48 eitanlees
108
9.6k
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
5
190
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
197
19k
9375a9529679f1b42b567a640d775e7d?s=48 schacon
144
6.5k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
190
17k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
309
21k
2bb923c57a1fdc3a2eb484bb8d565fd2?s=48 ufuk
55
5.2k
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
5
540
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
296
39k
11c84dff30266b907714802088852677?s=48 jasonvnalue
80
7.9k

Transcript

  1. HTML5 A CHRONICLE OF THE NEBULOUS extracted from the annals

    of history by Brandon Keepers, a.k.a. @bkeepers.

  2. bkeepers

  3. 1. OVERVIEW 2. HISTORY 3. CHANGES

  4. why is EVERYTHING called HTML5?!? OVERVIEW

  5. HTML5 Hyper Trendy Marketing Lingo v5 @kplawver |ˌeɪtʃ ˌti ˌɛm

    ˈɛl fīv | noun Computing

  6. What is HTML5, really? good question.

  7. whatwg.org/html

  8. w3.org/TR/html5

  9. 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

  10. 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…]

  11. Ian Hickson http://blog.whatwg.org/html-is-the-new-html5 "[HTML5] is now basically being used to

    mean anything Web-standards-related..."

  12. it’s complicated, let me explain…

  13. how did we even get here? HISTORY

  14. HTML 4.0 published December 1997

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

  16. XML 1.0 February 1998

  17. <cough>lemmings</cough> XML 1.0 February 1998

  18. XHTML draft December 1998

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

  20. XHTML 1.1 May 2001

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

  22. “Appendix C” loophole removed. 99% estimated error rate on existing

    pages. XHTML 1.1 May 2001

  23. Workshop on Web Applications and Compound Documents June 2004

  24. Competing vision to evolve HTML4 Workshop on Web Applications and

    Compound Documents June 2004

  25. Competing vision to evolve HTML4 voted 14:8 against Workshop on

    Web Applications and Compound Documents June 2004

  26. WHATWG June 2004

  27. Web Hypertext Application Technology Working Group WHATWG June 2004

  28. Web Hypertext Application Technology Working Group WHATWG June 2004 FAILED

    OPPORTUNITY TASK FORCE!

  29. WHATWG

  30. Document how browsers parse HTML WHATWG

  31. Document how browsers parse HTML Web Applications 1.0 WHATWG

  32. W3C — WHATWG October 2006

  33. “Some things are clearer with hindsight of several years. It

    is necessary to evolve HTML incrementally.” W3C — WHATWG October 2006

  34. HTML5 working draft January 2008

  35. end of story? HTML5 working draft January 2008

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

  37. WHATWG drops "5" January 2012

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

  39. W3C February 2012

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

  41. WHATWG <> W3C July 2012

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

    2012

  43. W3C Current Status

  44. hopes to release stable HTML5 standard by end of 2014

    W3C Current Status

  45. WHATWG Current Status

  46. living standard is never complete and is always being updated

    and improved. WHATWG Current Status

  47. what does it really offer me? CHANGES

  48. Syntax

  49. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> doctype

  50. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> doctype

  51. <!DOCTYPE html> doctype

  52. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> The Root Element

  53. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> The Root Element

  54. <html lang="en"> The Root Element

  55. Content-Type: text/html; charset="utf-8" <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> Character Encoding

  56. Content-Type: text/html; charset="utf-8" <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> Character Encoding

  57. Content-Type: text/html; charset="utf-8" <meta charset="utf-8"> Character Encoding

  58. Implicit Type <script type="text/javascript" src="/js/site.js"></script> <link type="text/css" href="/css/site.css">

  59. Implicit Type <script type="text/javascript" src="/js/site.js"></script> <link type="text/css" href="/css/site.css">

  60. Implicit Type <script src="/js/site.js"></script> <link href="/css/site.css">

  61. XML Compatible <?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Example document</title>

    </head> <body> <p>Example paragraph</p> </body> </html>

  62. New Attributes

  63. Semantic Input Types <input type="tel"> <input type="search"> <input type="url"> <input

    type="email"> <input type="datetime"> <input type="date"> <input type="month"> <input type="week"> <input type="time"> <input type="number"> <input type="range"> <input type="color">

  64. Form Element Attributes <input placeholder="Search…"> <input required> <input autofocus> <fieldset

    disabled>

  65. Data Attributes <input data-href="/api/users" class="users" type="search"> // JS API var

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

  66. Deprecated <basefont> <big> <center> <font> <strike> <tt> <u> <frame> <frameset>

    <noframes>

  67. New Elements

  68. Structural Elements <section> <nav> <article> <aside> <hgroup> <header> <footer> <figure>

    <figcaption>

  69. Ineractive Elements <details> <summary> <command> <menu> <dialog>

  70. Inline Elements <time> <mark> <meter> <progress> <ruby> <rt> <rp> <bdi>

    <wbr>

  71. Multimedia Elements <video width="320" height="240" controls> <source src="pr6.mp4" type='video/mp4; codecs="mp4a.40.2"'>

    <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'> </video> <audio src="/audio.ogg">

  72. Canvas <canvas id="a"></canvas> canvas#a { height: 200px; width: 200px; }

  73. New APIs

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

    0, 150, 150);

  75. 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();
  76. None

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

  78. Offline

  79. History API

  80. …and so much more!

  81. 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

  82. 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

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