Web Directions @media 2010

Brave new world of HTML5 THE “NO I'M NOT BRUCE LAWSON” EDITION (BETA) Patrick H. Lauke / Webdirections @media / London / 11 June 2010

Web Evangelist at Opera

new technologies you can start using today

HTML5 <!DOCTYPE html>

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

HTML5 definition without the bullsh*t

history of HTML5 ● started at Opera – Web Applications 1.0 ● reaction to XHTML 2.0 ● Google, Mozilla and Apple joined ● W3C HTML5 ● Microsoft involvement

“...extending the language to better support Web applications [...] This puts HTML in direct competition with other technologies[...] , in particular Flash and Silverlight.” Ian Hickson, Editor of HTML5 http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html

HTML5 does not replace HTML 4.01

HTML5 has more bling!

HTML5 standardises current browser and authoring behaviour (e.g. relaxed coding rules)

HTML5 is stricter? (defines exactly how browsers handle markup/code)

HTML5 brings new markup elements and JavaScript APIs

new elements for more accurate semantics

HTML5 elements for a typical blog

unambiguous and machine readable

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

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

webforms – more powerful form elements

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=”file” multiple> <input … autofocus> <input … autocomplete>

type and attributes for built-in validation (of course you should still validate on the server) <input type=”tel”> <input type=”email”> <input type=”url”> <input … pattern="[a-z]{3}[0-9]{3}"> <input … required> Demonstration of webforms

<video>

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

video as native object...why is it important? ● “play nice” with rest of the page ● keyboard accessibility built-in ● API for controls Demonstration of video

video format debate H.264 vs Ogg Theora

video format debate H.264 vs Ogg Theora vs WebM

video formats – H.264 + OGG Theora + WebM <video controls autoplay poster="…" width="…" height="…"> <source src="movie.webm" type="video/webm" /> <source src="movie.ogv" type="video/ogg" /> <source src="movie.mp4" type="video/mp4" />  </video> still include fallback for old browsers http://camendesign.com/code/video_for_everybody

<audio>

audio exactly the same <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> MP3, Ogg Vorbis, WAV Demonstration: audio

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

canvas has standard API methods for drawing ctx = 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); ctx = canvas.drawImage(…);

canvas accessibility concerns

canvas appropriate use for enhanced visuals, special effects – not pure content

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

But is it safe to use, right now?

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

HTML5 as Flashkiller?

not a question of HTML5 replacing Flash...

Giving developers a choice!

www.opera.com/developer people.opera.com/patrickl/presentations/atmedia_11.06.2010/atmedia_11.06.2010.pdf patrick.lauke@opera.com

http://www.webdirections.org	95
http://www.slideshare.net	47
http://lanyrd.com	8

Web Directions @media 2010

by Patrick Lauke on Jun 11, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 150

Statistics

Web Directions @media 2010 — Presentation Transcript