html5 kickstart - brooklyn beta workshop 21.10.2010

92
HTML5 kickstart Patrick H. Lauke / Brooklyn Beta workshop / 21 October 2010 Brooklyn Beta workshop

Upload: patrick-lauke

Post on 15-May-2015

1.418 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

HTML5 kickstart

Patrick H Lauke Brooklyn Beta workshop 21 October 2010

Brooklyn Beta workshop

Web Evangelist at Opera

should I use HTML5 today

there is already a lot of excitement for HTML5 but itrsquos a little too early to deploy it because wersquore running into interoperability issues

Philippe Le Hegaret W3C interaction domain leader

blogstechrepubliccomcomhinerp=6369

httpwwwflickrcomphotos24374884N084603715307

HTML5 hellip without the hype

History of HTML5

1999 HTML 4012000 XHTML 10

2004 W3C focus on XHTML 20hellipthe future is XML

httpwwwflickrcomphotoscraiga17071467

WHATWGWeb Hypertext Application Technology Working Group

2007 W3C HTML5 WG

ldquoextending the language to better support Web applications [] This puts HTML in direct competition with other technologies[] in particular Flash and Silverlightrdquo

Ian Hickson Editor of HTML5httplistsw3orgArchivesPublicpublic-html2009Jan0215html

HTML5 does not replace HTML 401

HTML5 has more bling

HTML5 specification aimedat browser developers

(defines how browsers handle markupcode ndash no reverse engineering)

for authors HTML5 differences from HTML4httpwwww3orgTRhtml5-diff

1 SyntaxSemantics2 Forms3 Multimedia

1 SyntaxSemantics2 Forms3 Multimedia

HTML5 standardises current browser and authoring behaviour

(eg ldquorelaxedrdquo coding rules)

the dirty secret of the

doctype

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 2: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

Web Evangelist at Opera

should I use HTML5 today

there is already a lot of excitement for HTML5 but itrsquos a little too early to deploy it because wersquore running into interoperability issues

Philippe Le Hegaret W3C interaction domain leader

blogstechrepubliccomcomhinerp=6369

httpwwwflickrcomphotos24374884N084603715307

HTML5 hellip without the hype

History of HTML5

1999 HTML 4012000 XHTML 10

2004 W3C focus on XHTML 20hellipthe future is XML

httpwwwflickrcomphotoscraiga17071467

WHATWGWeb Hypertext Application Technology Working Group

2007 W3C HTML5 WG

ldquoextending the language to better support Web applications [] This puts HTML in direct competition with other technologies[] in particular Flash and Silverlightrdquo

Ian Hickson Editor of HTML5httplistsw3orgArchivesPublicpublic-html2009Jan0215html

HTML5 does not replace HTML 401

HTML5 has more bling

HTML5 specification aimedat browser developers

(defines how browsers handle markupcode ndash no reverse engineering)

for authors HTML5 differences from HTML4httpwwww3orgTRhtml5-diff

1 SyntaxSemantics2 Forms3 Multimedia

1 SyntaxSemantics2 Forms3 Multimedia

HTML5 standardises current browser and authoring behaviour

(eg ldquorelaxedrdquo coding rules)

the dirty secret of the

doctype

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 3: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

should I use HTML5 today

there is already a lot of excitement for HTML5 but itrsquos a little too early to deploy it because wersquore running into interoperability issues

Philippe Le Hegaret W3C interaction domain leader

blogstechrepubliccomcomhinerp=6369

httpwwwflickrcomphotos24374884N084603715307

HTML5 hellip without the hype

History of HTML5

1999 HTML 4012000 XHTML 10

2004 W3C focus on XHTML 20hellipthe future is XML

httpwwwflickrcomphotoscraiga17071467

WHATWGWeb Hypertext Application Technology Working Group

2007 W3C HTML5 WG

ldquoextending the language to better support Web applications [] This puts HTML in direct competition with other technologies[] in particular Flash and Silverlightrdquo

Ian Hickson Editor of HTML5httplistsw3orgArchivesPublicpublic-html2009Jan0215html

