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.”
-TIM BERNERS-LEE
26. LESSONS LEARNED
• New HTML5 elements are treated as inline elements.
• Need to use CSS property-value display:block
• IE6
and 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”
27. 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.
32. HTML5 AUDIO
• AUDIO element attributes are SRC, AUTOBUFFER, AUTOPLAY,
LOOP, CONTROLS
• If you don’t have CONTROL, player becomes transparent
• Only able to play OGG format in nightly build of Firefox.
• Could not get player to use MP3 audio
36. VIDEO DEMOS
• Personal demo
• http://tinyvid.tv/
• http://www.mozbox.org/jdll/video.xhtml
37. 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.
• Alternative text is placed inside VIDEO element.
• If you want to give users control, use CONTROL attribute.
38. HTML5 VIDEO
• Video can start automatically if using the AUTOPLAY=”1”
attribute and value.
• Specprovides for LOOP, AUTOBUFFER which also take a value of
O or 1.
• Codecs support...
39. 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
40. LESSONS LEARNED
• Works in nightly builds of Firefox (3.2b) and only for OGG
format.
• Other browsers that said they supported the VIDEO format I
could not get to work on my machines.
• Used VLC to encode common movie files types to OGG
• People really, really, really want this to work.
42. REPLACING ABBR
• ABBRis used by screenreaders to expand abbreviations like “lbs”
or “NCAAP”
• Howeverunintended consequences occurred trying to
workaround browser bugs for other HTML elements
• What happens when a screenreaders text like this:
• “Let’sgo to <abbr class=quot;geoquot;
title=quot;30.300474;-97.747247quot;>Austin, TX</abbr>”
http://www.brucelawson.co.uk/2009/microformats-accessibility-html-5-again/
43. REPLACING ABBR
• ABBRis used by screenreaders to expand abbreviations like “lbs”
or “NCAAP”
• Howeverunintended consequences occurred trying to
workaround browser bugs for other HTML elements
• What happens when a screenreaders text like this:
• “Let’sgo to <abbr class=quot;geoquot;
title=quot;30.300474;-97.747247quot;>Austin, TX</abbr>”
http://www.brucelawson.co.uk/2009/microformats-accessibility-html-5-again/
44. <DIV CLASS=quot;VEVENTquot;>
<A CLASS=quot;URLquot; HREF=quot;HTTP://WWW.WEB2CON.COM/quot;>HTTP://
WWW.WEB2CON.COM</A>
<SPAN CLASS=quot;SUMMARYquot;>WEB 2.0 CONFERENCE</SPAN>:
<ABBR CLASS=quot;DTSTARTquot; TITLE=quot;2007-10-05quot;>OCTOBER 5</ABBR>-
<ABBR CLASS=quot;DTENDquot; TITLE=quot;2007-10-20quot;>19</ABBR>,
AT THE <SPAN CLASS=quot;LOCATIONquot;>ARGENT HOTEL, SAN FRANCISCO, CA</SPAN>
</DIV>
45. <DIV CLASS=quot;VEVENTquot;>
<A CLASS=quot;URLquot; HREF=quot;HTTP://WWW.WEB2CON.COM/quot;>HTTP://
WWW.WEB2CON.COM</A>
<SPAN CLASS=quot;SUMMARYquot;>WEB 2.0 CONFERENCE</SPAN>:
<TIME CLASS=quot;DTSTARTquot; DATETIME=quot;2007-10-05quot;>OCTOBER 5</TIME>-
<TIME CLASS=quot;DTENDquot; DATETIME=quot;2007-10-20quot;>19</TIME>,
AT THE <SPAN CLASS=quot;LOCATIONquot;>ARGENT HOTEL, SAN FRANCISCO, CA</SPAN>
</DIV>
http://www.brucelawson.co.uk/2009/microformats-accessibility-html-5-again/
48. <SCRIPT TYPE=quot;TEXT/JAVASCRIPTquot;><!--
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>
49.
50. // 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);
51.
52. // 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);
