HTML5 Pearson preso

The “crazy” world of HTML5

Chris Mills, Opera Software

Monday, 19 September 2011

Who am I?‣Opera open standards evangelist and tech writer

‣Telling the world about open standards & Opera

‣Improving web education

‣Drumming in a heavy metal band


What is HTML5?A new HTML spec that defines:

‣New semantic elements

‣New features such as native video, more powerful forms, web sockets

‣New APIs for controlling such features

‣Error handling, and other such useful things


Or according to some...‣HTML5

‣CSS3, WOFF

‣SVG, SMIL, WebGL

‣Geolocation, WAC

‣Indexed DB, File API

‣Server-sent events

‣Web workers, XHR2

‣& every other open standard under the sun!


A brief history of HTML‣HTML first proposed 1989-1991

‣HTML3 first standardised in 1995

‣HTML 4.01 standardised in 1999

‣Corrections submitted in 2001


HTML5 history + politics‣W3C decided the future was XHTML

‣This didn’t go down well, and no-one cared about XHTML2


Why did XHTML fail?‣XHTML2 features aren’t backwards compatible

with “the Web so far”

‣XHTML1 didn’t work properly anyway

‣XML in general doesn’t suit the Web


HTML5 history + politics‣HTML5 (was web applications 1.0) started by

WHATWG in 2004ish

‣Adopted by W3C 2008

‣WHATWG version became version-less in 2011


HTML is the new HTML5? In January 2011, Ian Hickson announced that the WHATWG HTML5 spec was dropping its version number, and becoming a living spec that could keep being added to, as more features came to fruition. The W3C version is keeping its version number, and acting as a snapshot.


Why can HTML5 succeed?‣It is backwards compatible with HTML4

‣It is written to be competitive with other technologies, eg Flash, Silverlight

‣It fills up holes and adds features: it doesn’t replace HTML4.x


HTML5 features

http://www.flickr.com/photos/cybertoad/247896160/Monday, 19 September 2011

http://www.flickr.com/photos/50014762@N03/4632637811/


There’s nothing wrong with HTML4...

http://www.flickr.com/photos/birdfarm/519230710/Monday, 19 September 2011



But HTML5 has more blingAs if! Not publishing this one...




HTML5 features‣More accurate semantics (eg <header>,

<footer>)

‣Better forms

‣<video>, <audio>‣<canvas>‣ Offline apps

‣Web Sockets*, Geolocation*

‣ Microdata, Web Workers, History API, etc.


http://www.flickr.com/photos/zscheyge/49012397/

New semantics




HTML5 doctype<!DOCTYPE html>


Typical website structure<div id="header"></div><div id="nav"></div><div id="main"> <div class="article"></div> <div class="article"></div> ...</div><div id="footer"></div>


Most common classes and IDs?Google did a study of the most common classes and IDs on the Web. so did Opera.

‣http://code.google.com/webstats/2005-12/classes.html

‣http://devfiles.myopera.com/articles/572/idlist-url.htm

‣http://devfiles.myopera.com/articles/572/classlist-url.htm


http://code.google.com/webstats/2005-12/classes.html




http://devfiles.myopera.com/articles/572/idlist-url.htm




http://devfiles.myopera.com/articles/572/classlist-url.htm




Most common IDs


Most common classes


HTML5 update<header></header><nav></nav><section id="main"> <article></article> <article></article> ...</section><footer></footer>


<nav><nav> <ul> <li><a href="#article1">First article</a></li> <li><a href="#article2">Second article</a></li> <li><a href="#article3">Third article</a></li> </ul></nav>


<aside><aside> <h2>About the author</h2> <p>Chris Mills is a front-end bling junkie working for Opera Software...</p></aside>


<time><p>Article published on the <time datetime="2011-03-12T09:48"> 12th March 2011, at 9:48am </time></p>


<hgroup><hgroup> <h1>Top level heading</h1> <h2>This is a really descriptive subtitle</h2></hgroup>


