Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
EDUICONF                  2011         HTML5         WORKSHOP                        ❦Christopher Schmitt | http://twitter...
THINGS ARE GOODBETWEEN US, XHTML,RIGHT?I MEAN. WE GET ALONG WELL.AND WE BOTH LIKE STUFF.               2               3
http://dev.opera.com/articles/view/mama-markup-validation-report/                                3
4
“THE ATTEMPT TO GET THE WORLD TO SWITCH TO XML,INCLUDING QUOTES AROUND   ATTRIBUTE VALUES AND SLASHES IN EMPTY TAGS AND  N...
http://www.flickr.com/photos/teleject/432030263/                       6
7
http://microformats.org/           8
9
10
11
BLUEPRINTS VS REALITY http://www.amazon.com/gp/product/0140139966                      12
“TAKE CARE   OF THE LUXURIES AND THE NECESSITIES WILL TAKE  CARE OF THEMSELVES.”FRANK LLOYD WRIGHT            13
AGENDA ITEMS• What’s     different from XHTML to HTML5• Building   with HTML5 (You are here.)  • BasicSyntax, Progressive ...
BUILDINGWITH HTML5    15
DOCTYPE   16
HTML 4.01 Transitional DTD:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/1999/REC-ht...
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>AUSTIN, TX BBQ RESTAURANTS</title></head><body> <h1>.....
EXERCISE•   Go to HTML validator at    http://validator.w3.org/#validate_by_input•   Then type the following HTML (below) ...
20
21
CHARACTER SET      22
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8" />                  23
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>AUSTIN, TX BBQ RESTAURANTS</title></head><body> <h1>.....
SPECIFY YOUR LANGUAGE     25
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>AUSTIN, TX BBQ RESTAURANTS</title></head><body> <h1>.....
INCLUDING<SCRIPT> & <STYLE>        27
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <link rel="stylesheet" href="styles.css" /> <script src="scri...
SYNTAX  29
<img src=“file.png” />          30
<IMG SRC=file.png />         31
<iMg SrC=file.png />         32
<IMG SRC=file.png />         33
<video controls=controls>            34
EVERYTHING THATWAS BAD IN 1999IS GOOD AGAIN           35
RELEARNING SYNTAX•   Attribute quotes “not really” required•   UPPERCASE and lowercase HTML elements allowed    •   So is ...
BRINGING BACK <B> AND OTHER TAGS        37
<p>My name is<em>Jane</em>, not    John.</p>        38
<p>Sally thought toherself, <i>when will IE6     die?</i></p>            39
<p><strong>Registration isrequired</strong> for this       event.</p>            40
<p><b>Once upon atime,</b> there was a man  who lost his mind.</p>            41
<p><small>The owner ofthis blog is not responsible for mind blowage. Please   consume at your own     risk.</small></p>   ...
<abbr title="Accessible    Rich InternetApplications">ARIA</         abbr>      No more <acronym>              43
THE COOLEST THINGEVER ABOUT HTML5.      (TO ME.)        44
<h1><a href="http://example.com"> HTML5, for Fun &amp; Profit</a></h1><a href="http://example.com"><img src="logo.png" alt=...
<a href="http://example.com"><h1>HTML5, for Fun &amp; Profit</h1><img src="logo.png" alt="HTML5 forFun and Profit" /></a>   ...
FIGURES & CAPTIONS        47
<figure>	 <img src="chart.png" alt="Chart ofincreasing awesomeness" />	 <figcaption>The increasing amount ofawesome that thi...
FIGURE•   Not restricted to containing IMGs    •   Tables    •   Audio    •   Video    •   Charts    •   Code snippets    ...
COLLAPSABLE CONTENT         50
51
<details>   <summary>Upcoming Topics</summary>   <p>For the new year, we have a great line upof articles!</p>   <ul>   <li...
NUMBERING  LISTS    53
54
<ol start="3"><li>Apples</li><li>Oranges</li><li>Bananas</li></ol>                   55
56
<p>The results are in for your favorite fruit,and we have a tie for first place!</p><ol><li value="1">Bananas</li><li value...
EDITABLE ELEMENTS        58
59
<div contenteditable><p>Quick Fox Jumped Over the Lazy Dog</p></div>                    60
DRAG N DROP     61
<h2 draggable>Block-Level Links</h2>      http://html5doctor.com/native-drag-and-drop/                           62
HTML5, MICROFORMATS    & METADATA         63
64
“Designed for humans first and       machines second,microformats are a set of simple, open data formats built upon      ex...
“HTML design patterns for commonchunks of content that web builders need           to markup anyway.”“Oh, and Google under...
67
REPLACING ABBR•   <ABBR> element is used by screenreaders to expand abbreviations    like “lbs” or “NCAAP”•   However unin...
<div class="vevent"> <a class="url" href="http://www.web2con.com/">http://www.web2con.com</a> <span class="summary">Web 2....
<div class="vevent"> <a class="url" href="http://www.web2con.com/">http://www.web2con.com</a> <span class="summary">Web 2....
POSTSCRIPT•   <ABBR> issue has ben resolved with new pattern (dropping <ABBR>    altogether):    http://microformats.org/w...
DATA-ATTRIBUTE•   You can set data-attribute to any element you want.•   Set meta information that can be utilized by Java...
ATTR SELECTORimg[data-imgtype=“mugshot”] {/* CSS rules go here */}              73
PAGE STRUCTURE      74
DIV ID=“header”               DIV ID=“nav”DIV ID=“section”                           DIV ID=“sidecolumn”DIV ID=“article”  ...
<HEADER>             <NAV><SECTION>                       <ASIDE><ARTICLE>            <FOOTER>               76
ARTICLE VS ASIDE VS                 SECTION•   Marc Grabsanki says:    •   Article is unique content to that document    •...
ARTICLE VS ASIDE VS                    SECTION•   Bruce Lawson says:    •   Aside is for something tangentially related to...
ARTICLE VS ASIDE VS                   SECTION•   Molly Holzschlag, Opera standards evangelist, says:    •   <section> clar...
WHAT ABOUT THE DIVS?•   Marc Grabanski, jQuery and HTML5 guy:    •   “div has no meaning whatsoever, so there is nothing s...
<body> <header> <h1>Heading </h1> </header> <nav> <h3>Site Navigation</h3> <ul>...</ul>	 </nav> <section>  <article> <h3>W...
82
83
<script type="text/javascript">document.createElement(header);document.createElement(nav);document.createElement(section);...
85
PROGRESSIVELYENHANCED HTML5(INFUSED WITH SHIM)         86
87
http://modernizr.com/          88
<script src="-/js/modernizr.min.js" type="text/javascript" ></script>                          89
<html lang="en" class=" canvas canvastextgeolocation rgba hsla multiplebgs borderimageborderradius boxshadow opacity cssan...
.audio #error { display: none;}.no-audio #error-box { background-color: #ffffcc; padding: 1px 10px; color: #000; border: 5...
<script>if (Modernizr.audio) { function playPause() {  var myAudio = document.getElementsByTagName(audio)[0];if(myAudio.pa...
Modernizr.load({  test: Modernizr.geolocation,  yep : geo.js,  nope: geo-polyfill.js});                    JS Feature Detec...
94
Pick and Choose Features to Detect                95
AUDIO/VIDEO     96
HTML5 AUDIO     97
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Basic HTML5 Web Document Structure</title>	 </head>	 <bo...
DEMO 99
HTML5 AUDIO•   AUDIO element attributes are SRC, AUTOBUFFER, AUTOPLAY,    LOOP, CONTROLS•   If you don’t have CONTROL, pla...
HTML5 AUDIO SUPPORT         FF3.5+   S4+         Ch3+   Op10.5+   IE9+ Ogg           Y                   Y       YVorbisMP...
SUPPORTING AUDIO<audio controls autobuffer> <source src="html5audio.mp3" /> <source src="html5audio.ogg" /> <!-- include A...
SUPPORTING AUDIO•   If you do insert audio, setting the file to autoplay is not recommended,    as it interferes with the e...
HTML5 VIDEO     104
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Basic HTML5 Web Document Structure</title>	  </head>	  <...
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Basic HTML5 Web Document Structure</title>	 </head>	 <bo...
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Basic HTML5 Web Document Structure</title>	 </head>	 <bo...
HTML5 VIDEO•   WIDTH and HEIGHT should be required, IMO, but movie plays anyway    based on the values in the video file it...
HTML5 VIDEO•   Video can start automatically if using the AUTOPLAY=”1” attribute and    value.•   Spec provides for LOOP, ...
HTML5 VIDEO“It would be helpful for interoperability if all browsers couldsupport the same codecs.However, there are no kn...
CODECS•   Ogg (or “Vorbis”)    •   No need to worry about patents•   H.264    •   Created by the MPEG group    •   If you ...
VIDEO CODEC SUPPORT        FF3.6+   S         Ch5+     Op10.6+   IE9+Ogg       Y                  Y        YH.264         ...
LESSONS LEARNED•   To get most <video> support, you need 2 video files: H.264    and .OGG.    •   iOS Devices can handle MP...
http://firefogg.org/        114
http://www.videolan.org/vlc/             115
http://handbrake.fr/         116
LESSONS LEARNED•   Use VLC or Firefogg to encode common movie files types to OGG•   H.264 encoding? Use Handbrake•   If you...
118
119
<script>	   function playPause() {	     var myVideo = document.getElementsByTagName(video)[0];	     if (myVideo.paused)	  ...
<input type=button onclick="playPause()" value="Play/Pause"tabindex="0" />                               121
HTML5 VIDEO & CAPTIONS          122
For students with LD and struggling orbeginning readers, the use of captions orsubtitles can lead to increases in:  •readi...
[Captioning] has been shown to improvereading skills among adults who are non-readers.http://www.ldonline.org/article/3579...
125
DEMO 126
QUICK & DIRTYCAPTIONING      127
http://github.com/johnmcc/jCaps              128
129
130
SRT FILES• SRT files are text files used in video playback; therefore, they do not contain any video data.• Text     file con...
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:...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script><script src="jquery.jcap.js"></script> ...
 <video id="myVid" width="400" src="cherry-chocolate-rain.ogv" autobuffer controls>  <track src="transcript-en.srt" type="...
 <video id="myVid" width="400" src="cherry-chocolate-rain.ogv"autobuffer controls>  <track src="transcript-en.srt" type="t...
HTML5 GEOLOCATION        136
OH, PATHOS! http://youtu.be/_naLuRykun8             137
138
139
140
141
142
if (navigator.geolocation) {	 navigator.geolocation.getCurrentPosition(show_coordinates);	function show_coordinates(positi...
144
THAT’S GREAT, BUT•I   don’t read longitude and latitude.     • More  importantly, my clients or site visitors don’t compre...
http://2010.incontrolconference.com/eats/                   146
http://atxwebshow.com/coffeeshops/                147
http://atxwebshow.com/coffeeshops/                148
STEP #1Muck-N-Daves Texas BBQ1603 South CongressAustin, TX 78704 USA512-590-3387Old School BBQ and Grill2326 E Cesar Chave...
STEP #2• Convert   addresses to hCard microformats            http://microformats.org/code/hcard/creator                  ...
<div class="vcard">	 <a class="url fn n" href="http://www.theqcard.com/">	 <span class="given-name">Jane</span>	 <span cla...
STEP #3  hCard  hCard  hCard  hCard    152
STEP #3<ol>   <li>            hCard                    </li>   <li>            hCard                    </li>   <li>      ...
STEP #4<div id="locations">	 <ol>	 	 <li><!-- Microformats address 1 --></li>	 	 <li><!-- Microformats address 2 --></li>	...
STEP #5http://github.com/teleject/HTML5-GeoLocation-jQuery-Plugin                            155
STEP #6<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script><scr...
STEP #7http://code.google.com/apis/maps/signup.html                     157
STEP #8<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><scri...
STEP #9 PROFIT!       159
ONE MORE THING...        160
<div class="vcard">	 <a class="url fn n" href="http://www.theqcard.com/">	 <span class="given-name">Jane</span>	 <span cla...
$(#locations).location(	 {	 	 apiKey: YOUR_API_KEY_HERE,	 	 geodata: #geodata, // site visitor’s location	 	 notification: ...
WEB FORMS    163
164
<form><p><label>Search <input type="search"name="query"></label></p><p><button type="submit">Submit</button></p></form>   ...
166
<form><fieldset><legend>Contact Information</legend><p><label>E-mail address <input type="email" name="email"></label></p><...
168
<form><p><label>Appointment Date and Time<input type="datetime"name="dateAndTime"></label></p></form>                     ...
170
<form><fieldset><legend>Appointment Request</legend><p><label>Date <input type="date"name="date"></label></p><p><label>Time...
172
<form><p><label>Quantity <input type="number"name="quantity"></label></p><p><button type="submit">Submit</button></p></for...
174
<form><p><label>Quantity (must order in pairs of 2)<input type="number"name="quantity" min="2" max="20"step="2"></label></...
176
<form><p><label>Volume <input type="range"name="volume" min="0" max="10" step=".5"value="5"></label></p></form>           ...
178
<form><p><label>Background color <inputtype="color" name="bg"></label></p><p><label>Foreground color <input type="color"na...
180
<form><p><label>Donation amount <input type="text"name="donation"list="donations"></label></p><datalist id="donations"><op...
182
<form><p><label for="donation">Donation amount</label><datalist id="donations"><select name="donation"><option></option><o...
184
<form><fieldset><legend>Login</legend><p><label>Username <input type="text"name="username" required></label></p><p><label>P...
186
<p><label>E-mail address <input type="email"name="email"placeholder="user@domain.com"></label></p><p><label>Web site <inpu...
<form><p><label>Search <input type="search"name="query" autofocus></label></p><p><button type="submit">Submit</button></p>...
<form><fieldset><legend>Login</legend><p><label>Username <input type="text"name="username"></label></p><p><label>Password <...
190
<form><p><label>Telephone number <input type="tel"name="phone"pattern="[2-9][0-9]{2}-[0-9]{3}-[0-9]{4}"title="North Americ...
HTML5 CANVAS     192
<canvas id="myCanvas" width="300" height="150">Fallback content, in case the browser does not support Canvas.</canvas>    ...
<script type="text/javascript"><!--window.addEventListener(load, function () { // Get the canvas element. var elem = docum...
195
// Get the canvas element. var elem = document.getElementById(myCanvas); if (!elem || !elem.getContext) {   return; } // G...
197
// Get the canvas element. var elem = document.getElementById(myCanvas); if (!elem || !elem.getContext) {   return; } // G...
http://flickr.com/photos/dunstan/3099313036/                    199
BUT IS IT ACCESSIBLE?          200
ACCESSIBLE CANVAS ISSUES• Setting   user interface elements in canvas• Setting   images in canvas• Setting   text in canva...
PROGRESSIVE ENHANCEMENT         & CANVAS   “Progressive enhancement is a strategy for web design thatemphasizes accessibil...
http://www.filamentgroup.com/lab/jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas/                ...
http://www.filamentgroup.com/lab/jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas/                ...
<table >	   <caption>My Push Ups</caption>	   <thead><tr>	   <td></td>	   <th>M</th>	   <th>Tu</th>	   <th>W</th>	   <th>T...
206
<link type="text/css" rel="stylesheet"href="visualize.jQuery.css"><script type="text/javascript" src="http://ajax.googleap...
<link type="text/css" rel="stylesheet" href="visualize.jQuery.css"/><script type="text/javascript" src="http://ajax.google...
<link type="text/css" rel="stylesheet" href="visualize.jQuery.css"/><script type="text/javascript" src="http://ajax.google...
http://msdn.microsoft.com/en-us/library/bb250524(VS.85).aspx                             210
<link type="text/css" rel="stylesheet" href="visualize.jQuery.css"/><script type="text/javascript" src="http://ajax.google...
<link type="text/css" rel="stylesheet" href="visualize.jQuery.css"/><script type="text/javascript" src="http://ajax.google...
table.accessHide { position: absolute; left: -999999px;}table { height: 100px; width: 250px;}                             ...
<link type="text/css" rel="stylesheet" href="visualize.jQuery.css"/><script type="text/javascript" src="http://ajax.google...
215
http://flickr.com/photos/dunstan/3099313036/                    216
XHTML, ...I THINK I WANT TO SEEANOTHER MARKUP SPEC.                 217
RECOMMENDED         Design for Web Applications by Matt May and Wendy• Universal Chisholm• Bulletproof Ajax   by Jeremy Ke...
UPCOMING E4H EVENTS• Online, live   3rd Annual online, live jQuery Summit on Nov. 15-16th  • Designer  Track on Nov. 15 - ...
THANK YOU!   Christopher Schmittschmitt@heatvision.comhttp://twitter.com/teleject             220
Upcoming SlideShare
Loading in …5
×

[edUi] HTML5 Workshop

2,971 views

Published on

Published in: Technology, News & Politics
  • Be the first to comment

[edUi] HTML5 Workshop

  1. 1. EDUICONF 2011 HTML5 WORKSHOP ❦Christopher Schmitt | http://twitter.com/@teleject
  2. 2. THINGS ARE GOODBETWEEN US, XHTML,RIGHT?I MEAN. WE GET ALONG WELL.AND WE BOTH LIKE STUFF. 2 3
  3. 3. http://dev.opera.com/articles/view/mama-markup-validation-report/ 3
  4. 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 5
  6. 6. http://www.flickr.com/photos/teleject/432030263/ 6
  7. 7. 7
  8. 8. http://microformats.org/ 8
  9. 9. 9
  10. 10. 10
  11. 11. 11
  12. 12. BLUEPRINTS VS REALITY http://www.amazon.com/gp/product/0140139966 12
  13. 13. “TAKE CARE OF THE LUXURIES AND THE NECESSITIES WILL TAKE CARE OF THEMSELVES.”FRANK LLOYD WRIGHT 13
  14. 14. AGENDA ITEMS• What’s different from XHTML to HTML5• Building with HTML5 (You are here.) • BasicSyntax, Progressive Markup, Accessibility, Geolocation, Audio/Video, Web Forms• Prizes! http://interactwithwebstandards.com/ 14
  15. 15. BUILDINGWITH HTML5 15
  16. 16. DOCTYPE 16
  17. 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. 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. 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. 20
  21. 21. 21
  22. 22. CHARACTER SET 22
  23. 23. <meta http-equiv="Content-Type"content="text/html; charset=UTF-8" /> 23
  24. 24. <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>AUSTIN, TX BBQ RESTAURANTS</title></head><body> <h1>....</h1> <p>...</p> </body></html> http://shiflett.org/blog/2005/dec/googles-xss-vulnerability. 24
  25. 25. SPECIFY YOUR LANGUAGE 25
  26. 26. <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>AUSTIN, TX BBQ RESTAURANTS</title></head><body> <h1>....</h1> <p>...</p> </body></html> 26
  27. 27. INCLUDING<SCRIPT> & <STYLE> 27
  28. 28. <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <link rel="stylesheet" href="styles.css" /> <script src="scripts.js"></script> <title>AUSTIN, TX BBQ RESTAURANTS</title></head><body> <h1>....</h1> <p>...</p> </body> 28
  29. 29. SYNTAX 29
  30. 30. <img src=“file.png” /> 30
  31. 31. <IMG SRC=file.png /> 31
  32. 32. <iMg SrC=file.png /> 32
  33. 33. <IMG SRC=file.png /> 33
  34. 34. <video controls=controls> 34
  35. 35. EVERYTHING THATWAS BAD IN 1999IS GOOD AGAIN 35
  36. 36. 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. 36
  37. 37. BRINGING BACK <B> AND OTHER TAGS 37
  38. 38. <p>My name is<em>Jane</em>, not John.</p> 38
  39. 39. <p>Sally thought toherself, <i>when will IE6 die?</i></p> 39
  40. 40. <p><strong>Registration isrequired</strong> for this event.</p> 40
  41. 41. <p><b>Once upon atime,</b> there was a man who lost his mind.</p> 41
  42. 42. <p><small>The owner ofthis blog is not responsible for mind blowage. Please consume at your own risk.</small></p> 42
  43. 43. <abbr title="Accessible Rich InternetApplications">ARIA</ abbr> No more <acronym> 43
  44. 44. THE COOLEST THINGEVER ABOUT HTML5. (TO ME.) 44
  45. 45. <h1><a href="http://example.com"> HTML5, for Fun &amp; Profit</a></h1><a href="http://example.com"><img src="logo.png" alt="HTML5 forFun and Profit" /></a> 45
  46. 46. <a href="http://example.com"><h1>HTML5, for Fun &amp; Profit</h1><img src="logo.png" alt="HTML5 forFun and Profit" /></a> 46
  47. 47. FIGURES & CAPTIONS 47
  48. 48. <figure> <img src="chart.png" alt="Chart ofincreasing awesomeness" /> <figcaption>The increasing amount ofawesome that this blogdemonstrates.</figcaption></figure> 48
  49. 49. FIGURE• Not restricted to containing IMGs • Tables • Audio • Video • Charts • Code snippets 49
  50. 50. COLLAPSABLE CONTENT 50
  51. 51. 51
  52. 52. <details> <summary>Upcoming Topics</summary> <p>For the new year, we have a great line upof articles!</p> <ul> <li>Understanding theOutline 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 52
  53. 53. NUMBERING LISTS 53
  54. 54. 54
  55. 55. <ol start="3"><li>Apples</li><li>Oranges</li><li>Bananas</li></ol> 55
  56. 56. 56
  57. 57. <p>The results are in for your favorite fruit,and we have a tie for first place!</p><ol><li value="1">Bananas</li><li value="1">Oranges</li><li value="2">Apples</li></ol> 57
  58. 58. EDITABLE ELEMENTS 58
  59. 59. 59
  60. 60. <div contenteditable><p>Quick Fox Jumped Over the Lazy Dog</p></div> 60
  61. 61. DRAG N DROP 61
  62. 62. <h2 draggable>Block-Level Links</h2> http://html5doctor.com/native-drag-and-drop/ 62
  63. 63. HTML5, MICROFORMATS & METADATA 63
  64. 64. 64
  65. 65. “Designed for humans first and machines second,microformats are a set of simple, open data formats built upon existing and widely adopted standards.” 65
  66. 66. “HTML design patterns for commonchunks of content that web builders need to markup anyway.”“Oh, and Google understands them, too.” 66
  67. 67. 67
  68. 68. 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/ 68
  69. 69. <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> 69
  70. 70. <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/ 70
  71. 71. 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> 71
  72. 72. 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”> 72
  73. 73. ATTR SELECTORimg[data-imgtype=“mugshot”] {/* CSS rules go here */} 73
  74. 74. PAGE STRUCTURE 74
  75. 75. DIV ID=“header” DIV ID=“nav”DIV ID=“section” DIV ID=“sidecolumn”DIV ID=“article” DIV ID=“footer” 75
  76. 76. <HEADER> <NAV><SECTION> <ASIDE><ARTICLE> <FOOTER> 76
  77. 77. ARTICLE VS ASIDE VS SECTION• Marc Grabsanki says: • Article is unique content to that document • Section is a thematic grouping of content, typically with a heading - pretty generic • Aside is content that is tangentially related, like a sidebar div has no meaning whatsoever, so there is nothing semantic about divs 77
  78. 78. ARTICLE VS ASIDE VS SECTION• Bruce Lawson says: • 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. • Article is a discrete piece of content that could be syndicated - a blog post, a news item, a comment, a widget • 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. 78
  79. 79. 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 79
  80. 80. 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.” 80
  81. 81. <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> 81
  82. 82. 82
  83. 83. 83
  84. 84. <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/ 84
  85. 85. 85
  86. 86. PROGRESSIVELYENHANCED HTML5(INFUSED WITH SHIM) 86
  87. 87. 87
  88. 88. http://modernizr.com/ 88
  89. 89. <script src="-/js/modernizr.min.js" type="text/javascript" ></script> 89
  90. 90. <html lang="en" class=" canvas canvastextgeolocation rgba hsla multiplebgs borderimageborderradius boxshadow opacity cssanimationscsscolumns cssgradients cssreflectionscsstransforms csstransforms3d csstransitionsvideo audio localstorage sessionstoragewebworkers applicationcache fontface"> 90
  91. 91. .audio #error { display: none;}.no-audio #error-box { background-color: #ffffcc; padding: 1px 10px; color: #000; border: 5px solid #ffff66;} CSS Feature Detection 91
  92. 92. <script>if (Modernizr.audio) { function playPause() { var myAudio = document.getElementsByTagName(audio)[0];if(myAudio.paused) myAudio.play(); else myAudio.pause();}}</script> JS Feature Detection 92
  93. 93. Modernizr.load({ test: Modernizr.geolocation, yep : geo.js, nope: geo-polyfill.js}); JS Feature Detection 93
  94. 94. 94
  95. 95. Pick and Choose Features to Detect 95
  96. 96. AUDIO/VIDEO 96
  97. 97. HTML5 AUDIO 97
  98. 98. <!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> 98
  99. 99. DEMO 99
  100. 100. HTML5 AUDIO• AUDIO element attributes are SRC, AUTOBUFFER, AUTOPLAY, LOOP, CONTROLS• If you don’t have CONTROL, player becomes transparent 100
  101. 101. HTML5 AUDIO SUPPORT FF3.5+ S4+ Ch3+ Op10.5+ IE9+ Ogg Y Y YVorbisMP3 Y Y YWAV Y Y Y 101
  102. 102. 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 102
  103. 103. SUPPORTING AUDIO• 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.• Don’t use WAV file type. • Better to ship a compact disc to the user instead. 103
  104. 104. HTML5 VIDEO 104
  105. 105. <!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> 105
  106. 106. <!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> 106
  107. 107. <!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> 107
  108. 108. 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. 108
  109. 109. 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... 109
  110. 110. 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 110
  111. 111. 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 111
  112. 112. VIDEO CODEC SUPPORT FF3.6+ S Ch5+ Op10.6+ IE9+Ogg Y Y YH.264 Y Y* YWebM (W4.02+) (Ch6+) Y 112
  113. 113. LESSONS LEARNED• To get most <video> support, you need 2 video files: H.264 and .OGG. • iOS Devices can handle MP4 (H.264) • Safari, IE, Flash can deliver MP4 (H.264) • Firefox, Opera can deliver .OGG • Then hit them with FLV video, which supports H.264 http://camendesign.com/code/video_for_everybody 113
  114. 114. http://firefogg.org/ 114
  115. 115. http://www.videolan.org/vlc/ 115
  116. 116. http://handbrake.fr/ 116
  117. 117. 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/ 117
  118. 118. 118
  119. 119. 119
  120. 120. <script> function playPause() { var myVideo = document.getElementsByTagName(video)[0]; if (myVideo.paused) myVideo.play(); else myVideo.pause(); } </script> 120
  121. 121. <input type=button onclick="playPause()" value="Play/Pause"tabindex="0" /> 121
  122. 122. HTML5 VIDEO & CAPTIONS 122
  123. 123. For students with LD and struggling orbeginning readers, the use of captions orsubtitles can lead to increases in: •reading speed, •word knowledge, •decoding, •vocabulary acquisition, •word recognition, •reading comprehension, and •oral reading rates. 123
  124. 124. [Captioning] has been shown to improvereading skills among adults who are non-readers.http://www.ldonline.org/article/35793 124
  125. 125. 125
  126. 126. DEMO 126
  127. 127. QUICK & DIRTYCAPTIONING 127
  128. 128. http://github.com/johnmcc/jCaps 128
  129. 129. 129
  130. 130. 130
  131. 131. 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. 131
  132. 132. 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 132
  133. 133. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script><script src="jquery.jcap.js"></script> 133
  134. 134.  <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> 134
  135. 135.  <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> 135
  136. 136. HTML5 GEOLOCATION 136
  137. 137. OH, PATHOS! http://youtu.be/_naLuRykun8 137
  138. 138. 138
  139. 139. 139
  140. 140. 140
  141. 141. 141
  142. 142. 142
  143. 143. 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.geolocat ...or use Modernizr! yep : geo.js, nope: geo-polyfill.js 143 });
  144. 144. 144
  145. 145. THAT’S GREAT, BUT•I don’t read longitude and latitude. • More importantly, my clients or site visitors don’t comprehend longitude and latitude.• And I don’t love the code! 145
  146. 146. http://2010.incontrolconference.com/eats/ 146
  147. 147. http://atxwebshow.com/coffeeshops/ 147
  148. 148. http://atxwebshow.com/coffeeshops/ 148
  149. 149. STEP #1Muck-N-Daves Texas BBQ1603 South CongressAustin, TX 78704 USA512-590-3387Old School BBQ and Grill2326 E Cesar Chavez StAustin, TX, 78702 USA512-974-6830The Shed BBQ Rolling Joint1816 E 6th Street.Austin, TX, 78702 USA 149
  150. 150. STEP #2• Convert addresses to hCard microformats http://microformats.org/code/hcard/creator 150
  151. 151. <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> 151
  152. 152. STEP #3 hCard hCard hCard hCard 152
  153. 153. STEP #3<ol> <li> hCard </li> <li> hCard </li> <li> hCard </li> <li> hCard 153 </li>
  154. 154. STEP #4<div id="locations"> <ol> <li><!-- Microformats address 1 --></li> <li><!-- Microformats address 2 --></li> <li><!-- Microformats address 3 --></li> <li><!-- Microformats address 4 --></li> ... </ol></div> 154
  155. 155. STEP #5http://github.com/teleject/HTML5-GeoLocation-jQuery-Plugin 155
  156. 156. STEP #6<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script><script type="text/javascript" src="js/jquery-location.js"></script> 156
  157. 157. STEP #7http://code.google.com/apis/maps/signup.html 157
  158. 158. STEP #8<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> 158
  159. 159. STEP #9 PROFIT! 159
  160. 160. ONE MORE THING... 160
  161. 161. <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> 161
  162. 162. $(#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? } ); 162
  163. 163. WEB FORMS 163
  164. 164. 164
  165. 165. <form><p><label>Search <input type="search"name="query"></label></p><p><button type="submit">Submit</button></p></form> 165
  166. 166. 166
  167. 167. <form><fieldset><legend>Contact Information</legend><p><label>E-mail address <input type="email" name="email"></label></p><p><label>Web site <input type="url" name="website"> </label></p> <p><label>Telephone number <input type="tel" name="phone"> </label></p></fieldset><p><button type="submit">Submit</button></p></form> 167
  168. 168. 168
  169. 169. <form><p><label>Appointment Date and Time<input type="datetime"name="dateAndTime"></label></p></form> 169
  170. 170. 170
  171. 171. <form><fieldset><legend>Appointment Request</legend><p><label>Date <input type="date"name="date"></label></p><p><label>Time <input type="time"name="time"></label></p></fieldset><p><button type="submit">Submit</button></p></form> Support in Chrome 10+, Safari 4+, Opera 9+, iOS, Android 171
  172. 172. 172
  173. 173. <form><p><label>Quantity <input type="number"name="quantity"></label></p><p><button type="submit">Submit</button></p></form> Support in Chrome 10+, Safari 4+, Opera 9+, iOS, Android 173
  174. 174. 174
  175. 175. <form><p><label>Quantity (must order in pairs of 2)<input type="number"name="quantity" min="2" max="20"step="2"></label></p><p><button type="submit">Submit</button></p></form> 175
  176. 176. 176
  177. 177. <form><p><label>Volume <input type="range"name="volume" min="0" max="10" step=".5"value="5"></label></p></form> 177
  178. 178. 178
  179. 179. <form><p><label>Background color <inputtype="color" name="bg"></label></p><p><label>Foreground color <input type="color"name="fg"></label></p><p><button type="submit">Submit</button></p></form> 179
  180. 180. 180
  181. 181. <form><p><label>Donation amount <input type="text"name="donation"list="donations"></label></p><datalist id="donations"><option value="10.00">10.00</option><option value="25.00">25.00</option><option value="50.00">50.00</option></datalist><p><button type="submit">Submit</button></p></form> Support in Firefox 4+, Opera 10+ 181
  182. 182. 182
  183. 183. <form><p><label for="donation">Donation amount</label><datalist id="donations"><select name="donation"><option></option><option value="10.00">10.00</option><option value="25.00">25.00</option><option value="50.00">50.00</option><option>Other</option></select>If other, please specify:</datalist><input type="text" id="donation"name="donation" list="donations"></p> http://adactio.com/journal/4272/<p><button type="submit">Submit</button></p></form> 183
  184. 184. 184
  185. 185. <form><fieldset><legend>Login</legend><p><label>Username <input type="text"name="username" required></label></p><p><label>Password <input type="password"name="pwd" required></label></p></fieldset><p><button type="submit">Submit</button></p></form> IE 10+, FF 4+, Chrome 10+, Safari 5+, Opera 10+, iOS, Andriod 185
  186. 186. 186
  187. 187. <p><label>E-mail address <input type="email"name="email"placeholder="user@domain.com"></label></p><p><label>Web site <input type="url"name="website" placeholder="http://www.domain.com/"></label></p><p><label>Telephone number <input type="tel"name="phone"placeholder="123-123-1234"></label></p> 187
  188. 188. <form><p><label>Search <input type="search"name="query" autofocus></label></p><p><button type="submit">Submit</button></p></form> 188
  189. 189. <form><fieldset><legend>Login</legend><p><label>Username <input type="text"name="username"></label></p><p><label>Password <input type="password"name="pwd"autocomplete="off"></label></p></fieldset><p><button type="submit">Submit</button></p></form> 189
  190. 190. 190
  191. 191. <form><p><label>Telephone number <input type="tel"name="phone"pattern="[2-9][0-9]{2}-[0-9]{3}-[0-9]{4}"title="North American format: XXX-XXX-XXXX"></label></p><p><button type="submit">Submit</button></p></form> 191
  192. 192. HTML5 CANVAS 192
  193. 193. <canvas id="myCanvas" width="300" height="150">Fallback content, in case the browser does not support Canvas.</canvas> 193
  194. 194. <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> 194
  195. 195. 195
  196. 196. // 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); 196
  197. 197. 197
  198. 198. // 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); 198
  199. 199. http://flickr.com/photos/dunstan/3099313036/ 199
  200. 200. BUT IS IT ACCESSIBLE? 200
  201. 201. ACCESSIBLE CANVAS ISSUES• Setting user interface elements in canvas• Setting images in canvas• Setting text in canvas http://www.paciellogroup.com/blog/?p=362 201
  202. 202. 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 202
  203. 203. http://www.filamentgroup.com/lab/jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas/ 203
  204. 204. http://www.filamentgroup.com/lab/jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas/ 204
  205. 205. <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> 205
  206. 206. 206
  207. 207. <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> 207
  208. 208. <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> 208
  209. 209. <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> 209
  210. 210. http://msdn.microsoft.com/en-us/library/bb250524(VS.85).aspx 210
  211. 211. <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> 211
  212. 212. <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> 212
  213. 213. table.accessHide { position: absolute; left: -999999px;}table { height: 100px; width: 250px;} 213
  214. 214. <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> 214
  215. 215. 215
  216. 216. http://flickr.com/photos/dunstan/3099313036/ 216
  217. 217. XHTML, ...I THINK I WANT TO SEEANOTHER MARKUP SPEC. 217
  218. 218. 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! 218
  219. 219. UPCOMING E4H EVENTS• Online, live 3rd Annual online, live jQuery Summit on Nov. 15-16th • Designer Track on Nov. 15 - HTML5 Video, Responsive Web Design, jQuery UI, and more... • Developer Track on Nov. 16 - iFrame Programming, Deferreds, Backbone,js, and more... • http://jquerysummit.com/ • Save 20% with discount code “EDUICONF” 219
  220. 220. THANK YOU! Christopher Schmittschmitt@heatvision.comhttp://twitter.com/teleject 220

×