Your SlideShare is downloading. ×
0
Everything you need to know to get you started                 with HTML5             By Kevin DeRudder
@kevinderudder working foreGuidelines and a lecturer at theTechnical University of West Flanders.Contact me on kevin@e-gui...
Agenda•   About HTML5•   Structure of an HTML5 page•   30 new tags•   Forms•   Video and audio•   Canvas•   Workers•   If ...
Thing’s you’ll have to find on your own•   If we didn’t have the time: Data Storage•   WebSockets•   Drag and Drop•   Geol...
OK, so what is HTML 5
Thx to Osher Partovi
Thx to Aleksander Smid
The question is: ‘when is HTML5 done?’
For now, just USE HTML5      IT’S READY
if(Modernizr.canvas){ alert(you can use the element);}else{ alert(not supported);}if(Modernizr.inputtypes.date){       ale...
HTML5 and compatibility
HTML5 idea on compatibility• Support existing content• Degrade gracefully  • <canvas>fallback</canvas>  • <video>fallback<...
STRUCTURE
•   DocType•   Xmlns•   Meta charset•   Link Types
Classic<!DOCTYPE html PUBLIC       "-//W3C//DTD XHTML 1.0 Transitional//EN"       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-...
DocType<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head>   <meta http-equiv="Conten...
xmlns<!DOCTYPE html><html><head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <link rel="styl...
Meta charset<!DOCTYPE html><html><head>   <meta charset=“utf-8" />   <link rel="stylesheet" type="text/css" href="styles.c...
Link type<!DOCTYPE html><html><head>   <meta charset= "utf-8" />   <link rel="stylesheet" href="styles.css" />   <title></...
NEW TAGS
Article      Footer     rtAside        Header     RubyAudio        Hgroup     SectionCanvas       Keygen     SourceCommand...
div id=“header”                   div id=“topmenu”                                div id=“page”                           ...
footermenutitlesmalltextcontentheadernavcopyrightbuttonmainsearchmsonormaldatesmalltextbodystyle1topwhitelink            h...
Opera MAMA Crawler         Class names   IDs
<header>           <nav>                     <section>                     <article><aside>                     <article> ...
Absent presentational elements        <center><font><big>        Also align on <img> <table> etc…             background o...
Forms
HTML4 exists out of dumb fields
/^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
New attributes and input types available
<input type="email" />
<input type="url" />
<input   type="date" /><input   type="month" /><input   type="week" /><input   type="time" /><input   type="datetime" /><i...
<input type="number" />
<input type="range" />
<input type="tel" />
<input type="color" />
<input type="text" id="languageText"       list="languageList" /><datalist id="languageList">  <option value="en" label="E...
<input id="firstName" required />
<input id="firstName"       placeholder=“your firstname” />
<input id="firstName" autofocus />
<input id="firstName" pattern=“[a-zA-Z]” />
Use novalidate on form if you want to skip validationuse Form Validation API if you want to check valildity yourself
Validation API•   willValidate•   Validity•   checkValidity()•   validationMessage•   setCustomValidity()
Things that can go wrong•   valueMissing•   typeMismatch•   patternMismatch•   tooLong•   rangeUnderflow•   rangeOverflow•...
Video and Audio
Why do we need a video element???
When you wanted to use video, you needed        to use the <object/> tag.The <object/> tag is for foreign objects and     ...
<video src="boringVideo.ogg"       autoplay       controls       height       width       poster       loop />
Video - width - height - poster == Audio
Specifications said: all browsers should at least have built-in support for Ogg Vorbis for audio          and Ogg Theora f...
Apple and Nokia said NO
So there is no specification for audio and video
And so the developer-browser story            continues
H.264, Theora and VP8 are the most relevant               video codecs   For audio we use MP3, AAC and Vorbis
Theora and Vorbis in an Ogg container   Firefox 4 supports also WebM
Theora and Vorbis in an Ogg container  Opera 10.6 supports also WebM
Theora and Vorbis in an Ogg container   Chrome 6 supports also WebM
Anything that Quicktime supports, which is a  long list, but no WebM, Theora, Vorbis   H.264 video and AAC audio supported
Supports all profiles of H.264 and AAC in an               MP4 container                  >= IE9
What to do
Check with JavaScript         orUse multiple sources
Check with JavaScript         orUse multiple sources
<video id="theVideo" autoplay controls width="500">       <source src="../videos/big_buck_bunny.mp4" />       <source src=...
Control video with JavaScript
function playPauseVideo(sender) {       if (video.paused || video.ended) {               if (video.ended) {               ...
video.addEventListener(play , function () {…;}, false),video.addEventListener(pause , function () {…; }, false)
Canvas
Instead of drawing with a brush, use JavaScript
<canvas width="100" height="100">      <p>Your browser does not support the canvas</p></canvas>
Grab the context  var canvas = document.getElementById(theCanvas);  var ctx = canvas.getContext("2d");
ctx.beginPath();ctx.moveTo(75, 50);ctx.lineTo(75, 100);ctx.lineTo(25, 100);ctx.fill();
context.beginPath();context.moveTo(100, 100);context.lineTo(100, 300);context.lineTo(150, 300);context.lineTo(150, 155);co...
context.beginPath();context.arc(100, 50, 30, 0, Math.PI * 2, true);context.fill();
var context = canvas.getContext("2d");var img = new Image(); img.onload = function () {       alert(loaded);       context...
Lot’s of possibilities• Transformations   • setTransform   • Rotate, scale, skew, pan, …• Run over Pixels• Save canvas con...
HTML5 Web Workers• API for background scripts• Don’t block the UI Thread• Not supported in IE  • But in IE10 (thx to @kvdm...
Restrictions• No access to DOM• No access to the window• No access to the host page
Your storage options in HTML5•   Web Storage•   Web SQL•   IndexedDB•   Cookies
Web Storage• Session Storage  • Temporary key/value pairs  • One session per tab/window• Local Storage  • Same as session ...
IndexedDB• Object based data store• Like a database without SQL• Only vendor prefixed implementations  • Not ready
Thank you for listeningContact me on kevin@e-guidelines.be
Resources
Thank you VISUGThank you Combell
What you need to know bout html5
What you need to know bout html5
What you need to know bout html5
What you need to know bout html5
What you need to know bout html5
What you need to know bout html5
What you need to know bout html5
What you need to know bout html5
What you need to know bout html5
What you need to know bout html5
What you need to know bout html5
What you need to know bout html5
What you need to know bout html5
What you need to know bout html5
What you need to know bout html5
What you need to know bout html5
What you need to know bout html5
What you need to know bout html5
What you need to know bout html5
What you need to know bout html5
What you need to know bout html5
What you need to know bout html5
What you need to know bout html5
What you need to know bout html5
What you need to know bout html5
What you need to know bout html5
What you need to know bout html5
What you need to know bout html5
What you need to know bout html5
Upcoming SlideShare
Loading in...5
×

What you need to know bout html5

1,223

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,223
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
83
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

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

×