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

BLUEPRINTS VS REALITY

“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

BASIC HTML5 LAYOUT

<!DOCTYPE HTML> <HTML LANG=\"EN\"> <HEAD> <META CHARSET=\"UTF-8\"> <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 \"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>

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

BASIC CSS FORMATTING

HEADER NAV SECTION ASIDE ARTICLE FOOTER

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

HTML5 AUDIO

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

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

HTML5 VIDEO

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

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

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.

HTML5 AND MICROFORMATS

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=\"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/

HTML5 CANVAS

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

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

0 comments

Notes on slide 1

23 Favorites