Post on 15-Jul-2015
OREILLYMEDIA 2011
HTML5D E S I G N
Christopher Schmitt | http://twitter.com/@teleject
❦
2
Things are good Between Things are good Between US, XHTML, right?US, XHTML, right? I MEAN. WE GET ALONG WELL. AND WE BOTH LIKE STUFF.3
3http://dev.opera.com/articles/view/mama-markup-validation-report/3
“imagine you made a browser that only rendered sites authored in valid HTML or XHTML. How much of the web would your users be able to see? 1%? 0.1%?
Less?”Mark PILGRIM
44
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-Lee5
99
1111
12
1313
14
BLUEPRINTS vs REALITY
14
http://www.amazon.com/gp/product/0140139966
15
“Take care of the luxuries and
the necessities will take care of themselves.”
FRANK LLOYD WRIGHT
15
16
Agenda ITEMS
• What’s different from XHTML to HTML5
• Building with HTML5 (You are here.)
• Basic Syntax, Progressive Markup, Accessibility, Geolocation, Audio/Video, Web Forms
• Prizes! http://oreil.ly/tU1iH6
17
BUILDING WITH HTML5
18
DOCTYPE
19
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">
20
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>AUSTIN, TX BBQ RESTAURANTS</title> </head> <body> <h1>....</h1> <p>...</p> </body></html>
21
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>
2222
2323
24
CHARACTER SET
25
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
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>http://shiflett.org/blog/2005/dec/googles-xss-vulnerability
27
SPECIFY YOUR LANGUAGE
28
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>AUSTIN, TX BBQ RESTAURANTS</title> </head> <body> <h1>....</h1> <p>...</p> </body></html>
29
INCLUDING <SCRIPT> & <STYLE>
30
<!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></html>
31
SYNTAX
32
<img src=“file.png” />
33
<IMG SRC=file.png />
34
<iMg SrC=file.png />
35
<IMG SRC=file.png />
36
<video controls=controls>
37
EVERYTHING THAT WAS BAD IN 1999IS GOOD AGAIN
38
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.
39
BRINGING BACK <b>and OTHER TAGS
40
<p>My name is <em>Jane</em>, not
John.</p>
41
<p>Sally thought to herself, <i>when will IE6
die?</i></p>
42
<p><strong>Registration is required</strong> for
this event.</p>
43
<p><b>Once upon a time,</b> there was a
man who lost his mind.</p>
44
<p><small>The owner of this blog is not responsible for mind blowage. Please
consume at your own risk.</small></p>
<p><small>Copyright © 2011 Awesomest
Blog. All rights reserved.</small></p>
45
<abbr title="Accessible Rich Internet
Applications">ARIA</abbr>
No more <acronym>
46
THE COOLEST THING EVER ABOUT HTML5.
(TO ME.)
47
<h1> <a href="http://example.com"> HTML5, for Fun & Profit </a></h1>
<a href="http://example.com"> <img src="logo.png" alt="HTML5 for Fun and Profit" /></a>
48
<a href="http://example.com"> <h1>HTML5, for Fun & Profit</h1> <img src="logo.png" alt="HTML5 for Fun and Profit" /></a>
49
Figures & CAPTIONS
50
<figure><img src="chart.png" alt="Chart of
increasing awesomeness" /><figcaption>The increasing amount
of awesome that this blogdemonstrates.</figcaption></figure>
51
FIGURE
• Not restricted to containing IMGs
• Tables
• Audio
• Video
• Charts
• Code snippets
52
COLLAPSABLE CONTENT
53
54
<details> <summary>Upcoming Topics</summary> <p>For the new year, we have a great line up of articles!</p> <ul> <li>Understanding the Outline Algorithm</li> <li>When to Use
<code>hgroup</code></li> <li>Machine Semantics with Microdata</li></ul></details>
Only works in Chrome; all others - https://gist.github.com/370590
55
NUMBERINGLISTS
56
57
<ol start="3"> <li>Apples</li> <li>Oranges</li> <li>Bananas</li></ol>
58
59
<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>
60
EDITABLE ELEMENTS
61
62
<div contenteditable><p>Quick Fox Jumped Over the Lazy Dog</p></div>
64
DRAG n DROP
65
<h2 draggable>Block-Level Links</h2>
http://html5doctor.com/native-drag-and-drop/
66
HTML5, Microformats & METADATA
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
“HTML design patterns for common chunks of content that web builders need
to markup anyway.”
“Oh, and Google understands them, too.”
69
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
<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 SELECTOR
img[data-imgtype=“mugshot”] {/* CSS rules go here */}
76
Page Structure
77
DIV ID=“header”
DIV ID=“section”
DIV ID=“article”DIV ID=“sidecolumn”
DIV ID=“footer”
DIV ID=“nav”
78
<HEADER>
<SECTION>
<ARTICLE><ASIDE>
<FOOTER>
<NAV>
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 sidebardiv 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> 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
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, it's 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">5 March, 2009</time>, to the <a href="#">Misty collection</a>. See other posts in <a href="#">this collection</a>.</p> </aside> <footer> <p>...</p> </footer></body>
8484
8585
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/
8787
88
ProgressiveLYENhanced HTML5(infused with SHIM)
8989
90
http://modernizr.com/90
http://modernizr.com
91
<script src="-/js/modernizr.min.js" type="text/javascript" ></script>
92
<html lang="en" class=" canvas canvastext geolocation rgba hsla multiplebgs borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions video audio localstorage sessionstorage webworkers 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
<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
Modernizr.load({ test: Modernizr.geolocation, yep : 'geo.js', nope: 'geo-polyfill.js'});
JS Feature Detection
96
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><body>
<h1>Video Example</h1><audio src="html5test.ogg" autoplay controls>
<a href="html5test.ogg">Download audio</a></audio>
</body></html>
101
HTML5 audio
• AUDIO element attributes are SRC, AUTOBUFFER, AUTOPLAY, LOOP, CONTROLS
• If you don’t have CONTROL, player becomes transparent
102
HTML5 Audio SUPPORT
FF3.5+ S4+ Ch3+ Op10.5+ IE9+
Ogg Vorbis Y Y Y
MP3 Y Y Y
WAV Y Y Y
103
SUPPORTING AUDIO
<audio controls autobuffer> <source src="html5audio.mp3" /> <source src="html5audio.ogg" /> <!-- include Adobe Flash player EMBED and OBJECT code here --> </audio>
Use Flash for older versions of IE
104
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.
105
HTML5 Video
106
<!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>
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">
<a href="html5testvideo.ogg">Download movie</a></video>
</body></html>
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.
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...
110
HTML5 Video“It would be helpful for interoperability if all browsers could support the same codecs. However, there are no known codecs that satisfy all the current players: we need a codec that is known to not require per-unit or per-distributor licensing, that is compatible with the open source development model, that is of sufficient quality as to be usable, and that is not an additional submarine patent risk for large companies. This is an ongoing issue and this section will be updated once more information is available.”- http://www.whatwg.org/specs/web-apps/current-work/#video-and-
audio-codecs-for-video-elements
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
112
VIDEO CODEC SUPPORT
FF3.6+ S Ch5+ Op10.6+ IE9+
Ogg Y Y Y
H.264 Y Y* Y
WebM (W4.02+) (Ch6+) Y
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
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/
118118
119119
120
<script> function playPause() { var myVideo = document.getElementsByTagName('video')[0]; if (myVideo.paused)
myVideo.play(); else myVideo.pause(); }</script>
121
<input type=button onclick="playPause()" value="Play/Pause" tabindex="0" />
122
HTML5 VIDEO & CAPTIONS
123
•For students with LD and struggling or beginning readers, the use of captions or subtitles can lead to increases in:reading speed,word knowledge,decoding,vocabulary acquisition,word recognition,reading comprehension, andoral reading rates.
123
124
[Captioning] has been shown to improve reading skills among adults who are non-readers.
http://www.ldonline.org/article/35793124
125125
126
Quick & DirtyCAptioning
128128
129
130
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;
• Includes the time each subtitle should be displayed followed by the text of the subtitles.
• Subtitle files 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
TRANSCRIPT-EN.SRT100:00:00,000 --> 00:00:6,000Allow me to introduce myself My name is Tay It's T-A-Y, T-A-Y to the Z
200:00:06,000 --> 00:00:9,000This is the web and it's gonna murder your TV It was Chocolate Rain
300:00:09,500 --> 00:00:11,500Wrote a song about that history Chocolate Rain
400:00:12,000 --> 00:00:15,000Now I'm paid a hefty hefty fee Chocolate Rain
131
132
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script><script src="jquery.jcap.js"></script>
133
<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
<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
http://mediaelementjs.com/
136
http://popcornjs.org/
137
HTML5 GEOLOCATION
139
140
141
142
143
144
Modernizr.load({ test: Modernizr.geolocation, yep : 'geo.js', nope: 'geo-polyfill.js'});
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(show_coordinates);
function show_coordinates(position){ alert('Your latitude is ' + position.coords.latitude +
' ' + 'and your longitude is ' + position.coords.longitude
+ '.'); }
}
...or use Modernizr!
146
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!
150
Step #1
Muck-N-Dave's Texas BBQ 1603 South CongressAustin, TX 78704 USA 512-590-3387Old School BBQ and Grill2326 E Cesar Chavez StAustin, TX, 78702 USA 512-974-6830The Shed BBQ Rolling Joint1816 E 6th Street.Austin, TX, 78702 USA 504-432-4718Franklin Barbecue3421 N. I-35Austin, TX, 78722 USA 512-653-1187
Old School BBQ and Grill2907 E MLK Jr Blvd.Austin, TX, 78702 USA 512-974-6830Snow's BBQ516 Main StreetLexington, TX 78947 USA 979-773-4640
151
Step #2
• Convert addresses to hCard microformats
151
http://microformats.org/code/hcard/creator
152
<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>
</div>http://microformats.org/code/hcard/creator
153
Step #3
hCard
hCard
hCard
hCard
154
Step #3
hCard
hCard
hCard
hCard
<ol><li>
<li>
<li>
<li>
</li>
</li>
</li>
</li>
155
<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>
STEP #4
156
http://github.com/teleject/HTML5-GeoLocation-jQuery-Plugin
STEP #5
157
<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>
STEP #6
159
<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>
STEP #8
160
STEP #9 PROFIT!
161
One MORE THING...
162
<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>
</div>http://geocoder.us/
163
$('#locations').location( {
apiKey: 'YOUR_API_KEY_HERE', geodata: '#geodata', // site visitor’s
locationnotification: '.notification', // progress
indicatorrecheck: '.recheck',distance: '.distance', //where the distance
appearsgeoAdr: '.geoAdr', // longitude and latitudelistElement: 'li' // different listing element?
} );
164
WEB FORMS
165
166
<form> <p><label>Search <input type="search" name="query"></label></p> <p><button type="submit">Submit</button></p></form>
167
168
<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>
169
170
<form><p><label>Appointment Date and Time <input type="datetime"name="dateAndTime"></label></p></form>
171
172
<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
173
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
175
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>
177
178
<form><p><label>Volume <input type="range" name="volume" min="0" max="10" step=".5" value="5"></label></p></form>
179
180
<form><p><label>Background color <input type="color" name="bg"></label></p><p><label>Foreground color <input type="color" name="fg"></label></p><p><button type="submit">Submit</button></p></form>
181
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+
183
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><p><button type="submit">Submit</button></p></form> 184
http://adactio.com/journal/4272/
185
186
<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>
186
IE 10+, FF 4+, Chrome 10+, Safari 5+, Opera 10+, iOS, Andriod
187
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>
189
<form><p><label>Search <input type="search" name="query" autofocus></label></p><p><button type="submit">Submit</button></p></form>
190
<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>
191
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>
193
HTML5 Canvas
194
<canvas id="myCanvas" width="300" height="150"> Fallback content, in case the browser does not support Canvas.</canvas>
195
<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! Let's draw a blue rectangle. context.fillStyle = '#00f'; context.fillRect(0, 0, 150, 100);}, false);// --></script>
196196
197
// Get the canvas element. var elem = document.getElementById('myCanvas'); if (!elem || !elem.getContext) { return; }
// Get the canvas 2d context. var context = elem.getContext('2d'); if (!context) { return; }
context.fillStyle = '#00f'; context.strokeStyle = '#f00'; context.lineWidth = 4;
// Draw a right triangle. context.beginPath(); context.moveTo(10, 10); context.lineTo(100, 10); context.lineTo(10, 100); context.lineTo(10, 10); context.fill(); context.stroke(); context.closePath();}, false);
198198
199
// Get the canvas element. var elem = document.getElementById('myCanvas'); if (!elem || !elem.getContext) { return; }
// Get the canvas 2d context. var context = elem.getContext('2d'); if (!context) { return; }
context.fillStyle = '#00f'; context.strokeStyle = '#f00'; context.lineWidth = 4;
// Draw a right triangle. context.beginPath(); context.moveTo(10, 10); context.lineTo(100, 10); context.lineTo(10, 100); context.lineTo(10, 10); context.fill(); context.stroke(); context.closePath();}, false);
200http://flickr.com/photos/dunstan/3099313036/
200
201
BUT IS IT ACCESSIBLE?
202
ACCESSIBLE CANVAS ISSUES
• Setting user interface elements in canvas
• Setting images in canvas
• Setting text in canvas
http://www.paciellogroup.com/blog/?p=362
203
Progressive Enhancement& Canvas
“Progressive enhancement is a strategy for web design that emphasizes accessibility, semantic HTML markup, and external
style sheet and scripting technologies.”http://en.wikipedia.org/wiki/Progressive_enhancement
206
•Take mugshot
•Make it black and white
•Compress with ImagOptim
http://imageoptim.pornel.net/
207
<img class="mugshot filter-tint" data-pb-tint-opacity="0.2" data-pb-tint-colour="#517777" src="filename.png" />
208
box-shadow: 1px 1px 4px #fff, 2px 2px 4px #fff, 3px 3px 2px #333;border-radius: 300px;
209
http://www.filamentgroup.com/lab/jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas/
210http://www.filamentgroup.com/lab/jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas/
210
211
<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>
212212
213
<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
<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
<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
http://msdn.microsoft.com/en-us/library/bb250524(VS.85).aspx216
217
<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>
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
table.accessHide { position: absolute; left: -999999px; }table { height: 100px; width: 250px;}
220
<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>
221
222http://flickr.com/photos/dunstan/3099313036/
222
223
XHTML, ...I THINK I WANT TO SEE ANOTHER MARKUP SPEC.
224
RECOMMENDED• Universal Design for Web Applications by Matt May and Wendy 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!
225
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/
226
THANK YOU!Christopher Schmitt
schmitt@heatvision.com
http://twitter.com/teleject