What you need to know bout html5

1,441 views
1,382 views

Published on

presentation of kevin derudder from eGuidelines @ combell on html5

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,441
On SlideShare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
83
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

What you need to know bout html5

  1. 1. Everything you need to know to get you started with HTML5 By Kevin DeRudder
  2. 2. @kevinderudder working foreGuidelines and a lecturer at theTechnical University of West Flanders.Contact me on kevin@e-guidelines.be
  3. 3. Agenda• About HTML5• Structure of an HTML5 page• 30 new tags• Forms• Video and audio• Canvas• Workers• If we have time: Data Storage
  4. 4. Thing’s you’ll have to find on your own• If we didn’t have the time: Data Storage• WebSockets• Drag and Drop• Geolocation• Offline• Messaging
  5. 5. OK, so what is HTML 5
  6. 6. Thx to Osher Partovi
  7. 7. Thx to Aleksander Smid
  8. 8. The question is: ‘when is HTML5 done?’
  9. 9. For now, just USE HTML5 IT’S READY
  10. 10. if(Modernizr.canvas){ alert(you can use the element);}else{ alert(not supported);}if(Modernizr.inputtypes.date){ alert(you can use the element);}else{ alert(not supported);}
  11. 11. HTML5 and compatibility
  12. 12. HTML5 idea on compatibility• Support existing content• Degrade gracefully • <canvas>fallback</canvas> • <video>fallback</video> • <datalist> can take a hidden select• Do not reinvent the wheel • contenteditable=“” was already used and implemented• Adopt widespread practices
  13. 13. STRUCTURE
  14. 14. • DocType• Xmlns• Meta charset• Link Types
  15. 15. Classic<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <title></title></head><body> <p>Hello World!</p></body></html>
  16. 16. DocType<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <title></title></head><body> <p>Hello World!</p></body></html>
  17. 17. xmlns<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <title></title></head><body> <p>Hello World!</p></body></html>
  18. 18. Meta charset<!DOCTYPE html><html><head> <meta charset=“utf-8" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <title></title></head><body> <p>Hello World!</p></body></html>
  19. 19. Link type<!DOCTYPE html><html><head> <meta charset= "utf-8" /> <link rel="stylesheet" href="styles.css" /> <title></title></head><body> <p>Hello World!</p></body></html>
  20. 20. NEW TAGS
  21. 21. Article Footer rtAside Header RubyAudio Hgroup SectionCanvas Keygen SourceCommand Mark SummaryDatalist Meter TimeDetails Nav VideoEmbed Output wbrFigcaption Progress Bdifigure rp track
  22. 22. div id=“header” div id=“topmenu” div id=“page” div class=“post”div id=“sidebar” div class=“post” div id=“footer”
  23. 23. footermenutitlesmalltextcontentheadernavcopyrightbuttonmainsearchmsonormaldatesmalltextbodystyle1topwhitelink http://code.google.com/intl/nl-NL/webstats/2005-12/classes.html
  24. 24. Opera MAMA Crawler Class names IDs
  25. 25. <header> <nav> <section> <article><aside> <article> <footer>
  26. 26. Absent presentational elements <center><font><big> Also align on <img> <table> etc… background on <body> bgcolor on <table> http://www.w3.org/TR/html5-diff/#absent-elements
  27. 27. Forms
  28. 28. HTML4 exists out of dumb fields
  29. 29. /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
  30. 30. New attributes and input types available
  31. 31. <input type="email" />
  32. 32. <input type="url" />
  33. 33. <input type="date" /><input type="month" /><input type="week" /><input type="time" /><input type="datetime" /><input type="datetime-local" />
  34. 34. <input type="number" />
  35. 35. <input type="range" />
  36. 36. <input type="tel" />
  37. 37. <input type="color" />
  38. 38. <input type="text" id="languageText" list="languageList" /><datalist id="languageList"> <option value="en" label="English" /> <option value="nl" label="Nederlands" /> <option value="fr" label="Français" /></datalist>
  39. 39. <input id="firstName" required />
  40. 40. <input id="firstName" placeholder=“your firstname” />
  41. 41. <input id="firstName" autofocus />
  42. 42. <input id="firstName" pattern=“[a-zA-Z]” />
  43. 43. Use novalidate on form if you want to skip validationuse Form Validation API if you want to check valildity yourself
  44. 44. Validation API• willValidate• Validity• checkValidity()• validationMessage• setCustomValidity()
  45. 45. Things that can go wrong• valueMissing• typeMismatch• patternMismatch• tooLong• rangeUnderflow• rangeOverflow• stepMismatch
  46. 46. Video and Audio
  47. 47. Why do we need a video element???
  48. 48. When you wanted to use video, you needed to use the <object/> tag.The <object/> tag is for foreign objects and the video is not foreign
  49. 49. <video src="boringVideo.ogg" autoplay controls height width poster loop />
  50. 50. Video - width - height - poster == Audio
  51. 51. Specifications said: all browsers should at least have built-in support for Ogg Vorbis for audio and Ogg Theora for movies
  52. 52. Apple and Nokia said NO
  53. 53. So there is no specification for audio and video
  54. 54. And so the developer-browser story continues
  55. 55. H.264, Theora and VP8 are the most relevant video codecs For audio we use MP3, AAC and Vorbis
  56. 56. Theora and Vorbis in an Ogg container Firefox 4 supports also WebM
  57. 57. Theora and Vorbis in an Ogg container Opera 10.6 supports also WebM
  58. 58. Theora and Vorbis in an Ogg container Chrome 6 supports also WebM
  59. 59. Anything that Quicktime supports, which is a long list, but no WebM, Theora, Vorbis H.264 video and AAC audio supported
  60. 60. Supports all profiles of H.264 and AAC in an MP4 container >= IE9
  61. 61. What to do
  62. 62. Check with JavaScript orUse multiple sources
  63. 63. Check with JavaScript orUse multiple sources
  64. 64. <video id="theVideo" autoplay controls width="500"> <source src="../videos/big_buck_bunny.mp4" /> <source src="../videos/big_buck_bunny.ogv" /> <source src="../videos/big_buck_bunny.webm" /> <p>Your browser doesnt support video</p></video>
  65. 65. Control video with JavaScript
  66. 66. function playPauseVideo(sender) { if (video.paused || video.ended) { if (video.ended) { video.currentTime = 0; } sender.innerHTML = ▐▐; sender.title = play; video.play(); } else { sender.innerHTML = ►; sender.title = pause; video.pause(); }}
  67. 67. video.addEventListener(play , function () {…;}, false),video.addEventListener(pause , function () {…; }, false)
  68. 68. Canvas
  69. 69. Instead of drawing with a brush, use JavaScript
  70. 70. <canvas width="100" height="100"> <p>Your browser does not support the canvas</p></canvas>
  71. 71. Grab the context var canvas = document.getElementById(theCanvas); var ctx = canvas.getContext("2d");
  72. 72. ctx.beginPath();ctx.moveTo(75, 50);ctx.lineTo(75, 100);ctx.lineTo(25, 100);ctx.fill();
  73. 73. context.beginPath();context.moveTo(100, 100);context.lineTo(100, 300);context.lineTo(150, 300);context.lineTo(150, 155);context.lineTo(205, 155);context.lineTo(205, 100);context.closePath();context.fillStyle = "#0099ff";context.fill();context.lineWidth = 6;context.lineJoin = "round";context.strokeStyle = "#cccccc";context.stroke();
  74. 74. context.beginPath();context.arc(100, 50, 30, 0, Math.PI * 2, true);context.fill();
  75. 75. var context = canvas.getContext("2d");var img = new Image(); img.onload = function () { alert(loaded); context.drawImage(img, 0, 0, 250, 375);}img.src = ../images/Soldier_stub.png;
  76. 76. Lot’s of possibilities• Transformations • setTransform • Rotate, scale, skew, pan, …• Run over Pixels• Save canvas content
  77. 77. HTML5 Web Workers• API for background scripts• Don’t block the UI Thread• Not supported in IE • But in IE10 (thx to @kvdm for feedback)
  78. 78. Restrictions• No access to DOM• No access to the window• No access to the host page
  79. 79. Your storage options in HTML5• Web Storage• Web SQL• IndexedDB• Cookies
  80. 80. Web Storage• Session Storage • Temporary key/value pairs • One session per tab/window• Local Storage • Same as session storage • Persitant • Global
  81. 81. IndexedDB• Object based data store• Like a database without SQL• Only vendor prefixed implementations • Not ready
  82. 82. Thank you for listeningContact me on kevin@e-guidelines.be
  83. 83. Resources
  84. 84. Thank you VISUGThank you Combell

×