HTML5: It goes to ELEVEN
â˘Transferir como KEY, PDFâ˘
14 gostaramâ˘4,478 visualizaçþes
Very basic introduction to HTML5, explaining what it is and how it can be used today. Presented at the Adobe User Group Belgium Web SIG Event, 27th May 2010. http://mths.be/abh
Recomendados
Mais conteĂşdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a HTML5: It goes to ELEVEN
Semelhante a HTML5: It goes to ELEVEN (20)
Ăltimo
Ăltimo (20)
HTML5: It goes to ELEVEN
- 1. HAI GUISE!
- 2. HAI GUISE! ⢠Mathias Bynens
- 3. HAI GUISE! ⢠Mathias Bynens ⢠mths.be
- 4. HAI GUISE! ⢠Mathias Bynens ⢠mths.be ⢠@mathias
- 8. HTML5
- 9. HTML5 It goes to ELEVEN.
- 10. HTML5 It goes to ELEVEN. hashtag: #h5e
- 11. HTML5?
- 12. HTML5? ⢠= HTML 4 + 1
- 13. HTML5? ⢠= HTML 4 + 1 ⢠= HTML 4.01 + 0.99
- 14. HTML5? ⢠= HTML 4 + 1 ⢠= HTML 4.01 + 0.99 ⢠Backwards compatible
- 15. Whatâs new in HTML5?
- 16. Whatâs new in HTML5? ⢠SimpliďŹed syntax
- 17. Whatâs new in HTML5? ⢠SimpliďŹed syntax ⢠Some HTML 4 elements are redeďŹned
- 18. Whatâs new in HTML5? ⢠SimpliďŹed syntax ⢠Some HTML 4 elements are redeďŹned ⢠New values/attributes for existing elements
- 19. Whatâs new in HTML5? ⢠SimpliďŹed syntax ⢠Some HTML 4 elements are redeďŹned ⢠New values/attributes for existing elements ⢠New sectioning elements
- 20. Whatâs new in HTML5? ⢠SimpliďŹed syntax ⢠Some HTML 4 elements are redeďŹned ⢠New values/attributes for existing elements ⢠New sectioning elements ⢠New inline elements
- 21. Whatâs new in HTML5? ⢠SimpliďŹed syntax ⢠Some HTML 4 elements are redeďŹned ⢠New values/attributes for existing elements ⢠New sectioning elements ⢠New inline elements ⢠New interactive elements
- 22. Whatâs new in HTML5? ⢠SimpliďŹed syntax ⢠Some HTML 4 elements are redeďŹned ⢠New values/attributes for existing elements ⢠New sectioning elements ⢠New inline elements ⢠New interactive elements ⢠New JavaScript APIs
- 23. Whatâs new in HTML5? ⢠SimpliďŹed syntax ⢠Some HTML 4 elements are redeďŹned ⢠New values/attributes for existing elements ⢠New sectioning elements ⢠New inline elements ⢠New interactive elements ⢠New JavaScript APIs
- 24. Whatâs new in HTML5? ⢠SimpliďŹed syntax ⢠Some HTML 4 elements are redeďŹned ⢠New values/attributes for existing elements ⢠New sectioning elements ⢠New inline elements ⢠New interactive elements ⢠New JavaScript APIs
- 25. Whatâs new in HTML5? ⢠SimpliďŹed syntax ⢠Some HTML 4 elements are redeďŹned ⢠New values/attributes for existing elements ⢠New sectioning elements ⢠New inline elements ⢠New interactive elements ⢠New JavaScript APIs
- 26. Level 1
- 27. Level 1 Donât worry about browser support;
- 28. Level 1 Donât worry about browser support; It Just Worksâ˘
- 30. SimpliďŹed syntax ⢠DOCTYPE
- 31. XHTML 1.0 DOCTYPE <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
- 32. XHTML 1.1 DOCTYPE <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/ TR/xhtml11/DTD/xhtml11.dtd">
- 33. HTML 4.01 DOCTYPE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/ TR/html4/strict.dtd">
- 35. SimpliďŹed syntax ⢠DOCTYPE ⢠Character encoding
- 36. HTML 4.01 charset <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- 37. HTML 5 charset <meta charset="utf-8">
- 38. SimpliďŹed syntax ⢠DOCTYPE ⢠Character encoding ⢠type attributes here and there
- 39. HTML 4.01 <link rel="stylesheet" type="text/css" href="foo.css">
- 41. HTML 4.01 <style type="text/css"> body { background: gray url(boring.gif) no-repeat; } </style>
- 42. HTML5 <style> body { background: pink url(unicorns.png) repeat; } </style>
- 43. HTML 4.01 <script type="text/javascript"> alert('CAN HAZ HTML 4.01?'); </script>
- 44. HTML5 <script> // O HAI SIMPLIFIED HTML5 SYNTAX! </script>
- 45. SimpliďŹed syntax ⢠DOCTYPE ⢠Character encoding ⢠type attributes here and there ⢠Optional solidus (/>)
- 46. HTML5 <img src="x.png" alt="Bazinga"> <img src="x.png" alt="Bazinga"/> <img src="x.png" alt="Bazinga" />
- 47. SimpliďŹed syntax ⢠DOCTYPE ⢠Character encoding ⢠type attributes here and there ⢠Optional solidus (/>)
- 48. SimpliďŹed syntax ⢠DOCTYPE ⢠Character encoding ⢠type attributes here and there ⢠Optional solidus (/>) ⢠Easier to remember
- 49. SimpliďŹed syntax ⢠DOCTYPE ⢠Character encoding ⢠type attributes here and there ⢠Optional solidus (/>) ⢠Easier to remember ⢠Shorter
- 52. SimpliďŹed syntax ⢠Itâs how browsers work
- 53. SimpliďŹed syntax ⢠Itâs how browsers work ⢠HTML5 specs current behavior
- 54. SimpliďŹed syntax ⢠Itâs how browsers work ⢠HTML5 specs current behavior ⢠Future-proof
- 56. RedeďŹned elements ⢠<small>
- 57. RedeďŹned elements ⢠<small> ⢠<strong>
- 58. RedeďŹned elements ⢠<small> ⢠<strong> ⢠<b> and <i>
- 59. RedeďŹned elements ⢠<small> ⢠<strong> ⢠<b> and <i> ⢠âŚ
- 60. RedeďŹned elements ⢠<small> ⢠<strong> ⢠<b> and <i> ⢠⌠⢠Block level anchors
- 62. Block level anchors <a href="/canhazfood/carrot"> <h1>Carrot</h1> <p>Om nom nom nom.</p> </a>
- 63. Block level anchors <a href="/canhazfood/carrot"> <h1>Carrot</h1> <p>Om nom nom nom.</p> </a>
- 64. Block level anchors <a href="/canhazfood/carrot"> <h1>Carrot</h1> <p>Om nom nom nom.</p> </a> a { display: block; }
- 65. Block level anchors <a href="/canhazfood/carrot"> <h1>Carrot</h1> <p>Om nom nom nom.</p> </a> a { display: block; }
- 66. Level 2
- 67. Level 2 Stuff that degrades gracefully by default
- 68. Level 2 Stuff that degrades gracefully by default
- 71. New attributes/values <input type="email"> url, tel, number
- 72. New attributes/values <input type="email"> url, tel, number datetime, date, time, month, week
- 73. New attributes/values <input type="email"> url, tel, number datetime, date, time, month, week âŚ
- 74. New attributes/values <input type="email"> url, tel, number datetime, date, time, month, week ⌠<input type="email" placeholder="foo@bar.baz">
- 75. New attributes/values <input type="email"> url, tel, number datetime, date, time, month, week ⌠<input type="email" placeholder="foo@bar.baz"> â âWeb Forms 2.0â
- 76. New attributes/values <input type="email"> url, tel, number datetime, date, time, month, week ⌠<input type="email" placeholder="foo@bar.baz"> â âWeb Forms 2.0â
- 78. New attributes/values Graceful degradation isnât enough?
- 79. New attributes/values Graceful degradation isnât enough? â Use JavaScript for feature detection
- 80. New attributes/values Graceful degradation isnât enough? â Use JavaScript for feature detection â Provide a fallback
- 81. Level 3
- 82. Level 3 We need some extra love
- 83. Level 3 We need some extra love
- 85. New sectioning elements <header> and <footer>
- 86. New sectioning elements <header> and <footer> <section> and <article>
- 87. New sectioning elements <header> and <footer> <section> and <article> <nav>
- 88. New sectioning elements <header> and <footer> <section> and <article> <nav> <aside>
- 89. New sectioning elements <header> and <footer> <section> and <article> <nav> <aside> âŚ
- 90. New sectioning elements <header> and <footer> <section> and <article> <nav> <aside> ⌠â Semantic alternatives to divs in HTML 4.01
- 91. New sectioning elements <header> and <footer> <section> and <article> <nav> <aside> ⌠â Semantic alternatives to divs in HTML 4.01 â Fallback: HTML5 shiv http://mths.be/html5shiv
- 96. New inline elements <mark> <time> ⌠â Semantic alternatives to spans in HTML 4.01
- 97. New inline elements <mark> <time> ⌠â Semantic alternatives to spans in HTML 4.01 â Fallback: HTML5 shiv http://mths.be/html5shiv
- 98. Interactive elements <details> <summary>More info about Foo</summary> <p>Lorem ipsum.</p> <p>Dolor sit amet.</p> </details>
- 100. Interactive elements <details open> <summary>More info about Foo</summary> <p>Lorem ipsum.</p> <p>Dolor sit amet.</p> </details>
- 101. Interactive elements <details open> <summary>More info about Foo</summary> <p>Lorem ipsum.</p> <p>Dolor sit amet.</p> </details> â Fallback: http://mths.be/html5details
- 102. Interactive elements <details open> <summary>More info about Foo</summary> <p>Lorem ipsum.</p> <p>Dolor sit amet.</p> </details> â Fallback: http://mths.be/html5details â Other elements, other fallbacks
- 103. JavaScript APIs
- 107. JavaScript APIs <video> <audio> <canvas> Drag-and-drop, ofďŹine apps, inline editing, workers, web sockets, and many, many moreâŚ
- 108. JavaScript APIs <video> <audio> <canvas> Drag-and-drop, ofďŹine apps, inline editing, workers, web sockets, and many, many more⌠See http://mths.be/jsapis
- 109. JavaScript APIs <video> <audio> <canvas> Drag-and-drop, ofďŹine apps, inline editing, workers, web sockets, and many, many more⌠See http://mths.be/jsapis â Fallback = Flash
- 110. JavaScript APIs <video> <audio> <canvas> Drag-and-drop, ofďŹine apps, inline editing, workers, web sockets, and many, many more⌠See http://mths.be/jsapis â Fallback = Flash
- 111. Remember!
- 112. HTML5, Level 1
- 113. HTML5, Level 1 ⢠SimpliďŹed syntax
- 114. HTML5, Level 1 ⢠SimpliďŹed syntax ⢠DOCTYPE
- 115. HTML5, Level 1 ⢠SimpliďŹed syntax ⢠DOCTYPE ⢠Character encoding
- 116. HTML5, Level 1 ⢠SimpliďŹed syntax ⢠DOCTYPE ⢠Character encoding ⢠Optional type attributes
- 117. HTML5, Level 1 ⢠SimpliďŹed syntax ⢠DOCTYPE ⢠Character encoding ⢠Optional type attributes ⢠Optional solidus (/>)
- 118. HTML5, Level 1 ⢠SimpliďŹed syntax ⢠DOCTYPE ⢠Character encoding ⢠Optional type attributes ⢠Optional solidus (/>) ⢠Perfectly safe; no reason not to use
- 119. HTML5, Level 2
- 120. HTML5, Level 2 ⢠New attributes/values
- 121. HTML5, Level 2 ⢠New attributes/values ⢠New input types
- 122. HTML5, Level 2 ⢠New attributes/values ⢠New input types ⢠placeholder=""
- 123. HTML5, Level 2 ⢠New attributes/values ⢠New input types ⢠placeholder="" ⢠âŚ
- 124. HTML5, Level 2 ⢠New attributes/values ⢠New input types ⢠placeholder="" ⢠⌠⢠Degrades gracefully
- 125. HTML5, Level 2 ⢠New attributes/values ⢠New input types ⢠placeholder="" ⢠⌠⢠Degrades gracefully ⢠Use fallback to emulate
- 126. HTML5, Level 3
- 127. HTML5, Level 3 ⢠New sectioning elements
- 128. HTML5, Level 3 ⢠New sectioning elements ⢠New inline elements
- 129. HTML5, Level 3 ⢠New sectioning elements ⢠New inline elements ⢠New interactive elements
- 130. HTML5, Level 3 ⢠New sectioning elements ⢠New inline elements ⢠New interactive elements ⢠Wonât work / degrade in older browsers
- 131. HTML5, Level 3 ⢠New sectioning elements ⢠New inline elements ⢠New interactive elements ⢠Wonât work / degrade in older browsers ⢠Use feature detection and fallbacks to emulate
- 132. HTML5, Level 3 ⢠New sectioning elements ⢠New inline elements ⢠New interactive elements ⢠Wonât work / degrade in older browsers ⢠Use feature detection and fallbacks to emulate ⢠JavaScript
- 133. HTML5, Level 3 ⢠New sectioning elements ⢠New inline elements ⢠New interactive elements ⢠Wonât work / degrade in older browsers ⢠Use feature detection and fallbacks to emulate ⢠JavaScript ⢠Flash
- 134. Fin
Notas do Editor
- &#x2026;and today I&#x2019;d like to talk about&#x2026;
- &#x2026;and today I&#x2019;d like to talk about&#x2026;
- &#x2026;and today I&#x2019;d like to talk about&#x2026;
- Redefine: The <strong> element now represents importance rather than strong emphasis. The <small> element now represents small print (for side comments and legal print). Changes to <b> and <i> etc.
- Redefine: The <strong> element now represents importance rather than strong emphasis. The <small> element now represents small print (for side comments and legal print). Changes to <b> and <i> etc.
- Redefine: The <strong> element now represents importance rather than strong emphasis. The <small> element now represents small print (for side comments and legal print). Changes to <b> and <i> etc.
- Redefine: The <strong> element now represents importance rather than strong emphasis. The <small> element now represents small print (for side comments and legal print). Changes to <b> and <i> etc.
- Redefine: The <strong> element now represents importance rather than strong emphasis. The <small> element now represents small print (for side comments and legal print). Changes to <b> and <i> etc.
- Redefine: The <strong> element now represents importance rather than strong emphasis. The <small> element now represents small print (for side comments and legal print). Changes to <b> and <i> etc.
- Redefine: The <strong> element now represents importance rather than strong emphasis. The <small> element now represents small print (for side comments and legal print). Changes to <b> and <i> etc.
- Redefine: The <strong> element now represents importance rather than strong emphasis. The <small> element now represents small print (for side comments and legal print). Changes to <b> and <i> etc.
- Redefine: The <strong> element now represents importance rather than strong emphasis. The <small> element now represents small print (for side comments and legal print). Changes to <b> and <i> etc.
- Redefine: The <strong> element now represents importance rather than strong emphasis. The <small> element now represents small print (for side comments and legal print). Changes to <b> and <i> etc.
- If someday a new <script> type is invented, all you have to do to use it is add a type attribute. No need to add that for default type though.
- If someday a new <script> type is invented, all you have to do to use it is add a type attribute. No need to add that for default type though.
- If someday a new <script> type is invented, all you have to do to use it is add a type attribute. No need to add that for default type though.
- <strong> now represents importance rather than strong emphasis. <small> used to be presentational, but now represents small print (for side comments and legal print), thus getting semantic meaning. Changes to <b> and <i> etc.
- <strong> now represents importance rather than strong emphasis. <small> used to be presentational, but now represents small print (for side comments and legal print), thus getting semantic meaning. Changes to <b> and <i> etc.
- <strong> now represents importance rather than strong emphasis. <small> used to be presentational, but now represents small print (for side comments and legal print), thus getting semantic meaning. Changes to <b> and <i> etc.
- <strong> now represents importance rather than strong emphasis. <small> used to be presentational, but now represents small print (for side comments and legal print), thus getting semantic meaning. Changes to <b> and <i> etc.
- <strong> now represents importance rather than strong emphasis. <small> used to be presentational, but now represents small print (for side comments and legal print), thus getting semantic meaning. Changes to <b> and <i> etc.
- That&#x2019;s it for Level 1.
- That&#x2019;s it for Level 1.
- That&#x2019;s it for Level 1.
- That&#x2019;s it for Level 1.
- Spec was originally named Web Forms 2.0 but is now just another chapter in the HTML5 spec
- Spec was originally named Web Forms 2.0 but is now just another chapter in the HTML5 spec
- Spec was originally named Web Forms 2.0 but is now just another chapter in the HTML5 spec
- Spec was originally named Web Forms 2.0 but is now just another chapter in the HTML5 spec
- Spec was originally named Web Forms 2.0 but is now just another chapter in the HTML5 spec
- Spec was originally named Web Forms 2.0 but is now just another chapter in the HTML5 spec
- Spec was originally named Web Forms 2.0 but is now just another chapter in the HTML5 spec
- That&#x2019;s it for level 2 &#x2013; this stuff will work in modern browsers, while still being functional in older browsers
- That&#x2019;s it for level 2 &#x2013; this stuff will work in modern browsers, while still being functional in older browsers
- That&#x2019;s it for level 2 &#x2013; this stuff will work in modern browsers, while still being functional in older browsers
- HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media
- HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media
- HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media
- HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media
- HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media
- HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media
- HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media
- Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation
- Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation
- Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation
- Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation
- Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation
- The actual contents are hidden by default. You can use the open attribute to override this
- The actual contents are hidden by default. You can use the open attribute to override this
- The actual contents are hidden by default. You can use the open attribute to override this
- The actual contents are hidden by default. You can use the open attribute to override this
- Hendrik Dacquin will talk about <canvas> in a minute. HTML5 offline functionality can be useful for Flash applications as well.
- Hendrik Dacquin will talk about <canvas> in a minute. HTML5 offline functionality can be useful for Flash applications as well.
- Hendrik Dacquin will talk about <canvas> in a minute. HTML5 offline functionality can be useful for Flash applications as well.
- Hendrik Dacquin will talk about <canvas> in a minute. HTML5 offline functionality can be useful for Flash applications as well.
- Hendrik Dacquin will talk about <canvas> in a minute. HTML5 offline functionality can be useful for Flash applications as well.
- Hendrik Dacquin will talk about <canvas> in a minute. HTML5 offline functionality can be useful for Flash applications as well.
- Hendrik Dacquin will talk about <canvas> in a minute. HTML5 offline functionality can be useful for Flash applications as well.