Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011

Brave new world of HTML5NEW SEMANTICS, MULTIMEDIA AND MOREPatrick H. Lauke / Interlink Conference / Vancouver / 4 June 2011

Web Evangelist at Opera

...should I use HTML5 today?

www.textfiles.com/underconstruction

"there is already a lot of excitement for HTML5,but it’s a little too early to deploy it becausewe’re running into interoperability issues." Philippe Le Hegaret, W3C interaction domain leader blogs.techrepublic.com.com/hiner/?p=6369

http://www.flickr.com/photos/24374884@N08/4603715307/

NATIVE HTML5

HTML5…without the hype?

A brief history of HTML5 1999 HTML 4.01 2000 XHTML 1.0

2004 W3C focus on XHTML 2.0 …the future is XML-based! http://www.flickr.com/photos/craiga/17071467/

WHATWGWeb Hypertext Application Technology Working Group

2007 W3C HTML5 WG

HTML5 does not replace HTML 4.01 / XHTML 1.0

HTML5 has more bling!

“...extending the language to better supportWeb applications [...] This puts HTML indirect competition with othertechnologies[...] , in particular Flash andSilverlight.”Ian Hickson, Editor of HTML5http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html

HTML4.01 primarily defined markup elements

HTML5 supercedesHTML 4.01, XHTML 1.0and DOM Level 2 HTML

HTML5 adds/redefines markup elements

HTML5 aimed at browser devs detailed algorithms for processing/error correction

software.hixie.ch/utilities/js/live-dom-viewer/

1. syntax/semantics2. forms3. multimedia

the dirty secret of the doctype

HTML5<!DOCTYPE html>

<!doctype html><title>Minimal HTML5</title>

new elements for more accurate semantics

Top 20 class names 1. footer 11. button 2. menu 12. main 3. style1 13. style34. msonormal 14. small 5. text 15. nav 6. content 16. clear 7. title 17. search 8. style2 18. style4 9. header 19. logo10. copyright 20. body http://devfiles.myopera.com/articles/572/classlist-url.htm

Top 20 id names 1. 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. banner10. autonumber1 20. navigation http://devfiles.myopera.com/articles/572/idlist-url.htm

html5doctor.com

unambiguous and machine readable

current and old browsers “support” these(although some need a little extra help)header, footer, … { display: block; }

Internet Explorer < 9 needs extra training wheelsdocument.createElement(header);document.createElement(footer);…http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2

improved form elementsbecause the web is more interactive

jqueryui.com

rich form elements without JavaScript<input type="date"><input type="time"><input type="month"><input type="week"><input type="datetime" … ><input type="range"><input type="number"><input type="color"><input type="file" multiple><input … placeholder="…"><input … autofocus><input … autocomplete>

built-in validation without JavaScript<input … required><input type="tel"><input type="email"><input type="url"><input … pattern="[a-z]{3}[0-9]{3}"><input type="number" min="1" max="10" step="2">…

people.opera.com/patrickl/experiments/forms/newtypes.html

people.opera.com/patrickl/experiments/forms/validation.html

validity checking with JavaScriptform.checkValidity()formelement.checkValidity()formelement.setCustomValidity()formelement.validityinterface ValidityState { readonly attribute boolean valueMissing; readonly attribute boolean typeMismatch; readonly attribute boolean patternMismatch; readonly attribute boolean tooLong; readonly attribute boolean rangeUnderflow; readonly attribute boolean rangeOverflow; readonly attribute boolean stepMismatch; readonly attribute boolean customError; readonly attribute boolean valid;};

making your site Fonzie compliant...

<video>

Adobe Flash currently most common video delivery mechanism

<video src="video.webm" controls autoplay loop preload="none" poster="poster.jpg" width="320" height="240"> <a href="video.webm">Download movie</a></video>

video as native object● behaves like any other HTML element● keyboard accessibility out-of-the-box

people.opera.com/patrickl/experiments/video/hover+transition

powerful (simple) API

icant.co.uk/easy-youtube

controlling <video> with JavaScriptvar v = document.getElementById(player);v.play();v.pause();v.volume = … ;v.currentTime = … ;…

events fired by <video>var v = document.getElementById(player);v.addEventListener(loadeddata, function() { … }, true)v.addEventListener(play, function() { … }, true)v.addEventListener(pause, function() { … }, true)v.addEventListener(timeupdate, function() { … }, true)v.addEventListener(ended, function() { … }, true)…

people.opera.com/patrickl/experiments/webm/basic-controls

people.opera.com/patrickl/experiments/webm/fancy-controls

people.opera.com/patrickl/experiments/webm/fancy-swap

HTML5 means all yourold dHTML is cool again!

video formats the big debate?

HTML5 does not specify video container/codec (same as with images in HTML 4.01)

MP4/H.264 orOgg Theora orWebM/VP8

MP4 / H.264ubiquitous, patent encumbered, licensing/royalties

Ogg Theora free and open, no licensing feesnot many tools for it, not web optimised

WebM / VP8 open and royalty-free, web-optimisedsupport by hardware and software vendors

providing multiple sources<video controls autoplay poster="…" width="…" height="…"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.webm" type="video/webm" /> <source src="movie.ogv" type="video/ogg" /> </video>

www.ffmpeg.org

www.mirovideoconverter.com

flash fallback for older browsers http://camendesign.com/code/video_for_everybody

<audio>

audio...exactly the same as video<audio src=”music.mp3” controls autoplay … ></audio><audio controls autoplay> <source src="music.mp3" type="audio/mpeg" /> <source src="music.oga" type="audio/ogg" /> </audio>formats: MP3 vs Ogg Vorbis (vs WAV)

