Html5 intro

@kevinderudder working for
eGuidelines and a lecturer at the
Technical University of West Flanders.

Contact me on kevin@eguidelines.be

Agenda

• Introduction
• Structure of an HTML5 page
• New Tags
• Forms
• Video and audio
• Canvas

HTML5 = New Markup + JavaScript APIs

Be aware, HTML5 is not finished yet.

Some demo’s will not work in some browsers.

The question is, when is HTML5 ‘done’

For now, just use HTML5

IT’S READY

Make sure that it works in every browser

if (Modernizr.canvas) {

}

if (Modernizr.audio) {

}

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>

DocType

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title></title>
</head>

<body>
<p>Hello World!</p>
</body>

</html>

xmlns

<!DOCTYPE html>

<html>

<head>
<title></title>
</head>

<body>
<p>Hello World!</p>
</body>

</html>

Meta charset

<!DOCTYPE html>

<html>

<head>
<meta charset=“utf-8" />
<title></title>
</head>

<body>
<p>Hello World!</p>
</body>

</html>

Link type

<!DOCTYPE html>

<html>

<head>
<meta charset= "utf-8" />
<link rel="stylesheet" href="styles.css" />
<title></title>
</head>

<body>
<p>Hello World!</p>
</body>

</html>

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

Which class names are used on most pages?

footer
menu
title
small
text
content
header
nav
copyright
button
main
search
msonormal
date
smalltext
body
style1
top
white
link

http://code.google.com/intl/nl-NL/webstats/2005-12/classes.html

div id=“header”
div id=“topmenu”

div id=“page”

div class=“post”
div id=“sidebar”

div class=“post”

div id=“footer”

HTML4 exists out of dumb fields

/^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;

New attributes and input types available

Check with JavaScript

function validateControl() {
var txt = document.getElementById('myText').validity;
alert(txt.valid);
}

Video - width - height - poster == Audio

Why do we need a video element???

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

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

So there is no specification for audio and video

And so the developer-browser story
continues

H.264, Theora and VP8 are the most relevant
video codecs

For audio we use MP3, AAC and Vorbis

Theora and Vorbis in an Ogg container
Firefox 4 supports also WebM

Opera 10.6 supports also WebM

Chrome 6 supports also WebM

Anything that Quicktime supports, which is a
long list, but no WebM, Theora, Vorbis

H.264 video and AAC audio supported

Supports all profiles of H.264 and AAC in an
MP4 container

>= IE9

1. Encode your video
2. Use multiple sources
3. Control with JavaScript

Server Mime Types

 video/ogg .ogv

 video/mp4 .mp4

 video/webm .webm

<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>

video.addEventListener('play' , function () {…;}, false),
video.addEventListener('pause' , function () {…; }, false)

Instead of drawing with a brush, use JavaScript

<canvas width="100" height="100">
<p>Your browser does not support the canvas</p>
</canvas>

First, get your canvas context

var canvas = document.getElementById('theCanvas');
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(75, 100);
ctx.lineTo(25, 100);
ctx.fill();

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';

Lot’s of possibilities

• Transformations
• setTransform
• Rotate, scale, skew, pan, …

• Run over Pixels
• Save canvas content

Html5 intro

More Related Content

What's hot (19)

Viewers also liked (8)

Similar to Html5 intro (20)

More from Kevin DeRudder (12)

Recently uploaded (20)

Html5 intro