Slide 1

Slide 1 text

the design of HTML5

Slide 2

Slide 2 text

the design of HTML5

Slide 3

Slide 3 text

the design of HTML5

Slide 4

Slide 4 text

design principles

Slide 5

Slide 5 text

We hold these Truths to be self-evident, that all Men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness. —e Declaration Of Independence, 1776-07-04

Slide 6

Slide 6 text

From each according to his ability, to each according to his need. —Karl Marx, 1875

Slide 7

Slide 7 text

Do unto others as you would have them do unto you. —Jesus of Nazareth, ~30AD

Slide 8

Slide 8 text

Four legs good, two legs bad. —George Orwell, Animal Farm

Slide 9

Slide 9 text

A robot may not injure a human being or, through inaction, allow a human being to come to harm. A robot must obey any orders given to it by human beings, except where such orders would conflict with the First Law. A robot must protect its own existence as long as such protection does not conflict with the First or Second Law. —Isaac Asimov, I, Robot

Slide 10

Slide 10 text

Principles such as simplicity and modularity are the stuff of soware engineering; decentralisation and tolerance are the life and breath of Internet. —Tim Berners-Lee, Principles of Design

Slide 11

Slide 11 text

HTML 2.0 HTML 3.2 HTML 4.0 HTML 4.01 1995 1997 1997 1999

Slide 12

Slide 12 text

XHTML 1.0 XHTML 1.1 XHTML 2 2000 2001

Slide 13

Slide 13 text

Be conservative in what you send; be liberal in what you accept. —Jon Postel, e Robustness Principle

Slide 14

Slide 14 text

WHATWG W3C HTML5 2004 2007

Slide 15

Slide 15 text

the design of HTML5

Slide 16

Slide 16 text

is document describes the set of guiding principles used by the HTML Working Group for the development of HTML5. e principles offer guidance for the design of HTML in the areas of compatibility, utility and interoperability. —HTML Design Principles w3.org/TR/html-design-principles

Slide 17

Slide 17 text

avoid needless complexity Simple solutions are preferred to complex ones, when possible.

Slide 18

Slide 18 text

HTML 4.01 XHTML 1.0 HTML5

Slide 19

Slide 19 text

HTML 4.01 XHTML 1.0 HTML5

Slide 20

Slide 20 text

HTML5

Slide 21

Slide 21 text

support existing content Existing content oen relies upon expected user agent processing and behaviour to function as intended.

Slide 22

Slide 22 text

bar

Hello world

bar

Hello world bar

Hello world

bar

Hello world

Slide 23

Slide 23 text

Be conservative in what you send; be liberal in what you accept. —Jon Postel, e Robustness Principle

Slide 24

Slide 24 text

solve real problems Abstract architectures that don’t address an existing need are less favoured than pragmatic solutions to problems that web content faces today.

Slide 26

Slide 26 text

pave the cowpaths

Slide 27

Slide 27 text

section article aside nav header footer details figure

Slide 28

Slide 28 text

...
...
...
...
...

Slide 29

Slide 29 text

... ...
...
... ...

Slide 30

Slide 30 text

section article aside nav header footer details figure

Slide 31

Slide 31 text

...

...
...

Slide 32

Slide 32 text

...

...
...
...

Slide 33

Slide 33 text

...

...
...
...

Slide 34

Slide 34 text

I would in fact prefer, instead of

,

etc for headings to have a nestable .. element, and a generic .. which at any level within the sections would produce the required level of heading. —Tim Berners-Lee, 1991

Slide 35

Slide 35 text

degrade gracefully HTML 5 document conformance requirements should be designed so that Web content can degrade gracefully in older or less capable user agents, even when making use of new elements, attributes, APIs and content models.

Slide 36

Slide 36 text

input type="number" input type="search" input type="range" input type="email" input type="date" input type="url"

Slide 37

Slide 37 text

input type="number"

Slide 38

Slide 38 text

input type="search"

Slide 39

Slide 39 text

input type="search" placeholder="e.g. salad or fish"

Slide 40

Slide 40 text

Flash HTML5 object video

Slide 41

Slide 41 text

Slide 42

Slide 42 text

Slide 43

Slide 43 text

Slide 44

Slide 44 text

Slide 45

Slide 45 text

download 1 2 3 4

Slide 46

Slide 46 text

e value of a network is proportional to the square of the number of connected users of the system (n2). —Robert Metcalfe

Slide 47

Slide 47 text

priority of constituencies In case of conflict, consider users over authors over implementors over specifiers over theoretical purity.

Slide 48

Slide 48 text

Soware, like all technologies, is inherently political. Code inevitably reflects the choices, biases and desires of its creators. —Jamais Cascio

Slide 49

Slide 49 text

1. Make the most equent tasks easy and less equent tasks achievable. 2. Design for the 80%. 3. Privilege the Content Creator. 4. Make the default settings smart. —Mark Boulton, Leisa Reichelt, d7ux.org

Slide 50

Slide 50 text

Design for humans first, machines second. —Microformats.org, e microformats principles

Slide 51

Slide 51 text

e effectiveness of the Internet as a public resource depends upon interoperability (protocols, data formats, content), innoation and decentralised participation worldwide. Transparent community-based processes promote participation, accountability, and trust. —e Mozilla Foundation, e Mozilla Manifesto

Slide 52

Slide 52 text

Rough consensus and running code. —e Tao of IETF

Slide 53

Slide 53 text

@adactio adactio.com books.alistapart.com