HTML5 does not replace HTML 401

HTML5 has more bling

HTML5 specification aimedat browser developers

(defines how browsers handle markupcode ndash no reverse engineering)

for authors HTML5 differences from HTML4httpwwww3orgTRhtml5-diff

1 SyntaxSemantics2 Forms3 Multimedia

1 SyntaxSemantics2 Forms3 Multimedia

HTML5 standardises current browser and authoring behaviour

(eg ldquorelaxedrdquo coding rules)

the dirty secret of the

doctype

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 4: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

there is already a lot of excitement for HTML5 but itrsquos a little too early to deploy it because wersquore running into interoperability issues

Philippe Le Hegaret W3C interaction domain leader

blogstechrepubliccomcomhinerp=6369

httpwwwflickrcomphotos24374884N084603715307

HTML5 hellip without the hype

History of HTML5

1999 HTML 4012000 XHTML 10

2004 W3C focus on XHTML 20hellipthe future is XML

httpwwwflickrcomphotoscraiga17071467

WHATWGWeb Hypertext Application Technology Working Group

2007 W3C HTML5 WG

ldquoextending the language to better support Web applications [] This puts HTML in direct competition with other technologies[] in particular Flash and Silverlightrdquo

Ian Hickson Editor of HTML5httplistsw3orgArchivesPublicpublic-html2009Jan0215html

HTML5 does not replace HTML 401

HTML5 has more bling

HTML5 specification aimedat browser developers

(defines how browsers handle markupcode ndash no reverse engineering)

for authors HTML5 differences from HTML4httpwwww3orgTRhtml5-diff

1 SyntaxSemantics2 Forms3 Multimedia

1 SyntaxSemantics2 Forms3 Multimedia

HTML5 standardises current browser and authoring behaviour

(eg ldquorelaxedrdquo coding rules)

the dirty secret of the

doctype

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 5: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

httpwwwflickrcomphotos24374884N084603715307

HTML5 hellip without the hype

History of HTML5

1999 HTML 4012000 XHTML 10

2004 W3C focus on XHTML 20hellipthe future is XML

httpwwwflickrcomphotoscraiga17071467

WHATWGWeb Hypertext Application Technology Working Group

2007 W3C HTML5 WG

ldquoextending the language to better support Web applications [] This puts HTML in direct competition with other technologies[] in particular Flash and Silverlightrdquo

Ian Hickson Editor of HTML5httplistsw3orgArchivesPublicpublic-html2009Jan0215html

HTML5 does not replace HTML 401

HTML5 has more bling

HTML5 specification aimedat browser developers

(defines how browsers handle markupcode ndash no reverse engineering)

for authors HTML5 differences from HTML4httpwwww3orgTRhtml5-diff

1 SyntaxSemantics2 Forms3 Multimedia

1 SyntaxSemantics2 Forms3 Multimedia

HTML5 standardises current browser and authoring behaviour

(eg ldquorelaxedrdquo coding rules)

the dirty secret of the

doctype

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 6: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

HTML5 hellip without the hype

History of HTML5

1999 HTML 4012000 XHTML 10

2004 W3C focus on XHTML 20hellipthe future is XML

httpwwwflickrcomphotoscraiga17071467

WHATWGWeb Hypertext Application Technology Working Group

2007 W3C HTML5 WG

ldquoextending the language to better support Web applications [] This puts HTML in direct competition with other technologies[] in particular Flash and Silverlightrdquo

Ian Hickson Editor of HTML5httplistsw3orgArchivesPublicpublic-html2009Jan0215html

HTML5 does not replace HTML 401

HTML5 has more bling

HTML5 specification aimedat browser developers

(defines how browsers handle markupcode ndash no reverse engineering)

for authors HTML5 differences from HTML4httpwwww3orgTRhtml5-diff

1 SyntaxSemantics2 Forms3 Multimedia

1 SyntaxSemantics2 Forms3 Multimedia

HTML5 standardises current browser and authoring behaviour

(eg ldquorelaxedrdquo coding rules)