people.opera.com/patrickl/experiments/audio/wilhelm

people.opera.com/patrickl/experiments/audio/windchime

canvas = “scriptable images”<canvas width="…" height="…"></canvas>

canvas has standard API methods for drawingctx = canvas.getContext("2d");ctx.fillRect(x, y, width, height);ctx.beginPath();ctx.moveTo(x, y);ctx.lineTo(x, y);ctx.bezierCurveTo(x1, y1, x2, y2, c1, c2);www.w3.org/TR/2dcontext

people.opera.com/patrickl/experiments/canvas/particle/3

mariuswatz.com/works/abstract01js

canvas drawing ready-made imagesctx = canvas.getContext("2d");var logo = new Image();logo.src = logo.png;ctx.drawImage(logo,x1,y1,w1,h1,x2,y2,w2,h2);or call in an existing image already on the page

www.splintered.co.uk/experiments/archives/paranoid_0.3

canvas access to image data arrayctx = canvas.getContext("2d");canvasData = ctx.getImageData(x,y,w,h);[R,G,B,A,R,G,B,A,R,G,B,A,R,G,B,A, … ]

www.splintered.co.uk/experiments/archives/canvas-ambilight

github.com/mezzoblue/PaintbrushJS

canvas also works with videoctx = canvas.getContext("2d");v = document.getElementById(player);ctx.drawImage(v,x1,y1,w1,h2,x2,y2,w2,h2);grab currently displayed frame (update as appropriate)

html5doctor.com/video-canvas-magic

media.chikuyonok.ru/ambilight

canvas accessibility?

video, audio and canvas on any device without plugins (Java / Flash / Silverlight not ubiquitous)

1. syntax/semantics2. forms3. multimedia4. … and more

HTML5 (and friends) haslots more APIs for developers (for powerful client-side apps)

geolocationnavigator.geolocation.getCurrentPosition(success, error);navigator.geolocation.watchCurrentPosition(success, error);function success(position) { /* wheres Wally? */ var lat = position.coords.latitude; var long = position.coords.longitude; ...}www.w3.org/TR/geolocation-API

offline detectionwindow.addEventListener(online, function(){ … }, true);window.addEventListener(offline, function(){ … }, true); …however, currently unreliable!

application cache<html manifest=”blah.manifest”>CACHE MANIFEST# send this with correct text/cache-manifest MIMEimages/sprites.pngscripts/common.jsscripts/jquery.jsstyles/global.cssNETWORK:# never cached (apart from normal caching mechanism)onlineonly.cssFALLBACK:# pattern matching. fallback file will also be cachedimages/ images/not-offline.png

data storagecookies and their limitations...document.cookie = key=value; expires=Thu, 15 Feb 201023:59:59 UTC; path=/…/* convoluted string operations go here … */

localStorage/sessionStoragelocalStorage.setItem(key, value);localStorage.getItem(key);localStorage.clear();localStorage.key = value;if (localStorage.key == …) { … }…localStorage – persistent per domainsessionStorage – current URL and window in sessiononly string data – store serialised objects

WebSQLrelational DB / SQL in browservar db =openDatabase(dbName, version, displayName, expectedSize);db.transaction(function(tx) { tx.executeSql(sqlStatement, [], function (tx, result) { /* do something with the results */ });});not being developed further (IE/Mozilla prefer IndexedDB)– nonetheless available right now in Opera+WebKit!

etcFile API, Web Workers, History API, Web Messaging,Drag and Drop, Server-Sent Events…

is it all safe to use, right now?

www.youtube.com/html5

caniuse.com

dont do browser sniffing http://www.flickr.com/photos/timdorr/2096272747/

feature-detectionprogressive enhancement, graceful degradation http://diveintohtml5.org/everything.html

feature-detection for audio/videoif (!!document.createElement(video).canPlayType;) { … }if (!!document.createElement(audio).canPlayType;) { … }

feature-detection for audio/video codecsvar v = document.createElement(video);if (!!(v.canPlayType)&& ((v.canPlayType(video/webm;codecs="vp8,vorbis") == probably) || (v.canPlayType(video/webm;codecs="vp8, vorbis") == maybe))){ … }

modernizr.com

patching older browsersgithub.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

yepnopejs.com

sublimevideo.net

www.happyworm.com/jquery/jplayer

HTML5 as Flashkiller?

not a question ofHTML5 replacing Flash...

giving developers a choice!

...should I use HTML5 today?

“The future is already here – itsjust not very evenly distributed”William Gibson

www.opera.com/developer patrick.lauke@opera.com

http://gerenciamentodeti.com.br	387
http://skj7.wordpress.com	231
http://www.nextapp.co.kr	226
http://nextapp.co.kr	92
http://madebymany.com	56
http://localhost	13
http://adamo.collected.info	11
http://www.mesott.com	6
http://paper.li	5
url_unknown	5
http://lanyrd.com	4
http://twitter.com	3
http://kpcompass.com	3
http://construirenotrefutur.tumblr.com	3
http://digitaldannelse.typofree.dk	2
http://www.slideshare.net	2
http://webcache.googleusercontent.com	2
http://www.hanrss.com	1
http://blog.naver.com	1
http://translate.googleusercontent.com	1
http://192.168.0.12:81	1
http://www.kvk-verzekeringen.be	1
http://flavors.me	1
https://twitter.com	1
http://safe.tumblr.com	1
http://edicolaeuropea.blogspot.com	1

Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011

by Patrick Lauke

Accessibility

Categories

Upload Details

Usage Rights

26 Embeds 1,060

Statistics

Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011 Presentation Transcript