[O'Reilly] HTML5 Design

OREILLYMEDIA 2011 HTML5 D E S I G N ❦Christopher Schmitt | http://twitter.com/@teleject

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 USERS BE ABLE TO SEE? 1%? 0.1%? LESS?” MARK PILGRIMhttp://dev.opera.com/articles/view/mama-markup-validation-report/ 3

“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

http://www.ﬂickr.com/photos/teleject/432030263/ 6

91http://www.w3.org/TR/html4/index/elements.html

http://microformats.org/ 10

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 Markup, Accessibility, Geolocation, Audio/Video, Web Forms• Prizes! http://goo.gl/so6Am 16

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-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

<!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

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

CHARACTER SET 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://shiﬂett.org/blog/2005/dec/googles-xss-vulnerability 26

SPECIFY YOUR LANGUAGE 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

INCLUDING<SCRIPT> & <STYLE> 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

SYNTAX 31

<img src=“ﬁle.png” /> 32

<IMG SRC=ﬁle.png /> 33

<iMg SrC=ﬁle.png /> 34

<IMG SRC=ﬁle.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 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

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> 44

<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 & Proﬁt</a></h1><a href="http://example.com"><img src="logo.png" alt="HTML5 forFun and Proﬁt" /></a> 47

<a href="http://example.com"><h1>HTML5, for Fun & Proﬁt</h1><img src="logo.png" alt="HTML5 forFun and Proﬁt" /></a> 48

FIGURES & CAPTIONS 49

<figure>! <img src="chart.png" alt="Chart ofincreasing awesomeness" />! <figcaption>The increasing amount ofawesome that this blogdemonstrates.</figcaption></figure> 50

FIGURE• Not restricted to containing IMGs • Tables • Audio • Video • Charts • Code snippets 51

COLLAPSABLE CONTENT 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 54

NUMBERING LISTS 55

<ol start="3"><li>Apples</li><li>Oranges</li><li>Bananas</li></ol> 57

<p>The results are in for your favorite fruit,and we have a tie for ﬁrst place!</p><ol><li value="1">Bananas</li><li value="1">Oranges</li><li value="2">Apples</li></ol> 59

EDITABLE ELEMENTS 60

<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

“Designed for humans ﬁrst and machines second,microformats are a set of simple, open data formats built upon existing and widely adopted standards.” 68

“HTML design patterns for commonchunks of content that web builders need to markup anyway.”“Oh, and Google understands them, too.” 69

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

<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

<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

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

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

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” DIV ID=“footer” 78

<HEADER> <NAV><SECTION> <ASIDE><ARTICLE> <FOOTER> 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

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

ARTICLE VS ASIDE VS SECTION• Molly Holzschlag, Opera standards evangelist, says: • <section> clariﬁes <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

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

<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

PROGRESSIVELYENHANCED HTML5(INFUSED WITH SHIM) 89

http://modernizr.com/ 91

<html lang="en" class=" canvas canvastextgeolocation rgba hsla multiplebgs borderimageborderradius boxshadow opacity cssanimationscsscolumns cssgradients cssreﬂectionscsstransforms csstransforms3d csstransitionsvideo audio localstorage sessionstoragewebworkers applicationcache fontface"> 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

Modernizr.load({ test: Modernizr.geolocation, yep : geo.js, nope: geo-polyﬁll.js}); JS Feature Detection 96

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>! <body><h1>Video Example</h1><audio src="html5test.ogg" autoplay controls>! <a href="html5test.ogg">Download audio</a></audio>! </body></html> 101

DEMO 102

HTML5 AUDIO• AUDIO element attributes are SRC, AUTOBUFFER, AUTOPLAY, LOOP, CONTROLS• If you don’t have CONTROL, player becomes transparent 103

HTML5 AUDIO SUPPORT FF3.5+ S4+ Ch3+ Op10.5+ IE9+ Ogg Y Y YVorbisMP3 Y Y YWAV Y Y Y 104

SUPPORTING AUDIO<audio controls autobuffer> <source src="html5audio.mp3" /> <source src="html5audio.ogg" /> </audio> Use Flash for older versions of IE 105

SUPPORTING AUDIO• If you do insert audio, setting the ﬁle to autoplay is not recommended, as it interferes with the experience for web surfers using screen readers.• Don’t use WAV ﬁle type. • Better to ship a compact disc to the user instead. 106

HTML5 VIDEO 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-ﬂash"allowscriptaccess="always" allowfullscreen="true" width="425"height="344"></embed></object>! </body></html> 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

<!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

HTML5 VIDEO• WIDTH and HEIGHT should be required, IMO, but movie plays anyway based on the values in the video ﬁle 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

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

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 sufﬁcient 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

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

VIDEO CODEC SUPPORT FF3.6+ S Ch5+ Op10.6+ IE9+Ogg Y Y YH.264 Y Y* YWebM (W4.02+) (Ch6+) Y 115

LESSONS LEARNED• To get most <video> support, you need 2 video ﬁles: 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

http://ﬁrefogg.org/ 117

http://www.videolan.org/vlc/ 118

http://handbrake.fr/ 119

LESSONS LEARNED• Use VLC or Firefogg to encode common movie ﬁles 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

! <script>! function playPause() {! var myVideo = document.getElementsByTagName(video)[0];! if (myVideo.paused)! myVideo.play();! else! myVideo.pause();! }! </script> 123

<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: •reading speed, •word knowledge, •decoding, •vocabulary acquisition, •word recognition, •reading comprehension, and •oral reading rates. 126

[Captioning] has been shown to improvereading skills among adults who are non-readers.http://www.ldonline.org/article/35793 127

DEMO 129

QUICK & DIRTYCAPTIONING 130

http://github.com/johnmcc/jCaps 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. 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

<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

<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

HTML5 GEOLOCATION 139

OH, PATHOS! http://youtu.be/_naLuRykun8 140

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-polyﬁll.js 146 });

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 comprehend longitude and latitude.• And I don’t love the code! 148

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 Chavez StAustin, TX, 78702 USA512-974-6830The Shed BBQ Rolling Joint1816 E 6th Street.Austin, TX, 78702 USA 152

