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.

Intro to HTML 5

753 views

Published on

Get

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Intro to HTML 5

  1. 1. GETTING GANGSTA WITH<br />Jeremy Woertink<br />
  2. 2. WHA WHA WHAT?<br /><ul><li>Hyper Text Markup Language v5
  3. 3. W3C Working Draft 22 January 2008
  4. 4. Editors: Ian Hickson, Google, Inc. and David Hyatt, Apple, Inc.
  5. 5. A new DOCTYPE</li></li></ul><li>Tell me about this type, doc!<br />XHTML 1.1 Doctype<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"<br />"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><br />HTML 5 Doctype<br /><!DOCTYPE html><br />
  6. 6. MOAR DOCTYPE !!!<br /><ul><li>heavy emphasis on blogs
  7. 7. includes xmlns
  8. 8. adds convenient attributes
  9. 9. types are inherent
  10. 10. makes shit shorter</li></ul><html xmlns="http://www.w3.org/1999/xhtml"lang="en"xml:lang="en"><br /><html lang="en"><br /><meta http-equiv="Content-Type"content="text/html; charset=utf-8"><br /><meta charset="utf-8"><br /><link rel="stylesheet"href="application.css"type="text/css"><br /><link rel="stylesheet"href="application.css"><br />
  11. 11. "heavy emphasis on blogs"?<br />
  12. 12. <sectionid="archive"><br /><article class="article"><br /><header><br /><h1>HTML 5 stuffs</h1><br /></header><br /><div class="content"><br /> Here we can talk about our <mark>HTML 5</mark> stuff!<br /></div><br /> <footer><br /> <p>Posted <time pubdate=""datetime="2011-4-6T19:30">Wednesday</time>.</p><br /> </footer><br /> </article><br /></section><br />
  13. 13. Is that it?<br />
  14. 14. NOPE!<br />
  15. 15. Tons of new elements<br /><ul><li>section
  16. 16. header
  17. 17. footer
  18. 18. nav
  19. 19. article
  20. 20. hgroup
  21. 21. aside
  22. 22. time
  23. 23. mark
  24. 24. audio
  25. 25. video
  26. 26. canvas
  27. 27. command
  28. 28. datalist
  29. 29. details
  30. 30. figure
  31. 31. figcaption
  32. 32. keygen
  33. 33. meter
  34. 34. output
  35. 35. progress
  36. 36. rp
  37. 37. rt
  38. 38. ruby
  39. 39. source
  40. 40. summary
  41. 41. wbr</li></li></ul><li>Tons of new Attributes<br /><ul><li>contextmenu
  42. 42. draggable
  43. 43. irrelevant
  44. 44. ref
  45. 45. template
  46. 46. data-
  47. 47. list
  48. 48. max
  49. 49. min
  50. 50. multiple
  51. 51. pattern
  52. 52. placeholder
  53. 53. step
  54. 54. contenteditable
  55. 55. autocomplete
  56. 56. autofocus
  57. 57. form
  58. 58. formaction
  59. 59. formmethod
  60. 60. formonvalidate
  61. 61. formtarget
  62. 62. registrationmark</li></li></ul><li>Tons of input "type" values<br /><ul><li>search
  63. 63. tel
  64. 64. time
  65. 65. url
  66. 66. week
  67. 67. color
  68. 68. date
  69. 69. datetime
  70. 70. datetime-local
  71. 71. email
  72. 72. file
  73. 73. month
  74. 74. number
  75. 75. range
  76. 76. reset</li></li></ul><li>New JavaScript stuff!<br /><ul><li>document.getElementsByClassName()
  77. 77. document.querySelectorAll()
  78. 78. document.querySelector()
  79. 79. window.localStorage
  80. 80. window.openDatabase()
  81. 81. .transaction(), .executeSql()
  82. 82. window.applicationCache
  83. 83. navigator.onLine
  84. 84. Worker()
  85. 85. WebSocket()
  86. 86. drag & drop
  87. 87. File upload
  88. 88. in-line editing
  89. 89. navigator.geolocation
  90. 90. audio / video / canvas APIs</li></li></ul><li><AUDIO><br />
  91. 91. <audiosrc="audio/sample.mp3"controls="false"><br /> <p>If you see this, then audio isn't supported.</p><br /></audio><br /><script async="false"><br />varaudio= document.querySelector('audio');<br />audio.play(); // plays the audio<br />audio.pause(); // pauses the audio<br />audio.volume=100; // increase to 100% volume<br />audio.duration; // length of audio in seconds<br />audio.currentTime=10; // start playing at 10 seconds<br />varaudio2=newAudio(); // make a new audio object<br />audio2.src='audio/sample2.mp3';<br /></script><br />
  92. 92. <VIDEO><br />
  93. 93. <videocontrols="false"><br /> <source src="video/sample.mp4"type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'><br /> <source src="video/sample.webm"type='video/webm; codecs="vp8, vorbis"'><br /> <p>If you see this, then video isn't supported.</p><br /></video><br /><script async="false"><br />varvideo= document.querySelector('video');<br />video.play(); // plays the video<br />video.pause(); // pauses the video<br />video.volume=100; // increase to 100% volume<br />video.autoplay =false; // no autoplay<br />video.currentTime=10; // start playing at 10 seconds<br /> // new Video() doesn't exist :(<br /></script><br />
  94. 94. <CANVAS><br />
  95. 95. <canvaswidth="400" height="400"><br /> <p>If you see this, then canvas isn't supported.</p><br /></canvas><br /><script async="false"><br />varcanvas= document.querySelector('canvas'),<br />brush=canvas.getContext('2d'),<br />xPos=10,<br />yPos=10,<br />ruby=newImage();<br />ruby.src='images/ruby.png';<br />ruby.onload=function() {<br />brush.drawImage(ruby, xPos, yPos);<br /> }<br />var x1 = 0, y1 = 0, x2 = 0, y2 = 400;<br /> brush.fillStyle('#ff0000');<br /> brush.fillRect(x1, y1, x2, y2);<br /> brush.save();<br /></script><br />
  96. 96. Want to use HAML?<br />
  97. 97. !!! 5<br />%html{:lang => 'en'}<br /> %head<br /> %title HTML 5 using HAML<br /> %body<br /> %section#container<br /> %video{:controls => true,:width=> 450,:height=> 200}<br /> %source{:src => media_path('sample.mp4')}<br /> %source{:src => media_path('sample.webm')}<br />#song<br />%audio{:autoplay=>false, :src=> media_path('sample.mp3')}<br />
  98. 98. WebSocket()<br />
  99. 99. Wakka Flakka Socket<br /><ul><li>WebSocket JS Object
  100. 100. Used for server-client communication
  101. 101. Not fully supported</li></ul>websocket = new WebSocket('ws://localhost:3000/server'); <br />websocket.onopen = function(evt) { onOpen(evt) }; websocket.onclose = function(evt) { onClose(evt) }; websocket.onmessage = function(evt) { onMessage(evt) }; websocket.onerror = function(evt) { onError(evt) };<br /><ul><li>EventMachine
  102. 102. NodeJS
  103. 103. other things that are probably crap</li></li></ul><li>Questions?<br />

×