Looking into HTML5

LOOKING INTO HTML5
CHRISTOPHER SCHMITT

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.”
-TIM BERNERS-LEE

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

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=quot;ENquot;>
<HEAD>
<META CHARSET=quot;UTF-8quot;>
<TITLE>BASIC HTML5 WEB DOCUMENT STRUCTURE</TITLE>
</HEAD>
<BODY>
<H1>....</H1>
<P>...</P>
</BODY>
</HTML>

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

DIV ID=”section”

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

DIV ID=”footer”

HEADER
NAV

SECTION

ASIDE
ARTICLE

FOOTER

<BODY>
<HEADER>
<H1>HEADING </H1>
</HEADER>
<NAV>
<H3>SITE NAVIGATION</H3>
<UL>...</UL>
</NAV>
<SECTION>
<H3>WEBLOG ENTRY</H3>

<ARTICLE>

</SECTION>
<ASIDE>
<P>YOU ARE READING quot;CHOCOLATE RAINquot;, AN ENTRY POSTED ON <TIME
DATETIME=quot;2009-03-05quot;>5 MARCH, 2009</TIME>, TO THE <A HREF=quot;#quot;>MISTY
COLLECTION</A>. SEE OTHER POSTS IN <A HREF=quot;#quot;>THIS COLLECTION</A>.</P>
</ASIDE>
<FOOTER>
<P>...</P>
</FOOTER>
</BODY>

<SCRIPT TYPE=quot;TEXT/JAVASCRIPTquot;>
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/

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”

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(quot;CONTENT-TYPE: APPLICATION/XHTML+XML;
CHARSET=UTF-8quot;);
ECHO'<!DOCTYPE HTML PUBLIC quot;-//W3C//DTD XHTML 1.0
TRANSITIONAL//ENquot; quot;HTTP://WWW.W3.ORG/TR/XHTML1/DTD/
XHTML1-TRANSITIONAL.DTDquot;>
<HTML XMLNS=quot;HTTP://WWW.W3.ORG/1999/XHTMLquot;
XML:LANG=quot;ENquot; LANG=quot;ENquot;>';
}
ELSE {
ECHO '<!DOCTYPE HTML><HTML>';
}?>

http://tr.im/h0Rj

<!DOCTYPE HTML>
<HEAD>

</HEAD>

<BODY>

<H1>VIDEO EXAMPLE</H1>

<AUDIO SRC=quot;HTML5TEST.OGGquot; AUTOPLAY CONTROLS>

<A HREF=quot;HTML5TEST.OGGquot;>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

• Only able to play OGG format in nightly build of Firefox.

• Could not get player to use MP3 audio

<!DOCTYPE HTML>
<HEAD>

</HEAD>

<BODY>

<OBJECT WIDTH=quot;425quot; HEIGHT=quot;344quot;><PARAM NAME=quot;MOVIEquot;

VALUE=quot;HTTP://WWW.YOUTUBE.COM/V/
4GUKSQAG5XI&HL=EN&FS=1quot;></PARAM><PARAM
NAME=quot;ALLOWFULLSCREENquot; VALUE=quot;TRUEquot;></PARAM><PARAM
NAME=quot;ALLOWSCRIPTACCESSquot; VALUE=quot;ALWAYSquot;></PARAM><EMBED
SRC=quot;HTTP://WWW.YOUTUBE.COM/V/4GUKSQAG5XI&HL=EN&FS=1quot;
TYPE=quot;APPLICATION/X-SHOCKWAVE-FLASHquot;
ALLOWSCRIPTACCESS=quot;ALWAYSquot; ALLOWFULLSCREEN=quot;TRUEquot;
WIDTH=quot;425quot; HEIGHT=quot;344quot;></EMBED></OBJECT>

</BODY>
</HTML>

<!DOCTYPE HTML>
<HEAD>

</HEAD>

<BODY>

<VIDEO SRC=quot;HTML5TEST.OGGquot;

WIDTH=quot;320quot; HEIGHT=quot;240quot; CONTROLS

POSTER=quot;HTML5TESTVIDEOPOSTER.JPGquot;>

<A HREF=quot;HTML5TESTVIDEO.OGGquot;>DOWNLOAD MOVIE</A>

</VIDEO>

</BODY>
</HTML>

VIDEO DEMOS

• Personal demo

• http://tinyvid.tv/

• http://www.mozbox.org/jdll/video.xhtml

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.

• Alternative text is placed inside VIDEO element.

• If you want to give users control, use CONTROL attribute.

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

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

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 ﬁles types to OGG

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

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/

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

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

<CANVAS ID=quot;MYCANVASquot; WIDTH=quot;300quot; HEIGHT=quot;150quot;>
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.FILLSTYLE = '#00F';
CONTEXT.STROKESTYLE = '#F00';
CONTEXT.LINEWIDTH = 4;

// DRAW A RIGHT TRIANGLE.
CONTEXT.BEGINPATH();
CONTEXT.MOVETO(10, 10);
CONTEXT.LINETO(100, 10);
CONTEXT.FILL();
CONTEXT.STROKE();
CONTEXT.CLOSEPATH();
}, FALSE);

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

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

THANK YOU!
Christopher Schmitt
schmitt@heatvision.com
twitter: @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/

Looking into HTML5

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Looking into HTML5

Ähnlich wie Looking into HTML5 (20)

Mehr von Christopher Schmitt

Mehr von Christopher Schmitt (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Looking into HTML5