HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
 

HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]

on

  • 6,761 views

Everyone’s going gaga over HTML5 and the plethora of how-tos and demos available on the web are inspirational, but often leave us with more questions than answers. In this session, Aaron Gustafson ...

Everyone’s going gaga over HTML5 and the plethora of how-tos and demos available on the web are inspirational, but often leave us with more questions than answers. In this session, Aaron Gustafson will focus his attention on HTML5 as a markup language, provide you with a solid context for its enhanced semantics, and show you simple, effective ways you can put it to use on your site today.

Statistics

Views

Total Views
6,761
Views on SlideShare
6,044
Embed Views
717

Actions

Likes
28
Downloads
258
Comments
0

21 Embeds 717

http://blog.easy-designs.net 191
http://timothycomeau.info 189
http://timothycomeau.com 119
http://paper.li 76
https://www.cs.ubbcluj.ro 40
http://www.cs.ubbcluj.ro 36
http://lanyrd.com 26
http://a0.twimg.com 8
http://eai 7
http://us-w1.rockmelt.com 6
http://agrega.educa.madrid.org 4
http://www.onlydoo.com 3
http://blog.timothycomeau.com 3
http://www.linkedin.com 2
http://www.foogletrends.com 1
https://drive.jolicloud.com 1
http://local.blog.easy-designs.net 1
http://flashattackcrew.blogspot.com 1
http://webcache.googleusercontent.com 1
http://news.northshorebreakingnews.com 1
http://localhost 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011] HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011] Presentation Transcript

  • Smart Markup for Smarter WebsitesAaron Gustafson@aarongustafsonslideshare.net/AaronGustafson
  • This is not a consensus-basedapproach — there’s no guaranteethat everyone will be happy! Thereis also no voting. — WHATWG process
  • <time>
  • <time>
  • Use<time>anyway.
  • In case of conflict, considerusers over authors overimplementors over specifiers overtheoretical purity. — HTML design principle
  • June 2004 WhatWG begins work 2007 May 2011 2014 on Web Applications 1.0 Work begins at W3C HTML5 to Last Call HTML5 Standard?2004 2014
  • fault tolerancen. a system’s ability to continueto operate when it encountersand unexpected error.
  • Browsers ignorewhat they don’t understand
  • FUTURE OF WEB DESIGN NYC 2011Fault tolerance <p>HTML5 introduces several <em>really</em> useful elements and a ton of new APIs.</p> <p>Please fill out the form below. <strong>Note: all fields are required.</strong></p> <p>I like to work with markup languages because <strong>they are simple and easy to read</strong>. They also have that certain <i lang="fr" title="I don&#8217;t know what">je ne sais quoi</i>.</p>
  • FUTURE OF WEB DESIGN NYC 2011Fault tolerance HTML5 introduces several really useful elements and a ton of new APIs. Please fill out the form below. Note: all fields are required. I like to work with markup languages because they are simple and easy to read. They also have that certain je ne sais quoi.
  • FUTURE OF WEB DESIGN NYC 2011Fault tolerance <video poster=”poster.png”> <source src=”video.m4v”/> <source src=”video.webm”/> <source src=”video.ogv”/> <img src=”poster.png” alt=””/> <ul> <li><a href="video.m4v">Download MP4</a></li> <li><a href="video.webm">Download WebM</a></li> <li><a href="video ogv">Download Ogg</a></li> </ul> </video>
  • FUTURE OF WEB DESIGN NYC 2011Fault tolerance <img src=”poster.png” alt=””/> <ul> <li><a href="video.m4v">Download MP4</a></li> <li><a href="video.webm">Download WebM</a></li> <li><a href="video ogv">Download Ogg</a></li> </ul>
  • FUTURE OF WEB DESIGN NYC 2011Fault tolerance <input type="date" name="dob"/> I get it! I don’t get it :-(
  • You are already using HTML5
  • HTML5 == HTML 4
  • HTML5 == HTML 3
  • HTML5 == HTML 2
  • HTML5 == HTML 1
  • HTML5 == HTML 0
  • FUTURE OF WEB DESIGN NYC 2011HTML 4.01 html meta head link style title base body dl dt dd bdo script noscript map dfn b object param p div ul ol li cite iframe address area img br a i small pre code abbr kbd var q samp hr menu textarea ins del sub sup span strong select option optgroup label input form fieldset legend button u em blockquote h1 h2 h3 h4 h5 h6 table caption col colgroup thead tbody tfoot tr th td
  • FUTURE OF WEB DESIGN NYC 2011HTML5 html meta head link style title base body dl dt dd section article bdo script noscript map dfn b aside details summary object param p div ul ol li cite canvas audio video iframe address area img br a i small nav figure figcaption pre code abbr kbd var q samp hr menu header footer command textarea ins del sub sup span strong time source datalist select option optgroup label input output ruby progress form fieldset legend button u em mark hgroup meter blockquote h1 h2 h3 h4 h5 h6 wbr keygen embed table caption col colgroup rt rp thead tbody tfoot tr th td
  • FUTURE OF WEB DESIGN NYC 2011Our focus today html meta head link style title base body dl dt dd section article bdo script noscript map dfn b aside details summary object param p div ul ol li cite canvas audio video iframe address area img br a i small nav figure figcaption pre code abbr kbd var q samp hr menu header footer command textarea ins del sub sup span strong time source datalist select option optgroup label input output ruby progress form fieldset legend button u em mark hgroup meter blockquote h1 h2 h3 h4 h5 h6 wbr keygen embed table caption col colgroup rt rp thead tbody tfoot tr th td
  • What’s the easiest way to“switch” a site to HTML5?
  • FUTURE OF WEB DESIGN NYC 2011Switching to HTML5 <!DOCTYPE html>
  • Simpli cation
  • FUTURE OF WEB DESIGN NYC 2011Simpli cation <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <html lang="en">
  • FUTURE OF WEB DESIGN NYC 2011Simpli cation <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta charset="utf-8" />
  • FUTURE OF WEB DESIGN NYC 2011Simpli cation <link rel="stylesheet" href="style-original.css" type="text/css" /> <style type=”text/css”> /* … */ </style> <script type=”text/javascript” src=”myscript.js”></script> <link rel="stylesheet" href="style-original.css" /> <style> /* … */ </style> <script src=”myscript.js”></script>
  • Rede nition
  • FUTURE OF WEB DESIGN NYC 2011Rede nitionThe em elementRepresents a span of text text with emphatic stress. <p>HTML5 introduces several <em>really</em> useful elements and a ton of new APIs.</p>The strong elementRepresents a span of text of great importance. <p>Please fill out the form below. <strong>Note: all fields are required.</strong></p>
  • FUTURE OF WEB DESIGN NYC 2011Rede nitionThe b elementRepresents a span of text offset from its surrounding content, but of no extraimportance. <p>This presentation is about <b>HTML5</b>.</p>The i elementRepresents a span of text that is borrowed or in an alternate voice or mood. <p>The <code>b</code> and <code>i</code> elements have been legitimized in HTML5. <i>Go figure.</i></p> <p>I like to work with markup languages because <strong>they are simple and easy to read</strong>. They also have that certain <i lang="fr" title="I don&#8217;t know what">je ne sais quoi</i>.</p>
  • FUTURE OF WEB DESIGN NYC 2011Rede nitionThe cite elementThe title of a cited work (e.g. a book, magazine, or journal). <p>In <cite>Web Form Design</cite>, Luke Wroblewski draws on original research, his considerable experience at Yahoo! and eBay, and the perspectives of many of the field’s leading designers to show you everything you need to know about designing effective and engaging Web forms.</p>
  • FUTURE OF WEB DESIGN NYC 2011Rede nitionThe small elementRepresents so-called “ ne print”(e.g. disclaimers, caveats, etc.).
  • FUTURE OF WEB DESIGN NYC 2011Rede nitionThe hr elementRepresents a paragraph-level thematic break.
  • Organization
  • FUTURE OF WEB DESIGN NYC 2011Organization <section> <!-- pretty much anything can go here --> </section> <article> <!-- pretty much anything can go here --> </article>
  • section
  • section > article
  • article
  • article > section
  • FUTURE OF WEB DESIGN NYC 2011Organization <header> <!-- titles, etc. go here --> </header> <footer> <!-- meta/supplementary information goes here --> </footer>
  • header
  • footer
  • article
  • article > header
  • article
  • article > footer
  • FUTURE OF WEB DESIGN NYC 2011Organization <nav> <ol> <li><a href="#details">Details</a></li> <li><a href="#lodging">Lodging</a></li> <li><a href="#location">Location</a></li> <li><a href="#topics">Topics</a></li> <li><a href="#contact">Contact Us</a></li> </ol> <p><a href="register">Register Now</a> <b>Only 5 spaces left</b></p> </nav>
  • nav
  • nav
  • FUTURE OF WEB DESIGN NYC 2011Organization <article> <!-- main content --> <aside> <!-- something related --> </aside> </article>
  • aside
  • FUTURE OF WEB DESIGN NYC 2011Organization <figure id="fig-1"> <img src="photo.jpeg" alt=""/> <figcaption>Photo of Albert Einstein</figcaption> </figure> <figure id="fig-2"> <table> <caption>2011 Forecast Earnings</caption> <!-- a bunch of data --> </table> </figure>
  • FUTURE OF WEB DESIGN NYC 2011Implicit sections (HTML 4) <h1> HTML5 <p> HTML5 is currently under development... <p> Like its immediate predecessors, HTML... <h2> W3C standardization process <p> The Web Hypertext Application... <p> The HTML5 specification... <p> According to the W3C timetable... <p> Ian Hickson, editor of the HTML5... <h2> Markup <p> HTML5 introduces a number of... <p> The HTML5 syntax is no longer... 1 HTML5 1.1 W3C standardization process 1.2 Markup
  • FUTURE OF WEB DESIGN NYC 2011Explicit sections (HTML5) <h1> HTML5 <p> HTML5 is currently under development... <p> Like its immediate predecessors, HTML... <h2> W3C standardization process section <p> The Web Hypertext Application... <p> The HTML5 specification... <p> According to the W3C timetable... <p> Ian Hickson, editor of the HTML5... <h2> Markup section <p> HTML5 introduces a number of... <p> The HTML5 syntax is no longer... 1 HTML5 1.1 W3C standardization process 1.2 Markup
  • FUTURE OF WEB DESIGN NYC 2011Explicit sections (HTML5) <h1> HTML5 <p> HTML5 is currently under development... <p> Like its immediate predecessors, HTML... <h1> W3C standardization process section <p> The Web Hypertext Application... <p> The HTML5 specification... <p> According to the W3C timetable... <p> Ian Hickson, editor of the HTML5... <h1> Markup section <p> HTML5 introduces a number of... <p> The HTML5 syntax is no longer... 1 HTML5 1.1 W3C standardization process 1.2 Markup
  • FUTURE OF WEB DESIGN NYC 2011Explicit sections (HTML5) <h1> HTML5 <p> HTML5 is currently under development... <p> Like its immediate predecessors, HTML... <h4> W3C standardization process section <p> The Web Hypertext Application... <p> The HTML5 specification... <p> According to the W3C timetable... <p> Ian Hickson, editor of the HTML5... <h6> Markup section <p> HTML5 introduces a number of... <p> The HTML5 syntax is no longer... 1 HTML5 1.1 W3C standardization process 1.2 Markup
  • FUTURE OF WEB DESIGN NYC 2011 Sections๏ section๏ article๏ aside๏ footer๏ header๏ nav 75
  • FUTURE OF WEB DESIGN NYC 2011Outline limitations in HTML4 <h1> Title <h2> Subtitle <p> Text content continues... <p> Text content continues... <p> Text content continues... <p> Text content continues... <p> Text content continues... <p> Text content continues... <p> Text content continues... 1 Title 1.1 Subtitle
  • FUTURE OF WEB DESIGN NYC 2011Heading groups (HTML5) hgroup <h1> Title <h2> Subtitle <p> Text content continues... <p> Text content continues... <p> Text content continues... <p> Text content continues... <p> Text content continues... <p> Text content continues... <p> Text content continues... 1 Title
  • FUTURE OF WEB DESIGN NYC 2011Aside: rooted sections <h1> Title <p> Text content continues... <p> Text content continues... <h2> Section heading <p> Text content continues... <blockquote> <h2> Rooted heading <p> Text content continues... <p> Text content continues... <p> Text content continues... <p> Text content continues... 1 Title 1.1 Section heading
  • FUTURE OF WEB DESIGN NYC 2011 Sectioning roots๏ body๏ blockquote๏ details๏ fieldset๏ figure๏ td 79
  • Accessibility
  • FUTURE OF WEB DESIGN NYC 2011What is it?
  • FUTURE OF WEB DESIGN NYC 2011What is it?
  • FUTURE OF WEB DESIGN NYC 2011What is it? <button>Tweet</button> <a class=”button”>Tweet</a>
  • FUTURE OF WEB DESIGN NYC 2011What is it? <button>Tweet</button> <a class=”button”>Tweet</a>
  • FUTURE OF WEB DESIGN NYC 2011What is it?
  • FUTURE OF WEB DESIGN NYC 2011What is it?
  • FUTURE OF WEB DESIGN NYC 2011What is it? <button>Search Mail</button> <div>Search Mail</div>
  • FUTURE OF WEB DESIGN NYC 2011What is it? <button>Search Mail</button> <div>Search Mail</div>
  • FUTURE OF WEB DESIGN NYC 2011ARIA maps the OS to the web
  • Semantics+
  • FUTURE OF WEB DESIGN NYC 2011All the web’s a play… <section id="main" role="main"> <!-- The primary content for the page would go here --> </section>
  • <header role="banner">
  • <nav role="navigation">
  • <form role="search">
  • <section role="main">
  • FUTURE OF WEB DESIGN NYC 2011Semantic comparison Ad-hoc ARIA Role HTML5 #header, #top banner header (kind of) #main, #content main none #extra, .sidebar complementary, note aside #footer, #bottom contentinfo footer #nav navigation nav .hentry article article
  • FUTURE OF WEB DESIGN NYC 2011These are the droids you seek <span role="button">OK</span> <div role="alert"> <p>Something went wrong.</p> </div> <div role="alertdialog"> <p>Something went wrong.</p> <img src="x.png" alt="dismiss" role="button" /> </div>
  • FUTURE OF WEB DESIGN NYC 2011What is it? <a role=”button”>Tweet</a> class=”button”>Tweet</a>
  • FUTURE OF WEB DESIGN NYC 2011What is it? <a role=”button”>Tweet</a>
  • FUTURE OF WEB DESIGN NYC 2011 96
  • FUTURE OF WEB DESIGN NYC 2011 97
  • FUTURE OF WEB DESIGN NYC 2011What’s happening? B B (off) (on) <span> <img src="bold-off.png" alt="bold" /> </span> <span> <img src="bold-on.png" alt="bold" /> </span>
  • FUTURE OF WEB DESIGN NYC 2011What’s happening? B B (off) (on) <span> <img src="bold-off.png" alt="not bold" /> </span> <span> <img src="bold-on.png" alt="bold" /> </span>
  • FUTURE OF WEB DESIGN NYC 2011What’s happening? B B (off) (on) <span role="button" aria-pressed="false"> <img src="bold-off.png" alt="not bold" /> </span> <span role="button" aria-pressed="true"> <img src="bold-on.png" alt="bold" /> </span>
  • FUTURE OF WEB DESIGN NYC 2011Hey! Over here!
  • FUTURE OF WEB DESIGN NYC 2011Hey! Over here! <input class="tweet-counter" value="140" disabled="disabled">
  • FUTURE OF WEB DESIGN NYC 2011Hey! Over here! <span id="chars_left_notice" class="numeric"> <strong id="status-field-char-counter" class="char-counter">140</strong> </span>
  • FUTURE OF WEB DESIGN NYC 2011Hey! Over here! <span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span> .hidden { position: absolute; left: −999em; }
  • FUTURE OF WEB DESIGN NYC 2011Hey! Over here! <span class="tweet-counter">maximum of 140 characters</span> <span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span>
  • FUTURE OF WEB DESIGN NYC 2011Hey! Over here! <span aria-live="polite" aria-atomic="true" class="tweet-counter">140<b class="hidden"> characters remaining</b></span>
  • FUTURE OF WEB DESIGN NYC 2011Hey! Over here!
  • Expansion
  • time
  • FUTURE OF WEB DESIGN NYC 2011Expansion 9+ 4+ 6+ 5+ 11.1+ <time>October 25, 2010 8:11 PM</time>
  • FUTURE OF WEB DESIGN NYC 2011Expansion 9+ 4+ 6+ 5+ 11.1+ <time datetime="2010-10-25T20:11:00-05:00"> October 25, 2010 8:11 PM</time>
  • FUTURE OF WEB DESIGN NYC 2011Expansion 9+ 4+ 6+ 5+ 11.1+ <time datetime="2010-10-25T20:11:00-05:00" pubdate="pubdate">October 25, 2010 8:11 PM</time>
  • mark
  • mark
  • FUTURE OF WEB DESIGN NYC 2011Expansion 9+ 4+ 6+ 5+ 11.1+ <ol id="search-results"> <li> <h3><a href="...">Web Upgrade <mark>HTML5</mark> May Weaken Privacy</a></h3> <p>The new language, <mark>HTML5</mark>, could give marketers access to many more details about users online activities.</p> </li> </ol>
  • FUTURE OF WEB DESIGN NYC 2011Expansion <input type="email" …/> <input type="url" …/>
  • FUTURE OF WEB DESIGN NYC 2011Expansion <input type="date" name="dob"/>
  • FUTURE OF WEB DESIGN NYC 2011Expansion <input type="number" name="foo"/> <input type="range" min="1" max="11" name="foo"/>
  • FUTURE OF WEB DESIGN NYC 2011Expansion <input type="text" pattern="d{6}w{3}" placeholder="6 digits followed by 3 letters" .../>
  • FUTURE OF WEB DESIGN NYC 2011Expansion <input type="text" list="countries" name="country"/> <datalist id="countries"> <option>Afghanistan</option> <option>Åland Islands</option> <!-- ... --> </datalist>
  • FUTURE OF WEB DESIGN NYC 2011Expansion <audio src="my.oga" controls="controls"></audio>
  • FUTURE OF WEB DESIGN NYC 2011Expansion <audio controls="controls"> <source src="my.mp3"/> <source src="my.oga"/> <!-- fallback --> </audio>
  • FUTURE OF WEB DESIGN NYC 2011Expansion <audio controls="controls" autobuffer="autobuffer" preload="auto"> <source src="my.mp3"/> <source src="my.oga"/> <!-- fallback --> </audio>
  • FUTURE OF WEB DESIGN NYC 2011Expansion <audio controls="controls" autobuffer="autobuffer" preload="auto"> <source src="my.mp3"/> <source src="my.oga"/> <ul> <li><a href="my.mp3">Download MP3</a></li> <li><a href="my.oga">Download Ogg</a></li> </ul> </audio>
  • FUTURE OF WEB DESIGN NYC 2011Expansion <audio controls="controls" autobuffer="autobuffer" preload="auto"> <source src="my.mp3"/> <source src="my.oga"/> <object …> <!-- flash player goes here --> <ul> <li><a href="my.mp3">Download MP3</a></li> <li><a href="my.oga">Download Ogg</a></li> </ul> </object> </audio>
  • FUTURE OF WEB DESIGN NYC 2011Expansion <video src="my.ogv" controls="controls"></video>
  • FUTURE OF WEB DESIGN NYC 2011Expansion <video controls="controls" width="640" height="480"> <source src="my.m4v"/> <source src="my.webm"/> <source src="my.ogv"/> <!-- fallback --> </video>
  • FUTURE OF WEB DESIGN NYC 2011Expansion <video controls="controls" width="640" height="480" poster="my.png"> <source src="my.m4v"/> <source src="my.webm"/> <source src="my.ogv"/> <!-- fallback --> </video>
  • FUTURE OF WEB DESIGN NYC 2011No MIME, no service AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm
  • FUTURE OF WEB DESIGN NYC 2011Expansion <video width="600" height="400" poster="/r/2-5.png" controls="controls" preload="none"> <source src="/r/2-5.m4v" type="video/mp4"/> <source src="/r/2-5.webm" type="video/webm"/> <source src="/r/2-5.ogv" type="video/ogg"/> <img src="/r/2-5.png" width="600" height="400" alt=""/> <ul> <li><a href="/r/2-5.m4v">Download as video/mp4</a></li> <li><a href="/r/2-5.webm">Download as video/webm</a></li> <li><a href="/r/2-5.ogv">Download as video/ogg</a></li> </ul> </video>
  • HTML5: Smart Markup for Smarter Websites by Aaron Gustafson More of the same: http://adaptivewebdesign.info http://easy-designs.net http://blog.easy-designs.net http://aaron-gustafson.com This presentation is licensed under Creative Commons Attribution-Noncommercial-Share Alike 3.0 flickr Photo Creditshttp://www. ickr.com/photos/aarongustafson/galleries/72157627920318847/