<figure> and <figcaption><figure> <img src="bear.jpg" alt="this is the bear that I wrestled" /> <figcaption>This is the bear that I wrestled.</figcaption></figure>


Where does this leave the humble <div>?Use it for anything that isn’t covered by other new elements, and is just a general grouping, e.g. for styling purposes, for which you don’t want to create a new section. An intro <div>, perhaps?


The HTML5 outlining algorithmHeading/section hierarchy based on sectioning element hierarchy, not <hx> elements used

‣No longer limited to six heading levels

‣Hierarchy stays correct when syndicated

‣You can retain HTML4 heading levels for backwards compatibility


The HTML5 outlining algorithm<h1>My title</h1><div> <h2>My subtitle</h2></div>

<h1>My title</h1><section> <h2>My subtitle</h2></section>


New semantics rock!‣Better machine readability

‣Better interoperability

‣More consistency of code

‣Better accessibility (once screen readers catch up)

‣Leaner markup that is easier to style

‣More in keeping with what real webdevs do


Lax syntax?Some say that HTML5 syntax is really lax — you:

‣don’t need to quote attributes

‣can minimise attributes

‣don’t need to self close

‣can mix upper and lower case

‣You don’t even need to include <html>, <head> and <body>!


Lax syntax?But this more accurately reflects what real developers do, rather than what the XHTML spec THINKS they should

‣You can use the style you want (although you should stick to some best practices)

‣The browser fills in a lot of this stuff

‣The HTML5 spec defines how errors should be handled


Examplehttp://people.opera.com/cmills/workshop/http://devfiles.myopera.com/articles/4612/pwei_sample_html5.html


http://people.opera.com/cmills/workshop/

http://people.opera.com/cmills/workshop/

http://devfiles.myopera.com/articles/4612/pwei_sample_html5.html




Browsers don’t ACTUALLY support these ... yetBut we can get them displaying fine

‣You can style any element with CSS, even if the browser doesn’t recognise it

‣Give all the structural elements display: block;‣IE also needs createElement('article');


http://www.flickr.com/photos/nickwebb/3016498475/

Styling with CSS




Styling with CSS‣Not much different to what we already do

‣Needs a bit of extra help to style HTML5 semantic elements

‣CSS3 brings some useful tricks

‣Fallbacks need some careful thought


Extra styling helparticle, section, footer { display: block;}

document.createElement('article');document.createElement('section');document.createElement('footer');


CSS3 tricksinput:valid { color: lime; }input:invalid { color: red; }


Styling fallbacks<div id="video"><video> </video></div>

video { margin: 0 auto; }#video { margin: 0 auto; }

http://www.flickr.com/photos/nickwebb/3016498475/

Error handling




HTML error handling......never existed previous to HTML5So browsers had to work out what do to with bad markup themselves.


This sample...<p><b>This text should be bold</p><p>Should this text be bold?</p><p><a href="#"></b>This text should be a link</p><p>Should this text be a link?</p>


...in Opera...<p><b> This text should be bold <p>Should this text be bold?</p> <p> <a href="#">This text should be a link</a> <p>Should this text be a link?</p> </p></p></b>


...in Firefox...<p><b>This text should be bold</b></p><b/><p><b>Should this text be bold?</b></p><b/><p><a href="#">This text should be a link</a></p><a href="#"/><p><a href="#">Should this text be a link?</a></p><a href="#"/>


...in IE...<p><b>This text should be bold</b> This text should be a link</p><p>Should this text be bold?</p><p><a href="#"/></p><p>Should this text be a link?</p>


HTML5 states exactly what to doThis will cut down on a lot of cross site problemsFor more, see “100% Ragnarök’n’roll” athttp://labs.opera.com/news/2011/07/21/


http://labs.opera.com/news/2011/07/21/

http://labs.opera.com/news/2011/07/21/

