Design of HTML 5

8/2/2019 Design of HTML 5

1/53

the designof

HTML5


2/53

the designof

HTML5


3/53

the designof

HTML5


4/53

designprinciples


5/53

We hold these Truths to be self-evident,that all Men are created equal,

that they are endowed by their Creator withcertain unalienable Rights,that among these areLife, Liberty and the pursuit of Happiness.

e Declaration Of Independence,

1776-07-04
http://en.wikipedia.org/wiki/Natural_and_legal_rightshttp://en.wikipedia.org/wiki/Natural_and_legal_rightshttp://en.wikipedia.org/wiki/Creator_deityhttp://en.wikipedia.org/wiki/Creator_deityhttp://en.wikipedia.org/wiki/All_men_are_created_equalhttp://en.wikipedia.org/wiki/All_men_are_created_equalhttp://en.wikipedia.org/wiki/Self-evidencehttp://en.wikipedia.org/wiki/Self-evidence


6/53

From each according to his ability,to each according to his need.

Karl Marx,

1875


7/53

Do unto others as you would have them do unto you.

Jesus of Nazareth,

~30AD


8/53

Four legs good, two legs bad.

George Orwell,

Animal Farm


9/53

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 humanbeings, 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 SecondLaw.Isaac Asimov,

I, Robot


10/53

Principles such assimplicity andmodularity

are the stuffof soware engineering;decentralisation andtoleranceare the life and breath of Internet.

Tim Berners-Lee,

Principles of Design
http://www.w3.org/DesignIssues/Principles.htmlhttp://www.w3.org/DesignIssues/Principles.htmlhttp://www.w3.org/DesignIssues/Principles.htmlhttp://www.w3.org/DesignIssues/Principles.htmlhttp://www.w3.org/DesignIssues/Principles.htmlhttp://www.w3.org/DesignIssues/Principles.html


11/53

HTML 2.0

HTML 3.2HTML 4.0

HTML 4.01

1995

19971997

1999


12/53

XHTML 1.0

XHTML 1.1XHTML 2

2000

2001


13/53

Be conservative in what you send;be liberal in what you accept.

Jon Postel,

e Robustness Principle


14/53

WHATWG

W3C

HTML5

2004

2007


15/53

the designof

HTML5


16/53

is document describes the set of guiding principlesused by the HTML Working Group for thedevelopment of HTML5. e principles offerguidance for the design of HTML in the areas ofcompatibility, utility andinteroperability.

HTML Design Principlesw3.org/TR/html-design-principles
http://www.w3.org/TR/html-design-principles/http://www.w3.org/TR/html-design-principles/http://www.w3.org/TR/html-design-principles/http://www.w3.org/TR/html-design-principles/http://www.w3.org/TR/html-design-principles/


17/53

avoidneedlesscomplexitySimple solutions are preferred to complex ones,when possible.


18/53

HTML 4.01

XHTML 1.0

HTML5


19/53

HTML 4.01

XHTML 1.0

HTML5


20/53

HTML5


21/53

supportexistingcontentExisting content oen relies upon expected user agentprocessing and behaviour to function as intended.


22/53

Hello world

Hello world

Hello world

Hello world


23/53

Be conservative in what you send;be liberal in what you accept.

Jon Postel,e Robustness Principle


24/53

solve realproblemsAbstract architectures that dont address an existingneed are less favoured than pragmatic solutions to

problems that web content faces today.


25/53

Headline text

Paragraph text.
(X)HTML
HTML5

Headline text

Paragraph text.


26/53

pave thecowpaths


27/53

section

articleaside

nav

header

footerdetails

figure


28/53

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


29/53

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


30/53

section

articleaside

nav

header

footerdetails

figure


31/53

......

......


32/53

......

......


33/53

......

......


34/53

I would in fact prefer, instead of , etcfor headings to have a nestable .. element, and a generic ..which at any level within the sections would producethe required level of heading.

Tim Berners-Lee,1991


35/53

degradegracefullyHTML5 document conformance requirementsshould be designed so that Web content candegrade gracefully in older or less capable useragents, even when making use of new elements,

attributes, APIs and content models.


36/53

input type="number"

input type="search"

input type="range"input type="email"

input type="date"input type="url"


37/53

input type="number"


38/53

input type="search"


39/53

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


40/53

FlashHTML5 objectvideo


41/53


42/53


43/53

download


44/53

download


45/53

download

1234


46/53

e value of a network is proportional to the squareof the number of connected users of the system (n2).

Robert Metcalfe


47/53

priority ofconstituenciesIn case of conflict, considerusers over authors overimplementors over specifiersover theoretical purity.


48/53

Soware, like all technologies, is inherently political.

Code inevitably reflects the choices, biases and desiresof its creators.

Jamais Cascio
http://openthefuture.com/2007/09/singularity_summit_talk_openne.htmlhttp://openthefuture.com/2007/09/singularity_summit_talk_openne.html


49/53

1. Make the mostequent tasks easy and lessequent tasks achievable.

2. Design for the 80%.

3. Privilege the Content Creator.

4. Make the default settings smart.Mark Boulton, Leisa Reichelt,

d7ux.org
http://www.d7ux.org/http://www.d7ux.org/http://www.d7ux.org/


50/53

Design for humansfirst, machines second.

Microformats.org,e microformats principles
http://microformats.org/abouthttp://microformats.org/abouthttp://microformats.org/abouthttp://microformats.org/abouthttp://microformats.org/about


51/53

e effectiveness of the Internet as a public resourcedepends upon interoperability (protocols, data

formats, content), innoation and decentralised

participation worldwide.

Transparent community-based processes promote

participation, accountability, and trust.e Mozilla Foundation,

e Mozilla Manifesto
http://www.mozilla.org/about/manifesto.en.htmlhttp://www.mozilla.org/about/manifesto.en.htmlhttp://www.mozilla.org/about/manifesto.en.htmlhttp://www.mozilla.org/about/manifesto.en.htmlhttp://www.mozilla.org/about/manifesto.en.html


52/53

Rough consensus and running code.

e Tao of IETF
http://www.ietf.org/tao.htmlhttp://www.ietf.org/tao.html


53/53

@adactio

adactio.com

books.alistapart.com
http://books.alistapart.com/http://books.alistapart.com/http://adactio.com/http://adactio.com/http://twitter.com/adactiohttp://twitter.com/adactio

Documents

Design of HTML 5