a practical guide to html5

WE’RE SPENDING AN HOUR ON EXISTENTIALISM. HOPE YOU BROUGHT A SNACK.

mat@matmarquis.comdribbble.com/

github.com/

twitter.com/

MARQUISMAT “WILTO”

wilto

wilto

wilto

IF ANYONE MENTIONS THE MARQUEE TAG THEY WILL BE ASKED TO LEAVE.

• New semantically-rich markup•

•

•

New semantically-rich markup•

Changes to the markup you know and love

•

•

New semantically-rich markup•

APIs that can access device-specific features•

Changes to the markup you know and love

•

•

New semantically-rich markup•

APIs that can access device-specific features•

•

Changes to the markup you know and love

APIs for caching and storing items in the browser

•

•

New semantically-rich markup•

APIs that can access device-specific features•

•

Changes to the markup you know and love

• CSS3

APIs for caching and storing items in the browser

•

•

New semantically-rich markup•

APIs that can access device-specific features•

•

Changes to the markup you know and love

• CSS3

APIs for caching and storing items in the browser

““ HTML5 DOES NOT INCLUDE JAVASCRIPT APIS, CSS3,

AMPERSANDS, OR CAT PICTURES!

SHOULDN’T YOU BE MAKING WEBSITES RIGHT NOW?

REMEMBER “CAPTAIN PLANET?” LIKE THAT, BUT WITHOUT THE MULLET.

EVERYTHING MAKES SENSE NOW.

•

•

•

•

•

•

SECTIONING ELEMENTS

<nav>

<footer>

<aside>

<header>headernavarticlesectionasidefooter

<section><aside>

<article>

<section>

•

•

•

•

•

•

The header element represents a group of introductory or navigational aids.

<nav>

<footer>

<aside>

<header>

SECTIONING ELEMENTSheadernavarticlesectionasidefooter

<section><aside>

<article>

<section>

•

•

•

•

•

•

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

<nav>

<footer>

<aside>

<header>headernavarticlesectionasidefooter

SECTIONING ELEMENTS

<section><aside>

<article>

<section>

•

•

•

•

•

•

The article element represents a self-contained document, page, application, or widget which is fit for syndication.

<nav>

<footer>

<aside>

<header>headernavarticlesectionasidefooter

SECTIONING ELEMENTS

<section><aside>

<article>

<section>

•

•

•

•

•

•

The section element represents a thematic grouping of content.

<nav>

<footer>

<aside>

<header>headernavarticlesectionasidefooter

SECTIONING ELEMENTS

<section><aside>

<article>

<section>

•

•

•

•

•

•

The aside element represents content that is related to the surrounding document/article, but could be considered separate from that content.

<nav>

<footer>

<aside>

<header>headernavarticlesectionasidefooter

SECTIONING ELEMENTS

<section><aside>

<article>

<section>

•

•

•

•

•

•

The footer element typically contains information about its section, such as authors, links to related documents, copyright information, etc.

<nav>

<section><aside>

<footer>

<aside>

<header>headernavarticlesectionasidefooter

SECTIONING ELEMENTS

<article>

<section>

• untitled header

•untitled document

• untitled nav

• untitled article

• untitled aside

• untitled footer

• untitled aside

• untitled section

DOCUMENT OUTLINE

• untitled section

• untitled header

•untitled document

• untitled nav

• untitled article

• untitled aside

• untitled footer

• untitled aside

• untitled section

DOCUMENT OUTLINE

• untitled section

<h1> Lorem ipsum dolor </h1>

<section><h1> Chapter One </h1><h2> In the Beginning </h2><p> ... </p><h2> Meanwhile, Back at the Ranch </h2><p> ... </p>

</section>

<section><h1> Chapter Two </h1><p> ... </p>

</section>

<aside><blockquote> <p> ... </p> </blockquote>

</aside>

<article>

</article>

<h1> Lorem ipsum dolor </h1>

<section><h1> Chapter One </h1><h2> In the Beginning </h2><p> ... </p><h2> Meanwhile, Back at the Ranch </h2><p> ... </p>

</section>

<section><h1> Chapter Two </h1><p> ... </p>

</section>

<aside><blockquote> <p> ... </p> </blockquote>

</aside>

<article>

</article>

<h1> Lorem ipsum dolor </h1>

<section><h1> Chapter One </h1><h2> In the Beginning </h2><p> ... </p><h2> Meanwhile, Back at the Ranch </h2><p> ... </p>

</section>

<section><h1> Chapter Two </h1><p> ... </p>

</section>

<aside><blockquote> <p> ... </p> </blockquote>

</aside>

<article>

</article>

<section><h1> Chapter One </h1><h2> In the Beginning </h2><p> ... </p><h2> Meanwhile, Back at the Ranch </h2><p> ... </p>

</section>

<section><h1> Chapter Two </h1><p> ... </p>

</section>

<aside><blockquote> <p> ... </p> </blockquote>

</aside>

<article>

</article>

<h1> Lorem ipsum dolor </h1>

• untitled header

•untitled document

• untitled nav

• Lorem Ipsum Dolor

• untitled aside

• untitled footer

