O slideshow foi denunciado.

Mais Conteúdo rRelacionado

Audiolivros relacionados

Gratuito durante 14 dias do Scribd

Ver tudo

Introduction to HTML5

  1. 1. html5: start using it now! @alexbilbie Sunday, 26 February 12
  2. 2. state of the union Sunday, 26 February 12
  3. 3. html5 Sunday, 26 February 12
  4. 4. w3c working draft (25th may 2011) http://lncn.eu/gjx2 Sunday, 26 February 12
  5. 5. editors draft (~daily edits) http://lncn.eu/ghj2 Sunday, 26 February 12
  6. 6. css3 Sunday, 26 February 12
  7. 7. mostly w3c recommendations status Sunday, 26 February 12
  8. 8. ecmascript harmony (javascript) Sunday, 26 February 12
  9. 9. desktop browsers Sunday, 26 February 12
  10. 10. Sunday, 26 February 12
  11. 11. Sunday, 26 February 12
  12. 12. Sunday, 26 February 12
  13. 13. Sunday, 26 February 12
  14. 14. IE6 Sunday, 26 February 12
  15. 15. IE7 Sunday, 26 February 12
  16. 16. IE8 Sunday, 26 February 12
  17. 17. IE9 Sunday, 26 February 12
  18. 18. IE10 Sunday, 26 February 12
  19. 19. mobile browsers Sunday, 26 February 12
  20. 20. iOS Sunday, 26 February 12
  21. 21. android Sunday, 26 February 12
  22. 22. blackberry Sunday, 26 February 12
  23. 23. windows mobile Sunday, 26 February 12
  24. 24. mobile opera Sunday, 26 February 12
  25. 25. start using html5 today! Sunday, 26 February 12
  26. 26. doctype Sunday, 26 February 12
  27. 27. <!doctype html> Sunday, 26 February 12
  28. 28. UTF 8 Sunday, 26 February 12
  29. 29. <meta charset=”utf-8”> Sunday, 26 February 12
  30. 30. <!doctype html> <meta charset=utf-8> <title>Dev8D</title> <p>Hello, world!</p> Sunday, 26 February 12
  31. 31. New structural elements Sunday, 26 February 12
  32. 32. Popularity Value 1 footer 2 menu 3 style1 4 msonormal 5 text 6 content 7 title 8 style2 9 header 10 copyright Sunday, 26 February 12
  33. 33. Popularity Value 1 footer 2 content 3 header 4 logo 5 container 6 main 7 table1 8 menu 9 layer1 10 autonumber1 Sunday, 26 February 12
  34. 34. <div id=”header”> <div <div class=”post”> id=”sideb ar”> <div class=”post”> <div id=”footer”> Sunday, 26 February 12
  35. 35. <header> <article> <aside> <article> <footer> Sunday, 26 February 12
  36. 36. IE SHIM http://lncn.eu/h37 Sunday, 26 February 12
  37. 37. <header> Sunday, 26 February 12
  38. 38. <header> ! <a href=”/> ! ! <img src=”logo.png” alt=”Dev8D Logo”> ! </a> ! <h1>Dev8D</h1> </header> Sunday, 26 February 12
  39. 39. <nav> Sunday, 26 February 12
  40. 40. <nav> ! <ul> ! ! <li> ! ! ! <a href=”/”>Home</a> ! ! </li> ! ! <li> ! ! ! <a href=”/about”>About Us</a> ! ! </li> ! </ul> </nav> Sunday, 26 February 12
  41. 41. <section> Sunday, 26 February 12
  42. 42. <aside> Sunday, 26 February 12
  43. 43. <article> Sunday, 26 February 12
  44. 44. <article> ! <header> ! ! <h1>Hello world!</h1> ! ! <aside> ! ! ! <p>Written by Alex</p> ! ! </aside> ! </header> ! ! The lysine contingency - it's intended to prevent the spread of the animals is case they ever got off the island. Dr. Wu inserted a gene that makes a single faulty enzyme in protein metabolism. The animals can't manufacture the amino acid lysine. Unless they're continually supplied with lysine by us, they'll slip into a coma and die. ! <footer> ! ! <p>Tagged with <a href=”#”>Slipsum</a> ! </footer> </article> Sunday, 26 February 12
  45. 45. <footer> Sunday, 26 February 12
  46. 46. <hgroup> Sunday, 26 February 12
  47. 47. <div id=”logo”> ! <h1> ! ! Dev8D ! ! <sup> ! ! ! Developer Happiness ! ! </sup> ! </h1> </div> Sunday, 26 February 12
  48. 48. <hgroup id=”logo”> ! <h1> ! ! Dev8D ! </h1> ! <h2> ! ! Developer happiness ! </h2> </hgroup> Sunday, 26 February 12
  49. 49. <details> Sunday, 26 February 12
  50. 50. <details> ! <summary> ! ! HTML5 Talk with Alex Bilbie ! </summary> ! <p> ! ! A talk looking at all the exciting new web technologies. ! </p> </details> Sunday, 26 February 12
  51. 51. HTML5 talk with Alex Bilbie + Python with Richard Jones + Sunday, 26 February 12
  52. 52. HTML5 talk with Alex Bilbie - A talk looking at all the exciting new web technologies. Python with Richard Jones + Sunday, 26 February 12
  53. 53. <figure> Sunday, 26 February 12
  54. 54. <figure> ! <img src=”dev8d.png” alt=””> ! <figcaption> ! ! Dev8D logo ! </figcaption> </figure> Sunday, 26 February 12
  55. 55. <mark> Sunday, 26 February 12
  56. 56. <p> ! Dev8D is the major UK event in the year for developers in the education sector to <mark>learn</mark> from one another and ultimately create <mark>better</mark>, <mark>smarter</ mark> technology for learning and research. </p> Sunday, 26 February 12
  57. 57. Dev8D is the major UK event in the year for developers in the education sector to learn from one another and ultimately create better, smarter technology for learning and research. Sunday, 26 February 12
  58. 58. REDEFINED elements Sunday, 26 February 12
  59. 59. <ol> Sunday, 26 February 12
  60. 60. <ol start=”5”> ! <li>Foo</li> ! <li>Bar</li> ! <li>Foobar</li> </ol> Sunday, 26 February 12
  61. 61. <p>Best Star Wars characters</p> <ol reversed> ! <li>Luke Skywalker</li> ! <li>Admiral Ackbar</li> ! <li>Chewie</li> ! <li>Han Solo</li> ! <li>R2D2</li> </ol> Sunday, 26 February 12
  62. 62. <dl> Sunday, 26 February 12
  63. 63. <p>Star Wars characters</p> <dl> ! <dt>Goodies</dt> ! ! <dd>Han Solo</dd> ! ! <dd>Luke Skywalker</dd> ! <dt>Baddies</dt> ! ! <dd>Darth Vader</dd> ! ! <dd>The Emperor</dd> </dl> Sunday, 26 February 12
  64. 64. <address> Sunday, 26 February 12
  65. 65. <article> ! ... ! ... ! <footer> ! ! <p> ! ! ! Contact the author ! ! ! <address> ! ! ! ! <a href=”mailto:abilbie@lincoln.ac.uk”> ! ! ! ! ! via email ! ! ! ! </a> ! ! ! </address> ! ! <p> ! </footer> </article> Sunday, 26 February 12
  66. 66. <em> Sunday, 26 February 12
  67. 67. <p> ! My <em>name</em> is Alex </p> Sunday, 26 February 12
  68. 68. <i> Sunday, 26 February 12
  69. 69. <p> ! ...the best car <i>in the world</i> </p> Sunday, 26 February 12
  70. 70. <strong> Sunday, 26 February 12
  71. 71. <p> ! <strong>Warning!</strong> ! this coffee is weak. </p> Sunday, 26 February 12
  72. 72. <b> Sunday, 26 February 12
  73. 73. <p> ! <b>Has Bean</b> roast great coffee. </p> Sunday, 26 February 12
  74. 74. <hr> Sunday, 26 February 12
  75. 75. <article id=”chapter-25”> ! // Frodo and Sam in Mordor ! <hr> ! // Gandalf fighting in Minas Tirith ! <hr> ! // Aragorn, Legolas and Gimli fighting Orcs in the field </article> Sunday, 26 February 12
  76. 76. REMOVED elements Sunday, 26 February 12
  77. 77. <applet> Sunday, 26 February 12
  78. 78. <marquee> Sunday, 26 February 12
  79. 79. <big> Sunday, 26 February 12
  80. 80. <font> Sunday, 26 February 12
  81. 81. <frame> Sunday, 26 February 12
  82. 82. <blink> Sunday, 26 February 12
  83. 83. <center> Sunday, 26 February 12
  84. 84. NEW ATTRIBUTES Sunday, 26 February 12
  85. 85. contenteditable Sunday, 26 February 12
  86. 86. <article contenteditable> ! lorem ipsum </article> Sunday, 26 February 12
  87. 87. data-foo=”bar” Sunday, 26 February 12
  88. 88. <article data-author=”alex”> ! lorem ipsum </article> Sunday, 26 February 12
  89. 89. $(‘article’).data(‘author’) // returns “alex” Sunday, 26 February 12
  90. 90. hidden Sunday, 26 February 12
  91. 91. item itemprop subject Sunday, 26 February 12
  92. 92. <address itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> ! Alex Bilbie<br> ! <span itemprop="name"> ! ! ICT Services ! </span><br> ! <span itemprop="streetAddress"> ! ! University of Lincoln<br> ! ! Brayford Pool ! </span><br> ! <span itemprop="addressLocality"> ! ! Lincoln ! </span><br> ! <span itemprop="addressRegion"> ! ! Lincolnshire ! </span><br> ! <span itemprop="postalCode"> ! ! LN6 7TS ! </span><br> ! <span itemprop="addressCountry"> ! ! United Kingdom ! </span> </address> Sunday, 26 February 12
  93. 93. http://schema.org/ Sunday, 26 February 12
  94. 94. role=”foobar” aria-*=”foobar” Sunday, 26 February 12
  95. 95. Forms Sunday, 26 February 12
  96. 96. <input type=”text”> Sunday, 26 February 12
  97. 97. <input type=”search”> Sunday, 26 February 12
  98. 98. <input type=”email”> Sunday, 26 February 12
  99. 99. <input type=”url”> Sunday, 26 February 12
  100. 100. <input type=”number”> Sunday, 26 February 12
  101. 101. <input type=”range”> Sunday, 26 February 12
  102. 102. <input type=”color”> Sunday, 26 February 12
  103. 103. <input type=”tel”> Sunday, 26 February 12
  104. 104. <datalist> Sunday, 26 February 12
  105. 105. <input type=”text” list=”mylist”> <datalist id=”mylist”> ! <option label=”Alex Bilbie”> </datalist> Sunday, 26 February 12
  106. 106. placeholder Sunday, 26 February 12
  107. 107. required Sunday, 26 February 12
  108. 108. multiple Sunday, 26 February 12
  109. 109. pattern Sunday, 26 February 12
  110. 110. autocomplete Sunday, 26 February 12
  111. 111. step Sunday, 26 February 12
  112. 112. formnovalidate Sunday, 26 February 12
  113. 113. <form method=”post”> ! <label for=”name”>Name</label> ! <input id=”name” type=”text” required value=”” placeholder=”John Doe”> ! <label for=”email”>Email</label> ! <input id=”email” type=”email” required value=”” placeholder=”j.doe@gmail.com”> ! <label for=”url”>Website</label> ! <input id=”url” type=”url” placeholder=”www.example.com”> ! <label for=”comment”>Your comment</label> ! <textarea id=”comment”> </form> Sunday, 26 February 12
  114. 114. MEDIA Sunday, 26 February 12
  115. 115. <video> ! <source src=”dev8d.webm” type=”video/webm”> ! <source src=”dev8d.mp4” type=”video/mp4”> ! ! <embed> ! ! <!-- flash fallback --> ! </embed> </video> Sunday, 26 February 12
  116. 116. CANVAS Sunday, 26 February 12
  117. 117. SVG Sunday, 26 February 12
  118. 118. WeBGL Sunday, 26 February 12
  119. 119. Finito @alexbilbie Sunday, 26 February 12

×