Weitere ähnliche Inhalte Ähnlich wie Html5 intro (20) Mehr von Kevin DeRudder (12) Kürzlich hochgeladen (20) Html5 intro3. Agenda
• Introduction
• Structure of an HTML5 page
• New Tags
• Forms
• Video and audio
• Canvas
6. Be aware, HTML5 is not finished yet.
Some demo’s will not work in some browsers.
17. 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>
19. 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>
23. Article Footer rt
Aside Header Ruby
Audio Hgroup Section
Canvas Keygen Source
Command Mark Summary
Datalist Meter Time
Details Nav Video
Embed Output wbr
Figcaption Progress
figure rp
26. div id=“header”
div id=“topmenu”
div id=“page”
div class=“post”
div id=“sidebar”
div class=“post”
div id=“footer”
27. <header>
<nav>
<section>
<article>
<aside>
<article>
<footer>
34. <input type="date" />
<input type="month" />
<input type="week" />
<input type="time" />
<input type="datetime" />
<input type="datetime-local" />
39. <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>
44. Check with JavaScript
function validateControl() {
var txt = document.getElementById('myText').validity;
alert(txt.valid);
}
48. 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
53. 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
57. H.264, Theora and VP8 are the most relevant
video codecs
For audio we use MP3, AAC and Vorbis
61. Anything that Quicktime supports, which is a
long list, but no WebM, Theora, Vorbis
H.264 video and AAC audio supported
64. 1. Encode your video
2. Use multiple sources
3. Control with JavaScript
67. 1. Encode your video
2. Use multiple sources
3. Control with JavaScript
68. <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 doesn't support video</p>
</video>
69. 1. Encode your video
2. Use multiple sources
3. Control with JavaScript
70. 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();
}
}
80. First, get your canvas context
var canvas = document.getElementById('theCanvas');
var ctx = canvas.getContext("2d");
83. 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';
84. Lot’s of possibilities
• Transformations
• setTransform
• Rotate, scale, skew, pan, …
• Run over Pixels
• Save canvas content