[In Control 2010] HTML5

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

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)

THINGS ARE GOOD
BETWEEN US, XHTML,
RIGHT?
I MEAN. WE GET ALONG WELL.
AND WE BOTH LIKE STUFF.

“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://dev.opera.com/articles/view/mama-markup-validation-report/

“TAKE CARE
OF THE LUXURIES AND
THE NECESSITIES WILL TAKE
CARE OF THEMSELVES.”
-FRANK LLOYD WRIGHT

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!

STARTING OUT
BASIC HTML5 LAYOUT

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DOWNTOWN ORLANDO RESTAURANTS</title>
</head>
<body>
<h1>....</h1>
<p>...</p>
</body>
</html>

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>

DIV ID=”header”
DIV ID=”nav”

DIV ID=”section”

DIV ID=”sidecolumn”
DIV ID=”article”

DIV ID=”footer”

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

HEADER
NAV

SECTION

ASIDE
ARTICLE

FOOTER

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”

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.

<?php
if ( strpos($_SERVER['HTTP_USER_AGENT'], 'Firefox/2.0') > -1)
{
header("Content-Type: application/xhtml+xml; charset=UTF-8");
echo'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//
EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">';
}
else {
echo '<!DOCTYPE html><html>';
}?>

http://tr.im/h0Rj

NEW HTML5 ELEMENTS

• article • embed • nest

• aside • event-source • output

• audio • ﬁgure • progress

• canvas • footer • source

• command • header • time

• datagrid • mark • video

• datalist • meter

• datatemplate • nav

<!DOCTYPE html>
<html lang="en">
<head>
<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>

HTML5 AUDIO

• AUDIO element attributes are SRC, AUTOBUFFER, AUTOPLAY,
LOOP, CONTROLS

• If you don’t have CONTROL, player becomes transparent

HTML5 AUDIO SUPPORT

FF3.5+ S4+ Ch3+ Op10+

Ogg Vorbis Y Y

MP3 Y Y

WAV Y Y Y

SUPPORTING AUDIO

<audio controls autobuffer>
<source src="html5audio.mp3" />
<source src="html5audio.ogg" />

</audio>

SUPPORTING AUDIO

• Ifyou 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.

<!DOCTYPE html>
<html lang="en">
<head>

</head>

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

<!DOCTYPE html>
<html lang="en">
<head>

</head>

<body>
<video src="html5test.ogg"

width="320" height="240" controls

poster="html5testvideoposter.jpg">

<a href="html5testvideo.ogg">Download movie</a>
</video>

</body>
</html>

VIDEO DEMO

• Play the demo.

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.

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

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

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

CODEC SUPPORT

FF3.5+ S Ch IE

Ogg Y Y

H.264 Y Y

LESSONS LEARNED
• Used VLC (http://www.videolan.org/vlc/) to encode common movie
ﬁles types to OGG

• People really, really, really want this to work,

• However, feel like to support every ﬁle 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/

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/

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

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

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.

<canvas id="myCanvas" width="300" height="150">
Fallback content, in case the browser does not support Canvas.
</canvas>

// 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.ﬁll();
context.stroke();
context.closePath();
}, false);

http://ﬂickr.com/photos/dunstan/3099313036/

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

<table >

<caption>My Push Ups</caption>

<thead>
<tr>

<td></td>

<th>M</th>

<th>Tu</th>

<th>W</th>

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

$(function(){



});
</script>

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

script><![endif]-->
<script type="text/javascript"
src="visualize.jQuery.js"></script>
$(function(){



});
</script>

script><![endif]-->
$(function(){



});
</script>

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

http://tr.im/Pjzy

QUICK INTERMISSION
http://tr.im/Pjzy

HTML5 & LOCAL
DATABASE,
APP CACHE,
GEOLOCATION,
YOUR PHONE

http://www.youtube.com/watch?v=VmjxmOtNZCk&fmt=18

DATABASE, APP CACHE,
GEOLOCATION LINKS
• W3C HTML5 Database Storage Specification:
http://tr.im/h13y

