Your SlideShare is downloading. ×
OREILLYMEDIA             2011         HTML5          D E S I G N                        ❦Christopher Schmitt | http://twit...
THINGS ARE GOODBETWEEN US, XHTML,RIGHT?I MEAN. WE GET ALONG WELL.AND WE BOTH LIKE STUFF.               2               3
“IMAGINE YOU MADE A    BROWSER THAT ONLYRENDERED SITES AUTHORED IN VALID HTML OR XHTML.  HOW MUCH OF THE WEBWOULD YOUR USE...
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
91http://www.w3.org/TR/html4/index/elements.html
9
http://microformats.org/           10
11
12
13
BLUEPRINTS VS REALITY http://www.amazon.com/gp/product/0140139966                      14
“TAKE CARE   OF THE LUXURIES AND THE NECESSITIES WILL TAKE  CARE OF THEMSELVES.”FRANK LLOYD WRIGHT            15
AGENDA ITEMS• What’s     different from XHTML to HTML5• Building   with HTML5 (You are here.)  • BasicSyntax, Progressive ...
BUILDINGWITH HTML5    17
DOCTYPE   18
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) ...
22
23
CHARACTER SET      24
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8" />                  25
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>AUSTIN, TX BBQ RESTAURANTS</title></head><body> <h1>.....
SPECIFY YOUR LANGUAGE     27
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>AUSTIN, TX BBQ RESTAURANTS</title></head><body> <h1>.....
INCLUDING<SCRIPT> & <STYLE>        29
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <link rel="stylesheet" href="styles.css" /> <script src="scri...
SYNTAX  31
<img src=“file.png” />          32
<IMG SRC=file.png />         33
<iMg SrC=file.png />         34
<IMG SRC=file.png />         35
<video controls=controls>            36
EVERYTHING THATWAS BAD IN 1999IS GOOD AGAIN           37
RELEARNING SYNTAX•   Attribute quotes “not really” required•   UPPERCASE and lowercase HTML elements allowed    •   So is ...
BRINGING BACK <B> AND OTHER TAGS        39
<p>My name is<em>Jane</em>, not    John.</p>        40
<p>Sally thought toherself, <i>when will IE6     die?</i></p>            41
<p><strong>Registration isrequired</strong> for this       event.</p>            42
<p><b>Once upon atime,</b> there was a man  who lost his mind.</p>            43
<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>              45
THE COOLEST THINGEVER ABOUT HTML5.      (TO ME.)        46
<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        49
<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         52
53
<details> <summary>Upcoming Topics</summary> <p>For the new year, we have a great line upof articles!</p> <ul> <li>Underst...
NUMBERING  LISTS    55
56
<ol start="3"><li>Apples</li><li>Oranges</li><li>Bananas</li></ol>                   57
58
<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        60
61
<div contenteditable><p>Quick Fox Jumped Over the Lazy Dog</p></div>                    62
http://markdotto.com/playground/3d-text/                    63
DRAG N DROP     64
<h2 draggable>Block-Level Links</h2>      http://html5doctor.com/native-drag-and-drop/                           65
HTML5, MICROFORMATS    & METADATA         66
67
“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...
70
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 */}              76
PAGE STRUCTURE      77
DIV ID=“header”               DIV ID=“nav”DIV ID=“section”                           DIV ID=“sidecolumn”DIV ID=“article”  ...
<HEADER>             <NAV><SECTION>                       <ASIDE><ARTICLE>            <FOOTER>               79
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...
85
86
<script type="text/javascript">document.createElement(header);document.createElement(nav);document.createElement(section);...
88
PROGRESSIVELYENHANCED HTML5(INFUSED WITH SHIM)         89
90
http://modernizr.com/          91
<script src="-/js/modernizr.min.js" type="text/javascript" ></script>                          92
<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...
97
Pick and Choose Features to Detect                98
AUDIO/VIDEO     99
HTML5 AUDIO     100
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Basic HTML5 Web Document Structure</title>! </head>! <bo...
DEMO 102
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     107
<!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/        117
http://www.videolan.org/vlc/             118
http://handbrake.fr/         119
LESSONS LEARNED•   Use VLC or Firefogg to encode common movie files types to OGG•   H.264 encoding? Use Handbrake•   If you...
121
122
!   <script>!   function playPause() {!     var myVideo = document.getElementsByTagName(video)[0];!     if (myVideo.paused...
<input type=button onclick="playPause()" value="Play/Pause"tabindex="0" />                               124
HTML5 VIDEO & CAPTIONS          125
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...
128
DEMO 129
QUICK & DIRTYCAPTIONING      130
http://github.com/johnmcc/jCaps              131
132
133
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        139
OH, PATHOS! http://youtu.be/_naLuRykun8             140
141
142
143
144
145
if (navigator.geolocation) {!navigator.geolocation.getCurrentPosition(show_coordinates);!function show_coordinates(positio...
http://ion.christopherschmitt.com/geolocation/                      147
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/                   149
http://atxwebshow.com/coffeeshops/                150
http://atxwebshow.com/coffeeshops/                151
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    155
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                            158
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                     160
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!       162
ONE MORE THING...        163
<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    166
167
<form><p><label>Search <input type="search"name="query"></label></p><p><button type="submit">Submit</button></p></form>   ...
169
<form><fieldset><legend>Contact Information</legend><p><label>E-mail address <input type="email" name="email"></label></p><...
171
<form><p><label>Appointment Date and Time<input type="datetime"name="dateAndTime"></label></p></form>                     ...
173
<form><fieldset><legend>Appointment Request</legend><p><label>Date <input type="date"name="date"></label></p><p><label>Time...
175
<form><p><label>Quantity <input type="number"name="quantity"></label></p><p><button type="submit">Submit</button></p></for...
177
<form><p><label>Quantity (must order in pairs of 2)<input type="number"name="quantity" min="2" max="20"step="2"></label></...
179
<form><p><label>Volume <input type="range"name="volume" min="0" max="10" step=".5"value="5"></label></p></form>           ...
181
<form><p><label>Background color <inputtype="color" name="bg"></label></p><p><label>Foreground color <input type="color"na...
183
<form><p><label>Donation amount <input type="text"name="donation"list="donations"></label></p><datalist id="donations"><op...
185
<form><p><label for="donation">Donation amount</label><datalist id="donations"><select name="donation"><option></option><o...
187
<form><fieldset><legend>Login</legend><p><label>Username <input type="text"name="username" required></label></p><p><label>P...
189
<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 <...
193
<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     195
<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...
198
// Get the canvas element. var elem = document.getElementById(myCanvas); if (!elem || !elem.getContext) {   return; } // G...
200
// Get the canvas element. var elem = document.getElementById(myCanvas); if (!elem || !elem.getContext) {   return; } // G...
http://flickr.com/photos/dunstan/3099313036/                    202
BUT IS IT ACCESSIBLE?          203
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...
https://github.com/mezzoblue/PaintbrushJS                 206
http://csssummit.com/       207
• Take   mugshot• Make   it black and white• Compress    with ImagOptim                   http://imageoptim.pornel.net/   ...
<img class="mugshot filter-tint" data-pb-tint-opacity="0.2" data-pb-tint-colour="#517777"src="filename.png" />              ...
box-shadow: 1px 1px 4px#fff, 2px 2px 4px #fff, 3px3px 2px #333;border-radius: 300px;                      210
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</...
214
<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                             218
<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...
223
http://flickr.com/photos/dunstan/3099313036/                    224
XHTML, ...I THINK I WANT TO SEEANOTHER MARKUP SPEC.                  225
RECOMMENDED         Design for Web Applications by Matt May and Wendy• Universal Chisholm• Bulletproof Ajax   by Jeremy Ke...
UPCOMING EVENTS• AIGA   In Control Conference on Feb. 20-21st. •2   days, 1 track • HTML5, CSS3, jQuery, Mobile      Desig...
THANK YOU!   Christopher Schmittschmitt@heatvision.comhttp://twitter.com/teleject             228
[O'Reilly] HTML5 Design
Upcoming SlideShare
Loading in...5
×

[O'Reilly] HTML5 Design

12,849

Published on

Published in: Technology, News & Politics
3 Comments
19 Likes
Statistics
Notes
No Downloads
Views
Total Views
12,849
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
0
Comments
3
Likes
19
Embeds 0
No embeds

No notes for slide

Transcript of "[O'Reilly] HTML5 Design"

  1. 1. OREILLYMEDIA 2011 HTML5 D E S I G N ❦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. “IMAGINE YOU MADE A BROWSER THAT ONLYRENDERED SITES AUTHORED IN VALID HTML OR XHTML. HOW MUCH OF THE WEBWOULD YOUR USERS BE ABLE TO SEE? 1%? 0.1%? LESS?” MARK PILGRIMhttp://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. 91http://www.w3.org/TR/html4/index/elements.html
  8. 8. 9
  9. 9. http://microformats.org/ 10
  10. 10. 11
  11. 11. 12
  12. 12. 13
  13. 13. BLUEPRINTS VS REALITY http://www.amazon.com/gp/product/0140139966 14
  14. 14. “TAKE CARE OF THE LUXURIES AND THE NECESSITIES WILL TAKE CARE OF THEMSELVES.”FRANK LLOYD WRIGHT 15
  15. 15. 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://goo.gl/so6Am 16
  16. 16. BUILDINGWITH HTML5 17
  17. 17. DOCTYPE 18
  18. 18. 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"> 19
  19. 19. <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>AUSTIN, TX BBQ RESTAURANTS</title></head><body> <h1>....</h1> <p>...</p> </body></html> 20
  20. 20. 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> 21
  21. 21. 22
  22. 22. 23
  23. 23. CHARACTER SET 24
  24. 24. <meta http-equiv="Content-Type"content="text/html; charset=UTF-8" /> 25
  25. 25. <!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 26
  26. 26. SPECIFY YOUR LANGUAGE 27
  27. 27. <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>AUSTIN, TX BBQ RESTAURANTS</title></head><body> <h1>....</h1> <p>...</p> </body></html> 28
  28. 28. INCLUDING<SCRIPT> & <STYLE> 29
  29. 29. <!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> 30
  30. 30. SYNTAX 31
  31. 31. <img src=“file.png” /> 32
  32. 32. <IMG SRC=file.png /> 33
  33. 33. <iMg SrC=file.png /> 34
  34. 34. <IMG SRC=file.png /> 35
  35. 35. <video controls=controls> 36
  36. 36. EVERYTHING THATWAS BAD IN 1999IS GOOD AGAIN 37
  37. 37. 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. 38
  38. 38. BRINGING BACK <B> AND OTHER TAGS 39
  39. 39. <p>My name is<em>Jane</em>, not John.</p> 40
  40. 40. <p>Sally thought toherself, <i>when will IE6 die?</i></p> 41
  41. 41. <p><strong>Registration isrequired</strong> for this event.</p> 42
  42. 42. <p><b>Once upon atime,</b> there was a man who lost his mind.</p> 43
  43. 43. <p><small>The owner ofthis blog is not responsible for mind blowage. Please consume at your own risk.</small></p> 44
  44. 44. <abbr title="Accessible Rich InternetApplications">ARIA</ abbr> No more <acronym> 45
  45. 45. THE COOLEST THINGEVER ABOUT HTML5. (TO ME.) 46
  46. 46. <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> 47
  47. 47. <a href="http://example.com"><h1>HTML5, for Fun &amp; Profit</h1><img src="logo.png" alt="HTML5 forFun and Profit" /></a> 48
  48. 48. FIGURES & CAPTIONS 49
  49. 49. <figure>! <img src="chart.png" alt="Chart ofincreasing awesomeness" />! <figcaption>The increasing amount ofawesome that this blogdemonstrates.</figcaption></figure> 50
  50. 50. FIGURE• Not restricted to containing IMGs • Tables • Audio • Video • Charts • Code snippets 51
  51. 51. COLLAPSABLE CONTENT 52
  52. 52. 53
  53. 53. <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 54
  54. 54. NUMBERING LISTS 55
  55. 55. 56
  56. 56. <ol start="3"><li>Apples</li><li>Oranges</li><li>Bananas</li></ol> 57
  57. 57. 58
  58. 58. <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> 59
  59. 59. EDITABLE ELEMENTS 60
  60. 60. 61
  61. 61. <div contenteditable><p>Quick Fox Jumped Over the Lazy Dog</p></div> 62
  62. 62. http://markdotto.com/playground/3d-text/ 63
  63. 63. DRAG N DROP 64
  64. 64. <h2 draggable>Block-Level Links</h2> http://html5doctor.com/native-drag-and-drop/ 65
  65. 65. HTML5, MICROFORMATS & METADATA 66
  66. 66. 67
  67. 67. “Designed for humans first and machines second,microformats are a set of simple, open data formats built upon existing and widely adopted standards.” 68
  68. 68. “HTML design patterns for commonchunks of content that web builders need to markup anyway.”“Oh, and Google understands them, too.” 69
  69. 69. 70
  70. 70. 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/ 71
  71. 71. <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> 72
  72. 72. <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/ 73
  73. 73. 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> 74
  74. 74. 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”> 75
  75. 75. ATTR SELECTORimg[data-imgtype=“mugshot”] {/* CSS rules go here */} 76
  76. 76. PAGE STRUCTURE 77
  77. 77. DIV ID=“header” DIV ID=“nav”DIV ID=“section” DIV ID=“sidecolumn”DIV ID=“article” DIV ID=“footer” 78
  78. 78. <HEADER> <NAV><SECTION> <ASIDE><ARTICLE> <FOOTER> 79
  79. 79. 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 80
  80. 80. 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. 81
  81. 81. 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 82
  82. 82. 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.” 83
  83. 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 "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> 84
  84. 84. 85
  85. 85. 86
  86. 86. <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/ 87
  87. 87. 88
  88. 88. PROGRESSIVELYENHANCED HTML5(INFUSED WITH SHIM) 89
  89. 89. 90
  90. 90. http://modernizr.com/ 91
  91. 91. <script src="-/js/modernizr.min.js" type="text/javascript" ></script> 92
  92. 92. <html lang="en" class=" canvas canvastextgeolocation rgba hsla multiplebgs borderimageborderradius boxshadow opacity cssanimationscsscolumns cssgradients cssreflectionscsstransforms csstransforms3d csstransitionsvideo audio localstorage sessionstoragewebworkers applicationcache fontface"> 93
  93. 93. .audio #error { display: none;}.no-audio #error-box { background-color: #ffffcc; padding: 1px 10px; color: #000; border: 5px solid #ffff66;} CSS Feature Detection 94
  94. 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 95
  95. 95. Modernizr.load({ test: Modernizr.geolocation, yep : geo.js, nope: geo-polyfill.js}); JS Feature Detection 96
  96. 96. 97
  97. 97. Pick and Choose Features to Detect 98
  98. 98. AUDIO/VIDEO 99
  99. 99. HTML5 AUDIO 100
  100. 100. <!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> 101
  101. 101. DEMO 102
  102. 102. HTML5 AUDIO• AUDIO element attributes are SRC, AUTOBUFFER, AUTOPLAY, LOOP, CONTROLS• If you don’t have CONTROL, player becomes transparent 103
  103. 103. HTML5 AUDIO SUPPORT FF3.5+ S4+ Ch3+ Op10.5+ IE9+ Ogg Y Y YVorbisMP3 Y Y YWAV Y Y Y 104
  104. 104. 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 105
  105. 105. 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. 106
  106. 106. HTML5 VIDEO 107
  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><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> 108
  108. 108. <!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> 109
  109. 109. <!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> 110
  110. 110. 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. 111
  111. 111. 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... 112
  112. 112. 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 113
  113. 113. 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 114
  114. 114. VIDEO CODEC SUPPORT FF3.6+ S Ch5+ Op10.6+ IE9+Ogg Y Y YH.264 Y Y* YWebM (W4.02+) (Ch6+) Y 115
  115. 115. 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 116
  116. 116. http://firefogg.org/ 117
  117. 117. http://www.videolan.org/vlc/ 118
  118. 118. http://handbrake.fr/ 119
  119. 119. 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/ 120
  120. 120. 121
  121. 121. 122
  122. 122. ! <script>! function playPause() {! var myVideo = document.getElementsByTagName(video)[0];! if (myVideo.paused)! myVideo.play();! else! myVideo.pause();! }! </script> 123
  123. 123. <input type=button onclick="playPause()" value="Play/Pause"tabindex="0" /> 124
  124. 124. HTML5 VIDEO & CAPTIONS 125
  125. 125. 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. 126
  126. 126. [Captioning] has been shown to improvereading skills among adults who are non-readers.http://www.ldonline.org/article/35793 127
  127. 127. 128
  128. 128. DEMO 129
  129. 129. QUICK & DIRTYCAPTIONING 130
  130. 130. http://github.com/johnmcc/jCaps 131
  131. 131. 132
  132. 132. 133
  133. 133. 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. 134
  134. 134. 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 135
  135. 135. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script><script src="jquery.jcap.js"></script> 136
  136. 136.  <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> 137
  137. 137.  <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> 138
  138. 138. HTML5 GEOLOCATION 139
  139. 139. OH, PATHOS! http://youtu.be/_naLuRykun8 140
  140. 140. 141
  141. 141. 142
  142. 142. 143
  143. 143. 144
  144. 144. 145
  145. 145. 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 146 });
  146. 146. http://ion.christopherschmitt.com/geolocation/ 147
  147. 147. 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! 148
  148. 148. http://2010.incontrolconference.com/eats/ 149
  149. 149. http://atxwebshow.com/coffeeshops/ 150
  150. 150. http://atxwebshow.com/coffeeshops/ 151
  151. 151. 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 152
  152. 152. STEP #2• Convert addresses to hCard microformats http://microformats.org/code/hcard/creator 153
  153. 153. <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> 154
  154. 154. STEP #3 hCard hCard hCard hCard 155
  155. 155. STEP #3<ol> <li> hCard </li> <li> hCard </li> <li> hCard </li> <li> hCard 156 </li>
  156. 156. 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> 157
  157. 157. STEP #5http://github.com/teleject/HTML5-GeoLocation-jQuery-Plugin 158
  158. 158. 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> 159
  159. 159. STEP #7http://code.google.com/apis/maps/signup.html 160
  160. 160. 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> 161
  161. 161. STEP #9 PROFIT! 162
  162. 162. ONE MORE THING... 163
  163. 163. <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> 164
  164. 164. $(#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?! } ); 165
  165. 165. WEB FORMS 166
  166. 166. 167
  167. 167. <form><p><label>Search <input type="search"name="query"></label></p><p><button type="submit">Submit</button></p></form> 168
  168. 168. 169
  169. 169. <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> 170
  170. 170. 171
  171. 171. <form><p><label>Appointment Date and Time<input type="datetime"name="dateAndTime"></label></p></form> 172
  172. 172. 173
  173. 173. <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 174
  174. 174. 175
  175. 175. <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 176
  176. 176. 177
  177. 177. <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> 178
  178. 178. 179
  179. 179. <form><p><label>Volume <input type="range"name="volume" min="0" max="10" step=".5"value="5"></label></p></form> 180
  180. 180. 181
  181. 181. <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> 182
  182. 182. 183
  183. 183. <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+ 184
  184. 184. 185
  185. 185. <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> 186
  186. 186. 187
  187. 187. <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 188
  188. 188. 189
  189. 189. <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> 190
  190. 190. <form><p><label>Search <input type="search"name="query" autofocus></label></p><p><button type="submit">Submit</button></p></form> 191
  191. 191. <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> 192
  192. 192. 193
  193. 193. <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> 194
  194. 194. HTML5 CANVAS 195
  195. 195. <canvas id="myCanvas" width="300" height="150">Fallback content, in case the browser does not support Canvas.</canvas> 196
  196. 196. <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> 197
  197. 197. 198
  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); 199
  199. 199. 200
  200. 200. // 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); 201
  201. 201. http://flickr.com/photos/dunstan/3099313036/ 202
  202. 202. BUT IS IT ACCESSIBLE? 203
  203. 203. ACCESSIBLE CANVAS ISSUES• Setting user interface elements in canvas• Setting images in canvas• Setting text in canvas http://www.paciellogroup.com/blog/?p=362 204
  204. 204. 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 205
  205. 205. https://github.com/mezzoblue/PaintbrushJS 206
  206. 206. http://csssummit.com/ 207
  207. 207. • Take mugshot• Make it black and white• Compress with ImagOptim http://imageoptim.pornel.net/ 208
  208. 208. <img class="mugshot filter-tint" data-pb-tint-opacity="0.2" data-pb-tint-colour="#517777"src="filename.png" /> 209
  209. 209. box-shadow: 1px 1px 4px#fff, 2px 2px 4px #fff, 3px3px 2px #333;border-radius: 300px; 210
  210. 210. http://www.filamentgroup.com/lab/jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas/ 211
  211. 211. http://www.filamentgroup.com/lab/jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas/ 212
  212. 212. <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> 213
  213. 213. 214
  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> 215
  215. 215. <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> 216
  216. 216. <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> 217
  217. 217. http://msdn.microsoft.com/en-us/library/bb250524(VS.85).aspx 218
  218. 218. <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> 219
  219. 219. <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> 220
  220. 220. table.accessHide { position: absolute; left: -999999px;}table { height: 100px; width: 250px;} 221
  221. 221. <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> 222
  222. 222. 223
  223. 223. http://flickr.com/photos/dunstan/3099313036/ 224
  224. 224. XHTML, ...I THINK I WANT TO SEEANOTHER MARKUP SPEC. 225
  225. 225. 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• How Buildings Learn by Stewart Brand• HTML5 Cookbook by a whole bunch of people! 226
  226. 226. UPCOMING EVENTS• AIGA In Control Conference on Feb. 20-21st. •2 days, 1 track • HTML5, CSS3, jQuery, Mobile Design, Content Strategy, and much more • Orlando, FL • http://2012.incontrolconference.com/ 227
  227. 227. THANK YOU! Christopher Schmittschmitt@heatvision.comhttp://twitter.com/teleject 228

×