STEP #2• Convert addresses to hCard microformats http://microformats.org/code/hcard/creator 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

STEP #3 hCard hCard hCard hCard 155

STEP #3<ol> <li> hCard </li> <li> hCard </li> <li> hCard </li> <li> hCard 156 </li>

STEP #4<div id="locations">! <ol>! ! <li></li>! ! <li></li>! ! <li></li>! ! <li></li>! ! ...! </ol></div> 157

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><script type="text/javascript" src="js/jquery-location.js"></script> 159

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><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

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 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

$(#locations).location(! {! ! apiKey: YOUR_API_KEY_HERE,! ! geodata: #geodata, // site visitor’s location! ! notiﬁcation: .notiﬁcation, // progress indicator! ! recheck: .recheck,! ! distance: .distance, //where the distance appears! ! geoAdr: .geoAdr, // longitude and latitude! ! listElement: li // different listing element?! } ); 165

WEB FORMS 166

<form><p><label>Search <input type="search"name="query"></label></p><p><button type="submit">Submit</button></p></form> 168

<form><ﬁeldset><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></ﬁeldset><p><button type="submit">Submit</button></p></form> 170

<form><p><label>Appointment Date and Time<input type="datetime"name="dateAndTime"></label></p></form> 172

<form><ﬁeldset><legend>Appointment Request</legend><p><label>Date <input type="date"name="date"></label></p><p><label>Time <input type="time"name="time"></label></p></ﬁeldset><p><button type="submit">Submit</button></p></form> Support in Chrome 10+, Safari 4+, Opera 9+, iOS, Android 174

<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

<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

<form><p><label>Volume <input type="range"name="volume" min="0" max="10" step=".5"value="5"></label></p></form> 180

<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

<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

<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

<form><ﬁeldset><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></ﬁeldset><p><button type="submit">Submit</button></p></form> IE 10+, FF 4+, Chrome 10+, Safari 5+, Opera 10+, iOS, Andriod 188

<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

<form><p><label>Search <input type="search"name="query" autofocus></label></p><p><button type="submit">Submit</button></p></form> 191

<form><ﬁeldset><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></ﬁeldset><p><button type="submit">Submit</button></p></form> 192

<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

HTML5 CANVAS 195

<canvas id="myCanvas" width="300" height="150">Fallback content, in case the browser does not support Canvas.</canvas> 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.ﬁllStyle = #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.ﬁll(); context.stroke(); context.closePath();}, false); 199

// Get the canvas element. var elem = document.getElementById(myCanvas); if (!elem || !elem.getContext) { return; } // Get the canvas 2d context. var context = elem.getContext(2d); if (!context) { return; } context.ﬁllStyle = #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.ﬁll(); context.stroke(); context.closePath();}, false); 201

http://ﬂickr.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 canvas http://www.paciellogroup.com/blog/?p=362 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

https://github.com/mezzoblue/PaintbrushJS 206

http://csssummit.com/ 207

• Take mugshot• Make it black and white• Compress with ImagOptim http://imageoptim.pornel.net/ 208

<img class="mugshot ﬁlter-tint" data-pb-tint-opacity="0.2" data-pb-tint-colour="#517777"src="ﬁlename.png" /> 209

box-shadow: 1px 1px 4px#fff, 2px 2px 4px #fff, 3px3px 2px #333;border-radius: 300px; 210

http://www.ﬁlamentgroup.com/lab/jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas/ 211

http://www.ﬁlamentgroup.com/lab/jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas/ 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

http://msdn.microsoft.com/en-us/library/bb250524(VS.85).aspx 218

table.accessHide { position: absolute; left: -999999px;}table { height: 100px; width: 250px;} 221

http://ﬂickr.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 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

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

THANK YOU! Christopher Schmittschmitt@heatvision.comhttp://twitter.com/teleject 228

http://127.0.0.1	243
http://deboraheo.posterous.com	111
http://blog.websourcing.fr	38
http://paper.li	26
http://hellosam.new21.net	22
http://michiganblogger.com	8
http://a0.twimg.com	7
http://nuevospowerpoints.blogspot.com	7
http://localhost	4
http://www.lireo.com	3
http://storify.com	2
http://miriamatematicas.wikispaces.com	2
http://feeds.feedburner.com	1
http://www.netvibes.com	1
http://translate.googleusercontent.com	1

[O'Reilly] HTML5 Design

by Christopher Schmitt on Dec 15, 2011

Accessibility

Categories

Upload Details

Usage Rights

15 Embeds 476

Statistics

[O’Reilly] HTML5 Design Presentation Transcript