• untitled aside

• Chapter One

DOCUMENT OUTLINE

• In The Beginning

• Meanwhile, Back at the Ranch

• Chapter Two

• untitled header

•untitled document

• untitled nav

• Lorem Ipsum Dolor

• untitled aside

• untitled footer

• untitled aside

• Chapter One

DOCUMENT OUTLINE

• In The Beginning

• Meanwhile, Back at the Ranch

• Chapter Two

http://wil.to/html5/2

HTML5 Outliner for ChromeGenerates a navigable page outline with heading and sectioning elements.

meterRepresents a scalar measurement within a known range, or a fractional value. <meter>2 of 6 gigabytes</meter> used.

•

MORE NEW HOTNESS

meterRepresents a scalar measurement within a known range, or a fractional value. <meter>2 of 6 gigabytes</meter> used.

•

progressRepresents the completion progress of a task within a known range.<progress max="100">80%</meter> complete.

•

MORE NEW HOTNESS

meterRepresents a scalar measurement within a known range, or a fractional value. <meter>2 of 6 gigabytes</meter> used.

•

progressRepresents the completion progress of a task within a known range.<progress max="100">80%</meter> complete.

•

timeRepresents dates and times in a machine-readable way.On <time datetime="2010-05-24T02:55:30-04:00">May 24th 2010, 2:55am EDT</time>.

•

MORE NEW HOTNESS

meterRepresents a scalar measurement within a known range, or a fractional value. <meter>2 of 6 gigabytes</meter> used.

•

progressRepresents the completion progress of a task within a known range.<progress max="100">80%</meter> complete.

•

timeRepresents dates and times in a machine-readable way.On <time datetime="2010-05-24T02:55:30-04:00">May 24th 2010, 2:55am EDT</time>.

•

outputRepresents the result of a calculation.<input type="number" value="2"/> + <input type="number" value="2"/> = <output>4</output>

•

MORE NEW HOTNESS

meterRepresents a scalar measurement within a known range, or a fractional value. <meter>2 of 6 gigabytes</meter> used.

•

progressRepresents the completion progress of a task within a known range.<progress max="100">80%</meter> complete.

•

timeRepresents dates and times in a machine-readable way.On <time datetime="2010-05-24T02:55:30-04:00">May 24th 2010, 2:55am EDT</time>.

•

outputRepresents the result of a calculation.<input type="number" value="2"/> + <input type="number" value="2"/> = <output>4</output>

•

blinkIs gone, and if I ever catch you using it again so help me, guys.

•

MORE NEW HOTNESS

meterRepresents a scalar measurement within a known range, or a fractional value. <meter>2 of 6 gigabytes</meter> used.

•

progressRepresents the completion progress of a task within a known range.<progress max="100">80%</meter> complete.

•

timeRepresents dates and times in a machine-readable way.On <time datetime="2010-05-24T02:55:30-04:00">May 24th 2010, 2:55am EDT</time>.

•

outputRepresents the result of a calculation.<input type="number" value="2"/> + <input type="number" value="2"/> = <output>4</output>

•

blinkIs gone, and if I ever catch you using it again so help me, guys.

•

MORE NEW HOTNESS

http://developers.whatwg.org/

The HTML5 Spec for Web DevelopersFormatted for readability and quick access to information.

YOU KNEW IT WOULD COME UP EVENTUALLY

YOU KNEW IT WOULD COME UP EVENTUALLY

http://wil.to/html5/3

HTML5 Support in IE 6/7/8Remy Sharp’s HTML5-enabling script for Internet Explorer.

REPURPOSED ELEMENTS<dl>, <dt>, and <dd>An association list consisting of zero or more key-value groups.

<dl> <dt>Full Name:</dt> <dd>John Smith</dd> <dt>Occupation:</dt> <dd>Doctor</dd></dt>

REPURPOSED ELEMENTS<b>Text stylistically offset from the surrounding text without extra importance.

<b class="drop-cap">S</b>herlock Holmes, who was usually late…

REPURPOSED ELEMENTS<small>“Small print,” as in disclaimers, caveats, legal restrictions, or copyrights.

<small>Copyright Mat “Wilto” Marquis, 2010</small>

REPURPOSED ELEMENTS<cite>Represents the title of a work (a book, song, film, etc.)—but not a person’s name.

<p>I don’t quite agree with the <cite>HTML5 spec</cite> here.</p>

REPURPOSED ELEMENTS<address>Contact information for the current article or document—not a postal address.

<address>Posted by: <a href="http://twitter.com/wilto">Mat</a></address>

STOP ME IF YOU’VE HEARD OF THIS ONE

BORDER-RADIUS

BOX-SHADOW

NOT PARTICULARLY EXCITING

VENDOR PREFIXES

VENDOR PREFIXES• -webkit-

VENDOR PREFIXES•

•

-webkit-

-moz-

VENDOR PREFIXES•

•

-webkit-

-moz-• -o-

VENDOR PREFIXES•

•

-webkit-

-moz-•

•

-o-

-ms-