• W3C Geolocation API Specification:
http://tr.im/h12L

• W3C HTML5 Offline Web Applications:
http://tr.im/h12z

• Safari
Dev Connection on HTML5 Offline Application Cache:
http://tr.im/h12f

• WebKit
Does HTML5 Client-Side Storage:
http://tr.im/h140

“HTML 5 IS A KLUDGE.”
- BRUCE LAWSON

http://ishtml5readyyet.com/

CAN HTML5
TELL US
WHAT’S FOR DINNER?

<!DOCTYPE html>
<html lang="en">
<head>
<title>Downtown Orlando Restaurants</title>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Downtown Orlando Restaurants</title>

<div id="" class="vcard">
<a class="url fn n" href="http://www.310lakeside.net">

<span class="given-name">Joanne</span>
<span class="additional-name"></span>
<span class="family-name">Smith</span>
</a>
<div class="org">310 Lakeside</div>
<div class="adr">
<div class="street-address">301 East Pine Street</div>
<span class="locality">Orlando</span>,
<span class="region">FL</span>,
<span class="postal-code">32801</span>

<span class="country-name">USA</span>

</div>
<div class="tel">(407) 447-9310</div>

<div class="note distance">

</div>

</div>

http://zappatic.net/safarimicroformats/

https://addons.mozilla.org/en-US/ﬁrefox/addon/4106

<a href=”http://h2vx.com/vcf/example.com/
page.html”>Download contacts</a>

GREAT, HTML5, BUT I’M
HUNGRY NOW.

if (navigator && navigator.geolocation) {
// HTML5 GeoLocation
function getLocation(position) {

updateMyLocation(position.coords.latitude,position.coords.lo
ngitude);

proccessDirections.sortLocations(
position.coords.latitude,
position.coords.longitude
);
}
navigator.geolocation.getCurrentPosition(getLocation);

} else {
// Google AJAX API fallback GeoLocation
if ((typeof google == 'object') && google.loader &&
google.loader.ClientLocation) {

updateMyLocation(google.loader.ClientLocation.latitude,googl
e.loader.ClientLocation.longitude);

proccessDirections.sortLocations(
google.loader.ClientLocation.latitude,
google.loader.ClientLocation.longitude
);
}
}

}

addresses = $(locations).map(function(){
var $adr = $(this).ﬁnd(".adr"), latLng = null, lat, lng;

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.

http://2010.incontrolconference.com/eats/

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?

<div id="" class="vcard">

<a class="url fn n" href="http://www.tmh.com/"> <span
class="given-name">John</span>

<span class="additional-name"></span>

<span class="family-name">Smith</span>

</a>

<div class="org">Tallahassee Memorial Hospital</div>

<div class="adr" data-longitude="-84.260799"
data-latitude="30.456100" data-lang="js">

<div class="street-address">1300 Miccosukee Road</div>

<span class="locality">Tallahassee</span>,

<span class="region">FL</span>

<span class="country-name">USA</span>

</div>

<div class="tel">(850) 431-1155</div>

</div>

http://ejohn.org/blog/html-5-data-attributes/

if ((lat = $adr.attr("data-latitude")) && (lng =
$adr.attr("data-longitude"))) {
latLng = new google.maps.LatLng(lat,lng);
}

BUT WAIT....

•I own an iPhone!

HTML5.
IT’S WHAT FOR DINNER.

THANK YOU!
Christopher Schmitt
schmitt@heatvision.com
http://twitter.com/@teleject

Creative Commons Citations

http://www.flickr.com/photos/gurock20/459901107/
http://www.flickr.com/photos/wili/214317898/
http://www.flickr.com/photos/gadl/421838292/
http://www.flickr.com/photos/tantek/1141384818/
http://dev.opera.com/articles/view/html-5-canvas-the-basics/

[In Control 2010] HTML5

More Related Content

What's hot (20)

Similar to [In Control 2010] HTML5 (20)

More from Christopher Schmitt (20)

Recently uploaded (20)

[In Control 2010] HTML5