�ݺ�ߣ

Multimedia

HTML5

Erik Duval
Dept. Computerwetenschappen
http://www.cs.kuleuven.ac.be/~erikd/

http://www.slideshare.net/erik.duval

2

wat denken jullie?

3

http://www.w3.org/TR/html5/
4

“ﬂash assassin”

5

http://www.apple.com/html5/
7

html5

• work-in-progress
• ‘most modern browsers some support’

8

<!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.ﬁllStyle="#FF0000";
cxt.ﬁllRect(0,0,150,75);
</script></body></html> 12

cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>

13

cxt.ﬁllStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.ﬁll();
</script>
14

var img=new Image();
img.src=/slideshow/mume-html5-intro/14896733/"img_ﬂwr.png";
cxt.drawImage(img,0,0);
</script>

15

<!DOCTYPE html>
<html>
<body>
<audio controls="controls">
<source src=/slideshow/mume-html5-intro/14896733/"song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</body>
</html>
16

<video>
<!DOCTYPE html><html><body>
<video controls="controls" autoplay="autoplay">
<source src=/slideshow/mume-html5-intro/14896733/"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

• zonder plug-in (ﬂash)

19

http://www.youtube.com/html5
20

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

http://onotakehiko.com/webkitclock/
23

http://thewildernessdowntown.com/
24

resources & thx
• @kristofvc, @snakeﬂash
• +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-ﬁrst-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

Questions?
http://erikduval.wordpress.com/
twitter: @ErikDuval
28

�ݺ�ߣ

Mume HTML5 Intro

Recommended

More Related Content

What's hot (20)

Viewers also liked (8)

Similar to Mume HTML5 Intro (20)

More from Gonzalo Parra (9)

Mume HTML5 Intro