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

^<b>

Vragen

?

Links• blog.master-it.nl• www.w3.org/TR/html5/• www.Modernizer.com• www.beautyoftheweb.com/