HTML5 AIGA IN CONTROL ORLANDO 2010 DOWNTOWN RESTAURANTS
1. HTML5
AIGA IN CONTROL ORLANDO 2010
CHRISTOPHER SCHMITT
h t t p : / / t w i t t e r. c o m / @ t e l e j e c t
2. WHO AM I?
• Someone who doesn’t like to get bored.
• (Nerd.)
• Web designer since ’93
• Author of ~10 books including CSS Cookbook, 3rd Edition*
• Member of the Web Standards Project
• Adobe TF Co-Lead & EduTF member
• Co-author of InterACT with Web Standards (Peachpit, due Spring)
9. “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
16. “TAKE CARE
OF THE LUXURIES AND
THE NECESSITIES WILL TAKE
CARE OF THEMSELVES.”
-FRANK LLOYD WRIGHT
17. 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!
20. 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">
22. EXERCISE
• Goto 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>
37. LESSONS LEARNED
• New HTML5 elements are treated as inline elements.
• Need to use CSS declaration “display:block”
• IE6and IE7 need to be nudged to recognize HTML elements in order
to have CSS be applied
• document.createElement(‘html5element’);
• Dean Edwards IE7 script doesn’t help
• There isn’t a jQuery plugin to make it “easier”
38. LESSONS LEARNED
• For Firefox 2 and Camino (Gecko 1.9)
• HTML5 pages need to be served as XHTML
• Content-Type: application/xhtml+xml;
• ...Let the irony set for a bit.
46. SUPPORTING AUDIO
<audio controls autobuffer>
<source src="html5audio.mp3" />
<source src="html5audio.ogg" />
<!-- include Adobe Flash player EMBED and OBJECT code
here -->
</audio>
47. SUPPORTING AUDIO
• Ifyou 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.
52. 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.
53. HTML5 VIDEO
• Videocan 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...
54. 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
55. 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
57. LESSONS LEARNED
• Used VLC (http://www.videolan.org/vlc/) to encode common movie
files types to OGG
• People really, really, really want this to work,
• However, feel like to support every file format will take a lot of time
• 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/
61. 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’sgo to <abbr class="geo"
title="30.300474;-97.747247">Austin, TX</abbr>”
http://www.brucelawson.co.uk/2009/microformats-accessibility-html-5-again/
62. <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">19</abbr>,
at the <span class="location">Argent Hotel, San Francisco,
CA</span>
</div>
63. <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-20">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/
64. POSTSCRIPT
• <ABBR> issue has ben resolved with new pattern (dropping <ABBR>
altogether):
http://microformats.org/wiki/value-class-pattern
• <p>Let’sgo to <span class="geo">51° 30' 48.45", -0° 8'
53.23" (<span class="value">51.513458;-0.14812</span>)
</span></span> </p>
• Thereby microformats doesn’t rely on any HTML5 elements, and
• HTML5 spec isn’t looking to include microformats.
67. <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>
68.
69. // 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);
70.
71. // 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);
111. WHAT NEXT?
• Check your current location against the addresses in your listing.
• Withtwo points, we can determine the distance between where I am
and where the food is located.
• With
a list of values, I can sort those addresses based on the fewest
amount of travel (did I mention I was hungry now?)
•I can then also mention HOW far those distances are, too.
113. BUT WAIT....
• There are a lot of restaurants in the list.
• To go back and forth for geoencoding the addresses will take time.
• Wouldn’t there be a faster way, if I had the time, to bypass that?
