Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
the design
of HTML5
the design
of HTML5
the design
of HTML5
design
principles
We hold these Truths to be self-evident,
that all Men are created equal,
that they are endowed by their Creator with
certa...
Nous tenons pour évidentes pour elles-
mêmes les vérités suivantes :
tous les hommes sont créés égaux ;
ils sont doués par...
De chacun selon ses moyens,
à chacun selon ses besoins.
—Karl Marx
1875
Do unto others as you would have them do unto you.
—Jesus of Nazareth,
~30AD
Ne blesse pas les autres de manière
que tu trouverais toi-même blessante.
— Udana-Varga 5:18
environ -500
Tout deux pattes est un ennemi,
Tout quatre pattes ou volatile est un ami.
—George Orwell,
La Ferme des animaux
1. un robot ne peut porter atteinte à un être humain,
ni, en restant passif, permettre qu'un être humain
soit exposé au da...
Principles such as simplicity and modularity
are the stuff of software engineering;
decentralisation and tolerance
are the...
Principles such as simplicity and modularity
are the stuff of software engineering;
decentralisation and tolerance
are the...
HTML 2.0
HTML 3.2
HTML 4.0
HTML 4.01
1995
1997
1997
1999
HTML 2.0
HTML 3.2
HTML 4.0
HTML 4.01
1995
1997
1997
1999
HTML 2.0
HTML 3.2
HTML 4.0
HTML 4.01
1995
1997
1997
1999
HTML 2.0
HTML 3.2
HTML 4.0
HTML 4.01
1995
1997
1997
1999
XHTML 1.0
XHTML 1.1
XHTML 2
2000
2001
XHTML 1.0
XHTML 1.1
XHTML 2
2000
2001
XHTML 1.0
XHTML 1.1
XHTML 2
2000
2001
Be conservative in what you send;
be liberal in what you accept.
—Jon Postel,
The Robustness Principle
Soyez strict dans ce que vous envoyez,
mais tolérant dans ce que vous recevez.
—Jon Postel,
Le principe de robustesse
Soyez strict dans ce que vous envoyez,
mais tolérant dans ce que vous recevez.
—Jon Postel,
Le principe de robustesse
WHATWG
W3C
HTML5
2004
2007
WHATWG
W3C
HTML5
2004
2007
WHATWG
W3C
HTML5
2004
2007
WHATWG
W3C
HTML5
2004
2007Web Hypertext
Applications
Technology
Working Group
WHATWG
W3C
HTML5
2004
2007
WHATWG
W3C
HTML5
2004
2007
2006
You know what?
We were wrong.
WHATWG
W3C
HTML5
2004
2007
the design
of HTML5
This document describes the set of guiding principles
used by the HTML Working Group for the
development of HTML5. The pri...
avoid
needless
complexitySimple solutions are preferred to complex ones,
when possible.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01
XHTML 1.0
<!DOCTYPE h...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01
XHTML 1.0
<!DOCTYPE h...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01
XHTML 1.0
<!DOCTYPE h...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01
XHTML 1.0
<!DOCTYPE h...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01
XHTML 1.0
<!DOCTYPE h...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01
XHTML 1.0
<!DOCTYPE h...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01
XHTML 1.0
<!DOCTYPE h...
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
HTML 4.01
XHTML 1.0
<?xml version="1.0" encoding="UTF-...
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
HTML 4.01
XHTML 1.0
<?xml version="1.0" encoding="UTF-...
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
HTML 4.01
XHTML 1.0
<?xml version="1.0" encoding="UTF-...
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
HTML 4.01
XHTML 1.0
<?xml version="1.0" encoding="UTF-...
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
HTML 4.01
XHTML 1.0
<?xml version="1.0" encoding="UTF-...
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
HTML 4.01
XHTML 1.0
<?xml version="1.0" encoding="UTF-...
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
HTML 4.01
XHTML 1.0
<?xml version="1.0" encoding="UTF-...
HTML5
<link rel="stylesheet" type="text/css"
href="file.css">
<script type="text/javascript">
</script>
HTML5
<link rel="stylesheet" type="text/css"
href="file.css">
<script type="text/javascript">
</script>
HTML5
<link rel="s...
HTML5
<link rel="stylesheet" type="text/css"
href="file.css">
<script type="text/javascript">
</script>
HTML5
<link rel="s...
support
existing
contentExisting content often relies upon expected user agent
processing and behaviour to function as int...
<img src="foo" alt="bar" />
<p class="foo">Hello world</p>
<img src="foo" alt="bar">
<p class="foo">Hello world
<IMG SRC="...
<img src="foo" alt="bar" />
<p class="foo">Hello world</p>
<img src="foo" alt="bar">
<p class="foo">Hello world
<IMG SRC="...
<img src="foo" alt="bar" />
<p class="foo">Hello world</p>
<img src="foo" alt="bar">
<p class="foo">Hello world
<IMG SRC="...
<img src="foo" alt="bar" />
<p class="foo">Hello world</p>
<img src="foo" alt="bar">
<p class="foo">Hello world
<IMG SRC="...
Be conservative in what you send;
be liberal in what you accept.
—Jon Postel,
The Robustness Principle
solve real
problems
Abstract architectures that don’t address an existing
need are less favoured than pragmatic solutions ...
<h2><a href="/path/to/resource">Headline text</a></h2>
<p><a href="/path/to/resource">Paragraph text.</a></p>
(X)HTML
HTML...
<h2><a href="/path/to/resource">Headline text</a></h2>
<p><a href="/path/to/resource">Paragraph text.</a></p>
(X)HTML
HTML...
<h2><a href="/path/to/resource">Headline text</a></h2>
<p><a href="/path/to/resource">Paragraph text.</a></p>
(X)HTML
HTML...
pave the
cowpaths
section
article
aside
nav
header
footer
details
figure
<body>
<div id="header">...</div>
<div id="navigation">...</div>
<div id="main">...</div>
<div id="sidebar">...</div>
<div...
<body>
<header>...</header>
<nav>...</nav>
<div id="main">...</div>
<aside>...</aside>
<footer>...</footer>
</body>
section
article
aside
nav
header
footer
details
figure
<div class="item">
<h2>...</h2>
<div class="meta">...</div>
<div class="content">
...
</div>
<div class="links">...</div>
...
<section class="item">
<header><h1>...</h1></header>
<footer class="meta">...</footer>
<div class="content">
...
</div>
<n...
<section class="item">
<header><h1>...</h1></header>
<footer class="meta">...</footer>
<div class="content">
...
</div>
<n...
I would in fact prefer, instead of <H1>, <H2> etc
for headings to have a nestable <SECTION>..
</SECTION> element, and a ge...
degrade
gracefully
HTML 5 document conformance requirements
should be designed so that Web content can
degrade gracefully ...
input type="number"
input type="search"
input type="range"
input type="email"
input type="date"
input type="url"
input type="number"
input type="search"
input type="range"
input type="email"
input type="date"
input type="url"
input type="number"
input type="search"
input type="range"
input type="email"
input type="date"
input type="url"
input type="number"
input type="search"
input type="range"
input type="email"
input type="date"
input type="url"
input type="number"
input type="search"
input type="range"
input type="email"
input type="date"
input type="url"
input type="number"
input type="search"
input type="range"
input type="email"
input type="date"
input type="url"
input type="number"
input type="search"
input type="search"
placeholder="e.g. salad or fish"
FlashHTML5
objectvideo
FlashHTML5
objectvideo
<video src="movie.mp4">
</video>
<!-- fallback content -->
<video src="movie.mp4">
</video>
<object data="movie.swf">
<!-- fallback content -->
</object>
<video src="movie.mp4">
</video>
<object data="movie.swf">
<a href="movie.mp4">download</a>
</object>
<video>
<source src="movie.mp4">
<source src="movie.ogv">
</video>
<object data="movie.swf">
<a href="movie.mp4">download<...
<video>
<source src="movie.mp4">
<source src="movie.ogv">
</video>
<object data="movie.swf">
<a href="movie.mp4">download<...
The value of a network is proportional to the square
of the number of connected users of the system (n2).
—Robert Metcalfe
L’utilité d’un réseau est proportionnelle
au carré du nombre de ses utilisateurs.
—Robert Metcalfe
La Loi de Metcalfe
priority of
constituencies
In case of conflict, consider
users over authors over
implementors over specifiers
over theoret...
priority of
constituencies
In case of conflict, consider
users over authors over
implementors over specifiers
over theoret...
Software, like all technologies, is inherently political.
Code inevitably reflects the choices, biases and desires
of its ...
1. Make the most frequent tasks easy and less
frequent tasks achievable.
2. Design for the 80%.
3. Privilege the Content C...
Design for humans first, machines second.
—Microformats.org,
The microformats principles
The effectiveness of the Internet as a public resource
depends upon interoperability (protocols, data
formats, content), i...
Rough consensus and running code.
—The Tao of IETF
Le design du HTML5 (Remix)
Le design du HTML5 (Remix)
Le design du HTML5 (Remix)
Le design du HTML5 (Remix)
Le design du HTML5 (Remix)
Le design du HTML5 (Remix)
Le design du HTML5 (Remix)
Le design du HTML5 (Remix)
Le design du HTML5 (Remix)
Le design du HTML5 (Remix)
Le design du HTML5 (Remix)
Le design du HTML5 (Remix)
Le design du HTML5 (Remix)
Le design du HTML5 (Remix)
Le design du HTML5 (Remix)
Le design du HTML5 (Remix)
Le design du HTML5 (Remix)
Le design du HTML5 (Remix)
Le design du HTML5 (Remix)
Le design du HTML5 (Remix)
Upcoming SlideShare
Loading in …5
×

