A Chronicle of the Nebulous HTML5

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

bkeepers

Slide 3

Slide 3 text

1. OVERVIEW 2. HISTORY 3. CHANGES

Slide 4

Slide 4 text

why is EVERYTHING called HTML5?!? OVERVIEW

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

What is HTML5, really? good question.

Slide 7

Slide 7 text

whatwg.org/html

Slide 8

Slide 8 text

w3.org/TR/html5

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

it’s complicated, let me explain…

Slide 13

Slide 13 text

how did we even get here? HISTORY

Slide 14

Slide 14 text

HTML 4.0 published December 1997

Slide 15

Slide 15 text

…working group shut downText HTML 4.0 published December 1997

Slide 16

Slide 16 text

XML 1.0 February 1998

Slide 17

Slide 17 text

lemmings XML 1.0 February 1998

Slide 18

Slide 18 text

XHTML draft December 1998

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

XHTML 1.1 May 2001

Slide 21

Slide 21 text

“Appendix C” loophole removed. XHTML 1.1 May 2001

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Workshop on Web Applications and Compound Documents June 2004

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

WHATWG June 2004

Slide 27

Slide 27 text

Web Hypertext Application Technology Working Group WHATWG June 2004

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

WHATWG

Slide 30

Slide 30 text

Document how browsers parse HTML WHATWG

Slide 31

Slide 31 text

Document how browsers parse HTML Web Applications 1.0 WHATWG

Slide 32

Slide 32 text

W3C — WHATWG October 2006

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

HTML5 working draft January 2008

Slide 35

Slide 35 text

end of story? HTML5 working draft January 2008

Slide 36

Slide 36 text

end of story? Nope. HTML5 working draft January 2008

Slide 37

Slide 37 text

WHATWG drops "5" January 2012

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

W3C February 2012

Slide 40

Slide 40 text

advances to "Last call" status W3C February 2012

Slide 41

Slide 41 text

WHATWG <> W3C July 2012

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

W3C Current Status

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

WHATWG Current Status

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

what does it really offer me? CHANGES

Slide 48

Slide 48 text

Syntax

Slide 49

Slide 49 text

doctype

Slide 50

Slide 50 text

doctype

Slide 51

Slide 51 text

doctype

Slide 52

Slide 52 text

The Root Element

Slide 53

Slide 53 text

The Root Element

Slide 54

Slide 54 text

The Root Element

Slide 55

Slide 55 text

Content-Type: text/html; charset="utf-8" Character Encoding

Slide 56

Slide 56 text

Content-Type: text/html; charset="utf-8" Character Encoding

Slide 57

Slide 57 text

Content-Type: text/html; charset="utf-8" Character Encoding

Slide 58

Slide 58 text

Implicit Type

Slide 59

Slide 59 text

Implicit Type

Slide 60

Slide 60 text

Implicit Type

Slide 61

Slide 61 text

XML Compatible Example document

Example paragraph

Slide 62

Slide 62 text

New Attributes

Slide 63

Slide 63 text

Semantic Input Types

Slide 64

Slide 64 text

Form Element Attributes <ﬁeldset disabled>

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

Deprecated

Slide 67

Slide 67 text

New Elements

Slide 68

Slide 68 text

Structural Elements <ﬁgure> <ﬁgcaption>

Slide 69

Slide 69 text

Ineractive Elements

Slide 70

Slide 70 text

Inline Elements

Slide 71

Slide 71 text

Multimedia Elements

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

New APIs

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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();

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

Offline

Slide 79

Slide 79 text

History API

Slide 80

Slide 80 text

…and so much more!

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

Questions? @bkeepers bit.ly/nebulous-html5