Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
Similaire à Mume HTML5 Intro
Similaire à Mume HTML5 Intro (20)
Plus de Gonzalo Parra
Mume HTML5 Intro
- 1. Multimedia HTML5 Erik Duval Dept. Computerwetenschappen http://www.cs.kuleuven.ac.be/~erikd/
- 3. wat denken jullie? 3
- 6. “flash assassin” 5
- 9. html5 • work-in-progress • ‘most modern browsers some support’ 8
- 10. 9
- 11. 10
- 12. 11
- 13. <!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
- 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. <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
- 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. <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
- 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. <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
- 20. <!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
- 21. <audio> 17
- 22. <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
- 23. • zonder plug-in (flash) 19
- 24. http://www.youtube.com/html5 20
- 25. 21
- 26. <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 the counter will continue.</p> 22
- 29. 25
- 30. 26
- 31. 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
- 32. Questions? http://erikduval.wordpress.com/ twitter: @ErikDuval 28