Le design du HTML5 (Remix)

120 views

Published on

Un remix de la conférence "The Design of HTML5" par Jeremy Keith (2011) - https://speakerdeck.com/adactio/the-design-of-html5

Published in: Design
  • Be the first to comment

  • Be the first to like this

Le design du HTML5 (Remix)

  1. 1. the design of HTML5
  2. 2. the design of HTML5
  3. 3. the design of HTML5
  4. 4. design principles
  5. 5. 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. —The Declaration Of Independence, 1776-07-04
  6. 6. Nous tenons pour évidentes pour elles- mêmes les vérités suivantes : tous les hommes sont créés égaux ; ils sont doués par leur Créateur de certains droits inaliénables ; parmi ces droits se trouvent la vie, la liberté et la recherche du bonheur. —Déclaration d’indépendance des États-Unis d'Amérique 1776
  7. 7. De chacun selon ses moyens, à chacun selon ses besoins. —Karl Marx 1875
  8. 8. Do unto others as you would have them do unto you. —Jesus of Nazareth, ~30AD
  9. 9. Ne blesse pas les autres de manière que tu trouverais toi-même blessante. — Udana-Varga 5:18 environ -500
  10. 10. Tout deux pattes est un ennemi, Tout quatre pattes ou volatile est un ami. —George Orwell, La Ferme des animaux
  11. 11. 1. un robot ne peut porter atteinte à un être humain, ni, en restant passif, permettre qu'un être humain soit exposé au danger ; 2. un robot doit obéir aux ordres qui lui sont donnés par un être humain, sauf si de tels ordres entrent en conflit avec la première loi ; 3. un robot doit protéger son existence tant que cette protection n'entre pas en conflit avec la première ou la deuxième loi. —Isaac Asimov, Les Robots
  12. 12. Principles such as simplicity and modularity are the stuff of software engineering; decentralisation and tolerance are the life and breath of Internet. —Tim Berners-Lee, Principles of Design
  13. 13. Principles such as simplicity and modularity are the stuff of software engineering; decentralisation and tolerance are the life and breath of Internet. —Tim Berners-Lee, Principles of Design
  14. 14. HTML 2.0 HTML 3.2 HTML 4.0 HTML 4.01 1995 1997 1997 1999
  15. 15. HTML 2.0 HTML 3.2 HTML 4.0 HTML 4.01 1995 1997 1997 1999
  16. 16. HTML 2.0 HTML 3.2 HTML 4.0 HTML 4.01 1995 1997 1997 1999
  17. 17. HTML 2.0 HTML 3.2 HTML 4.0 HTML 4.01 1995 1997 1997 1999
  18. 18. XHTML 1.0 XHTML 1.1 XHTML 2 2000 2001
  19. 19. XHTML 1.0 XHTML 1.1 XHTML 2 2000 2001
  20. 20. XHTML 1.0 XHTML 1.1 XHTML 2 2000 2001
  21. 21. Be conservative in what you send; be liberal in what you accept. —Jon Postel, The Robustness Principle
  22. 22. Soyez strict dans ce que vous envoyez, mais tolérant dans ce que vous recevez. —Jon Postel, Le principe de robustesse
  23. 23. Soyez strict dans ce que vous envoyez, mais tolérant dans ce que vous recevez. —Jon Postel, Le principe de robustesse
  24. 24. WHATWG W3C HTML5 2004 2007
  25. 25. WHATWG W3C HTML5 2004 2007 WHATWG W3C HTML5 2004 2007
  26. 26. WHATWG W3C HTML5 2004 2007Web Hypertext Applications Technology Working Group
  27. 27. WHATWG W3C HTML5 2004 2007 WHATWG W3C HTML5 2004 2007
  28. 28. 2006 You know what? We were wrong.
  29. 29. WHATWG W3C HTML5 2004 2007
  30. 30. the design of HTML5
  31. 31. This document describes the set of guiding principles used by the HTML Working Group for the development of HTML5. The 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
  32. 32. avoid needless complexitySimple solutions are preferred to complex ones, when possible.
  33. 33. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 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>
  34. 34. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 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>
  35. 35. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 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>
  36. 36. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 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>
  37. 37. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 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> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 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>
  38. 38. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 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>
  39. 39. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 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>
  40. 40. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> HTML 4.01 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">
  41. 41. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> HTML 4.01 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">
  42. 42. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> HTML 4.01 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">
  43. 43. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> HTML 4.01 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">
  44. 44. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> HTML 4.01 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">
  45. 45. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> HTML 4.01 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"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> HTML 4.01 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">
  46. 46. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> HTML 4.01 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"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> HTML 4.01 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">
  47. 47. HTML5 <link rel="stylesheet" type="text/css" href="file.css"> <script type="text/javascript"> </script>
  48. 48. HTML5 <link rel="stylesheet" type="text/css" href="file.css"> <script type="text/javascript"> </script> HTML5 <link rel="stylesheet" type="text/css" href="file.css"> <script type="text/javascript"> </script>
  49. 49. HTML5 <link rel="stylesheet" type="text/css" href="file.css"> <script type="text/javascript"> </script> HTML5 <link rel="stylesheet" type="text/css" href="file.css"> <script type="text/javascript"> </script>
  50. 50. support existing contentExisting content often relies upon expected user agent processing and behaviour to function as intended.
  51. 51. <img src="foo" alt="bar" /> <p class="foo">Hello world</p> <img src="foo" alt="bar"> <p class="foo">Hello world <IMG SRC="foo" ALT="bar"> <P CLASS="foo">Hello world</P> <img src=foo alt=bar> <p class=foo>Hello world</p>
  52. 52. <img src="foo" alt="bar" /> <p class="foo">Hello world</p> <img src="foo" alt="bar"> <p class="foo">Hello world <IMG SRC="foo" ALT="bar"> <P CLASS="foo">Hello world</P> <img src=foo alt=bar> <p class=foo>Hello world</p>
  53. 53. <img src="foo" alt="bar" /> <p class="foo">Hello world</p> <img src="foo" alt="bar"> <p class="foo">Hello world <IMG SRC="foo" ALT="bar"> <P CLASS="foo">Hello world</P> <img src=foo alt=bar> <p class=foo>Hello world</p>
  54. 54. <img src="foo" alt="bar" /> <p class="foo">Hello world</p> <img src="foo" alt="bar"> <p class="foo">Hello world <IMG SRC="foo" ALT="bar"> <P CLASS="foo">Hello world</P> <img src=foo alt=bar> <p class=foo>Hello world</p>
  55. 55. Be conservative in what you send; be liberal in what you accept. —Jon Postel, The Robustness Principle
  56. 56. 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.
  57. 57. <h2><a href="/path/to/resource">Headline text</a></h2> <p><a href="/path/to/resource">Paragraph text.</a></p> (X)HTML HTML5 <a href="/path/to/resource"> <h2>Headline text</h2> <p>Paragraph text.</p> </a>
  58. 58. <h2><a href="/path/to/resource">Headline text</a></h2> <p><a href="/path/to/resource">Paragraph text.</a></p> (X)HTML HTML5 <a href="/path/to/resource"> <h2>Headline text</h2> <p>Paragraph text.</p> </a>
  59. 59. <h2><a href="/path/to/resource">Headline text</a></h2> <p><a href="/path/to/resource">Paragraph text.</a></p> (X)HTML HTML5 <a href="/path/to/resource"> <h2>Headline text</h2> <p>Paragraph text.</p> </a>
  60. 60. pave the cowpaths
  61. 61. section article aside nav header footer details figure
  62. 62. <body> <div id="header">...</div> <div id="navigation">...</div> <div id="main">...</div> <div id="sidebar">...</div> <div id="footer">...</div> </body>
  63. 63. <body> <header>...</header> <nav>...</nav> <div id="main">...</div> <aside>...</aside> <footer>...</footer> </body>
  64. 64. section article aside nav header footer details figure
  65. 65. <div class="item"> <h2>...</h2> <div class="meta">...</div> <div class="content"> ... </div> <div class="links">...</div> </div>
  66. 66. <section class="item"> <header><h1>...</h1></header> <footer class="meta">...</footer> <div class="content"> ... </div> <nav class="links">...</nav> </section>
  67. 67. <section class="item"> <header><h1>...</h1></header> <footer class="meta">...</footer> <div class="content"> ... </div> <nav class="links">...</nav> </section>
  68. 68. 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
  69. 69. 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.
  70. 70. input type="number" input type="search" input type="range" input type="email" input type="date" input type="url"
  71. 71. input type="number" input type="search" input type="range" input type="email" input type="date" input type="url"
  72. 72. input type="number" input type="search" input type="range" input type="email" input type="date" input type="url"
  73. 73. input type="number" input type="search" input type="range" input type="email" input type="date" input type="url"
  74. 74. input type="number" input type="search" input type="range" input type="email" input type="date" input type="url"
  75. 75. input type="number" input type="search" input type="range" input type="email" input type="date" input type="url"
  76. 76. input type="number"
  77. 77. input type="search"
  78. 78. input type="search" placeholder="e.g. salad or fish"
  79. 79. FlashHTML5 objectvideo
  80. 80. FlashHTML5 objectvideo
  81. 81. <video src="movie.mp4"> </video> <!-- fallback content -->
  82. 82. <video src="movie.mp4"> </video> <object data="movie.swf"> <!-- fallback content --> </object>
  83. 83. <video src="movie.mp4"> </video> <object data="movie.swf"> <a href="movie.mp4">download</a> </object>
  84. 84. <video> <source src="movie.mp4"> <source src="movie.ogv"> </video> <object data="movie.swf"> <a href="movie.mp4">download</a> </object>
  85. 85. <video> <source src="movie.mp4"> <source src="movie.ogv"> </video> <object data="movie.swf"> <a href="movie.mp4">download</a> </object> 1 2 3 4
  86. 86. The value of a network is proportional to the square of the number of connected users of the system (n2). —Robert Metcalfe
  87. 87. L’utilité d’un réseau est proportionnelle au carré du nombre de ses utilisateurs. —Robert Metcalfe La Loi de Metcalfe
  88. 88. priority of constituencies In case of conflict, consider users over authors over implementors over specifiers over theoretical purity.
  89. 89. priority of constituencies In case of conflict, consider users over authors over implementors over specifiers over theoretical purity.
  90. 90. Software, like all technologies, is inherently political. Code inevitably reflects the choices, biases and desires of its creators. —Jamais Cascio
  91. 91. 1. Make the most frequent tasks easy and less frequent tasks achievable. 2. Design for the 80%. 3. Privilege the Content Creator. 4. Make the default settings smart. —Mark Boulton, Leisa Reichelt, d7ux.org
  92. 92. Design for humans first, machines second. —Microformats.org, The microformats principles
  93. 93. The effectiveness of the Internet as a public resource depends upon interoperability (protocols, data formats, content), innovation and decentralised participation worldwide. Transparent community-based processes promote participation, accountability, and trust. —The Mozilla Foundation, The Mozilla Manifesto
  94. 94. Rough consensus and running code. —The Tao of IETF

×