the dirty secret of the

doctype

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 7: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

History of HTML5

1999 HTML 4012000 XHTML 10

2004 W3C focus on XHTML 20hellipthe future is XML

httpwwwflickrcomphotoscraiga17071467

WHATWGWeb Hypertext Application Technology Working Group

2007 W3C HTML5 WG

ldquoextending the language to better support Web applications [] This puts HTML in direct competition with other technologies[] in particular Flash and Silverlightrdquo

Ian Hickson Editor of HTML5httplistsw3orgArchivesPublicpublic-html2009Jan0215html

HTML5 does not replace HTML 401

HTML5 has more bling

HTML5 specification aimedat browser developers

(defines how browsers handle markupcode ndash no reverse engineering)

for authors HTML5 differences from HTML4httpwwww3orgTRhtml5-diff

1 SyntaxSemantics2 Forms3 Multimedia

1 SyntaxSemantics2 Forms3 Multimedia

HTML5 standardises current browser and authoring behaviour

(eg ldquorelaxedrdquo coding rules)

the dirty secret of the

doctype

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 8: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

2004 W3C focus on XHTML 20hellipthe future is XML

httpwwwflickrcomphotoscraiga17071467

WHATWGWeb Hypertext Application Technology Working Group

2007 W3C HTML5 WG

ldquoextending the language to better support Web applications [] This puts HTML in direct competition with other technologies[] in particular Flash and Silverlightrdquo

Ian Hickson Editor of HTML5httplistsw3orgArchivesPublicpublic-html2009Jan0215html

HTML5 does not replace HTML 401

HTML5 has more bling

HTML5 specification aimedat browser developers

(defines how browsers handle markupcode ndash no reverse engineering)

for authors HTML5 differences from HTML4httpwwww3orgTRhtml5-diff

1 SyntaxSemantics2 Forms3 Multimedia

1 SyntaxSemantics2 Forms3 Multimedia

HTML5 standardises current browser and authoring behaviour

(eg ldquorelaxedrdquo coding rules)

the dirty secret of the

doctype

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 9: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

WHATWGWeb Hypertext Application Technology Working Group

2007 W3C HTML5 WG

ldquoextending the language to better support Web applications [] This puts HTML in direct competition with other technologies[] in particular Flash and Silverlightrdquo

Ian Hickson Editor of HTML5httplistsw3orgArchivesPublicpublic-html2009Jan0215html

HTML5 does not replace HTML 401

HTML5 has more bling

HTML5 specification aimedat browser developers

(defines how browsers handle markupcode ndash no reverse engineering)

for authors HTML5 differences from HTML4httpwwww3orgTRhtml5-diff

1 SyntaxSemantics2 Forms3 Multimedia

1 SyntaxSemantics2 Forms3 Multimedia

HTML5 standardises current browser and authoring behaviour

(eg ldquorelaxedrdquo coding rules)

the dirty secret of the

doctype

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 10: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

2007 W3C HTML5 WG

ldquoextending the language to better support Web applications [] This puts HTML in direct competition with other technologies[] in particular Flash and Silverlightrdquo

Ian Hickson Editor of HTML5httplistsw3orgArchivesPublicpublic-html2009Jan0215html

HTML5 does not replace HTML 401

HTML5 has more bling

HTML5 specification aimedat browser developers

(defines how browsers handle markupcode ndash no reverse engineering)

for authors HTML5 differences from HTML4httpwwww3orgTRhtml5-diff

1 SyntaxSemantics2 Forms3 Multimedia

1 SyntaxSemantics2 Forms3 Multimedia

HTML5 standardises current browser and authoring behaviour

(eg ldquorelaxedrdquo coding rules)

the dirty secret of the

doctype

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 11: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

ldquoextending the language to better support Web applications [] This puts HTML in direct competition with other technologies[] in particular Flash and Silverlightrdquo

Ian Hickson Editor of HTML5httplistsw3orgArchivesPublicpublic-html2009Jan0215html

HTML5 does not replace HTML 401

HTML5 has more bling

