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

A Chronicle of the Nebulous HTML5

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

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
PRO

May 23, 2013
Tweet

More Decks by Brandon Keepers

See All by Brandon Keepers
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
1
120
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
0
77
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
2
440
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
2
600
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
6
1k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
1
180
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
1
250
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
2
470
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
3
450

Other Decks in Programming

See All in Programming
Aa5b922fefbf18bea89972521971dfea?s=48 yoshikiiida
20
7.9k
7c9b8b368924556d8642bdaed3ded1f5?s=48 danilop
1
550
C53a4a07191668addb0f406ceac16f41?s=48 sungkukshawnpark
0
670
3cfad86677c5966ecfe9b81955fa3489?s=48 inoue2002
0
320
2b67c3578e104daca8c6609e5be43d8d?s=48 balconia
0
160
0abc75d0ead1b1300178fad993308c67?s=48 motchy1204
0
140
Db5e4eb410acdc06c5cee181bbd07d8a?s=48 askul
0
420
B3a7c0d5c590642dbce68bce8929a2df?s=48 david74chou
0
180
B5d888044ab0982e83e730ff0ebfa940?s=48 nsasa02
0
310
C3a47a823a1e7adcb5be27cc3df5c482?s=48 akiyoko
3
910
7437b838338581b08ca72340b05475b9?s=48 abt
0
270
82aa6e293e94bf37796f4ae50f583f6c?s=48 veronikapj
2
130

Featured

See All Featured
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
287
19k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
91
8.8k
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
107
6.4k
B47b288784fda77a94aeb234ca743c24?s=48 keavy
110
15k
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
207
38k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
6
700
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
224
15k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
208
20k
245cee81a9c424266e5e401d844ea881?s=48 lara
175
10k
C51b39fa3c79ccb99dcb8a076bc98287?s=48 brianwarren
85
5k
0c6fd6a08d0f898159cda7cafcacf07f?s=48 afnizarnur
180
14k
5f50f94346fbcb23706f0707169317a4?s=48 aarron
261
36k

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