HTML5Jason EisemanLibrarian for Emerging TechnologiesYale Law School
1990
<title>Hypertext Links</title><h1>Links and Anchors</h1>A link is the connection between one piece of<a href=WhatIs.html>h...
“Support Existing Content”HTML5 Design Principles:http://www.w3.org/TR/html-design-principles
World Wide Web Consortium
W3C    HTML 4.01 - 1999    XHTML 1.0 - 2002    XHTML 1.1 - 2010http://www.w3.org/
Web Hypertext ApplicationTechnology Working Group
WHATWG    Web Forms 2.0 - 2004http://www.whatwg.org
WHATWG & W3C    HTML5 - 2008 - working draft                    2012? - candidate                    2022? - standardhttp:...
So why worry about HTML5             now?2022?
Internet Firefox      Chrome   Explorer 9   Safari   Opera           all support HTML5 todayToday?
Today?
Today?
semantics &page structure
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML:    XHTML 1.0 Strict//EN" "http://www.w3.org/          TR/xhtml1/DTD/xhtml1-strict...
XHTML:    <script type="text/javascript" src="javascript.js"></script>HTML5:    <script src="javascript.js"></script>Scripts
XHTML:        <link type="text/css" rel="stylesheet" media="all"              href="style.css" />HTML5:        <link rel="...
<div id= "header">                   <div id= "nav">       <div id= "section">    <div id= "sidebar">                   <d...
<header>                             <nav>       <article>         <section>                   <aside>                    ...
MicroformatsSemantics & Page Structure
forms
ValidationForms
Required FieldsForms
PlaceholderForms
Forms
DatalistForms
Forms
Date PickersForms
Forms
<input name="email" type="email" /><input name="url" type="url" />Forms
@Forms
/ .comForms
http://jasoneiseman.com/aall11/forms.htmlForms
rich internet applications
canvas
a drawing surfaceCanvas
<canvas id="theCanvas" width="800" height="800"></canvas>Canvas
<script type="application/javascript">function draw() {var canvas=document.getElementById(theCanvas);var context=canvas.ge...
<body onload="draw()"> <canvas id="theCanvas" width="800" height="800"> <img src="carrells.gif" /> </canvas></body>Canvas
Canvas
http://jasoneiseman.com/aall11/canvas.htmlCanvas
Canvas - paper.js - available at: http://paperjs.org
video
browser-native videoVideo
<video src="movie.mp4" controls width="360"height="240" poster= "placeholder.jpg "></video>Video
X      Ogg   WebM/VP8    Firefox                       X      Ogg   WebM/VP8    Chrome                      H.264    X    ...
http://jasoneiseman.com/aall11/video.htmlVideo
Video
Video
<video controls preload width="270" height="186" poster ="poster.png">  <source src="http://jasoneiseman.com/aall11/chain....
<video width="270" height="186" controls preload poster ="poster.png">Video
<source src="http://jasoneiseman.com/aall11/chain.mp4" type="video/mp4"><source src="http://jasoneiseman.com/aall11/chain....
<object width="270" height="186">  <param name="movie" value="http://jasoneiseman.com/aall11/chain.swf">  <embed src="http...
Video
Video
<head> <script type="text/javascript" src="http://html5.kaltura.org/js" ></script></head><body> <video kentryid="0_swup5za...
Video
Dive Into HTML5   http://diveintohtml5.org/video.htmlVideo
audio
browser-native audioAudio
<audio src="audio.mp3" controls></audio>Audio
<audio controls><source src="audio.mp3" type= "audio/mpeg"><source src="audio.ogg" type= "audio/ogg"></audio>Audio
http://jasoneiseman.com/aall11/audio.html Audio
advanced functionality
geolocationAdvanced Functionality
local storageAdvanced Functionality
offline web applicationsAdvanced Functionality
browser historyAdvanced Functionality
further reading
http://www.abookapart.com/products/html5-for-web-designers
http://diveintohtml5.org/
http://www.html5rocks.com/en/
http://jasoneiseman.com/aall11.zip          jasoneiseman@gmail.comFurther Reading
Upcoming SlideShare
Loading in …5
×

Html5 - short intro

2,097
-1

Published on

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

No Downloads
Views
Total Views
2,097
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
19
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×