HTML5 specification aimedat browser developers

(defines how browsers handle markupcode ndash no reverse engineering)

for authors HTML5 differences from HTML4httpwwww3orgTRhtml5-diff

1 SyntaxSemantics2 Forms3 Multimedia

1 SyntaxSemantics2 Forms3 Multimedia

HTML5 standardises current browser and authoring behaviour

(eg ldquorelaxedrdquo coding rules)

the dirty secret of the

doctype

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 12: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

HTML5 does not replace HTML 401

HTML5 has more bling

HTML5 specification aimedat browser developers

(defines how browsers handle markupcode ndash no reverse engineering)

for authors HTML5 differences from HTML4httpwwww3orgTRhtml5-diff

1 SyntaxSemantics2 Forms3 Multimedia

1 SyntaxSemantics2 Forms3 Multimedia

HTML5 standardises current browser and authoring behaviour

(eg ldquorelaxedrdquo coding rules)

the dirty secret of the

doctype

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 13: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

HTML5 has more bling

HTML5 specification aimedat browser developers

(defines how browsers handle markupcode ndash no reverse engineering)

for authors HTML5 differences from HTML4httpwwww3orgTRhtml5-diff

1 SyntaxSemantics2 Forms3 Multimedia

1 SyntaxSemantics2 Forms3 Multimedia

HTML5 standardises current browser and authoring behaviour

(eg ldquorelaxedrdquo coding rules)

the dirty secret of the

doctype

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 14: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

HTML5 specification aimedat browser developers

(defines how browsers handle markupcode ndash no reverse engineering)

for authors HTML5 differences from HTML4httpwwww3orgTRhtml5-diff

1 SyntaxSemantics2 Forms3 Multimedia

1 SyntaxSemantics2 Forms3 Multimedia

HTML5 standardises current browser and authoring behaviour

(eg ldquorelaxedrdquo coding rules)

the dirty secret of the

doctype

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 15: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

1 SyntaxSemantics2 Forms3 Multimedia

1 SyntaxSemantics2 Forms3 Multimedia

HTML5 standardises current browser and authoring behaviour

(eg ldquorelaxedrdquo coding rules)

the dirty secret of the

doctype

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 16: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

1 SyntaxSemantics2 Forms3 Multimedia

HTML5 standardises current browser and authoring behaviour

(eg ldquorelaxedrdquo coding rules)

the dirty secret of the

doctype

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 17: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

HTML5 standardises current browser and authoring behaviour

(eg ldquorelaxedrdquo coding rules)

the dirty secret of the

doctype

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 18: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

the dirty secret of the

doctype

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 19: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

HTML5ltDOCTYPE htmlgt

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 20: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

ltmeta charset=rdquoutf-8rdquo gt

ltmeta charset=utf-8gt

ltMeTa CHarSet=utf-8gt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 21: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 22: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

ltstyle type=rdquotextcssrdquogtltstylegt

ltscript type=rdquotextjavascriptrdquogtltscriptgt

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 23: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

ltdoctype htmlgtlttitlegtMinimal HTML5lttitlegt

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 24: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

new elements for more accurate semantics

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 25: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

Top 20 class names1 footer 11 button

2 menu 12 main

3 style1 13 style3

4 msonormal 14 small

5 text 15 nav

6 content 16 clear

7 title 17 search

8 style2 18 style4

9 header 19 logo

10 copyright 20 body

httpdevfilesmyoperacomarticles572classlist-urlhtm

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 26: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

Top 20 id names1 footer 11 search

2 content 12 nav

3 header 13 wrapper

4 logo 14 top

5 container 15 table2

6 main 16 layer2

7 table1 17 sidebar

8 menu 18 image1

9 layer1 19 banner

10 autonumber1 20 navigation

httpdevfilesmyoperacomarticles572idlist-urlhtm

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 27: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

unambiguous and machine readableeven for screenreaders

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 28: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

current and old browsers ldquosupportrdquo these(although some need a little extra help)

header footer hellip display block

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 29: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

