狠狠撸

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

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

—Karl Marx,
1875

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

—Jesus of Nazareth,
~30AD

Four legs good, two legs bad.

—George Orwell,
Animal Farm

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 con?ict with
the First Law.

A robot must protect its own existence as long as such
protection does not con?ict with the First or Second
Law.
—Isaac Asimov,
I, Robot

Principles such as simplicity and modularity
are the stu? of soware engineering;
decentralisation and tolerance
are the life and breath of Internet.

—Tim Berners-Lee,
Principles of Design

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

XHTML 1.0 2000
XHTML 1.1 2001
XHTML 2

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

—Jon Postel,
e Robustness Principle

WHATWG 2004
W3C 2007

HTML5

is document describes the set of guiding principles
used by the HTML Working Group for the
development of HTML5. e principles o?er
guidance for the design of HTML in the areas of
compatibility, utility and interoperability.

—HTML Design Principles
w3.org/TR/html-design-principles

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

HTML 4.01
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

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

HTML5 <!DOCTYPE html>

HTML 4.01
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">

XHTML 1.0
<?xml version="1.0" encoding="UTF-8"?>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />

HTML5 <meta charset="utf-8">

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

<img src=/slideshow/designofhtml5/5522540/"foo" alt="bar" />
<p class=/slideshow/designofhtml5/5522540/"foo">Hello world</p>

<img src=/slideshow/designofhtml5/5522540/"foo" alt="bar">
<p class=/slideshow/designofhtml5/5522540/"foo">Hello world

<IMG SRC=/slideshow/designofhtml5/5522540/"foo" ALT="bar">
<P CLASS=/slideshow/designofhtml5/5522540/"foo">Hello world</P>

<img src=foo alt=bar>
<p class=foo>Hello world</p>

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.

(X)HTML
<h2><a href="/path/to/resource">Headline text</a></h2>
<p><a href="/path/to/resource">Paragraph text.</a></p>

HTML5
<a href="/path/to/resource">
<h2>Headline text</h2>
<p>Paragraph text.</p>
</a>

section header
article footer
aside details
nav figure

I would in fact prefer, instead of <H1>, <H2> etc
for headings to have a nestable <SECTION>..
</SECTION> element, and a generic <H>..</H>
which at any level within the sections would produce
the required level of heading.

—Tim Berners-Lee,
1991

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.

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

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

<a href=/slideshow/designofhtml5/5522540/"movie.mp4">download</a>
</object>
</video>

<video>
<source src=/slideshow/designofhtml5/5522540/"movie.mp4">
<source src="movie.ogv">
<a href=/slideshow/designofhtml5/5522540/"movie.mp4">download</a>
</object>
</video>

<video>
<source src=/slideshow/designofhtml5/5522540/"movie.mp4"> 1
<source src="movie.ogv"> 2
<object data="movie.swf"> 3
<a href=/slideshow/designofhtml5/5522540/"movie.mp4">download</a> 4
</object>
</video>

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

—Robert Metcalfe

priority of
constituencies
In case of con?ict, consider
users over authors over
implementors over speci?ers
over theoretical purity.

Soware, like all technologies, is inherently political.
Code inevitably re?ects the choices, biases and desires
of its creators.

—Jamais Cascio

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

Design for humans ?rst, machines second.

—Microformats.org,
e microformats principles

e e?ectiveness 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

Rough consensus and running code.

—e Tao of IETF

@adactio
adactio.com
books.alistapart.com

狠狠撸

Designofhtml5

Recommended

More Related Content

Viewers also liked (7)

Similar to Designofhtml5 (20)

More from isnull (17)

Designofhtml5