Html5 intro

2,229 views

Published on

HTML5 Intro presentation

1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total views
2,229
On SlideShare
0
From Embeds
0
Number of Embeds
46
Actions
Shares
0
Downloads
0
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

Html5 intro

  1. 1. HTML5 Intro
  2. 2. @kevinderudder working foreGuidelines and a lecturer at theTechnical University of West Flanders.Contact me on kevin@eguidelines.be
  3. 3. Agenda• Introduction• Structure of an HTML5 page• New Tags• Forms• Video and audio• Canvas
  4. 4. What is HTML 5
  5. 5. HTML5 = New Markup + JavaScript APIs
  6. 6. Be aware, HTML5 is not finished yet.Some demo’s will not work in some browsers.
  7. 7. The question is, when is HTML5 ‘done’
  8. 8. This is a problem??
  9. 9. For now, just use HTML5 IT’S READY
  10. 10. Make sure that it works in every browser
  11. 11. if (Modernizr.canvas) {}if (Modernizr.audio) {}
  12. 12. STRUCTURE
  13. 13. Klassiek<!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>
  14. 14. 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>
  15. 15. 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>
  16. 16. 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>
  17. 17. 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>
  18. 18. NEW TAGS
  19. 19. Article Footer rtAside Header RubyAudio Hgroup SectionCanvas Keygen SourceCommand Mark SummaryDatalist Meter TimeDetails Nav VideoEmbed Output wbrFigcaption Progressfigure rp
  20. 20. Which class names are used on most pages?
  21. 21. footermenutitlesmalltextcontentheadernavcopyrightbuttonmainsearchmsonormaldatesmalltextbodystyle1topwhitelink http://code.google.com/intl/nl-NL/webstats/2005-12/classes.html
  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. <header> <nav> <section> <article><aside> <article> <footer>
  24. 24. Forms
  25. 25. HTML4 exists out of dumb fields
  26. 26. /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
  27. 27. New attributes and input types available
  28. 28. <input type="email" />
  29. 29. <input type="url" />
  30. 30. <input type="date" /><input type="month" /><input type="week" /><input type="time" /><input type="datetime" /><input type="datetime-local" />
  31. 31. <input type="number" />
  32. 32. <input type="range" />
  33. 33. <input type="tel" />
  34. 34. <input type="color" />
  35. 35. <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>
  36. 36. <input id="firstName" required />
  37. 37. <input id="firstName" placeholder=“your firstname” />
  38. 38. <input id="firstName" autofocus />
  39. 39. <input id="firstName" pattern=“[a-zA-Z]” />
  40. 40. Check with JavaScript function validateControl() { var txt = document.getElementById(myText).validity; alert(txt.valid); }
  41. 41. Video and Audio
  42. 42. Video - width - height - poster == Audio
  43. 43. Why do we need a video element???
  44. 44. 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
  45. 45. plugins are also foreign
  46. 46. <video src="boringVideo.ogg" autoplay controls height width poster loop />
  47. 47. 2 new codecs• Specifications said: all browsers should at least have built-in support for 2 new codecs: • Ogg Vorbis for audio • Ogg Theora for movies
  48. 48. Apple and Nokia said NO
  49. 49. So there is no specification for audio and video
  50. 50. And so the developer-browser story continues
  51. 51. H.264, Theora and VP8 are the most relevant video codecs For audio we use MP3, AAC and Vorbis
  52. 52. Theora and Vorbis in an Ogg container Firefox 4 supports also WebM
  53. 53. Theora and Vorbis in an Ogg container Opera 10.6 supports also WebM
  54. 54. Theora and Vorbis in an Ogg container Chrome 6 supports also WebM
  55. 55. Anything that Quicktime supports, which is a long list, but no WebM, Theora, Vorbis H.264 video and AAC audio supported
  56. 56. Supports all profiles of H.264 and AAC in an MP4 container >= IE9
  57. 57. What to do
  58. 58. 1. Encode your video2. Use multiple sources3. Control with JavaScript
  59. 59. Server Mime Types video/ogg .ogv video/mp4 .mp4 video/webm .webm
  60. 60. 1. Encode your video2. Use multiple sources3. Control with JavaScript
  61. 61. <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>
  62. 62. 1. Encode your video2. Use multiple sources3. Control with JavaScript
  63. 63. 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(); }}
  64. 64. video.addEventListener(play , function () {…;}, false),video.addEventListener(pause , function () {…; }, false)
  65. 65. Canvas
  66. 66. Instead of drawing with a brush, use JavaScript
  67. 67. <canvas></canvas>
  68. 68. <canvas width="100" height="100"> <p>Your browser does not support the canvas</p></canvas>
  69. 69. First, get your canvas context var canvas = document.getElementById(theCanvas); var ctx = canvas.getContext("2d");
  70. 70. ctx.beginPath();ctx.moveTo(75, 50);ctx.lineTo(75, 100);ctx.lineTo(25, 100);ctx.fill();
  71. 71. 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;
  72. 72. Lot’s of possibilities• Transformations • setTransform • Rotate, scale, skew, pan, …• Run over Pixels• Save canvas content
  73. 73. Resources
  74. 74. Thank you

×