HTML5 forms


HTML5 formsPreviously called Web Forms 2.0

‣More powerful form controls

‣Built-in validation


Slider<input type="range" />


Date-time controls<input type="date"><input type="datetime"><input type="week"><input type="month">


number<input type="number">


color<input type="color">


Search boxes<input type="search">


Datalist<input type="text" list="mydata"><datalist id="mydata"> <option label="Mr" value="Mister"> <option label="Mrs" value="Mistress"> <option label="Ms" value="Miss"></datalist>


Other new input types<input type="email"><input type="url"><input type="tel">


ValidationForm validation used to be horrendous


HTML5 gives you this<input type="text" required>


And this<input type="text" required pattern="[A-z]{1,20} [A-z]{1,20}">


Other new attributesautofocusplaceholderminmaxstep


New output mechanisms<output><progress><meter>


JS validation checkingform.checkValidity()formelement.checkValidity()formelement.setCustomValidity()

interface ValidityState { readonly attribute boolean valueMissing; readonly attribute boolean typeMismatch; readonly attribute boolean patternMismatch; readonly attribute boolean tooLong;};


JS custom error messageinput.setCustomValidity('That is not the correct answer!');


Form awesomeness‣Much easier validation

‣Easier to implement complicated controls, with better semantics

‣They degrade to basic text inputs

‣Hinting at better UX


Form detractors‣Support not completely there yet

‣Not easy to customise text of error messages

‣Impossible to customise styling of error messages


Exampleshttp://people.opera.com/cmills/workshop/html5_forms.html

http://devfiles.myopera.com/articles/4582/html5-forms-example.html


http://people.opera.com/cmills/workshop/html5_forms.html








http://www.flickr.com/photos/stonebird/28894187/

<video> and <audio>




<video> and <audio>New elements, plus new API for controlling audio and video


The old school way<object width="425" height="344"><param name="movie" value="http://www.example.com/v/LtfQg4KkR88&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.example.com/v/LtfQg4KkR88&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed></object>


http://www.example.com/v/LtfQg4KkR88&hl=en&fs=1








The new school: <video><video src="video.webm" width="480px" height="283px" controls poster="poster.png" autoplay loop></video>


Fallback<video src="video.webm" width="480px" height="283px" controls poster="poster.png" autoplay loop> <p>Your browser doesn’t support HTML5 video. <a href="myVideo.webm">Download the video instead</a>.</p></video>


Adding different formats<video ... > ... <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"></video>


Specifying codecs<source src="videofile.mp4" type='video/mp4; codecs="codecs="avc1.4D401E, mp4a.40.2"' /><source src="videofile_small.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /><source src="videofile.webm" type='video/webm; codecs="vp8, vorbis"' /><source src="videofile.ogv" type='video/ogg; codecs="theora, vorbis"' />


Simple APIvar v = document.getElementById('player');

v.play();v.pause();v.volume = … ;v.currentTime = … ;


Eventsv.addEventListener('loadeddata', function() { … }, true)v.addEventListener('play', function() { … }, true)v.addEventListener('pause', function() { … }, true)v.addEventListener('timeupdate', function() { … }, true)v.addEventListener('ended', function() { … }, true)


Exampleshttp://people.opera.com/patrickl/experiments/webm/fancy-swap/

http://people.opera.com/cmills/mediaquery/

http://dev.opera.com/articles/view/html5-audio-radio-player/

http://dev.opera.com/articles/tags/video/


http://people.opera.com/patrickl/experiments/webm/fancy-swap/












Native <video> is awesome!‣Works well with other open standards

‣Built-in keyboard accessibility

‣API for customizing controls, etc.

‣Doesn’t require plugins!

‣Good cross browser support

‣Can provide fallbacks for older browsers

‣Many ready rolled players exist - jPlayer, Sublime video


What’s bad about <video>?‣People can download <video> easily

‣Captioning and suchlike is at an early stage

