Le design du HTML5 (Remix)
•
1 gefällt mir•339 views
Un remix de la conférence "The Design of HTML5" par Jeremy Keith (2011) - https://speakerdeck.com/adactio/the-design-of-html5
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Mehr von Manuel Schmalstieg
Mehr von Manuel Schmalstieg (14)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Le design du HTML5 (Remix)
- 6. 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
- 7. 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
- 8. De chacun selon ses moyens, à chacun selon ses besoins. —Karl Marx 1875
- 9. Do unto others as you would have them do unto you. —Jesus of Nazareth, ~30AD
- 10. Ne blesse pas les autres de manière que tu trouverais toi-même blessante. — Udana-Varga 5:18 environ -500
- 11. Tout deux pattes est un ennemi, Tout quatre pattes ou volatile est un ami. —George Orwell, La Ferme des animaux
- 12. 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
- 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
- 21. 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
- 22. HTML 2.0 HTML 3.2 HTML 4.0 HTML 4.01 1995 1997 1997 1999
- 23. HTML 2.0 HTML 3.2 HTML 4.0 HTML 4.01 1995 1997 1997 1999
- 24. HTML 2.0 HTML 3.2 HTML 4.0 HTML 4.01 1995 1997 1997 1999
- 25. HTML 2.0 HTML 3.2 HTML 4.0 HTML 4.01 1995 1997 1997 1999
- 26. XHTML 1.0 XHTML 1.1 XHTML 2 2000 2001
- 27. XHTML 1.0 XHTML 1.1 XHTML 2 2000 2001
- 28. XHTML 1.0 XHTML 1.1 XHTML 2 2000 2001
- 29. Be conservative in what you send; be liberal in what you accept. —Jon Postel, The Robustness Principle
- 30. Soyez strict dans ce que vous envoyez, mais tolérant dans ce que vous recevez. —Jon Postel, Le principe de robustesse
- 36. Soyez strict dans ce que vous envoyez, mais tolérant dans ce que vous recevez. —Jon Postel, Le principe de robustesse
- 43. 2006 You know what? We were wrong.
- 46. 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
- 47. avoid needless complexitySimple solutions are preferred to complex ones, when possible.
- 48. <!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>
- 49. <!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>
- 50. <!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>
- 51. <!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>
- 52. <!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>
- 53. <!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>
- 54. <!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>
- 55. <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">
- 56. <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">
- 57. <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">
- 58. <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">
- 59. <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">
- 60. <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">
- 61. <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">
- 62. HTML5 <link rel="stylesheet" type="text/css" href="file.css"> <script type="text/javascript"> </script>
- 63. 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>
- 64. 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>
- 65. support existing contentExisting content often relies upon expected user agent processing and behaviour to function as intended.
- 66. <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>
- 67. <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>
- 68. <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>
- 69. <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>
- 70. Be conservative in what you send; be liberal in what you accept. —Jon Postel, The Robustness Principle
- 71. 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.
- 72. <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>
- 73. <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>
- 74. <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>
- 79. <body> <div id="header">...</div> <div id="navigation">...</div> <div id="main">...</div> <div id="sidebar">...</div> <div id="footer">...</div> </body>
- 82. <div class="item"> <h2>...</h2> <div class="meta">...</div> <div class="content"> ... </div> <div class="links">...</div> </div>
- 83. <section class="item"> <header><h1>...</h1></header> <footer class="meta">...</footer> <div class="content"> ... </div> <nav class="links">...</nav> </section>
- 84. <section class="item"> <header><h1>...</h1></header> <footer class="meta">...</footer> <div class="content"> ... </div> <nav class="links">...</nav> </section>
- 85. 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
- 86. 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.
- 87. input type="number" input type="search" input type="range" input type="email" input type="date" input type="url"
- 88. input type="number" input type="search" input type="range" input type="email" input type="date" input type="url"
- 89. input type="number" input type="search" input type="range" input type="email" input type="date" input type="url"
- 90. input type="number" input type="search" input type="range" input type="email" input type="date" input type="url"
- 91. input type="number" input type="search" input type="range" input type="email" input type="date" input type="url"
- 92. input type="number" input type="search" input type="range" input type="email" input type="date" input type="url"
- 95. input type="search" placeholder="e.g. salad or fish"
- 98. <video src="movie.mp4"> </video> <!-- fallback content -->
- 99. <video src="movie.mp4"> </video> <object data="movie.swf"> <!-- fallback content --> </object>
- 100. <video src="movie.mp4"> </video> <object data="movie.swf"> <a href="movie.mp4">download</a> </object>
- 101. <video> <source src="movie.mp4"> <source src="movie.ogv"> </video> <object data="movie.swf"> <a href="movie.mp4">download</a> </object>
- 102. <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
- 103. The value of a network is proportional to the square of the number of connected users of the system (n2). —Robert Metcalfe
- 104. L’utilité d’un réseau est proportionnelle au carré du nombre de ses utilisateurs. —Robert Metcalfe La Loi de Metcalfe
- 107. priority of constituencies In case of conflict, consider users over authors over implementors over specifiers over theoretical purity.
- 108. priority of constituencies In case of conflict, consider users over authors over implementors over specifiers over theoretical purity.
- 109. Software, like all technologies, is inherently political. Code inevitably reflects the choices, biases and desires of its creators. —Jamais Cascio
- 110. 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
- 111. Design for humans first, machines second. —Microformats.org, The microformats principles
- 112. 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
- 113. Rough consensus and running code. —The Tao of IETF