HTML5

HTML5Why aren’t you using it? Brad Touesnard http://bradt.ca @bradt

You are using it “HTML5 isn’t a completely new language created from scratch. It’s an evolutionary rather than revolutionary change in the ongoing story of markup. If you are currently creating websites with any version of HTML, you’re already using HTML5.” - Jeremy Keith, HTML5 for Web Designers

What’s new in HTML5?New Structural Semantic Elements Multiple File UploadingNative Audio & Video Document EditingNew Form Controls Cross-Document Messaging2D & 3D Graphics Browser History ManagementMicrodata Web StorageDrag-and-Drop Web Workers

New Structural Semantic Elements

Document OutlineNew York Times China Cracks Down on Illegal Rare Earth Mines The Snowstorm Transit Update Stir Crazy Snow Removal

HTML5 Document Outliner http://gsnedders.html5.org/outliner/

Other semantic elements<hgroup><footer><time><mark><figure> / <figcaption>

Using These New Elements Today

Ye Olde Doctype<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Ye New Doctype<!DOCTYPE html>

Go Blockarticle, section, aside, hgroup, nav, header,footer, figure, figcaption { display: block;}

Getting Internet Explorer to behave<head>......</head>

Why today? Om nom nom!

Native Video

The Land Before Flash

Criticisms of Flash Browser slowness & crashing Poor video performance (better in 10.1 with hardware acceleration) No standardized video API No semantics

Ideally Simple<video src="sneezing-panda.webm" width="320" height="240"></video>

Browser Support Today http://diveintohtml5.org/video.html#what-works

Browser Support Soon http://diveintohtml5.org/video.html#what-works

Unfortunately Complicated<video width="320" height="240" preload controls> <source src="panda.mp4" /> <source src="panda.webm" type=video/webm; codecs="vp8, vorbis" /> <source src="panda.ogv" type=video/ogg; codecs="theora, vorbis" /> <object width="320" height="240" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf"> <param name="movie" value="flowplayer-3.2.1.swf" /> <param name="allowfullscreen" value="true" /> <param name="flashvars" value=config={"clip": {"url": "panda.mp4", "autoPlay":false, "autoBuffering":true}} /> <p>Download video as <a href="panda.mp4">MP4</a>, <a href="panda.webm">WebM</a>, or <a href="panda.ogv">Ogg</a>.</p> </object></video>

Articles “Dive into HTML5: Video on the Web” - Mark Pilgrim http://diveintohtml5.org/video.html “Flash Player: CPU Hog or Hot Tamale? It Depends.” http://www.streaminglearningcenter.com/articles/ﬂash-player-cpu-hog-or- hot-tamale-it-depends-.html

Native Audio

The Short & Sweet<audio src="bigwebshow.ogg" controls preload="auto" autobuffer></audio>

Browser Support http://html5doctor.com/native-audio-in-the-browser/

The Long & Ugly<audio controls preload="auto" autobuffer> <source src="bigwebshow.mp3" /> <source src="bigwebshow.ogg" /> <object width="300" height="20" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf"> <param name="movie" value="flowplayer-3.2.1.swf" /> <param name="allowfullscreen" value="true" /> <param name="flashvars" value=config={"clip": {"url": "bigwebshow.mp3", "autoPlay":false, "autoBuffering":true}} /> <p>Download podcast as <a href="bigwebshow.mp3">MP3</a>, or <a href="bigwebshow.ogg">Ogg</a>.</p> </object></audio>

Articles “The State of HTML5 Audio” - Scott Schiller http://24ways.org/2010/the-state-of-html5-audio “HTML5 Audio Unplugged” - Richard Shepherd http://thinkvitamin.com/code/html5-audio-unplugged/ “Native Audio in the Browser” - Mark Boas http://html5doctor.com/native-audio-in-the-browser/

2D & 3D Graphics

Technologies<canvas id="game" width="500" height="500"></canvas>canvas.getContext(‘2d’)WebGL (managed by Khronos Group)canvas.getContext(‘experimental-webgl’)

Links Google Pacman Biolab Disaster http://google.com/pacman/ http://playbiolab.com/ Wolfenstein 3D Quake II WebGL port http://www.nihilogic.dk/labs/wolf/ http://code.google.com/p/quake2-gwt-port/ Arcade Fire “The Wilderness True 8-bit Color Cycling with Downtown” HTML5 http://www.thewildernessdowntown.com/ http://www.effectgames.com/demos/ canvascycle/?sound=0

New Form Controls

Placeholder Text<input type="text" placeholder="Enter search text here">

Autofocus<input type="text" autofocus>

Email Address<input type="email">

Web Address<input type="url">

Number<input type="number" min="0" max="10" step="2" value="6">

Range<input type="range" min="0" max="10" step="2" value="6">

Date & Time<input type="date"><input type="month"><input type="week"><input type="time"><input type="datetime"> Opera 9<input type="datetime-local">

Search<input type="search">

Others<input type="color"><input type="tel">

Upload Multiple Files<input type="file" name="photos[]" multiple>

Form Validation Email address Web address Required <input type="text" required>

Articles “multiple file input in Firefox 3.6” - Paul Rouget http://hacks.mozilla.org/2009/12/multiple-file-input-in-firefox-3-6/ “Dive into HTML5: A Form of Madness” - Mark Pilgrim http://diveintohtml5.org/forms.html

What HTML5 is not

What HTML5 is not...CSS Web StorageSVG TurduckenWOFFWeb WorkersGeolocationGod

http://www.apple.com/html5/

http://slides.html5rocks.com

Boooooo!http://www.w3.org/html/logo/

“It’s as if the government suddenly announced that from today, all vegetables will be called potatoes, justbecause some vegetables are potatoes.” - Bobbie Johnson, GigaOM

http://www.iscss3partofhtml5.com/

http://isgeolocationpartofhtml5.com/

“I wish I could put ‘HTML5’ in a sentence and it would mean version 5 of HTML. That would make sense.” - Me

Buzzword-o-matic Ajax Web 2.0 HTML5

Buzzword-o-matic Web5

Web5 Geolocation

Browser Support

Getting Locationif (!!navigator.geolocation) { var geo = navigator.geolocation; geo.getCurrentPosition(displayMap);}

Using Locationfunction displayMap(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; // embed a map}

Articles “You Are Here (and so is everybody else)” - Mark Pilgrim http://diveintohtml5.org/geolocation.html Geolocation demo http://html5demos.com/geo

Online ResourcesModernizr - Faruk Ates, Paul Irish HTML5 Doctor - Bruce Lawson,http://www.modernizr.com/ Remy Sharpe, etc http://html5doctor.com/HTML5 Boilerplate - Paul Irishhttp://html5boilerplate.com/ Quirks Mode http://www.quirksmode.org/W3Schools HTML5 Referencehttp://www.w3schools.com/html5/html5_reference.asp

BooksHTML5 for Web DesignersJeremy KeithIntroducing HTML5Bruce Lawson and Remy SharpHTML5: Up and RunningMark Pilrim

Thank You Brad Touesnard http://bradt.ca

http://bradt.ca	58
http://lanyrd.com	7
http://twitter.com	2
http://paper.li	1
http://feeds.feedburner.com	1

HTML5

by bradt

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 69

Statistics

HTML5 Presentation Transcript