Mume HTML5 Intro

558 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
558
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×