Internet Explorer needs extra training wheelsdocumentcreateElement(header)documentcreateElement(footer)hellip

httphtml5doctorcomhow-to-get-html5-working-in-ie-and-firefox-2

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 30: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

1 SyntaxSemantics2 Forms3 Multimedia

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 31: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

improved formsmaking common UI needs native

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 32: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

rich form elements ndash without JavaScript

ltinput type=rdquodaterdquogtltinput type=rdquotimerdquogtltinput type=rdquomonthrdquogtltinput type=rdquoweekrdquogtltinput type=rdquodatetimerdquo hellip gtltinput type=rdquorangerdquogtltinput type=rdquonumberrdquogt

ltinput type=rdquofilerdquo multiplegt

ltinput hellip autofocusgtltinput hellip autocompletegt

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 33: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

type and attributes for built-in validation(of course you should still validate on the server)

ltinput hellip requiredgtltinput type=rdquotelrdquogtltinput type=rdquoemailrdquogtltinput type=rdquourlrdquogtltinput hellip pattern=[a-z]3[0-9]3gt

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 34: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

1 SyntaxSemantics2 Forms3 Multimedia

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 35: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

making your site Fonzie compliant

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 36: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

ltvideogt

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 37: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

Adobe Flash currently most commonvideo delivery mechanism

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 38: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

ltobject width=425 height=344gtltparam name=movie

value=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1ampgtltparamgt

ltparam name=allowFullScreen value=truegtltparamgt

ltparam name=allowscriptaccess value=alwaysgtltparamgt

ltembed src=httpwwwyoutubecomv9sEI1AUFJKwamphl=enampfs=1amp type=applicationx-shockwave-flash allowscriptaccess=always allowfullscreen=true width=425 height=344gtltembedgtltobjectgt

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 39: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

ltvideo src=videowebm controls autoplay loop preload poster=posterjpg width=320 height=240gt lta href=videowebmgtDownload movieltagtltvideogt

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 40: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

video as native object

ldquoplays nicerdquo with rest of the page keyboard accessibility built-in

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 41: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

powerful (simple) APIto script your own controls

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 42: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

icantcoukeasy-youtube

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 43: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

wwww3orgTRhtml5videohtmlmedia-elements

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 44: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

controlling a ltvideogt element

var v = documentgetElementById(player)

vplay()vpause()vvolume = hellip vcurrentTime = hellip hellip

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 45: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

events fired by ltvideogt element

var v = documentgetElementById(player)

vaddEventListener(loadeddata function() hellip true)vaddEventListener(play function() hellip true)vaddEventListener(pause function() hellip true)vaddEventListener(timeupdate function() hellip true)vaddEventListener(ended function() hellip true)hellip

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 46: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

video formatsthe big debate

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 47: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

MP4 H264

ubiquitous patent encumbered licensingroyalties

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 48: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

Ogg Theora

ldquofree and openrdquo no licensingroyaltiesnot many tools for it not web optimised

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 49: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

WebM

open and royalty-free web optimisedsupport by software and hardware vendors

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 50: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

providing multiple sourcesltvideo controls autoplay poster=hellip width=hellip height=hellipgt

ltsource src=moviewebm type=videowebm gtltsource src=movieogv type=videoogg gtltsource src=moviemp4 type=videomp4 gtlt-- fallback content --gt

ltvideogt

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 51: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

flash fallback for older browsershttpcamendesigncomcodevideo_for_everybody

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 52: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

ltvideo controls autoplay poster=hellip width=hellip height=hellipgtltsource src=moviewebm type=videowebm gtltsource src=moviemp4 type=videomp4 gt

ltobject width=hellip height=hellip type=applicationx-shockwave-flash data=playerswfgt

ltparam name=movie value=playerswf gtltparam name=flashvars value= hellip file=moviemp4 gtlt-- fallback content --gt

ltobjectgt

ltvideogt

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 53: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

ltaudiogt

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 54: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

audio exactly the same as video

ltaudio src=rdquomusicmp3rdquo controls autoplaygtltaudiogt

[]

