Introduction to HTML5

2,716 views

Published on

Published in: Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,716
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Introduction to HTML5

  1. 1. html5: start using it now! @alexbilbieSunday, 26 February 12
  2. 2. state of the unionSunday, 26 February 12
  3. 3. html5Sunday, 26 February 12
  4. 4. w3c working draft (25th may 2011) http://lncn.eu/gjx2Sunday, 26 February 12
  5. 5. editors draft (~daily edits) http://lncn.eu/ghj2Sunday, 26 February 12
  6. 6. css3Sunday, 26 February 12
  7. 7. mostly w3c recommendations statusSunday, 26 February 12
  8. 8. ecmascript harmony (javascript)Sunday, 26 February 12
  9. 9. desktop browsersSunday, 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. IE6Sunday, 26 February 12
  15. 15. IE7Sunday, 26 February 12
  16. 16. IE8Sunday, 26 February 12
  17. 17. IE9Sunday, 26 February 12
  18. 18. IE10Sunday, 26 February 12
  19. 19. mobile browsersSunday, 26 February 12
  20. 20. iOSSunday, 26 February 12
  21. 21. androidSunday, 26 February 12
  22. 22. blackberrySunday, 26 February 12
  23. 23. windows mobileSunday, 26 February 12
  24. 24. mobile operaSunday, 26 February 12
  25. 25. start using html5 today!Sunday, 26 February 12
  26. 26. doctypeSunday, 26 February 12
  27. 27. <!doctype html>Sunday, 26 February 12
  28. 28. UTF 8Sunday, 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 elementsSunday, 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 copyrightSunday, 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 autonumber1Sunday, 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/h37Sunday, 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 - its 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 cant manufacture the amino acid lysine. Unless theyre continually supplied with lysine by us, theyll 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 elementsSunday, 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 elementsSunday, 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 ATTRIBUTESSunday, 26 February 12
  85. 85. contenteditableSunday, 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. hiddenSunday, 26 February 12
  91. 91. item itemprop subjectSunday, 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. FormsSunday, 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. placeholderSunday, 26 February 12
  107. 107. requiredSunday, 26 February 12
  108. 108. multipleSunday, 26 February 12
  109. 109. patternSunday, 26 February 12
  110. 110. autocompleteSunday, 26 February 12
  111. 111. stepSunday, 26 February 12
  112. 112. formnovalidateSunday, 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. MEDIASunday, 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. CANVASSunday, 26 February 12
  117. 117. SVGSunday, 26 February 12
  118. 118. WeBGLSunday, 26 February 12
  119. 119. Finito @alexbilbieSunday, 26 February 12

×