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.          ...
<time>
<time>
Use<time>anyway.
In case of conflict, considerusers over authors overimplementors over specifiers overtheoretical purity.             — HTM...
June 2004 WhatWG begins work        2007                 May 2011             2014 on Web Applications 1.0   Work begins a...
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 ...
FUTURE OF WEB DESIGN NYC 2011Fault tolerance HTML5 introduces several really useful elements and a ton of new APIs. Please...
FUTURE OF WEB DESIGN NYC 2011Fault tolerance <video poster=”poster.png”>  <source src=”video.m4v”/>  <source src=”video.we...
FUTURE OF WEB DESIGN NYC 2011Fault tolerance    <img src=”poster.png” alt=””/>    <ul>     <li><a href="video.m4v">Downloa...
FUTURE OF WEB DESIGN NYC 2011Fault tolerance <input type="date" name="dob"/>                    I get it!      I don’t get...
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     ...
FUTURE OF WEB DESIGN NYC 2011HTML5                                html                       meta head link style         ...
FUTURE OF WEB DESIGN NYC 2011Our focus today                                html                       meta head link styl...
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">...
FUTURE OF WEB DESIGN NYC 2011Simpli cation <meta http-equiv="Content-Type"       content="text/html; charset=utf-8"> <meta...
FUTURE OF WEB DESIGN NYC 2011Simpli cation <link rel="stylesheet" href="style-original.css" type="text/css" /> <style type...
Rede nition
FUTURE OF WEB DESIGN NYC 2011Rede nitionThe em elementRepresents a span of text text with emphatic stress. <p>HTML5 introd...
FUTURE OF WEB DESIGN NYC 2011Rede nitionThe b elementRepresents a span of text offset from its surrounding content, but of ...
FUTURE OF WEB DESIGN NYC 2011Rede nitionThe cite elementThe title of a cited work (e.g. a book, magazine, or journal). <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>  <!-- ...
section
section > article
article
article > section
FUTURE OF WEB DESIGN NYC 2011Organization <header>  <!-- titles, etc. go here --> </header> <footer>  <!-- meta/supplement...
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"...
nav
nav
FUTURE OF WEB DESIGN NYC 2011Organization <article>    <!-- main content -->    <aside>     <!-- something related -->    ...
aside
FUTURE OF WEB DESIGN NYC 2011Organization <figure id="fig-1">  <img src="photo.jpeg" alt=""/>  <figcaption>Photo of Albert...
FUTURE OF WEB DESIGN NYC 2011Implicit sections (HTML 4)                                <h1> HTML5                         ...
FUTURE OF WEB DESIGN NYC 2011Explicit sections (HTML5)                                      <h1> HTML5                    ...
FUTURE OF WEB DESIGN NYC 2011Explicit sections (HTML5)                                      <h1> HTML5                    ...
FUTURE OF WEB DESIGN NYC 2011Explicit sections (HTML5)                                      <h1> HTML5                    ...
FUTURE OF WEB DESIGN NYC 2011    Sections๏   section๏   article๏   aside๏   footer๏   header๏   nav                       ...
FUTURE OF WEB DESIGN NYC 2011Outline limitations in HTML4                                <h1> Title                       ...
FUTURE OF WEB DESIGN NYC 2011Heading groups (HTML5)                            hgroup                                     ...
FUTURE OF WEB DESIGN NYC 2011Aside: rooted sections                                <h1> Title                             ...
FUTURE OF WEB DESIGN NYC 2011    Sectioning roots๏   body๏   blockquote๏   details๏   fieldset๏   figure๏   td            ...
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 ...
<header role="banner">
<nav role="navigation">
<form role="search">
<section role="main">
FUTURE OF WEB DESIGN NYC 2011Semantic comparison              Ad-hoc                   ARIA Role               HTML5 #head...
FUTURE OF WEB DESIGN NYC 2011These are the droids you seek <span role="button">OK</span> <div role="alert">  <p>Something ...
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                                (of...
FUTURE OF WEB DESIGN NYC 2011What’s happening?                                B       B                                (of...
FUTURE OF WEB DESIGN NYC 2011What’s happening?                                B       B                                (of...
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-...
FUTURE OF WEB DESIGN NYC 2011Hey! Over here! <span class="tweet-counter">140  <b class="hidden"> characters remaining</b><...
FUTURE OF WEB DESIGN NYC 2011Hey! Over here! <span class="tweet-counter">maximum of 140 characters</span> <span class="twe...
FUTURE OF WEB DESIGN NYC 2011Hey! Over here! <span aria-live="polite" aria-atomic="true"       class="tweet-counter">140<b...
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:1...
FUTURE OF WEB DESIGN NYC 2011Expansion                                  9+   4+   6+   5+   11.1+ <time datetime="2010-10-...
FUTURE OF WEB DESIGN NYC 2011Expansion                                  9+   4+   6+    5+   11.1+ <time datetime="2010-10...
mark
mark
FUTURE OF WEB DESIGN NYC 2011Expansion                                    9+   4+   6+   5+   11.1+ <ol id="search-results...
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 ...
FUTURE OF WEB DESIGN NYC 2011Expansion <input type="text" list="countries" name="country"/> <datalist id="countries">  <op...
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"/>  <!-- f...
FUTURE OF WEB DESIGN NYC 2011Expansion <audio controls="controls" autobuffer="autobuffer"         preload="auto">  <source...
FUTURE OF WEB DESIGN NYC 2011Expansion <audio controls="controls" autobuffer="autobuffer"         preload="auto">  <source...
FUTURE OF WEB DESIGN NYC 2011Expansion <audio controls="controls" autobuffer="autobuffer"         preload="auto">  <source...
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"/>  <sour...
FUTURE OF WEB DESIGN NYC 2011Expansion <video controls="controls" width="640" height="480"         poster="my.png">  <sour...
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" pre...
HTML5: Smart Markup              for Smarter Websites                          by Aaron Gustafson                         ...
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
Upcoming SlideShare
Loading in …5
×

HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]

9,214
-1

Published on

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.

Published in: Technology, Design
0 Comments
29 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
9,214
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
296
Comments
0
Likes
29
Embeds 0
No embeds

No notes for slide

HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]

  1. Smart Markup for Smarter WebsitesAaron Gustafson@aarongustafsonslideshare.net/AaronGustafson
  2. This is not a consensus-basedapproach — there’s no guaranteethat everyone will be happy! Thereis also no voting. — WHATWG process
  3. <time>
  4. <time>
  5. Use<time>anyway.
  6. In case of conflict, considerusers over authors overimplementors over specifiers overtheoretical purity. — HTML design principle
  7. 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
  8. fault tolerancen. a system’s ability to continueto operate when it encountersand unexpected error.
  9. Browsers ignorewhat they don’t understand
  10. 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’t know what">je ne sais quoi</i>.</p>
  11. 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.
  12. 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>
  13. 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>
  14. FUTURE OF WEB DESIGN NYC 2011Fault tolerance <input type="date" name="dob"/> I get it! I don’t get it :-(
  15. You are already using HTML5
  16. HTML5 == HTML 4
  17. HTML5 == HTML 3
  18. HTML5 == HTML 2
  19. HTML5 == HTML 1
  20. HTML5 == HTML 0
  21. 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
  22. 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
  23. 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
  24. What’s the easiest way to“switch” a site to HTML5?
  25. FUTURE OF WEB DESIGN NYC 2011Switching to HTML5 <!DOCTYPE html>
  26. Simpli cation
  27. FUTURE OF WEB DESIGN NYC 2011Simpli cation <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <html lang="en">
  28. FUTURE OF WEB DESIGN NYC 2011Simpli cation <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta charset="utf-8" />
  29. 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>
  30. Rede nition
  31. 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>
  32. 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’t know what">je ne sais quoi</i>.</p>
  33. 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>
  34. FUTURE OF WEB DESIGN NYC 2011Rede nitionThe small elementRepresents so-called “ ne print”(e.g. disclaimers, caveats, etc.).
  35. FUTURE OF WEB DESIGN NYC 2011Rede nitionThe hr elementRepresents a paragraph-level thematic break.
  36. Organization
  37. FUTURE OF WEB DESIGN NYC 2011Organization <section> <!-- pretty much anything can go here --> </section> <article> <!-- pretty much anything can go here --> </article>
  38. section
  39. section > article
  40. article
  41. article > section
  42. FUTURE OF WEB DESIGN NYC 2011Organization <header> <!-- titles, etc. go here --> </header> <footer> <!-- meta/supplementary information goes here --> </footer>
  43. header
  44. footer
  45. article
  46. article > header
  47. article
  48. article > footer
  49. 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>
  50. nav
  51. nav
  52. FUTURE OF WEB DESIGN NYC 2011Organization <article> <!-- main content --> <aside> <!-- something related --> </aside> </article>
  53. aside
  54. 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>
  55. 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
  56. 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
  57. 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
  58. 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
  59. FUTURE OF WEB DESIGN NYC 2011 Sections๏ section๏ article๏ aside๏ footer๏ header๏ nav 75
  60. 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
  61. 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
  62. 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
  63. FUTURE OF WEB DESIGN NYC 2011 Sectioning roots๏ body๏ blockquote๏ details๏ fieldset๏ figure๏ td 79
  64. Accessibility
  65. FUTURE OF WEB DESIGN NYC 2011What is it?
  66. FUTURE OF WEB DESIGN NYC 2011What is it?
  67. FUTURE OF WEB DESIGN NYC 2011What is it? <button>Tweet</button> <a class=”button”>Tweet</a>
  68. FUTURE OF WEB DESIGN NYC 2011What is it? <button>Tweet</button> <a class=”button”>Tweet</a>
  69. FUTURE OF WEB DESIGN NYC 2011What is it?
  70. FUTURE OF WEB DESIGN NYC 2011What is it?
  71. FUTURE OF WEB DESIGN NYC 2011What is it? <button>Search Mail</button> <div>Search Mail</div>
  72. FUTURE OF WEB DESIGN NYC 2011What is it? <button>Search Mail</button> <div>Search Mail</div>
  73. FUTURE OF WEB DESIGN NYC 2011ARIA maps the OS to the web
  74. Semantics+
  75. 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>
  76. <header role="banner">
  77. <nav role="navigation">
  78. <form role="search">
  79. <section role="main">
  80. 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
  81. 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>
  82. FUTURE OF WEB DESIGN NYC 2011What is it? <a role=”button”>Tweet</a> class=”button”>Tweet</a>
  83. FUTURE OF WEB DESIGN NYC 2011What is it? <a role=”button”>Tweet</a>
  84. FUTURE OF WEB DESIGN NYC 2011 96
  85. FUTURE OF WEB DESIGN NYC 2011 97
  86. 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>
  87. 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>
  88. 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>
  89. FUTURE OF WEB DESIGN NYC 2011Hey! Over here!
  90. FUTURE OF WEB DESIGN NYC 2011Hey! Over here! <input class="tweet-counter" value="140" disabled="disabled">
  91. 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>
  92. 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; }
  93. 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>
  94. 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>
  95. FUTURE OF WEB DESIGN NYC 2011Hey! Over here!
  96. Expansion
  97. time
  98. FUTURE OF WEB DESIGN NYC 2011Expansion 9+ 4+ 6+ 5+ 11.1+ <time>October 25, 2010 8:11 PM</time>
  99. 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>
  100. 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>
  101. mark
  102. mark
  103. 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>
  104. FUTURE OF WEB DESIGN NYC 2011Expansion <input type="email" …/> <input type="url" …/>
  105. FUTURE OF WEB DESIGN NYC 2011Expansion <input type="date" name="dob"/>
  106. FUTURE OF WEB DESIGN NYC 2011Expansion <input type="number" name="foo"/> <input type="range" min="1" max="11" name="foo"/>
  107. FUTURE OF WEB DESIGN NYC 2011Expansion <input type="text" pattern="d{6}w{3}" placeholder="6 digits followed by 3 letters" .../>
  108. FUTURE OF WEB DESIGN NYC 2011Expansion <input type="text" list="countries" name="country"/> <datalist id="countries"> <option>Afghanistan</option> <option>Åland Islands</option> <!-- ... --> </datalist>
  109. FUTURE OF WEB DESIGN NYC 2011Expansion <audio src="my.oga" controls="controls"></audio>
  110. FUTURE OF WEB DESIGN NYC 2011Expansion <audio controls="controls"> <source src="my.mp3"/> <source src="my.oga"/> <!-- fallback --> </audio>
  111. FUTURE OF WEB DESIGN NYC 2011Expansion <audio controls="controls" autobuffer="autobuffer" preload="auto"> <source src="my.mp3"/> <source src="my.oga"/> <!-- fallback --> </audio>
  112. 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>
  113. 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>
  114. FUTURE OF WEB DESIGN NYC 2011Expansion <video src="my.ogv" controls="controls"></video>
  115. 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>
  116. 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>
  117. FUTURE OF WEB DESIGN NYC 2011No MIME, no service AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm
  118. 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>
  119. 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/

×