Html5 - short intro

0 views
2,134 views

Published on

Published in: Technology, News & Politics
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
0
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
26
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Html5 - short intro

  1. 1. HTML5Jason EisemanLibrarian for Emerging TechnologiesYale Law School
  2. 2. 1990
  3. 3. <title>Hypertext Links</title><h1>Links and Anchors</h1>A link is the connection between one piece of<a href=WhatIs.html>hypertext</a> and another. 1990
  4. 4. “Support Existing Content”HTML5 Design Principles:http://www.w3.org/TR/html-design-principles
  5. 5. World Wide Web Consortium
  6. 6. W3C HTML 4.01 - 1999 XHTML 1.0 - 2002 XHTML 1.1 - 2010http://www.w3.org/
  7. 7. Web Hypertext ApplicationTechnology Working Group
  8. 8. WHATWG Web Forms 2.0 - 2004http://www.whatwg.org
  9. 9. WHATWG & W3C HTML5 - 2008 - working draft 2012? - candidate 2022? - standardhttp://www.w3.org
  10. 10. So why worry about HTML5 now?2022?
  11. 11. Internet Firefox Chrome Explorer 9 Safari Opera all support HTML5 todayToday?
  12. 12. Today?
  13. 13. Today?
  14. 14. semantics &page structure
  15. 15. <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML: XHTML 1.0 Strict//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-strict.dtd">HTML5: <!DOCTYPE html>DOCTYPE
  16. 16. XHTML: <script type="text/javascript" src="javascript.js"></script>HTML5: <script src="javascript.js"></script>Scripts
  17. 17. XHTML: <link type="text/css" rel="stylesheet" media="all" href="style.css" />HTML5: <link rel="stylesheet" href="style.css" />Stylesheets
  18. 18. <div id= "header"> <div id= "nav"> <div id= "section"> <div id= "sidebar"> <div id= "footer">Semantics & Page Structure
  19. 19. <header> <nav> <article> <section> <aside> <footer>Semantics & Page Structure
  20. 20. MicroformatsSemantics & Page Structure
  21. 21. forms
  22. 22. ValidationForms
  23. 23. Required FieldsForms
  24. 24. PlaceholderForms
  25. 25. Forms
  26. 26. DatalistForms
  27. 27. Forms
  28. 28. Date PickersForms
  29. 29. Forms
  30. 30. <input name="email" type="email" /><input name="url" type="url" />Forms
  31. 31. @Forms
  32. 32. / .comForms
  33. 33. http://jasoneiseman.com/aall11/forms.htmlForms
  34. 34. rich internet applications
  35. 35. canvas
  36. 36. a drawing surfaceCanvas
  37. 37. <canvas id="theCanvas" width="800" height="800"></canvas>Canvas
  38. 38. <script type="application/javascript">function draw() {var canvas=document.getElementById(theCanvas);var context=canvas.getContext(2d);context.strokeRect(10, 10, 600, 200);context.font="bold 40px sans-serif";Canvas
  39. 39. <body onload="draw()"> <canvas id="theCanvas" width="800" height="800"> <img src="carrells.gif" /> </canvas></body>Canvas
  40. 40. Canvas
  41. 41. http://jasoneiseman.com/aall11/canvas.htmlCanvas
  42. 42. Canvas - paper.js - available at: http://paperjs.org
  43. 43. video
  44. 44. browser-native videoVideo
  45. 45. <video src="movie.mp4" controls width="360"height="240" poster= "placeholder.jpg "></video>Video
  46. 46. X Ogg WebM/VP8 Firefox X Ogg WebM/VP8 Chrome H.264 X XInternet Explorer 9 H.264 X X SafariVideo
  47. 47. http://jasoneiseman.com/aall11/video.htmlVideo
  48. 48. Video
  49. 49. Video
  50. 50. <video controls preload width="270" height="186" poster ="poster.png"> <source src="http://jasoneiseman.com/aall11/chain.mp4" type="video/mp4"> <source src="http://jasoneiseman.com/aall11/chain.ogv" type="video/ogg"><object width="270" height="186"> <param name="movie" value="http://jasoneiseman.com/aall11/chain.swf"> <embed src="http://jasoneiseman.com/aall11/chain.swf" width="270"height="186"></object></video>Video
  51. 51. <video width="270" height="186" controls preload poster ="poster.png">Video
  52. 52. <source src="http://jasoneiseman.com/aall11/chain.mp4" type="video/mp4"><source src="http://jasoneiseman.com/aall11/chain.ogv" type="video/ogg">Video
  53. 53. <object width="270" height="186"> <param name="movie" value="http://jasoneiseman.com/aall11/chain.swf"> <embed src="http://jasoneiseman.com/aall11/chain.swf" width="270"height="186"></object>Video
  54. 54. Video
  55. 55. Video
  56. 56. <head> <script type="text/javascript" src="http://html5.kaltura.org/js" ></script></head><body> <video kentryid="0_swup5zao" kwidgetid="_243342"></video></body>Video
  57. 57. Video
  58. 58. Dive Into HTML5 http://diveintohtml5.org/video.htmlVideo
  59. 59. audio
  60. 60. browser-native audioAudio
  61. 61. <audio src="audio.mp3" controls></audio>Audio
  62. 62. <audio controls><source src="audio.mp3" type= "audio/mpeg"><source src="audio.ogg" type= "audio/ogg"></audio>Audio
  63. 63. http://jasoneiseman.com/aall11/audio.html Audio
  64. 64. advanced functionality
  65. 65. geolocationAdvanced Functionality
  66. 66. local storageAdvanced Functionality
  67. 67. offline web applicationsAdvanced Functionality
  68. 68. browser historyAdvanced Functionality
  69. 69. further reading
  70. 70. http://www.abookapart.com/products/html5-for-web-designers
  71. 71. http://diveintohtml5.org/
  72. 72. http://www.html5rocks.com/en/
  73. 73. http://jasoneiseman.com/aall11.zip jasoneiseman@gmail.comFurther Reading

×