Smart Markup for         Smarter WebsitesAaron GustafsonEasy Designs, LLC@AaronGustafsonslideshare.net/AaronGustafson
HTML5 givesyou morecontrolover yourdocumentsand apps
Paving our “cowpaths”
The process is ongoing…
…but the end is near. June 2004 WhatWG begins work        2007                 May 2011             2014 on Web Applicatio...
You can use it now
fault tolerancen. a system’s ability to continue tooperate when it encounters andunexpected error.
Browsers ignorewhat they don’t  understand.
For example<input type="date" name="dob"/>
For example<video poster=”poster.png”> <source src=”video.m4v”/> <source src=”video.webm”/> <source src=”video.ogv”/> <img...
Now back to those cowpaths…
A great idea that we lost.                                                        Albert Einstein  <fig>   <img src="photo...
Microformats brought it back.                                     Albert Einstein  <div class="figure">   <img class="imag...
HTML5 re-imagined it.                             Albert Einstein  <figure>   <img src="photo.jpeg" alt=""/>   <legend>Alb...
Microformats adapted.                                                          Albert Einstein  <div class="figure">   <im...
Microformats adapted.                                                Albert Einstein  <figure>   <img src="photo.jpeg" alt...
What’s theeasiest way towrite HTML5?
Use the new doctype<!DOCTYPE html>
The HTML4 Lexicon                   html           meta head link style       title   base body dl dt dd    bdo script nos...
The HTML5 Lexicon                   html           meta head link style       title   base body dl dt dd           section...
Our focus today                   html           meta head link style       title   base body dl dt dd           section a...
If only life were simpler…
SimplificationThe html element<html xmlns="http://www.w3.org/1999/xhtml"      lang="en"      xml:lang="en"><html lang="en">
SimplificationCharacter encoding<meta http-equiv="Content-Type"      content="text/html; charset=utf-8"><meta charset="utf...
SimplificationStyles and scripts<link rel="stylesheet" href="style-original.css" type="text/css" /><style type=”text/css”>...
Metamorphosis
Nip/tuckThe em elementRepresents a span of text text with emphatic stress.<p>HTML5 introduces several <em>really</em> usef...
Evil incarnateThe small elementRepresents so-called “fine print” (e.g. disclaimers, caveats, etc.).
ClarificationThe cite elementThe title of a cited work (e.g. a book, magazine, or journal).<p>In <cite>Web Form Design</ci...
ResurrectionThe b elementRepresents a span of text offset from its surrounding content, but of noextra importance.<p>This ...
Deeper meaningThe hr elementRepresents a paragraph-level thematic break.
Raw materials
OrganizationThe section elementRepresents a section of a document, typically with a title or heading.<section> <!-- pretty...
section          38
section > article                    39
40
article          41
article > section                    42
OrganizationThe header elementRepresents the header of a section.<header> <!-- titles, etc. go here --></header>The footer...
44
header         45
46
footer         47
article          48
article > header                   49
article          50
article > footer                   51
OrganizationThe nav elementDemarcates a group of navigational links.<nav> <ol>   <li><a href="#details">Details</a></li>  ...
53
nav      54
55
nav      56
OrganizationThe aside elementDemarcates content that is tangentially related to the primary content.<article>  <!-- main c...
58
aside        59
OrganizationThe details elementA UI control for hiding optional content. Must contain a summary element,followed by other ...
OrganizationThe figure elementA unit of content (typically referenced by the primary content) that isself-contained. May c...
Refining the outline
Implicit sections                                           <h1> HTML5                                           <p> HTML5...
Explicit sections                                           <h1> HTML5                                           <p> HTML5...
Explicit sections                                           <h1> HTML5                                           <p> HTML5...
Explicit sections                                           <h1> HTML5                                           <p> HTML5...
Sectioning elementsCreate explicit sections in an outline.๏ section (obviously)๏ article๏ aside๏ footer๏ header๏ nav
Outline limitations         <h1> Title         <h2> Subtitle         <p> Text content continues...         <p> Text conten...
Heading groups FTW!     hgroup              <h1> Title              <h2> Subtitle              <p> Text content continues....
Sectioning rootsEstablish a new outline.๏ body (obviously)๏ blockquote๏ details๏ fieldset๏ figure๏ td
Rooted sections         <h1> Title         <p> Text content continues...         <p> Text content continues...         <h2...
New elements to consider
When?The time elementRepresents a date and/or time.
74
time       75
When?The time elementRepresents a date and/or time.<time>October 25, 2010 8:11 PM</time>
When?The time elementRepresents a date and/or time.<time>October 25, 2010 8:11 PM</time><time datetime="2010-10-25T20:11:0...
When?The time elementRepresents a date and/or time.<time>October 25, 2010 8:11 PM</time><time datetime="2010-10-25T20:11:0...
HighlightingThe mark elementRepresents a run of text in one document marked or highlighted forreference purposes, due to i...
80
81
mark       82
mark       83
More usable forms
Dates and times<input type=”datetime”>A UI control for selecting a date and time that includes timezone information.<input...
Dates and times             Safari                                  Opera<input type="date" name="dob"/>
Numbers<input type=”number”>A UI control for selecting a number.<input type=”range”>A UI control for selecting an imprecis...
Numbers<input type="number" name="foo"/><input type="range" min="1" max="11" name="foo"/>
New types<input type=”email”>A UI control for entering an email.<input type=”url”>A UI control for entering a URL.<input t...
New types  <input type="email" …/>   <input type="url" …/>
UI control attributesautocompleteTells the User Agent whether or not the value should be stored.autofocusTells the User Ag...
Value controlmin and maxLower and upper boundary for an element value (dates, time, and numbers only).stepThe granularity ...
Value controlpatternA regular expression pattern that the User Agent should validate the input against. <input type="text"...
Value controlpatternAn id reference to a datalist element containing acceptable values. <input type="text" list="countries...
95
Truth based on perspective
?
<button>Tweet</button>
<button>Tweet</button><a class=”button”>Tweet</a>
?
<button>Search Mail</button>
<button>Search Mail</button>   <div>Search Mail</div>
ARIA maps the OS to the web
Semantics+
Landmarkshelp usersnavigatequickly
All the site’s a play...The role attributeDefines the part an element is playing (assuming it’s different than thesemantic...
<header role="banner">
<nav role="navigation">
<form role="search">
<section role="main">
<footer role="contentinfo">
<nav role="navigation">
<aside role="complementary">
Landmark rolesapplicationA region of the page representing a unique software unit executing a set of tasks for itsusers. I...
Landmark rolesmainThe main content of a document.navigationA collection of navigational elements (usually links) for navig...
Structural rolesarticlecolumnheaderdefinitiondirectorydocumentgroupheadingimglistlistitemmathnotepresentationregionrowrowh...
<article role="article">
Structural rolesarticleA section of a page that forms an independent part of a document, page, or site.groupA set of user ...
Semantic comparison       Ad-hoc             ARIA Role               HTML5#header, #top      banner                header ...
What is this!?
Widget roles<span role="button">OK</span>
Widget roles<span role="button">OK</span>(of course <button>OK</button> would be better)
Widget roles<span role="button">OK</span>(of course <button>OK</button> would be better)<div role="alert"> <p>Something we...
Widget roles<span role="button">OK</span>(of course <button>OK</button> would be better)<div role="alert"> <p>Something we...
<a class=”button”>Tweet</a>
<a role=”button”>Tweet</a>
role="application"aria-activedescendant="folder-1"
role="tablist"
role="tab"aria-selected="true"aria-controls="folder-1"
role="tab"aria-selected="false"aria-controls="folder-4"
role="tabpanel"aria-hidden="false"aria-labelledby="folder-1-tab"
What’s going on!?
Widget states                          B         B                         (off)      (on)<span> <img src="bold-off.png" a...
Widget states                          B         B                         (off)      (on)<span> <img src="bold-off.png" a...
Widget states                          B         B                         (off)      (on)<span role="button" aria-pressed...
Widget statesaria-busyaria-checkedaria-disabledaria-expandedaria-grabbedaria-hiddenaria-invalidaria-pressedaria-selectedar...
Highlighting living content
Live regions
Live regions<input class="tweet-counter" value="140" disabled="disabled">
Live regions<span id="chars_left_notice" class="numeric"> <strong id="status-field-char-counter"       class="char-counter...
Live regions<span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span>.hidden {  position: absolut...
Live regions<span class="tweet-counter">maximum of 140 characters</span><span class="tweet-counter">140 <b class="hidden">...
Live regions<span aria-live="polite" aria-atomic="true"      class="tweet-counter">140<b class="hidden">      characters r...
Live regions
Notification optionsoffchange not announcedpolitechange announced after user completes her current activityassertiveuser a...
Who is Supporting WAI-ARIA?
Music to our ears
Can you hear me now?The audio element<audio src="my.oga" controls="controls"></audio>
Can you hear me now?    Browser            .aac   .mp3   .oga   .wavChrome 6+              YES    YES    YES     NOFirefox...
Can you hear me now?<audio controls="controls"> <source src="my.mp3"/> <source src="my.oga"/> <!-- fallback --></audio>
Available attributessrcURL for the audio file.autoplayA boolean specifying whether or not the file should play as soon as ...
Can you hear me now?<audio controls="controls" autobuffer="autobuffer"        preload="auto"> <source src="my.mp3"/> <sour...
Fallback options<audio controls="controls" autobuffer="autobuffer"        preload="auto"> <source src="my.mp3"/> <source s...
Fallback options<audio controls="controls" autobuffer="autobuffer"        preload="auto"> <source src="my.mp3"/> <source s...
Fallback options$(audio).each(function(){   var $audio = $(this), media = {}, formats = [];   $audio.find(source).each(fun...
Roll your own$(audio).each(function(){   var audio = this,   $button = $(<button>Play</button>)               .click(funct...
Opiate of the masses
Elementary, my dear WatsonThe video element<video src="my.ogv" controls="controls"></video>
Not so elementaryVideo file = container file (like ZIP)๏ 1 video track๏ 1 (or more) audio tracks๏ metadata๏ subtitle/capti...
Not so elementaryVideo formatsFlash Video (.flv)Prior to 2008, the only video format supported in Adobe Flash.MPEG 4 (.m4v...
Not so elementaryVideo codecsH.264Used primarily in MPEG 4. Only video codec natively supported on iOS. Patented.TheoraUse...
Not so elementaryAudio codecsMP3Nearly universal in usage, but was part of FLV. Patented.AAC (Advanced Audio Coding)Used p...
Not so elementary          Browser    .m4v               .ogv            .webm                    (AAC + H.264)   (Vorbis ...
Format juggling<video controls="controls" width="640" height="480"> <source src="my.m4v"/> <source src="my.webm"/> <source...
A good first impression<video controls="controls" width="640" height="480"        poster="my.png"> <source src="my.m4v"/> ...
Kindness to strangers <video controls="controls" width="640" height="480"         poster="my.png">  <source src="my.m4v"  ...
Available attributessrcURL for the audio file.autoplayA boolean specifying whether or not the file should play as soon as ...
No MIME, no serviceAddType video/ogg .ogvAddType video/mp4 .mp4AddType video/webm .webm
Fallback options<video width="600" height="400" poster="/r/2-5.png"        controls="controls" preload="none"> <source src...
Fallback options<video width="600" height="400" poster="/r/2-5.png"       controls="controls" preload="none"> <source src=...
For More:                           @AaronGustafson                    http://adaptivewebdesign.info                      ...
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
Upcoming SlideShare
Loading in...5
×

HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]

3,339

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
1 Comment
11 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,339
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
121
Comments
1
Likes
11
Embeds 0
No embeds

No notes for slide

HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]

  1. 1. Smart Markup for Smarter WebsitesAaron GustafsonEasy Designs, LLC@AaronGustafsonslideshare.net/AaronGustafson
  2. 2. HTML5 givesyou morecontrolover yourdocumentsand apps
  3. 3. Paving our “cowpaths”
  4. 4. The process is ongoing…
  5. 5. …but the end is near. 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
  6. 6. You can use it now
  7. 7. fault tolerancen. a system’s ability to continue tooperate when it encounters andunexpected error.
  8. 8. Browsers ignorewhat they don’t understand.
  9. 9. For example<input type="date" name="dob"/>
  10. 10. For example<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>
  11. 11. Now back to those cowpaths…
  12. 12. A great idea that we lost. Albert Einstein <fig> <img src="photo.jpeg" alt=""/> <caption>Photo of Albert Einstein</caption> </fig>The original concept in HTML3: http://www.w3.org/MarkUp/html3/figures.html
  13. 13. Microformats brought it back. Albert Einstein <div class="figure"> <img class="image" src="photo.jpeg" alt=""/> <p class="caption">Albert Einstein</p> </div>The original “figure” microformat.
  14. 14. HTML5 re-imagined it. Albert Einstein <figure> <img src="photo.jpeg" alt=""/> <legend>Albert Einstein</legend> </figure>The original HTML5 figure.
  15. 15. Microformats adapted. Albert Einstein <div class="figure"> <img class="image" src="photo.jpeg" alt=""/> <p class="captionlegend">Albert Einstein</p> </div>The revised (and now draft) “figure” microformat: http://microformats.org/wiki/figure
  16. 16. Microformats adapted. Albert Einstein <figure> <img src="photo.jpeg" alt=""/> <figcaption>Albert Einstein</figcaption> </figure>The current (dare I say final?) HTML5 figure.
  17. 17. What’s theeasiest way towrite HTML5?
  18. 18. Use the new doctype<!DOCTYPE html>
  19. 19. The HTML4 Lexicon 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 smallpre code abbr kbd var q samp hr menu textarea ins del sub sup span strong select option optgroup label input form fieldset legend button i em blockquote h1 h2 h3 h4 h5 h6 table caption col colgroup thead tbody tfoot tr th td
  20. 20. The HTML5 Lexicon 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 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 i 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
  21. 21. Our 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 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 i 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
  22. 22. If only life were simpler…
  23. 23. SimplificationThe html element<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><html lang="en">
  24. 24. SimplificationCharacter encoding<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta charset="utf-8" />
  25. 25. SimplificationStyles and scripts<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>
  26. 26. Metamorphosis
  27. 27. Nip/tuckThe em elementRepresents a span of text text with emphatic stress.<p>HTML5 introduces several <em>really</em> useful elements anda ton of new APIs.</p>The strong elementRepresents a span of text of great importance.<p>Please fill out the form below. <strong>Note: allfields are required.</strong></p>
  28. 28. Evil incarnateThe small elementRepresents so-called “fine print” (e.g. disclaimers, caveats, etc.).
  29. 29. ClarificationThe cite elementThe title of a cited work (e.g. a book, magazine, or journal).<p>In <cite>Web Form Design</cite>, Luke Wroblewski draws onoriginal research, his considerable experience at Yahoo! and eBay,and the perspectives of many of the field’s leading designers toshow you everything you need to know about designing effectiveand engaging Web forms.</p>
  30. 30. ResurrectionThe b elementRepresents a span of text offset from its surrounding content, but of noextra importance.<p>This presentation is about <b>HTML5</b>.</p>The i elementRepresents a span of text in an alternate voice or mood.<p>The <code>b</code> and <code>i</code> elementshave been legitimized in HTML5. <i>Go figure.</i></p>
  31. 31. Deeper meaningThe hr elementRepresents a paragraph-level thematic break.
  32. 32. Raw materials
  33. 33. OrganizationThe section elementRepresents a section of a document, typically with a title or heading.<section> <!-- pretty much anything can go here --></section>The article elementRepresents a section of content that forms an independent part of adocument or site.<article> <!-- pretty much anything can go here --></article>
  34. 34. section 38
  35. 35. section > article 39
  36. 36. 40
  37. 37. article 41
  38. 38. article > section 42
  39. 39. OrganizationThe header elementRepresents the header of a section.<header> <!-- titles, etc. go here --></header>The footer elementRepresents the footer of a section.<footer> <!-- meta/supplementary information goes here --></footer>
  40. 40. 44
  41. 41. header 45
  42. 42. 46
  43. 43. footer 47
  44. 44. article 48
  45. 45. article > header 49
  46. 46. article 50
  47. 47. article > footer 51
  48. 48. OrganizationThe nav elementDemarcates a group of navigational links.<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>
  49. 49. 53
  50. 50. nav 54
  51. 51. 55
  52. 52. nav 56
  53. 53. OrganizationThe aside elementDemarcates content that is tangentially related to the primary content.<article> <!-- main content --> <aside> <!-- something related --> </aside></article>
  54. 54. 58
  55. 55. aside 59
  56. 56. OrganizationThe details elementA UI control for hiding optional content. Must contain a summary element,followed by other content. <details> <summary>This is the visible description</summary> <p>This content would be hidden by default.</p> </details>It’s not implemented in any browser yet, this is just an example of how it could work. (Ripped from http://2010.full-frontal.org).
  57. 57. OrganizationThe figure elementA unit of content (typically referenced by the primary content) that isself-contained. May contain a figcaption element and other content.<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>
  58. 58. Refining the outline
  59. 59. Implicit sections <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 MarkupA snippet of the Wikipedia entry on HTML5: http://en.wikipedia.org/wiki/HTML5
  60. 60. Explicit sections <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 MarkupA snippet of the Wikipedia entry on HTML5: http://en.wikipedia.org/wiki/HTML5
  61. 61. Explicit sections <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 MarkupA snippet of the Wikipedia entry on HTML5: http://en.wikipedia.org/wiki/HTML5
  62. 62. Explicit sections <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 MarkupA snippet of the Wikipedia entry on HTML5: http://en.wikipedia.org/wiki/HTML5
  63. 63. Sectioning elementsCreate explicit sections in an outline.๏ section (obviously)๏ article๏ aside๏ footer๏ header๏ nav
  64. 64. Outline limitations <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
  65. 65. Heading groups FTW! 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
  66. 66. Sectioning rootsEstablish a new outline.๏ body (obviously)๏ blockquote๏ details๏ fieldset๏ figure๏ td
  67. 67. 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
  68. 68. New elements to consider
  69. 69. When?The time elementRepresents a date and/or time.
  70. 70. 74
  71. 71. time 75
  72. 72. When?The time elementRepresents a date and/or time.<time>October 25, 2010 8:11 PM</time>
  73. 73. When?The time elementRepresents a date and/or time.<time>October 25, 2010 8:11 PM</time><time datetime="2010-10-25T20:11:00-05:00"> October 25, 2010 8:11 PM</time>
  74. 74. When?The time elementRepresents a date and/or time.<time>October 25, 2010 8:11 PM</time><time datetime="2010-10-25T20:11:00-05:00"> October 25, 2010 8:11 PM</time><time datetime="2010-10-25T20:11:00-05:00" pubdate="pubdate">October 25, 2010 8:11 PM</time>
  75. 75. HighlightingThe mark elementRepresents a run of text in one document marked or highlighted forreference purposes, due to its relevance in another context.<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>
  76. 76. 80
  77. 77. 81
  78. 78. mark 82
  79. 79. mark 83
  80. 80. More usable forms
  81. 81. Dates and times<input type=”datetime”>A UI control for selecting a date and time that includes timezone information.<input type=”datetime-local”>A UI control for selecting a date and time that does not include timezone information.<input type=”date”>A UI control for selecting a date with access to all date components(day, month and year).<input type=” month”>A UI control for selecting a date that provides access to month and year only.<input type=”time”>A UI control for selecting a time that does not include timezone information.<input type=”week”>A UI control for selecting a date that provides access to week and year only.
  82. 82. Dates and times Safari Opera<input type="date" name="dob"/>
  83. 83. Numbers<input type=”number”>A UI control for selecting a number.<input type=”range”>A UI control for selecting an imprecise number.
  84. 84. Numbers<input type="number" name="foo"/><input type="range" min="1" max="11" name="foo"/>
  85. 85. New types<input type=”email”>A UI control for entering an email.<input type=”url”>A UI control for entering a URL.<input type=”tel”>A UI control for entering a telephone number.
  86. 86. New types <input type="email" …/> <input type="url" …/>
  87. 87. UI control attributesautocompleteTells the User Agent whether or not the value should be stored.autofocusTells the User Agent to bring focus to the form control on page load.formAn id reference to the form to which a given control belongs.requiredIndicated the form control must be provided a value.placeholderOffers users a short hint about the required value.
  88. 88. Value controlmin and maxLower and upper boundary for an element value (dates, time, and numbers only).stepThe granularity of values allowed (dates, time, and numbers only). <input type="range" min="1" max="11" step="0.5" .../>
  89. 89. Value controlpatternA regular expression pattern that the User Agent should validate the input against. <input type="text" pattern="d{6}w{3}" placeholder="6 digits followed by 3 letters" .../>
  90. 90. Value controlpatternAn id reference to a datalist element containing acceptable values. <input type="text" list="countries" name="country"/> <datalist id="countries"> <option>Afghanistan</option> <option>Åland Islands</option> <!-- ... --> </datalist>
  91. 91. 95
  92. 92. Truth based on perspective
  93. 93. ?
  94. 94. <button>Tweet</button>
  95. 95. <button>Tweet</button><a class=”button”>Tweet</a>
  96. 96. ?
  97. 97. <button>Search Mail</button>
  98. 98. <button>Search Mail</button> <div>Search Mail</div>
  99. 99. ARIA maps the OS to the web
  100. 100. Semantics+
  101. 101. Landmarkshelp usersnavigatequickly
  102. 102. All the site’s a play...The role attributeDefines the part an element is playing (assuming it’s different than thesemantics would otherwise imply).<section id="main" role="main"> <!-- The primary content for the page would go here --></section>
  103. 103. <header role="banner">
  104. 104. <nav role="navigation">
  105. 105. <form role="search">
  106. 106. <section role="main">
  107. 107. <footer role="contentinfo">
  108. 108. <nav role="navigation">
  109. 109. <aside role="complementary">
  110. 110. Landmark rolesapplicationA region of the page representing a unique software unit executing a set of tasks for itsusers. It is an area where assistive technologies should also return browse navigationkeys back over to the web application in this region.bannerA region that contains the prime heading or internal title of a page.complementaryA supporting section of the document that remains meaningful even when separatedfrom the main content.contentinfoMetadata that applies to the parent document.formA region of the document that represents a collection of form-associated elements.mainnavigationsearch
  111. 111. Landmark rolesmainThe main content of a document.navigationA collection of navigational elements (usually links) for navigating the document orrelated documents.searchThe search tool of a web document.
  112. 112. Structural rolesarticlecolumnheaderdefinitiondirectorydocumentgroupheadingimglistlistitemmathnotepresentationregionrowrowheaderseparator
  113. 113. <article role="article">
  114. 114. Structural rolesarticleA section of a page that forms an independent part of a document, page, or site.groupA set of user interface objects which are not intended to be included in a page summaryor table of contents by assistive technologies.noteA section whose content is parenthetic or ancillary to the main content of the resource.presentationAn element whose implicit native semantics will not be mapped to the accessibility API.regionA large perceivable section of a web page or document, that the author feels isimportant enough to be included in a page summary or table of contents.separatorA divider that separates and distinguishes sections of content or groups of menu items.
  115. 115. Semantic 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
  116. 116. What is this!?
  117. 117. Widget roles<span role="button">OK</span>
  118. 118. Widget roles<span role="button">OK</span>(of course <button>OK</button> would be better)
  119. 119. Widget roles<span role="button">OK</span>(of course <button>OK</button> would be better)<div role="alert"> <p>Something went wrong.</p></div>
  120. 120. Widget roles<span role="button">OK</span>(of course <button>OK</button> would be better)<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>
  121. 121. <a class=”button”>Tweet</a>
  122. 122. <a role=”button”>Tweet</a>
  123. 123. role="application"aria-activedescendant="folder-1"
  124. 124. role="tablist"
  125. 125. role="tab"aria-selected="true"aria-controls="folder-1"
  126. 126. role="tab"aria-selected="false"aria-controls="folder-4"
  127. 127. role="tabpanel"aria-hidden="false"aria-labelledby="folder-1-tab"
  128. 128. What’s going on!?
  129. 129. Widget states B B (off) (on)<span> <img src="bold-off.png" alt="bold" /></span><span> <img src="bold-on.png" alt="bold" /></span>
  130. 130. Widget states B B (off) (on)<span> <img src="bold-off.png" alt="not bold" /></span><span> <img src="bold-on.png" alt="bold" /></span>
  131. 131. Widget states 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>
  132. 132. Widget statesaria-busyaria-checkedaria-disabledaria-expandedaria-grabbedaria-hiddenaria-invalidaria-pressedaria-selectedaria-valuenow (the W3C defines this as a “property”)aria-valuetext (ditto)
  133. 133. Highlighting living content
  134. 134. Live regions
  135. 135. Live regions<input class="tweet-counter" value="140" disabled="disabled">
  136. 136. Live regions<span id="chars_left_notice" class="numeric"> <strong id="status-field-char-counter" class="char-counter">140</strong></span>
  137. 137. Live regions<span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span>.hidden { position: absolute; left: −999em;}
  138. 138. Live regions<span class="tweet-counter">maximum of 140 characters</span><span class="tweet-counter">140 <b class="hidden"> characters remaining</b></span>
  139. 139. Live regions<span aria-live="polite" aria-atomic="true" class="tweet-counter">140<b class="hidden"> characters remaining</b></span>
  140. 140. Live regions
  141. 141. Notification optionsoffchange not announcedpolitechange announced after user completes her current activityassertiveuser agent should interrupt the user’s activity, but not immediately
  142. 142. Who is Supporting WAI-ARIA?
  143. 143. Music to our ears
  144. 144. Can you hear me now?The audio element<audio src="my.oga" controls="controls"></audio>
  145. 145. Can you hear me now? Browser .aac .mp3 .oga .wavChrome 6+ YES YES YES NOFirefox 3.6+ NO NO YES YESInternet Explorer 9+ YES YES NO YESOpera 10.5+ NO NO YES YESSafari 5+ YES YES NO YES
  146. 146. Can you hear me now?<audio controls="controls"> <source src="my.mp3"/> <source src="my.oga"/> <!-- fallback --></audio>
  147. 147. Available attributessrcURL for the audio file.autoplayA boolean specifying whether or not the file should play as soon as it can.loopA boolean specifying whether or not playback of the file should be repeated.controlsA boolean that tells the browser to use its default media controls.preloadTells the browser what to content to preload. Options: “none,” “metadata,” and “auto.”autobuffer (deprecated)A boolean defining whether the file should be buffered in advance. Replaced by preload.
  148. 148. Can you hear me now?<audio controls="controls" autobuffer="autobuffer" preload="auto"> <source src="my.mp3"/> <source src="my.oga"/> <!-- fallback --></audio>
  149. 149. Fallback options<audio controls="controls" autobuffer="autobuffer" preload="auto"> <source src="my.mp3"/> <source src="my.oga"/> <ul> <li><a href="my.mp3">Download as audio/mp3</a></li> <li><a href="my.oga">Download as audio/ogg</a></li> </ul></audio>
  150. 150. Fallback options<audio controls="controls" autobuffer="autobuffer" preload="auto"> <source src="my.mp3"/> <source src="my.oga"/> <object …> <!-- flash player goes here --> </object></audio>
  151. 151. Fallback options$(audio).each(function(){ var $audio = $(this), media = {}, formats = []; $audio.find(source).each(function(){ var src = $(this).attr(src), ext = src.split(.).pop(); media[ext] = src; formats.push(ext); }); $audio.jPlayer({ swfPath: /vendors/jPlayer, ready: function(){ $audio.jPlayer(setMedia, media); }, supplied: formats.join(, ) }); }); Using jQuery & jPlayer
  152. 152. Roll your own$(audio).each(function(){ var audio = this, $button = $(<button>Play</button>) .click(function(){ audio.play(); }); $(this) .removeAttr(controls) .after($button); }); Using jQuery
  153. 153. Opiate of the masses
  154. 154. Elementary, my dear WatsonThe video element<video src="my.ogv" controls="controls"></video>
  155. 155. Not so elementaryVideo file = container file (like ZIP)๏ 1 video track๏ 1 (or more) audio tracks๏ metadata๏ subtitle/caption tracks (optional)
  156. 156. Not so elementaryVideo formatsFlash Video (.flv)Prior to 2008, the only video format supported in Adobe Flash.MPEG 4 (.m4v or .mp4)Based on QuickTime; iTunes uses this format.Ogg (.ogv)Open source container format.WebM (.webm)New format announced in May 2010.
  157. 157. Not so elementaryVideo codecsH.264Used primarily in MPEG 4. Only video codec natively supported on iOS. Patented.TheoraUsed primarily in Ogg. Royalty free. Supported in Firefox 3.5+ (in Ogg).VP8Used primarily in WebM. Owned by Google, but licensed royalty-free.
  158. 158. Not so elementaryAudio codecsMP3Nearly universal in usage, but was part of FLV. Patented.AAC (Advanced Audio Coding)Used primarily in MP4. Patented.VorbisUsed in Ogg audio & video as well as WebM. Royalty-free.
  159. 159. Not so elementary Browser .m4v .ogv .webm (AAC + H.264) (Vorbis + Theora) (Vorbis + VP8)Chrome 3+ 3+ 6+ (for now)Firefox NO 3.5+ 4+Internet Explorer 9+ NO MAYBEOpera NO 10.5+ 10.6+Safari 3.1+ MAYBE MAYBE
  160. 160. Format juggling<video controls="controls" width="640" height="480"> <source src="my.m4v"/> <source src="my.webm"/> <source src="my.ogv"/> <!-- fallback --></video>
  161. 161. A good first impression<video controls="controls" width="640" height="480" poster="my.png"> <source src="my.m4v"/> <source src="my.webm"/> <source src="my.ogv"/> <!-- fallback --></video>
  162. 162. Kindness to strangers <video controls="controls" width="640" height="480" poster="my.png"> <source src="my.m4v" type=video/mp4; codecs="avc1.42E01E, mp4a.40.2"/> <source src="my.webm" type=video/webm; codecs="vp8, vorbis"/> <source src="my.ogv" type=video/ogg; codecs="theora, vorbis"/> <!-- fallback --> </video>Note: The MPEG 4 codec will depend on the encoding “profiles” you use.
  163. 163. Available attributessrcURL for the audio file.autoplayA boolean specifying whether or not the file should play as soon as it can.loopA boolean specifying whether or not playback of the file should be repeated.controlsA boolean that tells the browser to use its default media controls.posterThe image to be shown while the video is not activated.preloadTells the browser what to content to preload. Options: “none,” “metadata,” and “auto.”autobuffer (deprecated)A boolean defining whether the file should be buffered in advance. Replaced by preload.
  164. 164. No MIME, no serviceAddType video/ogg .ogvAddType video/mp4 .mp4AddType video/webm .webm
  165. 165. Fallback options<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>
  166. 166. Fallback options<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"/> <object width="600" height="400" 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": "/r/2-5.m4v", "autoPlay":false, "autoBuffering":true}}/> <img src="/r/2-5.png" width="600" height="400" alt=""/> <ul><!-- links --></ul> </object></video>
  167. 167. For More: @AaronGustafson http://adaptivewebdesign.info http://easy-designs.net http://easy-reader.net Slides available at http://slideshare.net/AaronGustafson This presentation is licensed underCreative Commons Attribution-Noncommercial-Share Alike 3.0 flickr Photo Credits “2008 06 11 - 3257 - Washington DC - N Portal Dr at 16th St.” by thisisbossi “Aruba” by Salvatore.Freni “IMG_6200” by pcutler “Construction material” by raisin bun “TOC” by DArcy Norman “HTML5 logo in Braille” by Ted Drake “Dual Samsung Monitors” by steve-uk “Statue of liberty” by gadl “Lego creation” by MiikaS “iFlickr touch screen” by exfordy “Green Plant” by kevin1024 “08-jan-28” by sashafatcat “Revere EIGHT - 8mm…” by Kevitivity
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×