‣Format wars...


WebVTT (née WebSRT)‣Add text tracks onto a video

‣for things such as subtitles and captions‣ .vtt files contain timestamp ranges with text

tracks, and limited styling info‣<track> element associates these with video


.vtt file exampleWEBVTT

100:00:10.500 --> 00:00:13.000 A:startElephant's Dream

200:00:15.000 --> 00:00:18.000 A:end L:10%At the <b>left</b> we can see...


<track> element example<video controls> <source src="video-file.mp4" type="video/mp4"> <source src="video-file.webm" type="video/webm"> <track src="en.vtt" kind="subtitles" srclang="en" label="English subtitles"></video>


Currently supported nowhere‣But you can add support in using JS libraries

‣Playr

‣Leanback Player

‣Captionator


Future Audio APIs‣Web Audio API (and Moz’s Audio Data API)

‣Supported in Chrome and FF, respectively

‣Access sample rates, frame buffer length, etc.

‣Create audio visualisations

‣Write your own audio data programatically

‣Audio stream synthesis and processing

‣Spacialised audio for 3D games


APIs for streaming media‣getUserMedia — get a media source (eg a

microphone or a web cam)

‣PeerConnection API — make a connection (web socket or XHR) between peers through which to send media

‣Stream API — stream a media source

‣WebRTC (http://www.webrtc.org/) is the umbrella term for all this stuff

‣Opera has experimental support


http://www.webrtc.org

http://www.webrtc.org

Adaptive streaming‣Each stream stored in multiple quality levels

‣As bandwidth changes, the supporting device can grab video chunks from the different quality levels

‣an XML manifest file stores the data that relates to the different quality levels

‣MPEG’s DASH is a first attempt, but not great


http://www.flickr.com/photos/pixeljuice23/3121241987/

<canvas>




<canvas>‣Standard API for drawing

‣Scriptable graphics


The basics<canvas id="canvas" width="400" height="300"> ...fallback...</canvas>


The basicsctx = canvas.getContext("2d");

ctx.fillRect(x, y, width, height);ctx.beginPath();ctx.moveTo(x, y);ctx.lineTo(x, y);ctx.bezierCurveTo(x1, y1, x2, y2, c1, c2);


Drawing an image onto a canvasctx = canvas.getContext("2d");

var logo = new Image();logo.src = 'logo.png';

ctx.drawImage(logo,x1,y1,w1,h1,x2,y2,w2,h2);


Accessing an image data arrayctx = canvas.getContext("2d");

canvasData = ctx.getImageData(x,y,w,h);[R,G,B,A,R,G,B,A,R,G,B,A,R,G,B,A, … ]


Canvas can also do videoctx = canvas.getContext("2d");v = document.getElementById('player');ctx.drawImage(v,x1,y1,w1,h2,x2,y2,w2,h2);


<canvas> pros‣Great for games and image/video manipulation

(now JS processors have caught up)

‣Much faster than markup-based animation (eg SVG, SMIL)

‣Runs on iDevices, unlike Flash

‣Support across all modern browsers

‣Add support for older browsers using Polyfills, like Excanvas


<canvas> cons‣Content is inaccessible

‣No animation API built in

‣Can be really slow for large dynamic areas, like UIs


Examples‣http://dev.opera.com/articles/view/html-5-

canvas-the-basics/

‣http://html5doctor.com/video-canvas-magic/

‣http://www.hakim.se/experiments/

‣http://www.canvasdemos.com/

‣http://people.opera.com/patrickl/experiments/canvas/particle/3/

‣https://github.com/mezzoblue/PaintbrushJS


http://html5doctor.com/video-canvas-magic/

http://html5doctor.com/video-canvas-magic/

http://www.hakim.se/experiments/

http://www.hakim.se/experiments/

http://www.canvasdemos.com

http://www.canvasdemos.com

http://people.opera.com/patrickl/experiments/canvas/particle/3/




https://github.com/mezzoblue/PaintbrushJS

https://github.com/mezzoblue/PaintbrushJS

http://www.flickr.com/photos/bzedan/2441516764/

Offline apps




The web is pretty crap offline‣So how do we address this?

‣HTML5 saves the day (again)

‣Application Cache (AppCache) for assets

‣Web storage for simple data

‣WebSQL/IndexedDB for complex data


AppCache Manifest reference<html manifest="blah.manifest">


Manifest fileCACHE MANIFEST# send this with correct text/cache-manifest MIMEimages/sprites.pngscripts/common.jsscripts/jquery.jsstyles/global.cssNETWORK:# never cached (apart from normal caching mechanism)onlineonly.cssFALLBACK:# pattern matching. fallback file will also be cachedimages/ images/not-offline.png


Web (local/session) storagelocalStorage/sessionStoragelocalStorage.setItem(key, value);localStorage.getItem(key);localStorage.clear();localStorage.key = value;if (localStorage.key == '…') { … }


WebSQLvar db =openDatabase(dbName, version, displayName, expectedSize);db.transaction(function(tx) { tx.executeSql(sqlStatement, [], function (tx, result) { /* do something with the results */ });});


Web databases: future‣WebSQL supported in Opera/Webkit

‣But being discontinued

‣Moz/IE prefer IndexedDB

‣All will eventually go this way

‣WebSQL may well remain good option for mobile


Caching issues?


http://www.flickr.com/photos/tjmartins/3890142316/

HTML5 accessibility best practices




HTML5 accessibility?‣Still no magic bullet

‣Some a11y boons

‣And some new (old?) problems

‣html5accessibility.com is very useful


The good things‣A lot of elements have keyboard accessibility

built in

‣New semantics mean lot of advantages (eg no more skip links?)

‣Video captioning is coming

‣WAI ARIA can still be used to supplement where needed

‣Some browsers have started exposing element semantics to AT


The bad things‣Canvas!

‣Video a11y (coming soon)


Should we useHTML5 now?


When should I use it?Now!

‣Most modern browsers support most of this stuff now

‣Workarounds are perfectly possible

‣You are already using HTML5 by using HTML4.x

‣Don’t wait till it’s completely finished


The UK road system is never finished...

http://www.flickr.com/photos/50014762@N03/4632637811/Monday, 19 September 2011



In general...

‣...don’t do browser sniffing


Do feature detection/graceful degradation‣http://diveintohtml5.org/everything.html

‣http://www.modernizr.com/

‣http://yepnopejs.com/


http://diveintohtml5.org/everything.html

http://diveintohtml5.org/everything.html

http://www.modernizr.com

http://www.modernizr.com

http://yepnopejs.com

http://yepnopejs.com

And patch older browsers as needed‣https://github.com/Modernizr/Modernizr/wiki/

HTML5-Cross-Browser-Polyfills


https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills




http://www.flickr.com/photos/freefoto/5692512457/

HTML5 security?




HTML5 security?‣Very similar to HTML4

‣Not much can be done to protect source

‣Need to be careful about cross domain resource sharing and messaging

‣Other questions?


http://www.flickr.com/photos/freefoto/5692512457/

Device APIs




Device APIs‣http://www.w3.org/2009/dap/

‣Far from being supported

‣And there are still competing proposals, like WAC

‣Shame, as this is one killer feature area for web apps


http://www.flickr.com/photos/mikecogh/1812288874/

Questions?

What would we like to see in the spec?




Thanks for listening!‣[email protected]

‣@chrisdavidmills

‣http://dev.opera.com/articles/tags/html5/

‣http://html5doctor.com


http://dev.opera.com/articles/tags/html5/

http://dev.opera.com/articles/tags/html5/

http://www.opera.com/wsc

http://www.opera.com/wsc

HTML5 Pearson preso

Technology

Transcript of HTML5 Pearson preso