TRANSITIONSa { color: #777; -webkit-transition: color .2s linear; -moz-transition: color .2s linear; -ms-transition: color .2s linear; -o-transition: color .2s linear; transition: color .2s linear;}a:hover { color: #bada55;}

TRANSITIONSa { color: #777; -webkit-transition: color .2s linear; -moz-transition: color .2s linear; -ms-transition: color .2s linear; -o-transition: color .2s linear; transition: color .2s linear;}a:hover { color: #bada55;}http://wil.to/html5/transitions

Transition Demo

GRADIENTSbackground: -moz-linear-gradient( top, #1e5799 0%, #7db9e8 100% );background: -webkit-gradient( linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8) );background: -o-linear-gradient( top, #1e5799 0%, #7db9e8 100% );

GRADIENTS

background: -moz-linear-gradient( top, #1e5799 0%, #7db9e8 100% );background: -webkit-gradient( linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8) );background: -o-linear-gradient( top, #1e5799 0%, #7db9e8 100% );

background: #1e5799 url(img/gradient.jpg);

background: -moz-linear-gradient( top, #1e5799 0%, #7db9e8 100% );background: -webkit-gradient( linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8) );background: -o-linear-gradient( top, #1e5799 0%, #7db9e8 100% );

background: #1e5799 url(img/gradient.jpg);

GRADIENTS

http://wil.to/html5/6

CSS3 Gradient GeneratorA tool to generate the appropriate vendor-prefixed gradient syntax.

background: -moz-linear-gradient( top, #1e5799 0%, #7db9e8 100% );background: -webkit-gradient( linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8) );background: -o-linear-gradient( top, #1e5799 0%, #7db9e8 100% );

background: #1e5799 url(img/gradient.jpg);

GRADIENTS

http://wil.to/html5/gradients/

CSS3 Gradient Demo

FONT-FACE@font-face { font-family: 'AllerBold'; src: url('aller_bd-webfont.eot'); src: url('aller_bd-webfont.eot?#iefix') format('embedded-opentype'), url('aller_bd-webfont.woff') format('woff'), url('aller_bd-webfont.ttf') format('truetype'), url('aller_bd-webfont.svg#AllerBold') format('svg');}

FONT-FACE@font-face { font-family: 'AllerBold'; src: url('aller_bd-webfont.eot'); src: url('aller_bd-webfont.eot?#iefix') format('embedded-opentype'), url('aller_bd-webfont.woff') format('woff'), url('aller_bd-webfont.ttf') format('truetype'), url('aller_bd-webfont.svg#AllerBold') format('svg');}http://www.fontsquirrel.com/

Font SquirrelA repository of free and @font-face licensed fonts, as well as a toolto generate the appropriate @font-face syntax.

FONT-FACE@font-face { font-family: 'AllerBold'; src: url('aller_bd-webfont.eot'); src: url('aller_bd-webfont.eot?#iefix') format('embedded-opentype'), url('aller_bd-webfont.woff') format('woff'), url('aller_bd-webfont.ttf') format('truetype'), url('aller_bd-webfont.svg#AllerBold') format('svg');}http://wil.to/html5/font-face

@font-face demo

GO-GO-GADGET: AWESOME.

GEOLOCATIONfunction geo( position ) { alert( 'Latitude: ' + position.coords.latitude ); alert( 'Longitude: ' + position.coords.longitude );}navigator.geolocation.getCurrentPosition( geo );

GEOLOCATIONfunction geo( position ) { alert( 'Latitude: ' + position.coords.latitude ); alert( 'Longitude: ' + position.coords.longitude );}navigator.geolocation.getCurrentPosition( geo );

http://wtfmbta.com/

Geolocation DemoWaiting There Forever: My Bus Tracking App.

DEVICE ORIENTATIONfunction orientation( event ) { var rotation = event.gamma * -.8, scale = ( event.beta / 180 ) * 2.25 + 1; alert( 'Rotation: ' + rotation + ' Scale: ' + scale );}window.addEventListener('deviceorientation', orientation );

DEVICE ORIENTATIONfunction orientation( event ) { var rotation = event.gamma * -.8, scale = ( event.beta / 180 ) * 2.25 + 1; alert( 'Rotation: ' + rotation + ' Scale: ' + scale );}window.addEventListener('deviceorientation', orientation );

http://wil.to/html5/device-orientation

Device Orientation Demo

HAVE YOU GUYS EVER BEEN “OFFLINE?” IT’S SCARY.

LOCAL STORAGElocalStorage.setItem('variableName', true)

alert( localStorage.getItem('variableName') );// It’s that easy.

LOCAL STORAGElocalStorage.setItem('variableName', true)

alert( localStorage.getItem('variableName') );// It’s that easy.

http://wil.to/html5/local-storage

Local Storage DemoA to-do list app using the localStorage API.

http://www.modernizr.com/

ModernizrA library of tests to check for CSS3 and HTML5 API support on the client side.

http://wil.to/html5/4

Cross Browser PolyfillsBringing HTML5 APIs to browsers that don't natively support them.

YOU MAY NOW ADD “HTML5 GURU” TO YOUR RESUME.

RESOURCES

http://wil.to/html5http://developers.whatwg.orgpester me on the internet (@wilto)