12-15-2011 HTML5 Design

9,371 views
9,437 views

Published on

Even though the specification is still being written, HTML5 can be implemented for your website today. In this workshop presented by Christopher Schmitt focused on real world solutions, attendees will learn about the new HTML elements and their semantics, HTML5 form elements, incorporate audio and video without Flash, new JavaScript API like geolocation, and more.

Published in: Technology
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total views
9,371
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
81
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide
  • how many people here validate your pages? And How many of you REALLY do?
  • So, yes. IE is an issue with HTML5.
  • Even with Flash and Silverlight, HTML and XHTML has its limitations. We need new elements to mark up content in a true semantic manner. CONTEST... PULL SOMEONE FROM THE AUDIENCE.
  • Microformats tries to solve or overcome some of these limitations, but co-opting HTML elements and attributes is a strategy that can only be squeezed to far even with the best of intentions.
  • BBC removed the hCalendar from it ’s site due to for-machine only code reading out and keeping other industries that need ABBR tag like travel.
  • We have Web sites that offer software like applications, we have Web sites that sport audio and video like it ’s candy machine. Like chocolate rain.
  • As I saw it, the goal of XHTML was XML and that there wouldn ’t need to be a need for an upgrade to HTML4. However, there comes a point when what’s planned doesn’t turned out to be true. Like the architect’s blueprint--it can never foresee the needs of the occupants 40-50 years from now. Therefore the owners adapt the house to suit their needs.
  • As Frank Lloyd Wright once said... you take care of the stuff that will make your life easier, everything else will work itself out.
  • Pretty simple DOCTYPE; I have to copy and paste XHTML Doctypes cause I don ’t remember them. And a character set, pretty common.
  • The W3C validator has a beta!
  • In previous versions of HTML, the character set needed to be declared with additionalattributes and values. But, as with the DOCTYPE, HTML5 only needs the minimum information requiredby browsers. Again, this helps with backward compatibility and makes it easier forauthors to implement.
  • The character encoding tells browsers and validators what set of characters to use when rendering web pages. If you do not declare the character set in your HTML, browsers first try to determine the character set from your server ’s HTTP response headers (specifically,the “Content-Type” header).
  • Browsers, screen readers, and other user agents use the lang attribute to determine the language in which the content should be interpreted. The example above specifies English via the en value. Declaring a document ’s primary language isn’t a requirement for HTML5 (or any of the previous versions, for that matter). It is, however, a good practice for both usability and accessibility.
  • HTML5 requires only the minimum amount of information needed for user agents. Inprevious versions of HTML, both CSS link s and script s required the type attribute toindicate the language. If you forgot to include type , though, most browsers assumedthe correct value. HTML5 makes type officially optional, but still validates older documents that do include the attribute. This makes sense, as there is really only one standard scripting language and only one styling language for the Web in use today.
  • Wake me up when this is true for deep fried Twinkies.
  • HTML5 slightly redefines em for text with “emphatic stress,” which I translate as any text that, when spoken, I would verbally emphasize.
  • use i to indicate text that is in an alternate voice or mood, or somehow offset from the normal prose; for example, a taxonomic designation, a technical term, a thought, an idiomatic phrase, or some other text whose typical typographic presentation is italicized:
  • In previous versions of HTML, strong was used to indicate strong emphasis. In HTML5, strong indicates importance and is typically used for alerts and warnings.
  • b is used to stylistically offset text from the normalprose without conveying any extra importance.For example, b could be used for keywords, product names, or other content whosetext would typically be unique compared to surrounding text, such as a paragraph lead
  • HTML5 redefined the previously presentational small as semantically appropriate forcontent typically considered “small print,” such as legalese, disclaimers, terms, conditions,and copyrights.
  • The reasoning is that all acronyms areshortened forms of words or phrases, which is the very definition of an abbreviation.
  • Previous versions of HTML restricted a to inline content. So, if you had different elementsthat all needed to be linked to the same resource, you had to individually specifythe a for each:
  • Now, with HTML5, a elements can contain block-level elements. You can also still usea as in the past, for containing inline content. The only thing you can ’t nest inside ana is another a .
  • figcaption is optional and can reside anywhere within figure, whether before orafter the figure content.
  • figcaption is optional and can reside anywhere within figure, whether before orafter the figure content.
  • start has been around for a while, but was deprecated as presentational. HTML5 nowrecognizes the semantic value of controlled numbering and welcomes it back. This “reordering” via start works the same across all browsers, IE6 included.
  • All current browsers support the value attribute for li .
  • This attribute is well supported by today ’s browsers, including IE6. In fact, contente ditable first appeared in IE 5.5 and has since been incorporated by other browsers. It was originally intended to support in-browser editing such as a What You See Is What You Get (WYSIWYG) editor. However, on its own, it only allows users to edit content. It does not have any functionality to save those edits, nor does it generate editing controls commonly seen in WYSIWYG editors. For that type of editing, you need to incorporate JavaScript and utilize the local storage Application Programming Interface
  • draggable, like contenteditable, has good browser support and was originally introducedfor IE (by default, certain elements are already draggable: a and img). However,the simple addition of draggable to your elements does not create the drag-and-dropfunctionality on its own. draggable simply allows you to specify the elements thatcan be dragged. To achieve the desired drag-and-drop functionality, you need JavaScript to:1. Tell the browser where the draggable element can be dropped (the drop “zone”).2. Tell the browser what to do with the element once it has been dropped.
  • I want to touch base with the microformats issue and the BBC. If you recall, it centered on the ABBR element being a bit overused.
  • Click forward to hear audio
  • HTML4 based hCalendar microformat from spec
  • Replace with TIME element and use the DATETIME attribute
  • A common setup for a page layout. Use of DIVs and pretty typical values for ID attributes.
  • With HTML5, there ’s an acceptance of these types of Web document structures. HTML5 has elements for HEADER, for ARTICLE, for SECTIOn, for ASIDE, for FOOTER.
  • Using Opera as our testing browser, we can see a basic layout with CSS added for color works when applied to our new HTML5 elements.
  • However, in IE6 (and IE7, not pictured) the browser doesn ’t recognize these values. With IE taking up a huge market share of the browser market, it’s important that we at least an attempt to style the page.
  • WIth these events, the browser recognizes the elements and the CSS properties can be applied. Tried the Dean Edwards IE7 script and it doesn ’t work.
  • Very straightforward method for including video. Notice width and height attribute, poster attribute, and alternative text. PULL UP VIDEO DEMO!!
  • Also, the code is pretty much the HTML5 video element without height and width attributes
  • Basic Flash HTML to include a flash movie; straight from YouTube
  • Very straightforward method for including video. Notice width and height attribute, poster attribute, and alternative text. PULL UP VIDEO DEMO!!
  • Originally spec said for browsers venders to use the Ogg Theora video and Orr Vorbis audio and the Ogg Container format, but vendors like Apple rejected on the grounds of submarine patents. FYI, This text is all in red when you get to the page.
  • I felt that the video support is a lot like SVG. There is a lot more potential for support for video since everyone can see the value of HTML5 videos--but it needs to make a case for a clean break from the infrastructure that companies have in Flash.
  • I felt that the video support is a lot like SVG. There is a lot more potential for support for video since everyone can see the value of HTML5 videos--but it needs to make a case for a clean break from the infrastructure that companies have in Flash.
  • No “real” HTML <video> element, and I think there are more benefits to flash at this time-- thus it’s a beta.
  • visualize.jQuery.CSS defines the basic design underpinings of the table. Stuff like unit numbers, border colors and sizing, etc.
  • visualize.jQuery.CSS defines the basic design underpinings of the table. Stuff like unit numbers, border colors and sizing, etc.
  • Story about your first need for Geolocation.
  • Step one is get a list of addresses you need.
  • Add JavaScript files. First, is Google CDN of jQuery. Maybe it ’s your site’s own version you host. Then you get the file from
  • Canvas is a new element in HTML5 allowing for an easier, powerful way to draw graphics using JavaScript. Is it like SVG?
  • The search input type displays a text input field that may visually differ from that of aregular text field, based on the stylistic conventions of the platform.For example, Safari on Mac OS displays the search field with rounded (instead ofsquare) corners, as shown in Figure 3-1. Both Safari and Chrome display an icon withinthe field to delete the current value, as shown in Figure 3-2.Some user agents will display a plain text input field for the search input type, so supportcannot be determined by visual appearance alone.
  • As you may have guessed, the number input type restricts the value to a valid number— a floating-point number, to be specific.
  • As you may have guessed, the number input type restricts the value to a valid number— a floating-point number, to be specific.
  • The range input type is like number in that it restricts the value to a valid floating-pointnumber, but it has the added caveat that the exact value is not important. Exact values are important on product order forms and the like, for values like quantity,so number should be used in those cases. The range input type is useful in cases of relativeor subjective input, such as assigning a rating to an event or product. To emphasizethis point, the specification requires that the control be rendered as a slider or similarcontrol, as shown in Figure 3-15.Webkit-based browsers and Opera render a horizontal slider control for the range inputtype. If a user agent does not recognize this input type, it displays a text input fieldinstead.
  • The color input type restricts the value to a valid RGB value in hexadecimal format,including the number sign or octothorpe, # , displayed before the six digits.The HTML5 specification prescribes a color-well control for this input type, but so faronly Opera has implemented this control. Webkit-based browsers that supportcolor , like Chrome and Safari, render a text input field but successfully validate entriesand prohibit form submission if the value is not valid, as shown in Figure 3-16 andFigure 3-17.If a user agent does not support the color input type, it will display a text input fieldinstead.
  • The datalist element is used to define a list of suggested values for other input controls—it is not a form input or control itself.The suggested values are specified using option elements, just as they would be for aselect element, but nothing renders on the screen until the datalist is associated withan input element. Binding a datalist to an input field is done by specifying an id onthe datalist and using this as the value of the list attribute on the input element.The result is a control that both accepts user input and presents a list of options for theuser to choose from. This is not unlike the type-ahead or autocomplete functionalityimplemented in many browsers and on most search websites, as shown in Figure3-18 and Figure 3-19.For browsers that have not yet implemented datalist , the above solution results in thedisplay of the text input field, but not the list of suggestions. In a few cases, olderbrowsers may display the option labels.
  • The color input type restricts the value to a valid RGB value in hexadecimal format,including the number sign or octothorpe, # , displayed before the six digits.The HTML5 specification prescribes a color-well control for this input type, but so faronly Opera has implemented this control. Webkit-based browsers that supportcolor , like Chrome and Safari, render a text input field but successfully validate entriesand prohibit form submission if the value is not valid, as shown in Figure 3-16 andFigure 3-17.If a user agent does not support the color input type, it will display a text input fieldinstead.
  • The required attribute may be specified on zero or more form elements in a form.When the user submits the form, any required field that has been left blank will causethe browser to stop the submission and an error message will be displayed. The visualdisplay of the error varies from browser to browser, as shown in Figure 3-21 to Figure3-25.If a user agent does not recognize the required attribute, it will be ignored. You canstill craft JavaScript to perform this validation using this attribute, however. See Recipe3.14, for details.
  • In addition to disabling autocomplete at the individual input field level, you can alsodisable it at the form level. If you disable autocomplete at the form level, you can reenableit for an individual form field by setting autocomplete="on" .While many security experts suggest applying autocomplete="off" to form fields thatcontain sensitive data, you should keep in mind that this is not a particularly effectivesecurity measure. Some browsers do not yet support autocomplete , and since so manytools exist to circumvent autocomplete="off" —tools that still auto-inject a user's storedpassword—it's often security theater or simply a false security measure.Those browsers that do not support autocomplete simply ignore the attribute altogether.
  • For years, web professionals have been writing validation scripts to check user dataprior to form submissions—and most of us would likely say that we have hated it.With HTML5, we have a method for checking form input that doesn ’t rely on Java-Script: regular expressions .
  • Canvas is a new element in HTML5 allowing for an easier, powerful way to draw graphics using JavaScript. Is it like SVG?
  • You want to check to make sure the browser supports HTML5 canvas. Then set the context--this is set for 2d, but browsers can make their own. Like Opera is testing out 3d. Then you can use
  • canvas is supported in Opera, Firefox, and Safari--esp. in the iPhone. This is done by Dunstan Orchard. A Web-app he ’s building for the iphone for tracking his workout routine.
  • visualize.jQuery.CSS defines the basic design underpinings of the table. Stuff like unit numbers, border colors and sizing, etc.
  • Next line brings in the jQuery framework from Google
  • What ’s this for?
  • IE doesn ’t support Canvas. However, IE 5+ supports MS’s own Vector Markup Language. I KNOW, RIGHT? MS HAS ITS OWN VECTOR MARKUP LANGUAGE? It’s like they don’t even know SVG is even interesting in it.
  • This is the plugin that makes the table conversion work.
  • This is the plugin that makes the table conversion work.
  • This is the plugin that makes the table conversion work.
  • Canvas is supported in Opera, Firefox, and Safari--esp. in the iPhone. This is done by Dunstan Orchard. A Web-app he ’s building for the iphone for tracking his workout routine.
  • 12-15-2011 HTML5 Design

    1. 1. OREILLY MEDIA 2011 HTML5 D E S I G N <ul><li>Christopher Schmitt | http://twitter.com/ @teleject </li></ul>❦
    2. 2. Things are good Between US, XHTML, right? I MEAN. WE GET ALONG WELL. AND WE BOTH LIKE STUFF. 3
    3. 3. “ imagine you made a browser that only rendered sites authored in valid HTML or XHTML. How much of the web would your users be able to see? 1%? 0.1%? Less? ” Mark PILGRIM http://dev.opera.com/articles/view/mama-markup-validation-report/
    4. 4.
    5. 5. “ The attempt to get the world to switch to XML, including quotes around attribute values and slashes in empty tags and namespaces all at once didn’t work. ” Sir Tim Berners-Lee
    6. 6. http://www.flickr.com/photos/teleject/432030263/
    7. 8. 91 http://www.w3.org/TR/html4/index/elements.html
    8. 9.
    9. 10. http://microformats.org/
    10. 11.
    11. 12.
    12. 13.
    13. 14. BLUEPRINTS vs REALITY http://www.amazon.com/gp/product/0140139966
    14. 15. “ Take care of the luxuries and the necessities will take care of themselves. ” FRANK LLOYD WRIGHT
    15. 16. Agenda ITEMS <ul><li>What ’s different from XHTML to HTML5 </li></ul><ul><li>Building with HTML5 (You are here.) </li></ul><ul><ul><li>Basic Syntax, Progressive Markup, Accessibility, Geolocation, Audio/Video, Web Forms </li></ul></ul><ul><li>Prizes! http://oreil.ly/tU1iH6 </li></ul>
    16. 17. BUILDING WITH HTML 5
    17. 18. DOCTYPE
    18. 19. HTML 4.01 Transitional DTD: <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot; http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd &quot;> XHTML 1.0 Transitional DTD: <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot; http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd &quot;>
    19. 20. <!DOCTYPE html> <html lang=&quot;en&quot;> <head> <meta charset=&quot;utf-8&quot;> <title>AUSTIN, TX BBQ RESTAURANTS</title> </head> <body> <h1>....</h1> <p>...</p> </body> </html>
    20. 21. EXERCISE <ul><li>Go to HTML validator at http://validator.w3.org/# validate_by_input </li></ul><ul><li>Then type the following HTML (below) and hit validate: </li></ul><!DOCTYPE html> <title>Small HTML5</title> <p>Hello world</p>
    21. 22.
    22. 23.
    23. 24. CHARACTER SET
    24. 25. <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; />
    25. 26. <!DOCTYPE html> <html lang=&quot;en&quot;> <head> <meta charset=&quot;utf-8&quot;> <title>AUSTIN, TX BBQ RESTAURANTS</title> </head> <body> <h1>....</h1> <p>...</p> </body> </html> http://shiflett.org/blog/2005/dec/googles-xss-vulnerability
    26. 27. SPECIFY YOUR LANGUAGE
    27. 28. <!DOCTYPE html> <html lang=&quot;en&quot;> <head> <meta charset=&quot;utf-8&quot;> <title>AUSTIN, TX BBQ RESTAURANTS</title> </head> <body> <h1>....</h1> <p>...</p> </body> </html>
    28. 29. INCLUDING <SCRIPT> & <STYLE>
    29. 30. <!DOCTYPE html> <html lang=&quot;en&quot;> <head> <meta charset=&quot;utf-8&quot;> <link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot; /> <script src=&quot;scripts.js&quot;></script> <title>AUSTIN, TX BBQ RESTAURANTS</title> </head> <body> <h1>....</h1> <p>...</p> </body> </html>
    30. 31. SYNTAX
    31. 32. <img src= “ file.png ” />
    32. 33. < IMG SRC =file.png />
    33. 34. < i M g S r C=file.png />
    34. 35. <IMG SRC=file.png / >
    35. 36. <video controls =controls >
    36. 37. EVERYTHING THAT WAS BAD IN 1999 IS GOOD AGAIN
    37. 38. RElEARNING SYNTAX <ul><li>Attribute quotes “not really” required </li></ul><ul><li>UPPERCASE and lowercase HTML elements allowed </li></ul><ul><ul><li>So is CaMeLcAse typing. </li></ul></ul><ul><li>No more need to do self-closing tags like <IMG / > or <BR / > </li></ul><ul><li>Also, no more minimalization. So, this is okay: <dl compact> </li></ul><ul><li>Basically, everything that was bad from HTML4 in XHTML5 is good again. </li></ul><ul><ul><li>Full circle, baby! One more time. </li></ul></ul>
    38. 39. BRINGING BACK <b> and OTHER TAGS
    39. 40. <p>My name is <em>Jane</em> , not John.</p>
    40. 41. <p>Sally thought to herself, <i>when will IE6 die?</i> </p>
    41. 42. <p> <strong>Registration is required</strong> for this event.</p>
    42. 43. <p> <b>Once upon a time,</b> there was a man who lost his mind.</p>
    43. 44. <p> <small> The owner of this blog is not responsible for mind blowage. Please consume at your own risk. </small> </p> <p><small>Copyright &copy; 2011 Awesomest Blog. All rights reserved.</small></p>
    44. 45. < abbr title=&quot;Accessible Rich Internet Applications&quot;>ARIA</abbr> No more <acronym>
    45. 46. THE COOLEST THING EVER ABOUT HTML5. (TO ME.)
    46. 47. <h1> <a href=&quot; http://example.com &quot;> HTML5, for Fun &amp; Profit </a> </h1> <a href=&quot; http://example.com &quot;> <img src=&quot;logo.png&quot; alt=&quot;HTML5 for Fun and Profit&quot; /> </a>
    47. 48. <a href=&quot; http://example.com &quot;> <h1>HTML5, for Fun &amp; Profit</h1> <img src=&quot;logo.png&quot; alt=&quot;HTML5 for Fun and Profit&quot; /> </a>
    48. 49. Figures & CAPTIONS
    49. 50. <figure> <img src=&quot;chart.png&quot; alt=&quot;Chart of increasing awesomeness&quot; /> <figcaption> The increasing amount of awesome that this blog demonstrates. </figcaption> </figure>
    50. 51. FIGURE <ul><li>Not restricted to containing IMGs </li></ul><ul><ul><li>Tables </li></ul></ul><ul><ul><li>Audio </li></ul></ul><ul><ul><li>Video </li></ul></ul><ul><ul><li>Charts </li></ul></ul><ul><ul><li>Code snippets </li></ul></ul>
    51. 52. COLLAPSABLE CONTENT
    52. 53.
    53. 54. <details> <summary> Upcoming Topics </summary> <p>For the new year, we have a great line up of articles!</p> <ul> <li>Understanding the Outline Algorithm</li> <li>When to Use <code>hgroup</code></li> <li>Machine Semantics with Microdata</li> </ul> </details> Only works in Chrome; all others - https://gist.github.com/370590
    54. 55. NUMBERING LISTS
    55. 56.
    56. 57. <ol start=&quot;3&quot; > <li>Apples</li> <li>Oranges</li> <li>Bananas</li> </ol>
    57. 58.
    58. 59. <p>The results are in for your favorite fruit, and we have a tie for first place!</p> <ol> <li value=&quot;1&quot; >Bananas</li> <li value=&quot;1&quot; >Oranges</li> <li value=&quot;2&quot; >Apples</li> </ol>
    59. 60. EDITABLE ELEMENTS
    60. 61.
    61. 62. <div contenteditable > <p>Quick Fox Jumped Over the Lazy Dog</p> </div>
    62. 63. http://markdotto.com/playground/3d-text/
    63. 64. DRAG n DROP
    64. 65. <h2 draggable >Block-Level Links</h2> http://html5doctor.com/native-drag-and-drop/
    65. 66. HTML 5, Microformats & META DATA
    66. 67. “ Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards. ”
    67. 68. “ HTML design patterns for common chunks of content that web builders need to markup anyway.” “ Oh, and Google understands them, too.”
    68. 69.
    69. 70. Replacing ABBR <ul><li><ABBR> element is used by screenreaders to expand abbreviations like “lbs” or “NCAAP” </li></ul><ul><li>However unintended consequences occurred trying to workaround browser bugs for other HTML elements </li></ul><ul><li>What happens when a screenreaders text like this: </li></ul><ul><ul><li>“ Let’s go to <abbr class=&quot;geo&quot; title=&quot;30.300474;-97.747247&quot;>Austin, TX</abbr>” </li></ul></ul>http://www.brucelawson.co.uk/2009/microformats-accessibility-html-5-again/
    70. 71. <div class=&quot;vevent&quot;> <a class=&quot;url&quot; href=&quot; http://www.web2con.com /&quot;> http://www.web2con.com </a> <span class=&quot;summary&quot;>Web 2.0 Conference</span>: < abbr class=&quot;dtstart&quot; title=&quot;2007-10-05&quot;>October 5</abbr>- < abbr class=&quot;dtend&quot; title=&quot;2007-10-20&quot;>20</abbr>, at the <span class=&quot;location&quot;>Argent Hotel, San Francisco, CA</span> </div>
    71. 72. <div class=&quot;vevent&quot;> <a class=&quot;url&quot; href=&quot; http://www.web2con.com /&quot;> http://www.web2con.com </a> <span class=&quot;summary&quot;>Web 2.0 Conference</span>: < time class=&quot;dtstart&quot; datetime=&quot;2007-10-05&quot;>October 5</time>- < time class=&quot;dtend&quot; datetime=&quot;2007-10-19&quot;>19</time>, at the <span class=&quot;location&quot;>Argent Hotel, San Francisco, CA</span> </div> http://www.brucelawson.co.uk/2009/microformats-accessibility-html-5-again/
    72. 73. POSTSCRIPT <ul><li><ABBR> issue has ben resolved with new pattern (dropping <ABBR> altogether): http://microformats.org/wiki/value-class-pattern </li></ul><ul><ul><li><p>Let ’s go to <span class=&quot;geo&quot;>51° 30' 48.45&quot;, -0° 8' 53.23&quot; ( <span class=&quot;value&quot;>51.513458;-0.14812</span> )</span> </p> </li></ul></ul>
    73. 74. DATA-ATTRIBUTE <ul><li>You can set data-attribute to any element you want. </li></ul><ul><li>Set meta information that can be utilized by JavaScript or CSS later on. </li></ul><img src= “john-smith.jpg” data-imgtype= “mugshot” alt= “John Smith’s mugshot”>
    74. 75. ATTR SELECTOR img [data-imgtype= “mugshot”] { /* CSS rules go here */ }
    75. 76. Page Structure
    76. 77. DIV ID= “header” DIV ID= “section” DIV ID= “article” DIV ID= “sidecolumn” DIV ID= “footer” DIV ID= “nav”
    77. 78. <HEADER> <SECTION> <ARTICLE> <ASIDE> <FOOTER> <NAV>
    78. 79. ArtiCLE vs ASIDE VS SECTION <ul><ul><li>Marc Grabsanki says: </li></ul></ul><ul><ul><ul><li>Article is unique content to that document </li></ul></ul></ul><ul><ul><ul><li>Section is a thematic grouping of content, typically with a heading - pretty generic </li></ul></ul></ul><ul><ul><ul><li>Aside is content that is tangentially related, like a sidebar div has no meaning whatsoever, so there is nothing semantic about divs </li></ul></ul></ul>
    79. 80. ArtiCLE vs ASIDE VS SECTION <ul><li>Bruce Lawson says: </li></ul><ul><ul><li>Aside is for something tangentially related to its parent element. Or, if a sibling to the main content, it can be used to make sidebars of navigation, recent comments, colophons, author bios etc. </li></ul></ul><ul><ul><li>Article is a discrete piece of content that could be syndicated - a blog post, a news item, a comment, a widget </li></ul></ul><ul><ul><li>Section can also contain articles. for example, you could have a page with a <section> full of entertainment articles, and a section of political news etc. </li></ul></ul>
    80. 81. ArtiCLE vs ASIDE VS SECTION <ul><li>Molly Holzschlag, Opera standards evangelist, says: </li></ul><ul><ul><li><section> clarifies <div> </li></ul></ul><ul><ul><li><article> 'replaces' <div id=&quot;content&quot;> </li></ul></ul><ul><ul><li><aside> 'replaces' <div id=&quot;sidebar&quot;> </li></ul></ul><ul><li>Chris Mills, Opera browser employee, plays it safe: http://boblet.tumblr.com/post/130610820/html5-structure1 </li></ul>
    81. 82. WHAT ABOUT THE DIV S? <ul><li>Marc Grabanski, jQuery and HTML5 guy: </li></ul><ul><ul><li>“ div has no meaning whatsoever, so there is nothing semantic about divs” </li></ul></ul><ul><li>Bruce Lawson, Opera browser employee: </li></ul><ul><ul><li>“ Like all semantic questions, it depends on the context. If your only reason for wanting an element is to group stuff for styling, it's a div.” </li></ul></ul>
    82. 83. <body> <header> <h1>Heading </h1> </header> <nav> <h3>Site Navigation</h3> <ul>...</ul> </nav> <section> <article> <h3>Weblog Entry</h3> </article> </section> <aside> <p>You are reading &quot;Chocolate Rain&quot;, an entry posted on <time datetime=&quot;2009-03-05&quot;>5 March, 2009</time>, to the <a href=&quot;#&quot;>Misty collection</a>. See other posts in <a href=&quot;#&quot;>this collection</a>.</p> </aside> <footer> <p>...</p> </footer> </body>
    83. 84.
    84. 85.
    85. 86. <script type=&quot;text/javascript&quot;> document.createElement('header'); document.createElement('nav'); document.createElement('section'); document.createElement('article'); document.createElement('aside'); document.createElement('footer'); </script> http://ejohn.org/blog/html5-shiv/
    86. 87.
    87. 88. ProgressiveLY ENhanced HTML5 ( infused with SHIM)
    88. 89.
    89. 90. http://modernizr.com/ http://modernizr.com
    90. 91. < script src=&quot;-/js/modernizr.min.js&quot; type=&quot;text/javascript&quot; ></script>
    91. 92. <html lang=&quot;en&quot; class=&quot; canvas canvastext geolocation rgba hsla multiplebgs borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache fontface &quot;>
    92. 93. .audio #error { display: none; } .no-audio #error-box { background-color: #ffffcc; padding: 1px 10px; color: #000; border: 5px solid #ffff66; } CSS Feature Detection
    93. 94. <script> if (Modernizr.audio) { function playPause() { var myAudio = document.getElementsByTagName('audio')[0]; if(myAudio.paused) myAudio.play(); else myAudio.pause(); } } </script> JS Feature Detection
    94. 95. Modernizr.load({ test: Modernizr.geolocation, yep : 'geo.js', nope: 'geo-polyfill.js' }); JS Feature Detection
    95. 96.
    96. 97. Pick and Choose Features to Detect
    97. 98. AUDIO/VIDEO
    98. 99. HTML 5 AUdio
    99. 100. <!DOCTYPE html> <html lang=&quot;en&quot;> <head> <meta charset=&quot;utf-8&quot;> <title>Basic HTML5 Web Document Structure</title> </head> <body> <h1>Video Example</h1> <audio src=&quot;html5test.ogg&quot; autoplay controls> <a href=&quot;html5test.ogg&quot;>Download audio</a> </audio> </body> </html>
    100. 101. HTML5 audio <ul><li>AUDIO element attributes are SRC, AUTOBUFFER, AUTOPLAY, LOOP, CONTROLS </li></ul><ul><li>If you don ’t have CONTROL, player becomes transparent </li></ul>
    101. 102. HTML5 Audio SUPPORT FF3.5+ S4+ Ch3+ Op10.5+ IE9+ Ogg Vorbis Y Y Y MP3 Y Y Y WAV Y Y Y
    102. 103. SUPPORTING AUDIO <audio controls autobuffer > <source src=&quot;html5audio .mp3 &quot; /> <source src=&quot;html5audio .ogg &quot; /> <!-- include Adobe Flash player EMBED and OBJECT code here --> </audio> Use Flash for older versions of IE
    103. 104. Supporting AUDIO <ul><li>If you do insert audio, setting the file to autoplay is not recommended, as it interferes with the experience for web surfers using screen readers. </li></ul><ul><li>Don ’t use WAV file type. </li></ul><ul><ul><li>Better to ship a compact disc to the user instead. </li></ul></ul>
    104. 105. HTML 5 Video
    105. 106. <!DOCTYPE html> <html lang=&quot;en&quot;> <head> <meta charset=&quot;utf-8&quot;> <title>Basic HTML5 Web Document Structure</title> </head> <body> <h1>Video Example</h1> <object width=&quot;425&quot; height=&quot;344&quot;><param name=&quot;movie&quot; value=&quot; http://www.youtube.com/v/4GuKSqAg5xI&hl=en&fs=1 &quot;></param><param name=&quot;allowFullScreen&quot; value=&quot;true&quot;></param><param name=&quot;allowscriptaccess&quot; value=&quot;always&quot;></param><embed src=&quot; http://www.youtube.com/v/4GuKSqAg5xI&hl=en&fs=1 &quot; type=&quot;application/x-shockwave-flash&quot; allowscriptaccess=&quot;always&quot; allowfullscreen=&quot;true&quot; width=&quot;425&quot; height=&quot;344&quot;></embed></object> </body> </html>
    106. 107. <!DOCTYPE html> <html lang=&quot;en&quot;> <head> <meta charset=&quot;utf-8&quot;> <title>Basic HTML5 Web Document Structure</title> </head> <body> <h1>Video Example</h1> <video src=&quot;html5test.ogg&quot; width=&quot;320&quot; height=&quot;240&quot; controls poster=&quot;html5testvideoposter.jpg&quot;> <a href=&quot;html5testvideo.ogg&quot;>Download movie</a> </video> </body> </html>
    107. 108. HTML5 Video <ul><li>WIDTH and HEIGHT should be required, IMO, but movie plays anyway based on the values in the video file itself. </li></ul><ul><li>Video formats may have their own posterframe. The browser should use that by default unless overridden by valid POSTER attribute value. </li></ul><ul><li>Text can be included within VIDEO element to allow user to download video if their browser doesn ’t support. </li></ul><ul><li>If you want to give users control, use CONTROL attribute. </li></ul>
    108. 109. HTML5 Video <ul><li>Video can start automatically if using the AUTOPLAY= ”1” attribute and value. </li></ul><ul><li>Spec provides for LOOP, AUTOBUFFER which also take a value of O or 1. </li></ul><ul><li>Codecs support... </li></ul>
    109. 110. HTML5 Video Text “ It would be helpful for interoperability if all browsers could support the same codecs. However, there are no known codecs that satisfy all the current players: we need a codec that is known to not require per-unit or per-distributor licensing, that is compatible with the open source development model, that is of sufficient quality as to be usable, and that is not an additional submarine patent risk for large companies. This is an ongoing issue and this section will be updated once more information is available. ” - http://www.whatwg.org/specs/web-apps/current-work/#video-and-audio-codecs-for-video-elements
    110. 111. CodeCS <ul><li>Ogg (or “Vorbis”) </li></ul><ul><ul><li>No need to worry about patents </li></ul></ul><ul><li>H.264 </li></ul><ul><ul><li>Created by the MPEG group </li></ul></ul><ul><ul><li>If you have blu-ray disc player, you are using it </li></ul></ul><ul><li>WebM </li></ul><ul><ul><li>A wrapper for the VP8 video and Ogg audio streams </li></ul></ul>
    111. 112. VIDEO CODEC SUPPORT FF3.6+ S Ch5+ Op10.6+ IE9+ Ogg Y Y Y H.264 Y Y* Y WebM (W4.02+) (Ch6+) Y
    112. 113. LESSONS LEARNED <ul><ul><li>To get most <video> support, you need 2 video files: H.264 and .OGG. </li></ul></ul><ul><ul><ul><li>iOS Devices can handle MP4 (H.264) </li></ul></ul></ul><ul><ul><ul><li>Safari, IE, Flash can deliver MP4 (H.264) </li></ul></ul></ul><ul><ul><ul><li>Firefox, Opera can deliver .OGG </li></ul></ul></ul><ul><ul><ul><li>Then hit them with FLV video, which supports H.264 </li></ul></ul></ul>http://camendesign.com/code/video_for_everybody
    113. 114. http://firefogg.org /
    114. 115. http://www.videolan.org/vlc /
    115. 116. http://handbrake.fr/
    116. 117. LESSONS LEARNED <ul><li>Use VLC or Firefogg to encode common movie files types to OGG </li></ul><ul><li>H.264 encoding? Use Handbrake </li></ul><ul><li>If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim ’s tutorial: http://diveintohtml5.org/video.html </li></ul><ul><ul><li>Good primer: http://dev.opera.com/articles/view/introduction-html5-video/ </li></ul></ul>
    117. 118.
    118. 119.
    119. 120. <script> function playPause() { var myVideo = document.getElementsByTagName('video')[0]; if (myVideo.paused) myVideo.play(); else myVideo.pause(); } </script>
    120. 121. <input type=button onclick=&quot;playPause()&quot; value=&quot;Play/Pause&quot; tabindex=&quot;0&quot; />
    121. 122. HTML 5 VIDEO & CAPTIONS
    122. 123. <ul><li>For students with LD and struggling or beginning readers, the use of captions or subtitles can lead to increases in:reading speed,word knowledge,decoding,vocabulary acquisition,word recognition,reading comprehension, andoral reading rates. </li></ul>
    123. 124. [Captioning] has been shown to improve reading skills among adults who are non-readers. http://www.ldonline.org/article/35793
    124. 125.
    125. 126. Quick & Dirty CAptioning
    126. 127. http://github.com/johnmcc/jCaps
    127. 128.
    128. 129.
    129. 130. SRT FILES <ul><li>SRT files are text files used in video playback; therefore, they do not contain any video data. </li></ul><ul><li>Text file containing subtitles used by various video playback programs; supported by DivX, DVD, and other video formats; </li></ul><ul><ul><li>Includes the time each subtitle should be displayed followed by the text of the subtitles. </li></ul></ul><ul><ul><li>Subtitle files are often named according to the language of the subtitles, i.e. &quot; moviename -eng.srt &quot; for English and &quot; moviename -ger.srt &quot; for German subtitles. </li></ul></ul>
    130. 131. 1 00:00:00,000 --> 00:00:6,000 Allow me to introduce myself My name is Tay It's T-A-Y, T-A-Y to the Z 2 00:00:06,000 --> 00:00:9,000 This is the web and it's gonna murder your TV It was Chocolate Rain 3 00:00:09,500 --> 00:00:11,500 Wrote a song about that history Chocolate Rain 4 00:00:12,000 --> 00:00:15,000 Now I'm paid a hefty hefty fee Chocolate Rain TRANSCRIPT-EN.SRT
    131. 132. <script src=&quot; http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js &quot;> </script> <script src=&quot;jquery.jcap.js&quot;></script>
    132. 133.   <video id=&quot;myVid&quot; width=&quot;400&quot; src=&quot;cherry-chocolate-rain.ogv&quot; autobuffer controls>   <track src=&quot;transcript-en.srt&quot; type=&quot;text/srt&quot; language=&quot;en&quot; role=&quot;textaudesc&quot;></track>   <track src=&quot;transcript-gr.srt&quot; type=&quot;text/srt&quot; language=&quot;gr&quot; role=&quot;textaudesc&quot;></track>   <p>Alternative text...</p> </video>
    133. 134.   <video id=&quot;myVid&quot; width=&quot;400&quot; src=&quot;cherry-chocolate-rain.ogv&quot; autobuffer controls>   <track src=&quot;transcript-en.srt&quot; type=&quot;text/srt&quot; language=&quot;en&quot; role=&quot;textaudesc&quot;></track>   <track src=&quot;transcript-gr.srt&quot; type=&quot;text/srt&quot; language=&quot;gr&quot; role=&quot;textaudesc&quot;></track>   <p>Alternative text goes here.</p> </video>
    134. 135. http://mediaelementjs.com/
    135. 136. http://popcornjs.org/
    136. 137. HTML5 GEOLOCATION
    137. 138. OH, PATHOS! http://youtu.be/_naLuRykun8
    138. 139.
    139. 140.
    140. 141.
    141. 142.
    142. 143.
    143. 144. if ( navigator.geolocation ) { navigator.geolocation.getCurrentPosition(show_coordinates); function show_coordinates(position){ alert('Your latitude is ' + position.coords.latitude + ' ' + 'and your longitude is ' + position.coords.longitude + '.'); } } Modernizr.load({ test: Modernizr.geolocation, yep : 'geo.js', nope: 'geo-polyfill.js'}); ...or use Modernizr!
    144. 145. http://ion.christopherschmitt.com/geolocation/
    145. 146. That ’s Great, But <ul><li>I don ’t read longitude and latitude. </li></ul><ul><ul><li>More importantly, my clients or site visitors don ’t comprehend longitude and latitude. </li></ul></ul><ul><li>And I don ’t love the code! </li></ul>
    146. 147. http://2010.incontrolconference.com/eats/
    147. 148. http://atxwebshow.com/coffeeshops/
    148. 149. http://atxwebshow.com/coffeeshops/
    149. 150. Step #1 Muck-N-Dave's Texas BBQ 1603 South Congress Austin, TX 78704 USA 512-590-3387 Old School BBQ and Grill 2326 E Cesar Chavez St Austin, TX, 78702 USA 512-974-6830 The Shed BBQ Rolling Joint 1816 E 6th Street. Austin, TX, 78702 USA 504-432-4718 Franklin Barbecue 3421 N. I-35 Austin, TX, 78722 USA 512-653-1187 Old School BBQ and Grill 2907 E MLK Jr Blvd. Austin, TX, 78702 USA 512-974-6830 Snow's BBQ 516 Main Street Lexington, TX 78947 USA 979-773-4640
    150. 151. Step #2 <ul><li>Convert addresses to hCard microformats </li></ul>http://microformats.org/code/hcard/creator
    151. 152. <div class=&quot; vcard &quot;> <a class=&quot;url fn n&quot; href=&quot; http://www.theqcard.com /&quot;> <span class=&quot;given-name&quot;>Jane</span> <span class=&quot;additional-name&quot;></span> <span class=&quot;family-name&quot;>Smith</span> </a> <div class=&quot;org&quot;>Old School BBQ and Grill</div> <div class=&quot;adr&quot;> <div class=&quot;street-address&quot;>2907 E MLK Jr Blvd.</div> <span class=&quot;locality&quot;>Austin</span>, <span class=&quot;region&quot;>TX</span>, <span class=&quot;postal-code&quot;>78702</span> <span class=&quot;country-name&quot;>USA</span> </div> <div class=&quot;tel&quot;>512-974-6830</div> <div class=&quot;note distance&quot;> </div> </div> http://microformats.org/code/hcard/creator
    152. 153. Step #3 hCard hCard hCard hCard
    153. 154. Step #3 hCard hCard hCard hCard <ol> <li> <li> <li> <li> </li> </li> </li> </li>
    154. 155. <div id=&quot;locations&quot;> <ol> <li><!-- Microformats address 1 --></li> <li><!-- Microformats address 2 --></li> <li><!-- Microformats address 3 --></li> <li><!-- Microformats address 4 --></li> ... </ol> </div> STEP #4
    155. 156. http://github.com/teleject/HTML5-GeoLocation-jQuery-Plugin STEP #5
    156. 157. <script type=&quot;text/javascript&quot; src=&quot; https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js &quot;></script> <script type=&quot;text/javascript&quot; src=&quot;js/jquery-location.js&quot;></script> STEP #6
    157. 158. http://code.google.com/apis/maps/signup.html STEP #7
    158. 159. <script type=&quot;text/javascript&quot; src=&quot; http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js &quot;></script> <script type=&quot;text/javascript&quot; src=&quot;js/jquery-location.1.0.0.js&quot;></script> <script type=&quot;text/javascript&quot;> $(document).ready(function() { $('#locations2').location({ 'apiKey' : ' YOUR_API_KEY_HERE ' }); }); </script> STEP #8
    159. 160. STEP #9 PROFIT!
    160. 161. One MORE THING...
    161. 162. <div class=&quot; vcard &quot;> <a class=&quot;url fn n&quot; href=&quot; http://www.theqcard.com /&quot;> <span class=&quot;given-name&quot;>Jane</span> <span class=&quot;additional-name&quot;></span> <span class=&quot;family-name&quot;>Smith</span> </a> <div class=&quot;org&quot;>Old School BBQ and Grill</div> <div class=&quot;adr&quot; data-longitude=&quot;-97.723410&quot; data-latitude=&quot;30.262098&quot; > <div class=&quot;street-address&quot;>2907 E MLK Jr Blvd.</div> <span class=&quot;locality&quot;>Austin</span>, <span class=&quot;region&quot;>TX</span>, <span class=&quot;postal-code&quot;>78702</span> <span class=&quot;country-name&quot;>USA</span> </div> <div class=&quot;tel&quot;>512-974-6830</div> <div class=&quot;note distance&quot;> </div> </div> http://geocoder.us/
    162. 163. $('#locations').location( { apiKey: 'YOUR_API_KEY_HERE', geodata: '#geodata', // site visitor ’s location notification: '.notification', // progress indicator recheck: '.recheck', distance: '.distance', //where the distance appears geoAdr: '.geoAdr', // longitude and latitude listElement: 'li' // different listing element? } );
    163. 164. WEB FORMS
    164. 165.
    165. 166. <form> <p><label>Search <input type=&quot;search&quot; name=&quot;query&quot;></label></p> <p><button type=&quot;submit&quot;>Submit</button></p> </form>
    166. 167.
    167. 168. <form> <fieldset> <legend>Contact Information</legend> <p><label>E-mail address <input type=&quot;email&quot; name=&quot;email&quot;> </label></p> <p><label>Web site <input type=&quot;url&quot; name=&quot;website&quot;> </label></p> <p><label>Telephone number <input type=&quot;tel&quot; name=&quot;phone&quot;> </label></p> </fieldset> <p><button type=&quot;submit&quot;>Submit</button> </p> </form>
    168. 169.
    169. 170. <form> <p> <label>Appointment Date and Time <input type=&quot;datetime&quot; name=&quot;dateAndTime&quot;></label> </p> </form>
    170. 171.
    171. 172. <form> <fieldset> <legend>Appointment Request</legend> <p><label>Date <input type=&quot;date&quot; name=&quot;date&quot;></label></p> <p><label>Time <input type=&quot;time&quot; name=&quot;time&quot;></label></p> </fieldset> <p><button type=&quot;submit&quot;>Submit</button></p> </form> Support in Chrome 10+, Safari 4+, Opera 9+, iOS, Android
    172. 173.
    173. 174. <form> <p><label>Quantity <input type=&quot;number&quot; name=&quot;quantity&quot;></label></p> <p><button type=&quot;submit&quot;>Submit</button></p> </form> Support in Chrome 10+, Safari 4+, Opera 9+, iOS, Android
    174. 175.
    175. 176. <form> <p><label>Quantity (must order in pairs of 2) <input type=&quot;number&quot; name=&quot;quantity&quot; min=&quot;2&quot; max=&quot;20&quot; step=&quot;2&quot; ></label></p> <p><button type=&quot;submit&quot;>Submit</button></p> </form>
    176. 177.
    177. 178. <form> <p><label>Volume <input type=&quot;range&quot; name=&quot;volume&quot; min=&quot;0&quot; max=&quot;10&quot; step=&quot;.5&quot; value=&quot;5&quot; ></label></p> </form>
    178. 179.
    179. 180. <form> <p><label>Background color <input type=&quot;color&quot; name=&quot;bg&quot;></label></p> <p><label>Foreground color <input type=&quot;color&quot; name=&quot;fg&quot;></label></p> <p><button type=&quot;submit&quot;>Submit</button></p> </form>
    180. 181.
    181. 182. <form> <p><label>Donation amount <input type=&quot;text&quot; name=&quot;donation&quot; list=&quot;donations&quot;></label></p> <datalist id=&quot;donations&quot;> <option value=&quot;10.00&quot;>10.00</option> <option value=&quot;25.00&quot;>25.00</option> <option value=&quot;50.00&quot;>50.00</option> </datalist> <p><button type=&quot;submit&quot;>Submit</button></p> </form> Support in Firefox 4+, Opera 10+
    182. 183.
    183. 184. <form> <p><label for=&quot;donation&quot;>Donation amount</label> <datalist id=&quot;donations&quot;> <select name=&quot;donation&quot;><option></option> <option value=&quot;10.00&quot;>10.00</option> <option value=&quot;25.00&quot;>25.00</option> <option value=&quot;50.00&quot;>50.00</option> <option>Other</option> </select> If other, please specify: </datalist> <input type=&quot;text&quot; id=&quot;donation&quot; name=&quot;donation&quot; list=&quot;donations&quot;></p> <p><button type=&quot;submit&quot;>Submit</button></p> </form> http://adactio.com/journal/4272/
    184. 185.
    185. 186. <form> <fieldset> <legend>Login</legend> <p><label>Username <input type=&quot;text&quot; name=&quot;username&quot; required ></label></p> <p><label>Password <input type=&quot;password&quot; name=&quot;pwd&quot; required ></label></p> </fieldset> <p><button type=&quot;submit&quot;>Submit</button></p> </form> IE 10+, FF 4+, Chrome 10+, Safari 5+, Opera 10+, iOS, Andriod
    186. 187.
    187. 188. <p><label>E-mail address <input type=&quot;email&quot; name=&quot;email&quot; placeholder=&quot; [email_address] &quot; ></label></p> <p><label>Web site <input type=&quot;url&quot; name=&quot;website&quot; placeholder=&quot; http://www.domain.com /&quot; ></label></p> <p><label>Telephone number <input type=&quot;tel&quot; name=&quot;phone&quot; placeholder=&quot;123-123-1234&quot; ></label></p>
    188. 189. <form> <p><label>Search <input type=&quot;search&quot; name=&quot;query&quot; autofocus ></label></p> <p><button type=&quot;submit&quot;>Submit</button></p> </form>
    189. 190. <form> <fieldset> <legend>Login</legend> <p><label>Username <input type=&quot;text&quot; name=&quot;username&quot;></label></p> <p><label>Password <input type=&quot;password&quot; name=&quot;pwd&quot; autocomplete=&quot;off&quot; ></label></p> </fieldset> <p><button type=&quot;submit&quot;>Submit</button></p> </form>
    190. 191.
    191. 192. <form> <p><label>Telephone number <input type=&quot;tel&quot; name=&quot;phone&quot; pattern=&quot;[2-9][0-9]{2}-[0-9]{3}-[0-9]{4}&quot; title=&quot;North American format: XXX-XXX-XXXX&quot;></label></p> <p><button type=&quot;submit&quot;>Submit</button></p> </form>
    192. 193. HTML 5 Canvas
    193. 194. <canvas id=&quot;myCanvas&quot; width=&quot;300&quot; height=&quot;150&quot;> Fallback content, in case the browser does not support Canvas. </canvas>
    194. 195. <script type=&quot;text/javascript&quot;><!-- window.addEventListener('load', function () { // Get the canvas element. var elem = document.getElementById('myCanvas'); if (!elem || !elem.getContext) { return; } // Get the canvas 2d context. var context = elem.getContext('2d'); if (!context) { return; } // Now you are done! Let's draw a blue rectangle. context.fillStyle = '#00f'; context.fillRect(0, 0, 150, 100); }, false); // --></script>
    195. 196.
    196. 197. // Get the canvas element. var elem = document.getElementById('myCanvas'); if (!elem || !elem.getContext) { return; } // Get the canvas 2d context. var context = elem.getContext('2d'); if (!context) { return; } context.fillStyle = '#00f'; context.strokeStyle = '#f00'; context.lineWidth = 4; // Draw a right triangle. context.beginPath(); context.moveTo(10, 10); context.lineTo(100, 10); context.lineTo(10, 100); context.lineTo(10, 10); context.fill(); context.stroke(); context.closePath(); }, false);
    197. 198.
    198. 199. // Get the canvas element. var elem = document.getElementById('myCanvas'); if (!elem || !elem.getContext) { return; } // Get the canvas 2d context. var context = elem.getContext('2d'); if (!context) { return; } context.fillStyle = '#00f'; context.strokeStyle = '#f00'; context.lineWidth = 4; // Draw a right triangle. context.beginPath(); context.moveTo(10, 10); context.lineTo(100, 10); context.lineTo(10, 100); context.lineTo(10, 10); context.fill(); context.stroke(); context.closePath(); }, false);
    199. 200. http://flickr.com/photos/dunstan/3099313036/
    200. 201. BUT IS IT ACCESSIBLE?
    201. 202. ACCESSIBLE CANVAS ISSUES <ul><li>Setting user interface elements in canvas </li></ul><ul><li>Setting images in canvas </li></ul><ul><li>Setting text in canvas </li></ul>http://www.paciellogroup.com/blog/?p=362
    202. 203. Progressive Enhancement & Canvas Text “ Progressive enhancement is a strategy for web design that emphasizes accessibility, semantic H TML markup, and exte rnal style sheet and scripting technologies.” http://en.wikipedia.org/wiki/P rogressive_enhancement
    203. 204. https://github.com/mezzoblue/PaintbrushJS
    204. 205. http://csssummit.com/
    205. 206. <ul><li>Take mugshot </li></ul><ul><li>Make it black and white </li></ul><ul><li>Compress with ImagOptim </li></ul>http://imageoptim.pornel.net/
    206. 207. <img class=&quot;mugshot filter-tint&quot; data-pb-tint-opacity=&quot;0.2&quot; data-pb-tint-colour=&quot;#517777&quot; src=&quot;filename.png&quot; />
    207. 208. box-shadow: 1px 1px 4px #fff, 2px 2px 4px #fff, 3px 3px 2px #333; border-radius: 300px;
    208. 209. http://www.filamentgroup.com/lab/jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas/
    209. 210. http://www.filamentgroup.com/lab/jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas/
    210. 211. <table > <caption>My Push Ups</caption> <thead><tr> <td></td> <th>M</th> <th>Tu</th> <th>W</th> <th>Th</th> <th>F</th> <th>Sa</th> </tr> </thead> <tbody><tr> <th>Chris</th> <td>56</td> <td>30</td> <td>50</td> <td>0</td> <td>45</td> <td>120</td> <td>0</td> </tr> </tbody></table>
    211. 212.
    212. 213. <link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;visualize.jQuery.css&quot;> <script type=&quot;text/javascript&quot; src=&quot; http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js &quot;></script><!--[if IE]><script type=&quot;text/javascript&quot; src=&quot;excanvas.compiled.js&quot;></script><![endif]--><script type=&quot;text/javascript&quot; src=&quot;visualize.jQuery.js&quot;></script><script type=&quot;text/javascript&quot;>$(function(){ $('table').addClass('accessHide'); $('table').visualize({type: 'line', colors: ['#fff']}); });</script>
    213. 214. <link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;visualize.jQuery.css&quot;/> <script type=&quot;text/javascript&quot; src=&quot; http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js &quot;></script> <!--[if IE]><script type=&quot;text/javascript&quot; src=&quot;excanvas.compiled.js&quot;></script><![endif]--><script type=&quot;text/javascript&quot; src=&quot;visualize.jQuery.js&quot;></script><script type=&quot;text/javascript&quot;>$(function(){ $('table').addClass('accessHide'); $('table').visualize({type: 'line', colors: ['#fff']}); });</script>
    214. 215. <link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;visualize.jQuery.css&quot;/><script type=&quot;text/javascript&quot; src=&quot; http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js &quot;></script> <!--[if IE]><script type=&quot;text/javascript&quot; src=&quot;excanvas.compiled.js&quot;></script><![endif]--> <script type=&quot;text/javascript&quot; src=&quot;visualize.jQuery.js&quot;></script><script type=&quot;text/javascript&quot;>$(function(){ $('table').addClass('accessHide'); $('table').visualize({type: 'line', colors: ['#fff']}); });</script>
    215. 216. http://msdn.microsoft.com/en-us/library/bb250524(VS.85).aspx
    216. 217. <link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;visualize.jQuery.css&quot;/><script type=&quot;text/javascript&quot; src=&quot; http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js &quot;></script><!--[if IE]><script type=&quot;text/javascript&quot; src=&quot;excanvas.compiled.js&quot;></script><![endif]--> <script type=&quot;text/javascript&quot; src=&quot;visualize.jQuery.js&quot;></script> <script type=&quot;text/javascript&quot;>$(function(){ $('table').addClass('accessHide'); $('table').visualize({type: 'line', colors: ['#fff']}); });</script>
    217. 218. <link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;visualize.jQuery.css&quot;/><script type=&quot;text/javascript&quot; src=&quot; http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js &quot;></script><!--[if IE]><script type=&quot;text/javascript&quot; src=&quot;excanvas.compiled.js&quot;></script><![endif]--><script type=&quot;text/javascript&quot; src=&quot;visualize.jQuery.js&quot;></script> <script type=&quot;text/javascript&quot;>$(function(){ $('table').addClass('accessHide'); $('table').visualize({type: 'line', colors: ['#fff']}); });</script>
    218. 219. table.accessHide { position: absolute; left: -999999px; } table { height: 100px; width: 250px;}
    219. 220. <link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;visualize.jQuery.css&quot;/><script type=&quot;text/javascript&quot; src=&quot; http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js &quot;></script><!--[if IE]><script type=&quot;text/javascript&quot; src=&quot;excanvas.compiled.js&quot;></script><![endif]--><script type=&quot;text/javascript&quot; src=&quot;visualize.jQuery.js&quot;></script><script type=&quot;text/javascript&quot;>$(function(){ $('table').addClass('accessHide'); $('table').visualize({type: 'line', colors: ['#fff']}); });</script>
    220. 221.
    221. 222. http://flickr.com/photos/dunstan/3099313036/
    222. 223. XHTML, ...I THINK I WANT TO SEE ANOTHER MARKUP SPEC.
    223. 224. RECOMMENDED <ul><li>Universal Design for Web Applications by Matt May and Wendy Chisholm </li></ul><ul><li>Bulletproof Ajax by Jeremy Keith </li></ul><ul><li>Designing with Progressive Enhancement by Filament Group </li></ul><ul><li>Microformats Made Simple by Emily Lewis </li></ul><ul><li>How Buildings Learn by Stewart Brand </li></ul><ul><li>HTML5 Cookbook by a whole bunch of people! </li></ul>
    224. 225. upcoming EVENTS <ul><ul><li>AIGA In Control Conference on Feb. 20-21st. </li></ul></ul><ul><ul><ul><li>2 days, 1 track </li></ul></ul></ul><ul><ul><ul><li>HTML5, CSS3, jQuery, Mobile Design, Content Strategy, and much more </li></ul></ul></ul><ul><ul><ul><li>Orlando, FL </li></ul></ul></ul><ul><ul><ul><li>http://2012.incontrolconference.com / </li></ul></ul></ul>
    225. 226. THANK YOU! Christopher Schmitt [email_address] http://twitter.com/teleject

    ×