HTML 5: De praktische introductie
Christian Peeters | Trainer | Master it Training
Agenda• De HTML 5 specificatie• Canvas• Scalable Vector Graphics• Audio / Video
HTML 5 W3C
HTML
HTM
L5C
an
vas 2
D C
on
text
Micro
data
HTM
L+R
DFa
HTM
L5 M
arku
pH
TM
L5 D
iff fro
m H
TM
L4Po
lyg
lot M
arku
pTe
xt a
ltern
ativ
es
CSS
CS
S S
nap
shot 2
00
7C
SS
Nam
esp
ace
sC
SS
Pag
ed
Med
iaC
SS
Print Pro
file
CS
S V
alu
es a
nd
Un
its
CS
S C
asca
din
g a
nd
In
herita
nce
CS
S Te
xt
CS
S W
riting
Mod
es
CS
S Lin
e G
ridC
SS
Ru
by
CSS G
enera
ted C
onte
nt fo
r Paged M
edia
CS
S B
ackg
rou
nd
s an
d
Bord
ers
CS
S Fo
nts
CS
S B
asic B
ox M
od
el
CS
S M
ulti-co
lum
n La
you
tC
SS
Tem
pla
te La
you
tC
SS
Med
ia Q
uerie
sC
SS
Sp
eech
CS
S C
olo
rC
SS
Basic U
ser In
terfa
ce
CS
S S
cop
ing
CS
S G
rid Po
sition
ing
CS
S Fle
xib
le B
ox La
you
tC
SS
Imag
e V
alu
es
CS
S 2
D Tra
nsfo
rmatio
ns
CS
S 3
D Tra
nsfo
rmatio
ns
CS
S Tra
nsitio
ns
CS
S A
nim
atio
ns
Web Apps
CO
RS
Ele
men
t Traversa
lFile
API
Ind
ex D
BPro
gra
mm
able
HTTP C
ach
ing a
nd S
erv
ing
Prog
ress E
ven
tsS
ele
ctors A
PI
Sele
ctors A
PI L2
Serv
er-S
en
t Even
tsU
nifo
rm M
essa
gin
g Po
licyW
eb
DO
M C
ore
Web
SQ
L Data
base
Web
IDL
Web
Socke
ts API
Web
Sto
rag
eW
eb
Worke
rsX
mlH
ttpR
eq
uest
Xm
lHttp
Req
uest L2
DO
M L1
DO
M L2
Core
DO
M L2
Vie
ws
DO
M L2
Even
tsD
OM
L2 S
tyle
DO
M L2
Traversa
l an
d
Ran
ge
DO
M L2
HTM
LD
OM
L3 C
ore
DO
M L3
Even
tsD
OM
L3 Lo
ad
an
d S
ave
DO
M L3
Valid
atio
nD
OM
L3 X
Path
DO
M L3
Vie
ws a
nd
Fo
rmattin
g
DO
M L3
Ab
stract S
chem
as
SVG
Docu
men
t Stru
cture
Basic S
hap
es
Path
sTe
xt
Tran
sform
sPain
ting
, Filling
, Colo
rS
criptin
gS
tylin
gG
rad
ien
ts an
d P
atte
rns
SM
ILFo
nts
Filters
Geolo
catio
nG
eolo
catio
n A
PI
ECMA
ECMA Script
262
EC
MA
Scrip
t 26
2
W3C
HTML
HTM
L5C
an
vas 2
D C
on
text
Micro
data
HTM
L+R
DFa
HTM
L5 M
arku
pH
TM
L5 D
iff fro
m H
TM
L4Po
lyg
lot M
arku
pTe
xt a
ltern
ativ
es
CSS
CS
S S
nap
shot 2
00
7C
SS
Nam
esp
ace
sC
SS
Pag
ed
Med
iaC
SS
Print Pro
file
CS
S V
alu
es a
nd
Un
its
CS
S C
asca
din
g a
nd
In
herita
nce
CS
S Te
xt
CS
S W
riting
Mod
es
CS
S Lin
e G
ridC
SS
Ru
by
CSS G
enera
ted C
onte
nt fo
r Paged M
edia
CS
S B
ackg
rou
nd
s an
d
Bord
ers
CS
S Fo
nts
CS
S B
asic B
ox M
od
el
CS
S M
ulti-co
lum
n La
you
tC
SS
Tem
pla
te La
you
tC
SS
Med
ia Q
uerie
sC
SS
Sp
eech
CS
S C
olo
rC
SS
Basic U
ser In
terfa
ce
CS
S S
cop
ing
CS
S G
rid Po
sition
ing
CS
S Fle
xib
le B
ox La
you
tC
SS
Imag
e V
alu
es
CS
S 2
D Tra
nsfo
rmatio
ns
CS
S 3
D Tra
nsfo
rmatio
ns
CS
S Tra
nsitio
ns
CS
S A
nim
atio
ns
Web Apps
CO
RS
Ele
men
t Traversa
lFile
API
Ind
ex D
BPro
gra
mm
able
HTTP C
ach
ing a
nd S
erv
ing
Prog
ress E
ven
tsS
ele
ctors A
PI
Sele
ctors A
PI L2
Serv
er-S
en
t Even
tsU
nifo
rm M
essa
gin
g Po
licyW
eb
DO
M C
ore
Web
SQ
L Data
base
Web
IDL
Web
Socke
ts API
Web
Sto
rag
eW
eb
Worke
rsX
mlH
ttpR
eq
uest
Xm
lHttp
Req
uest L2
DO
M L1
DO
M L2
Core
DO
M L2
Vie
ws
DO
M L2
Even
tsD
OM
L2 S
tyle
DO
M L2
Traversa
l an
d
Ran
ge
DO
M L2
HTM
LD
OM
L3 C
ore
DO
M L3
Even
tsD
OM
L3 Lo
ad
an
d S
ave
DO
M L3
Valid
atio
nD
OM
L3 X
Path
DO
M L3
Vie
ws a
nd
Fo
rmattin
g
DO
M L3
Ab
stract S
chem
as
SVG
Docu
men
t Stru
cture
Basic S
hap
es
Path
sTe
xt
Tran
sform
sPain
ting
, Filling
, Colo
rS
criptin
gS
tylin
gG
rad
ien
ts an
d P
atte
rns
SM
ILFo
nts
Filters
Geolo
catio
nG
eolo
catio
n A
PI
ECMA
ECMA Script
262
EC
MA
Scrip
t 26
2
First Public Working Draft
Working Draft Last Call
Candidate Recommen
dation
Recommendation
Browser Ondersteuning
• “We learned a lot from IE6”
HTML 5 Elementen<!DOCTYPE html><meta charset=“utf-8”>
<header><footer><section><article><aside><nav>
Layout HTML 4
<div id=“header”>
<div id=“footer”>
<div id=“menu”>
<div id=“mainContent”>
<div class=“news”>
<div class=“news”>
<div class=“news”>
Layout HTML 5
<header>
<footer>
<nav>
<div id=“mainContent”>
<article class=“news”>
< article class=“news”>
< article class=“news”>
<article class=“news”>
Content
<header>
<footer>
<nav>
<aside>
Canvas• Scriptable bitmap• Tekenen van vormen en pixels• “fire & forget”
Scalable Vector Graphics• Vector• Retained mode (vs. immediate mode)• Output van diverse tools• DOM– CSS– Javascript
Support Checkfunction supportsSVG() { return !!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', "svg").createSVGRect;
}
SVG plugin
Audio & Video<audiosrc=
preload=autoplayloopcontrols>…</audio>
<videosrc= url naar het audio of video bestandwidth= breedte van de videoheight= hoogte van de videoposter= url naar een thumbnail afbeeldingpreload= (none/auto) starten met downloadenautoplay direct beginnen met afspelenloop blijven herhalen vanaf het begincontrols toon start/stop/pause en tijdlijn>…</video>
OndersteuningAudio
installatie
Video
zal verdwijnen
Fall-back<video autoplay autobuffer="true" width="400px" height="300px">
<source src="vid-hi.mp4"type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' media="(min-device-width: 800px)">
<source src="vid-lo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="vid.ogg" type='video/ogg; codecs="theora, vorbis"'>
fall-back content voor browsers die geen video-element ondersteunen
</video>
Mime-types registratie• IIS via management console• IIS Express via Web.config
<system.webServer> <staticContent> <mimeMap fileExtension=".webm" mimeType="video/webm" /> <mimeMap fileExtension=".ogg" mimeType="application/ogg"/> <mimeMap fileExtension=".ogv" mimeType="video/ogg" /> <mimeMap fileExtension=".mp4" mimeType="video/mp4" /> <mimeMap fileExtension=".m4v" mimeType="video/m4v" /> </staticContent> </system.webServer>
Support check
function supports_video() { return !!document.createElement('video').canPlayType;
}
Modernizr
• Canvas• Inline SVG• Audio / Video• CSS 3• Geolocation
• Localstorage• Drag & drop• x-window
messaging
Gratis javascript librarySupport checks
HTML 5==
<sup><b></sup>
Vragen
?
Links• blog.master-it.nl• www.w3.org/TR/html5/• www.Modernizer.com• www.beautyoftheweb.com/