Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Multimedia       HTML5            Erik Duval   Dept. Computerwetenschappenhttp://www.cs.kuleuven.ac.be/~erikd/
http://www.slideshare.net/erik.duval2
wat denken jullie?        3
http://www.w3.org/TR/html5/             4
http://www.w3.org/TR/html5/             4
“flash assassin”       5
http://www.apple.com/html5/            7
html5• work-in-progress• ‘most modern browsers some support’                   8
9
10
11
<!DOCTYPE html><html><body><canvas id="myCanvas" width="200" height="100"style="border:1px solid #c3c3c3;">Your browser do...
<script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.moveTo(10,10);cxt....
<script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.moveTo(10,10);cxt....
<script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000"...
<script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000"...
<script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");var img=new Image();im...
<script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");var img=new Image();im...
<!DOCTYPE html><html><body><audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" t...
<audio>   17
<video><!DOCTYPE html><html><body><video controls="controls" autoplay="autoplay"> <source src="movie.mp4" type="video/mp4"...
• zonder plug-in (flash)                     19
http://www.youtube.com/html5             20
21
<script type="text/javascript">if (localStorage.n)	 {	 localStorage.n=Number(localStorage.n) +1;	 }else	 {	 localStorage.n...
http://onotakehiko.com/webkitclock/                23
http://thewildernessdowntown.com/                24
25
26
resources & thx• @kristofvc, @snakeflash• +Steven Roose, +Bram Luyten•   http://www.w3schools.com/html5/•                  ...
Questions?http://erikduval.wordpress.com/       twitter: @ErikDuval               28
Mume HTML5 Intro
Upcoming SlideShare
Loading in …5
×

Mume HTML5 Intro

  • Be the first to comment

  • Be the first to like this

Mume HTML5 Intro

  1. 1. Multimedia HTML5 Erik Duval Dept. Computerwetenschappenhttp://www.cs.kuleuven.ac.be/~erikd/
  2. 2. http://www.slideshare.net/erik.duval2
  3. 3. wat denken jullie? 3
  4. 4. http://www.w3.org/TR/html5/ 4
  5. 5. http://www.w3.org/TR/html5/ 4
  6. 6. “flash assassin” 5
  7. 7. http://www.apple.com/html5/ 7
  8. 8. html5• work-in-progress• ‘most modern browsers some support’ 8
  9. 9. 9
  10. 10. 10
  11. 11. 11
  12. 12. <!DOCTYPE html><html><body><canvas id="myCanvas" width="200" height="100"style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas><script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);</script></body></html> 12
  13. 13. <script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.moveTo(10,10);cxt.lineTo(150,50);cxt.lineTo(10,50);cxt.stroke();</script> 13
  14. 14. <script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.moveTo(10,10);cxt.lineTo(150,50);cxt.lineTo(10,50);cxt.stroke();</script> 13
  15. 15. <script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.beginPath();cxt.arc(70,18,15,0,Math.PI*2,true);cxt.closePath();cxt.fill();</script> 14
  16. 16. <script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.beginPath();cxt.arc(70,18,15,0,Math.PI*2,true);cxt.closePath();cxt.fill();</script> 14
  17. 17. <script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");var img=new Image();img.src="img_flwr.png";cxt.drawImage(img,0,0);</script> 15
  18. 18. <script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");var img=new Image();img.src="img_flwr.png";cxt.drawImage(img,0,0);</script> 15
  19. 19. <!DOCTYPE html><html><body><audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" />Your browser does not support the audio element.</audio></body></html> 16
  20. 20. <audio> 17
  21. 21. <video><!DOCTYPE html><html><body><video controls="controls" autoplay="autoplay"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" />  <source src="movie.webm" type="video/webm" />Your browser does not support the video tag.</video></body></html> 18
  22. 22. • zonder plug-in (flash) 19
  23. 23. http://www.youtube.com/html5 20
  24. 24. 21
  25. 25. <script type="text/javascript">if (localStorage.n) { localStorage.n=Number(localStorage.n) +1; }else { localStorage.n=1; }document.write("Visits: " + localStorage.n + " time(s).");</script><p>Refresh the page to see the counter increase.</p><p>Close the browser window, and try again, and thecounter will continue.</p> 22
  26. 26. http://onotakehiko.com/webkitclock/ 23
  27. 27. http://thewildernessdowntown.com/ 24
  28. 28. 25
  29. 29. 26
  30. 30. resources & thx• @kristofvc, @snakeflash• +Steven Roose, +Bram Luyten• http://www.w3schools.com/html5/• Text http://www.designzzz.com/getting-to-know-html5/• http://www.mobilehtml5.com/post/371921120/tutorial-your-first-mobile-html5-app-the-basics• http://www.slideshare.net/whafro/up-to-speed-on-html-5-and-css-3• http://html5doctor.com/• http://www.html5rocks.com/en/• http://mrdoob.com/92/Google_Gravity 27
  31. 31. Questions?http://erikduval.wordpress.com/ twitter: @ErikDuval 28

×