a practical guide to html5
DESCRIPTION
"A Practical Guide to HTML5" was delivered by Mat Marquis (@wilto) of Marquis Design on May 11th, 2011 at Harvard University's Lamont Library Forum Room.TRANSCRIPT
WE’RE SPENDING AN HOUR ON EXISTENTIALISM. HOPE YOU BROUGHT A SNACK.
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)