HTML5

HTML5Why aren’t you using it?

Brad Touesnardhttp://bradt.ca

@bradt

http://bradt.ca

http://bradt.ca

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

http://books.alistapart.com/products/html5-for-web-designers

http://books.alistapart.com/products/html5-for-web-designers

What’s new in HTML5?

New Structural Semantic Elements

Native Audio & Video

New Form Controls

2D & 3D Graphics

Microdata

Drag-and-Drop

Multiple File Uploading

Document Editing

Cross-Document Messaging

Browser History Management

Web Storage

Web Workers

New Structural Semantic Elements

New York Times

China Cracks Down on Illegal Rare Earth Mines

The Snowstorm

Transit Update

Stir Crazy

Snow Removal

Document Outline

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

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

Ye New Doctype

<!DOCTYPE html>

Go Block

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

Getting Internet Explorer to behave<head>

...



...

</head>

http://html5shiv.googlecode.com/svn/trunk/html5.js

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




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 Pilgrimhttp://diveintohtml5.org/video.html

“Flash Player: CPU Hog or Hot Tamale? It Depends.”http://www.streaminglearningcenter.com/articles/flash-player-cpu-hog-or-hot-tamale-it-depends-.html

http://diveintohtml5.org/video.html

http://diveintohtml5.org/video.html

http://www.streaminglearningcenter.com/articles/flash-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/

http://24ways.org/2010/the-state-of-html5-audio

http://24ways.org/2010/the-state-of-html5-audio

http://thinkvitamin.com/code/html5-audio-unplugged/

http://thinkvitamin.com/code/html5-audio-unplugged/

http://html5doctor.com/author/markb/

http://html5doctor.com/author/markb/



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 Pacmanhttp://google.com/pacman/

Wolfenstein 3Dhttp://www.nihilogic.dk/labs/wolf/

Arcade Fire “The Wilderness Downtown”http://www.thewildernessdowntown.com/

Biolab Disasterhttp://playbiolab.com/

Quake II WebGL porthttp://code.google.com/p/quake2-gwt-port/

True 8-bit Color Cycling with HTML5http://www.effectgames.com/demos/canvascycle/?sound=0

http://google.com/pacman/

http://google.com/pacman/

http://www.nihilogic.dk/labs/wolf/

http://www.nihilogic.dk/labs/wolf/

http://www.thewildernessdowntown.com/

http://www.thewildernessdowntown.com/

http://playbiolab.com/

http://playbiolab.com/

http://code.google.com/p/quake2-gwt-port/

http://code.google.com/p/quake2-gwt-port/

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"><input type="datetime-local">

Opera 9

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

http://hacks.mozilla.org/2009/12/multiple-file-input-in-firefox-3-6/

http://hacks.mozilla.org/2009/12/multiple-file-input-in-firefox-3-6/

http://diveintohtml5.org/forms.html

http://diveintohtml5.org/forms.html

What HTML5 is not

What HTML5 is not...

CSS

SVG

WOFF

Web Workers

Geolocation

God

Web Storage

Turducken

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



http://slides.html5rocks.com

http://slides.html5rocks.com/#formula-intro-slide

http://slides.html5rocks.com/#formula-intro-slide

Boooooo!

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



“It’s as if the government suddenly announced that from today, all

vegetables will be called potatoes, just because 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

AjaxWeb 2.0HTML5

Buzzword-o-matic

Web5

Web5 Geolocation

Browser Support

Getting Location

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

Using Location

function 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

http://diveintohtml5.org/geolocation.html

http://diveintohtml5.org/geolocation.html

http://html5demos.com/geo

http://html5demos.com/geo

Modernizr - Faruk Ates, Paul Irishhttp://www.modernizr.com/

HTML5 Boilerplate - Paul Irishhttp://html5boilerplate.com/

W3Schools HTML5 Referencehttp://www.w3schools.com/html5/html5_reference.asp

HTML5 Doctor - Bruce Lawson, Remy Sharpe, etchttp://html5doctor.com/

Quirks Modehttp://www.quirksmode.org/

Online Resources

http://farukat.es/

http://farukat.es/

http://paulirish.com/

http://paulirish.com/

http://www.modernizr.com/

http://www.modernizr.com/

http://html5boilerplate.com/

http://html5boilerplate.com/

http://www.w3schools.com/html5/html5_reference.asp




http://html5doctor.com/

http://html5doctor.com/

http://www.quirksmode.org/

http://www.quirksmode.org/

HTML5 for Web DesignersJeremy Keith

Introducing HTML5Bruce Lawson and Remy Sharp

HTML5: Up and RunningMark Pilrim

Books

Thank You

Brad Touesnardhttp://bradt.ca

http://bradt.ca

http://bradt.ca

HTML5

Technology

Transcript of HTML5