ltaudio controls autoplaygtltsource src=musicmp3 type=audiompeg gtltsource src=musicoga type=audioogg gtlt-- fallback content --gt

ltaudiogt

same format debacle MP3 vs Ogg Vorbis (vs WAV)

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 55: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

ready-made HTML5 audiovideo players(for the lazy)

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 56: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

sublimevideonet

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 57: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

videojscom

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 58: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

wwwhappywormcomjqueryjplayer

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 59: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

ltcanvasgt

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 60: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

canvas = ldquoscriptable imagesrdquo

ltcanvas width=hellip height=hellipgtltcanvasgt

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 61: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

canvas has standard API methods for drawing

ctx = canvasgetContext(2d)ctxfillRect(x y width height)ctxbeginPath()ctxmoveTo(x y)ctxlineTo(x y)ctxbezierCurveTo(x1 y1 x2 y2 c1 c2)

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 62: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

canvas drawing ready-made images

ctx = canvasgetContext(2d)

var logo = new Image()logosrc = logopng

ctxdrawImage(logox1y1w1h1x2y2w2h2)

or call in an existing image already on the page

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 63: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

canvas access to image data array

ctx = canvasgetContext(2d)canvasData = ctxgetImageData(xywh)

[RGBARGBARGBARGBA hellip ]

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 64: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

canvas exporting image data as datauri

ctx = canvasgetContext(2d)hellipcanvastoDataURL(imagepng) returns dataimagepngbase64hellip

canvastoDataURL(imagejpg) returns dataimagejpegbase64hellip

Note do it on the canvas not the context

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 65: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

canvas also works with video

ctx = canvasgetContext(2d)v = documentgetElementById(player)

ctxdrawImage(vx1y1w1h2x2y2w2h2)

grab currently displayed frame (update as appropriate)

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 66: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

canvas accessibility concerns

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 67: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

video audio and canvas on any devicewithout plugins

(Java Flash Silverlight not ubiquitous)

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 68: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

HTML5 (and friends) haslots more APIs for developers

(for powerful client-side apps)

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 69: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

isgeolocationpartofhtml5com

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 70: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

geolocationnavigatorgeolocationgetCurrentPosition(success error)navigatorgeolocationwatchCurrentPosition(success error)

function success(position) wheres Wally var lat = positioncoordslatitudevar long = positioncoordslongitude

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 71: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

offline detection

windowaddEventListener(online function() hellip true)windowaddEventListener(offline function() hellip true)

and application cachelthtml manifest=rdquoblahmanifestrdquogt

CACHE MANIFEST send this with correct textcache-manifest MIMEimagesspritespngscriptscommonjsscriptsjqueryjsstylesglobalcssdataxml

and many more(even beyond HTML5)

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 72: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

is it all safe to use right now

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 73: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

dont do browser sniffing

httpwwwflickrcomphotostimdorr2096272747

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 74: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

feature-detectionprogressive enhancement graceful degradation ndash or use shims

httpdiveintohtml5orgeverythinghtml

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 75: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

feature-detection for audiovideo

if (documentcreateElement(video)canPlayType) hellip

if (documentcreateElement(audio)canPlayType) hellip

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 76: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

feature-detection for audiovideo codecs

var v = documentcreateElement(video)if ((vcanPlayType)ampamp ((vcanPlayType(videowebmcodecs=vp8vorbis) == probably) || (vcanPlayType(videowebmcodecs=vp8 vorbis) == maybe))) hellip

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 77: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

patching old browsersgithubcomModernizrModernizrwikiHTML5-Cross-browser-Polyfills

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 78: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

HTML5 as Flashkiller

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 79: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

not a question of HTML5 replacing Flash

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 80: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

giving developers a choice

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 81: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

should I use HTML5 today

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 82: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

ldquoThe future is already here ndash its just not very evenly distributedrdquo

William Gibson

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom

Page 83: HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

wwwoperacomdeveloperpeopleoperacompatricklpresentationsbrooklynbeta_21102010brooklynbeta_21102010pdf

patricklaukeoperacom