Your SlideShare is downloading. ×
0
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

[PSU Web 2011] HTML5 Design

2,638

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 …

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
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,638
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
8
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1. PSU WEB 2011 HTML5 DESIGN ❦Christopher Schmitt | http://twitter.com/@teleject
  2. THINGS ARE GOODBETWEEN US, XHTML,RIGHT?I MEAN. WE GET ALONG WELL.AND WE BOTH LIKE STUFF. 2 3
  3. http://dev.opera.com/articles/view/mama-markup-validation-report/ 3
  4. 4
  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 5
  6. http://www.flickr.com/photos/teleject/432030263/ 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. BLUEPRINTS VS REALITY http://www.amazon.com/gp/product/0140139966 12
  13. “TAKE CARE OF THE LUXURIES AND THE NECESSITIES WILL TAKE CARE OF THEMSELVES.”FRANK LLOYD WRIGHT 13
  14. AGENDA ITEMS• What’s different from XHTML to HTML5• Building with HTML5 (You are here.)• Video• Audio• GeoLocation ... and more!• Prizes! http://interactwithwebstandards.com/ 14
  15. BUILDINGWITH HTML5 15
  16. DOCTYPE 16
  17. HTML 4.01 Transitional DTD:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">XHTML 1.0 Transitional DTD:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 17
  18. <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>AUSTIN, TX BBQ RESTAURANTS</title></head><body> <h1>....</h1> <p>...</p> </body></html> 18
  19. EXERCISE• Go to HTML validator at http://validator.w3.org/#validate_by_input• Then type the following HTML (below) and hit validate: <!DOCTYPE html> <title>Small HTML5</title> <p>Hello world</p> 19
  20. 20
  21. 21
  22. SYNTAX 22
  23. <img src=“file.png” /> 23
  24. <IMG SRC=file.png /> 24
  25. <iMg SrC=file.png /> 25
  26. <IMG SRC=file.png /> 26
  27. <video controls=controls> 27
  28. EVERYTHING THATWAS BAD IN 1999IS GOOD AGAIN 28
  29. RELEARNING SYNTAX• Attribute quotes “not really” required• UPPERCASE and lowercase HTML elements allowed • So is CaMeLcAse typing.• No more need to do self-closing tags like <IMG /> or <BR />• Also, no more minimalization. So, this is okay: <dl compact>• Basically, everything that was bad from HTML4 in XHTML5 is good again. • Full circle, baby! One more time. 29
  30. PAGE STRUCTURE 30
  31. DIV ID=“header” DIV ID=“nav”DIV ID=“section” DIV ID=“sidecolumn”DIV ID=“article” DIV ID=“footer” 31
  32. <HEADER> <NAV><SECTION> <ASIDE><ARTICLE> <FOOTER> 32
  33. ARTICLE VS ASIDE VS SECTION• Molly Holzschlag, Opera standards evangelist, says: • <section> clarifies <div> • <article> replaces <div id="content"> • <aside> replaces <div id="sidebar">• Chris Mills, Opera browser employee, plays it safe: http://boblet.tumblr.com/post/130610820/html5-structure1 33
  34. WHAT ABOUT THE DIVS?• Marc Grabanski, jQuery and HTML5 guy: • “div has no meaning whatsoever, so there is nothing semantic about divs”• Bruce Lawson, Opera browser employee: • “Like all semantic questions, it depends on the context. If your only reason for wanting an element is to group stuff for styling, its a div.” 34
  35. <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 "Chocolate Rain", an entry posted on <time datetime="2009-03-05">5March, 2009</time>, to the <a href="#">Misty collection</a>. See other posts in <ahref="#">this collection</a>.</p> </aside> <footer> <p>...</p> </footer></body> 35
  36. 36
  37. 37
  38. <script type="text/javascript">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/ 38
  39. 39
  40. PROGRESSIVELYENHANCED HTML5(INFUSED WITH SHIM) 40
  41. 41
  42. http://modernizr.com/ 42
  43. <script src="-/js/modernizr.min.js" type="text/javascript" ></script> 43
  44. <html lang="en" class=" canvas canvastextgeolocation rgba hsla multiplebgs borderimageborderradius boxshadow opacity cssanimationscsscolumns cssgradients cssreflectionscsstransforms csstransforms3d csstransitionsvideo audio localstorage sessionstoragewebworkers applicationcache fontface"> 44
  45. content { /* CSS rules if a browser DOES NOT support geolocation */ ...}.geolocation content { /* CSS rules if a browser DOES support geolocation */ ...} CSS Feature Detection 45
  46. <script src="modernizr.js"></script>...<script> if (!Modernizr.input.autofocus){ $("#fieldname").focus(); }</script> JS Feature Detection 46
  47. Pick and Choose Features to Detect 47
  48. HTML5, MICROFORMATS & METADATA 48
  49. 49
  50. “Designed for humans first and machines second,microformats are a set of simple, open data formats built upon existing and widely adopted standards.” 50
  51. “HTML design patterns for commonchunks of content that web builders need to markup anyway.”“Oh, and Google understands them, too.” 51
  52. 52
  53. REPLACING ABBR• <ABBR> element is used by screenreaders to expand abbreviations like “lbs” or “NCAAP”• However unintended consequences occurred trying to workaround browser bugs for other HTML elements• What happens when a screenreaders text like this: • “Let’s go to <abbr class="geo" title="30.300474;-97.747247">Austin, TX</abbr>” http://www.brucelawson.co.uk/2009/microformats-accessibility-html-5-again/ 53
  54. <div class="vevent"> <a class="url" href="http://www.web2con.com/">http://www.web2con.com</a> <span class="summary">Web 2.0 Conference</span>: <abbr class="dtstart"title="2007-10-05">October 5</abbr>- <abbr class="dtend" title="2007-10-20">20</abbr>,at the <span class="location">Argent Hotel, San Francisco,CA</span></div> 54
  55. <div class="vevent"> <a class="url" href="http://www.web2con.com/">http://www.web2con.com</a> <span class="summary">Web 2.0 Conference</span>: <time class="dtstart"datetime="2007-10-05">October 5</time>- <time class="dtend"datetime="2007-10-19">19</time>,at the <span class="location">Argent Hotel, San Francisco,CA</span></div>http://www.brucelawson.co.uk/2009/microformats-accessibility-html-5-again/ 55
  56. POSTSCRIPT• <ABBR> issue has ben resolved with new pattern (dropping <ABBR> altogether): http://microformats.org/wiki/value-class-pattern • <p>Let’s go to <span class="geo">51° 30 48.45", -0° 8 53.23" (<span class="value">51.513458;-0.14812</ span>)</span> </p> 56
  57. DATA-ATTRIBUTE• You can set data-attribute to any element you want.• Set meta information that can be utilized by JavaScript or CSS later on. <img src=“john-smith.jpg” data-imgtype=“mugshot” alt=“John Smith’s mugshot”> 57
  58. ATTR SELECTORimg[data-imgtype=“mugshot”] {/* CSS rules go here */} 58
  59. HEADINGS 59
  60. HTML4 HEADINGS• h1• h2• h3• h4• h5• h6 60
  61. POP-QUIZ• How do you code for the main title of your site and the main article/post/content of the page? • Two H1s for both main title and content • H1 for main title, then H2 for content • H2 for main title, then H1 for content 61
  62. XHTML2’S HEADINGS• Had an “h” element, without a numeral• Using the <section> element to determine its value: • <section><h></h></section> = <h1> • <section><section><h></h></section></section> = <h2> 62
  63. HTML5’S HEADINGS• Keepold system rather than introduce a new element, move away from numbered headings• However, adds the <section> element• Also the <hgroup> element• More insistence on keep hierarchy: • h1 to h6 63
  64. <HEADER>• <header> contains information found at top of a page • title, • subtitle, • and navigation• Also, it can include an <hgroup>• Canbe placed anywhere in a document except <footer> and another <header> 64
  65. <article> <header> <h1>The Great Gastby</h1> <p>A book report by Christopher Schmitt</p> </header> <p>stuff goes here</p></article> 65
  66. <article> <header> <hgroup> <h1>The Great Gastby</h1> <h2>A book report by Christopher Schmitt</h2> </hgroup> </header> <p>stuff goes here</p></article> 66
  67. <HGROUP>• Can contain more than one heading • In fact, must contain at least two heading elements• Example: intended for titles and subtitles• Keep hierarchy of heading elements • h1 through h6 • Don’t need to place them in <hgroup> or <header> 67
  68. VIDEO EXAMPLE OF HEADINGS w/ SCREENREADER http://www.youtube.com/watch?v=AmUPhEVWu_E 68
  69. http://www.youtube.com/watch?v=AmUPhEVWu_E 69
  70. CLOSERLOOK ATHTML5 ELEMENTS 70
  71. HTML5 AUDIO 71
  72. <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Basic HTML5 Web Document Structure</title> </head> <body><h1>Video Example</h1><audio src="html5test.ogg" autoplay controls> <a href="html5test.ogg">Download audio</a></audio> </body></html> 72
  73. DEMO 73
  74. HTML5 AUDIO• AUDIO element attributes are SRC, AUTOBUFFER, AUTOPLAY, LOOP, CONTROLS• If you don’t have CONTROL, player becomes transparent 74
  75. HTML5 AUDIO SUPPORT FF3.5+ S4+ Ch3+ Op10.5+ IE9+ Ogg Y Y YVorbisMP3 Y Y YWAV Y Y Y 75
  76. SUPPORTING AUDIO<audio controls autobuffer> <source src="html5audio.mp3" /> <source src="html5audio.ogg" /> <!-- include Adobe Flash player EMBED and OBJECT codehere --></audio> Use Flash for older versions of IE 76
  77. HTML5 VIDEO 77
  78. <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Basic HTML5 Web Document Structure</title> </head> <body><h1>Video Example</h1><object width="425" height="344"><param name="movie"value="http://www.youtube.com/v/4GuKSqAg5xI&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/4GuKSqAg5xI&hl=en&fs=1" type="application/x-shockwave-flash"allowscriptaccess="always" allowfullscreen="true" width="425"height="344"></embed></object> </body></html> 78
  79. <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Basic HTML5 Web Document Structure</title> </head> <body><h1>Video Example</h1><video src="html5test.ogg" width="320" height="240" controls poster="html5testvideoposter.jpg"> <a href="html5testvideo.ogg">Download movie</a></video> </body></html> 79
  80. <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Basic HTML5 Web Document Structure</title> </head> <body><h1>Video Example</h1><video src="html5test.ogg" width="320" height="240" controls poster="html5testvideoposter.jpg"> DEMO <a href="html5testvideo.ogg">Download movie</a></video> </body></html> 80
  81. HTML5 VIDEO• WIDTH and HEIGHT should be required, IMO, but movie plays anyway based on the values in the video file itself.• Video formats may have their own posterframe. The browser should use that by default unless overridden by valid POSTER attribute value.• Text can be included within VIDEO element to allow user to download video if their browser doesn’t support.• If you want to give users control, use CONTROL attribute. 81
  82. HTML5 VIDEO• Video can start automatically if using the AUTOPLAY=”1” attribute and value.• Spec provides for LOOP, AUTOBUFFER which also take a value of O or 1.• Codecs support... 82
  83. HTML5 VIDEO“It would be helpful for interoperability if all browsers couldsupport the same codecs.However, there are no known codecs that satisfy all thecurrent players: we need a codec that is known to not requireper-unit or per-distributor licensing, that is compatible with theopen source development model, that is of sufficient quality asto be usable, and that is not an additional submarine patentrisk for large companies.This is an ongoing issue and this section will be updated oncemore information is available.”- http://www.whatwg.org/specs/web-apps/current-work/#video-and- audio-codecs-for-video-elements 83
  84. CODECS• Ogg (or “Vorbis”) • No need to worry about patents• H.264 • Created by the MPEG group • If you have blu-ray disc player, you are using it• WebM • A wrapper for the VP8 video and Ogg audio streams 84
  85. VIDEO CODEC SUPPORT FF3.6+ S Ch5+ Op10.6+ IE9+Ogg Y Y YH.264 Y Y* YWebM (W4.02+) (Ch6+) Y 85
  86. http://firefogg.org/ 86
  87. http://www.videolan.org/vlc/ 87
  88. http://handbrake.fr/ 88
  89. LESSONS LEARNED• Use VLC or Firefogg to encode common movie files types to OGG• H.264 encoding? Use Handbrake• If you are hot to trot for HTML5 Video, like, right now, check out Mark Pilgrim’s tutorial: http://diveintohtml5.org/video.html • Good primer: http://dev.opera.com/articles/view/introduction-html5-video/ 89
  90. 90
  91. 91
  92. <script> function playPause() { var myVideo = document.getElementsByTagName(video)[0]; if (myVideo.paused) myVideo.play(); else myVideo.pause(); } </script> 92
  93. <input type=button onclick="playPause()" value="Play/Pause"tabindex="0" /> 93
  94. HTML5 VIDEO & CAPTIONS 94
  95. [Captioning] has been shown to improvereading skills among adults who are non-readers.http://www.ldonline.org/article/35793 95
  96. 96
  97. DEMO 97
  98. QUICK & DIRTYCAPTIONING 98
  99. http://github.com/johnmcc/jCaps 99
  100. 100
  101. 101
  102. SRT FILES• SRT files are text files used in video playback; therefore, they do not contain any video data.• Text file containing subtitles used by various video playback programs; supported by DivX, DVD, and other video formats; • Includesthe time each subtitle should be displayed followed by the text of the subtitles. • Subtitlefiles are often named according to the language of the subtitles, i.e. "moviename-eng.srt" for English and "moviename-ger.srt" for German subtitles. 102
  103. TRANSCRIPT-EN.SRT100:00:00,000 --> 00:00:6,000Allow me to introduce myself My name is Tay Its T-A-Y, T-A-Y to the Z200:00:06,000 --> 00:00:9,000This is the web and its gonna murder your TV It was Chocolate Rain300:00:09,500 --> 00:00:11,500Wrote a song about that history Chocolate Rain400:00:12,000 --> 00:00:15,000Now Im paid a hefty hefty fee Chocolate Rain 103
  104. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script><script src="jquery.jcap.js"></script> 104
  105.  <video id="myVid" width="400" src="cherry-chocolate-rain.ogv" autobuffer controls>  <track src="transcript-en.srt" type="text/srt" language="en"role="textaudesc"></track>  <track src="transcript-gr.srt" type="text/srt" language="gr"role="textaudesc"></track>  <p>Alternative text...</p></video> 105
  106.  <video id="myVid" width="400" src="cherry-chocolate-rain.ogv"autobuffer controls>  <track src="transcript-en.srt" type="text/srt"language="en" role="textaudesc"></track>  <track src="transcript-gr.srt" type="text/srt"language="gr" role="textaudesc"></track>  <p>Alternative text goes here.</p></video> 106
  107. HTML5 & GEOLOCATION 107
  108. 108
  109. 109
  110. 110
  111. 111
  112. 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 +.); }} ...or use Modernizr! 112
  113. 113
  114. http://github.com/teleject/HTML5-GeoLocation-jQuery-Plugin 114
  115. <div class="vcard"> <a class="url fn n" href="http://www.theqcard.com/"> <span class="given-name">Jane</span> <span class="additional-name"></span> <span class="family-name">Smith</span> </a> <div class="org">Old School BBQ and Grill</div> <div class="adr"> <div class="street-address">2907 E MLK Jr Blvd.</div> <span class="locality">Austin</span>, <span class="region">TX</span>, <span class="postal-code">78702</span> <span class="country-name">USA</span> </div> <div class="tel">512-974-6830</div> <div class="note distance"> </div> http://microformats.org/code/hcard/creator</div> 115
  116. <div id="locations2"> <ol> <li><!-- Microformats address 1 --></li> <li><!-- Microformats address 2 --></li> <li><!-- Microformats address 3 --></li> <li><!-- Microformats address 4 --></li> ... </ol></div> 116
  117. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="js/jquery-location.1.0.0.js"></script> 117
  118. 118
  119. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="js/jquery-location.1.0.0.js"></script><script type="text/javascript"> $(document).ready(function() { $(#locations2).location({ apiKey : YOUR_API_KEY_HERE }); });</script> 119
  120. http://2010.incontrolconference.com/eats/ 120
  121. <div class="vcard"> <a class="url fn n" href="http://www.theqcard.com/"> <span class="given-name">Jane</span> <span class="additional-name"></span> <span class="family-name">Smith</span> </a> <div class="org">Old School BBQ and Grill</div> <div class="adr" data-longitude="-97.723410" data-latitude="30.262098"> <div class="street-address">2907 E MLK Jr Blvd.</div> <span class="locality">Austin</span>, <span class="region">TX</span>, <span class="postal-code">78702</span> <span class="country-name">USA</span> </div> <div class="tel">512-974-6830</div> <div class="note distance"> </div> http://geocoder.us/</div> 121
  122. $(#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? } ); 122
  123. HTML5 CANVAS 123
  124. <canvas id="myCanvas" width="300" height="150">Fallback content, in case the browser does not support Canvas.</canvas> 124
  125. <script type="text/javascript"><!--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! Lets draw a blue rectangle. context.fillStyle = #00f; context.fillRect(0, 0, 150, 100);}, false);// --></script> 125
  126. 126
  127. // 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); 127
  128. 128
  129. // 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); 129
  130. http://flickr.com/photos/dunstan/3099313036/ 130
  131. LUNAR LANDER EXAMPLE 131
  132. BUT IS IT ACCESSIBLE? 132
  133. ACCESSIBLE CANVAS ISSUES• Setting user interface elements in canvas• Setting images in canvas• Setting text in canvas http://www.paciellogroup.com/blog/?p=362 133
  134. PROGRESSIVE ENHANCEMENT & CANVAS “Progressive enhancement is a strategy for web design thatemphasizes accessibility, semantic HTML markup, and external style sheet and scripting technologies.” http://en.wikipedia.org/wiki/Progressive_enhancement 134
  135. http://www.filamentgroup.com/lab/jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas/ 135
  136. http://www.filamentgroup.com/lab/jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas/ 136
  137. <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> 137
  138. 138
  139. <link type="text/css" rel="stylesheet"href="visualize.jQuery.css"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><!--[if IE]><script type="text/javascript" src="excanvas.compiled.js"></script><![endif]--><script type="text/javascript" src="visualize.jQuery.js"></script><script type="text/javascript">$(function(){ $(table).addClass(accessHide); $(table).visualize({type: line, colors: [#fff]}); });</script> 139
  140. <link type="text/css" rel="stylesheet" href="visualize.jQuery.css"/><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><!--[if IE]><script type="text/javascript" src="excanvas.compiled.js"></script><![endif]--><script type="text/javascript" src="visualize.jQuery.js"></script><script type="text/javascript">$(function(){ $(table).addClass(accessHide); $(table).visualize({type: line, colors: [#fff]}); });</script> 140
  141. <link type="text/css" rel="stylesheet" href="visualize.jQuery.css"/><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><!--[if IE]><script type="text/javascript"src="excanvas.compiled.js"></script><![endif]--><script type="text/javascript" src="visualize.jQuery.js"></script><script type="text/javascript">$(function(){ $(table).addClass(accessHide); $(table).visualize({type: line, colors: [#fff]}); });</script> 141
  142. http://msdn.microsoft.com/en-us/library/bb250524(VS.85).aspx 142
  143. <link type="text/css" rel="stylesheet" href="visualize.jQuery.css"/><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><!--[if IE]><script type="text/javascript" src="excanvas.compiled.js"></script><![endif]--><script type="text/javascript"src="visualize.jQuery.js"></script><script type="text/javascript">$(function(){ $(table).addClass(accessHide); $(table).visualize({type: line, colors: [#fff]}); });</script> 143
  144. <link type="text/css" rel="stylesheet" href="visualize.jQuery.css"/><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><!--[if IE]><script type="text/javascript" src="excanvas.compiled.js"></script><![endif]--><script type="text/javascript" src="visualize.jQuery.js"></script><script type="text/javascript">$(function(){ $(table).addClass(accessHide); $(table).visualize({type: line, colors: [#fff]}); });</script> 144
  145. table.accessHide { position: absolute; left: -999999px;}table { height: 100px; width: 250px;} 145
  146. <link type="text/css" rel="stylesheet" href="visualize.jQuery.css"/><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><!--[if IE]><script type="text/javascript" src="excanvas.compiled.js"></script><![endif]--><script type="text/javascript" src="visualize.jQuery.js"></script><script type="text/javascript">$(function(){ $(table).addClass(accessHide); $(table).visualize({type: line, colors: [#fff]}); });</script> 146
  147. 147
  148. http://flickr.com/photos/dunstan/3099313036/ 148
  149. XHTML, ...I THINK I WANT TO SEEANOTHER MARKUP SPEC. 149
  150. TAKE AWAYS• New HTML5 elements for improved semantics• HTML5 Audio• HTML5 Video • Online video with HTML+JS captioning• HTML5 Geolocation 150
  151. RECOMMENDED Design for Web Applications by Matt May and Wendy• Universal Chisholm• Bulletproof Ajax by Jeremy Keith• Designing with Progressive Enhancement by Filament Group• Microformats Made Simple by Emily Lewis• HTML5 Cookbook by a whole bunch of people! 151
  152. UPCOMING E4H EVENTS• Online, live 3rd Annual CSS Summit on July 26-27th • http://CSSsummit.com/• Online, live Mobile JavaScript Summit on Aug. 30th • http://MobileJSsummit.com/• Online, live 2nd Annual Accessibility Summit on Sept. 27th • http://a11ysummit.com/• SAVE 20% off with “PSUWEB” discount code 152
  153. THANK YOU! Christopher Schmittschmitt@heatvision.comhttp://twitter.com/teleject 153

×