html5 pearson preso
DESCRIPTION
HTML5 overview presented to Pearson,TRANSCRIPT
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
Monday, 19 September 2011
Monday, 19 September 2011
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
Monday, 19 September 2011
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!
Monday, 19 September 2011
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
Monday, 19 September 2011
HTML5 history + politics‣W3C decided the future was XHTML
‣This didn’t go down well, and no-one cared about XHTML2
Monday, 19 September 2011
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
Monday, 19 September 2011
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
Monday, 19 September 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.
Monday, 19 September 2011
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
Monday, 19 September 2011
HTML5 features
http://www.flickr.com/photos/cybertoad/247896160/Monday, 19 September 2011
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...
Monday, 19 September 2011
HTML5 features‣More accurate semantics (eg <header>,
<footer>)
‣Better forms
‣<video>, <audio>‣<canvas>‣ Offline apps
‣Web Sockets*, Geolocation*
‣ Microdata, Web Workers, History API, etc.
Monday, 19 September 2011
http://www.flickr.com/photos/zscheyge/49012397/
New semantics
Monday, 19 September 2011
HTML5 doctype<!DOCTYPE html>
Monday, 19 September 2011
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>
Monday, 19 September 2011
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
Monday, 19 September 2011
Most common IDs
Monday, 19 September 2011
Most common classes
Monday, 19 September 2011
HTML5 update<header></header><nav></nav><section id="main"> <article></article> <article></article> ...</section><footer></footer>
Monday, 19 September 2011
<header> and <footer><header> <h1>Top level heading</h1></header> <footer> <p>©2011 Chris Mills examples</p></footer>
Monday, 19 September 2011
<section> and <article><section id="main"> <article> ... </article> <article> ... </article></section>
Monday, 19 September 2011
<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>
Monday, 19 September 2011
<aside><aside> <h2>About the author</h2> <p>Chris Mills is a front-end bling junkie working for Opera Software...</p></aside>
Monday, 19 September 2011
<time><p>Article published on the <time datetime="2011-03-12T09:48"> 12th March 2011, at 9:48am </time></p>
Monday, 19 September 2011
<hgroup><hgroup> <h1>Top level heading</h1> <h2>This is a really descriptive subtitle</h2></hgroup>
Monday, 19 September 2011
<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>
Monday, 19 September 2011
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?
Monday, 19 September 2011
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
Monday, 19 September 2011
The HTML5 outlining algorithm<h1>My title</h1><div> <h2>My subtitle</h2></div>
<h1>My title</h1><section> <h2>My subtitle</h2></section>
Monday, 19 September 2011
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
Monday, 19 September 2011
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>!
Monday, 19 September 2011
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
Monday, 19 September 2011
Examplehttp://people.opera.com/cmills/workshop/http://devfiles.myopera.com/articles/4612/pwei_sample_html5.html
Monday, 19 September 2011
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');
Monday, 19 September 2011
http://www.flickr.com/photos/nickwebb/3016498475/
Styling with CSS
Monday, 19 September 2011
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
Monday, 19 September 2011
Extra styling helparticle, section, footer { display: block;}
document.createElement('article');document.createElement('section');document.createElement('footer');
Monday, 19 September 2011
CSS3 tricksinput:valid { color: lime; }input:invalid { color: red; }
Monday, 19 September 2011
Styling fallbacks<div id="video"><video> <!-- Flash fallback inside --></video></div>
video { margin: 0 auto; }#video { margin: 0 auto; }
Monday, 19 September 2011
http://www.flickr.com/photos/nickwebb/3016498475/
Error handling
Monday, 19 September 2011
HTML error handling......never existed previous to HTML5So browsers had to work out what do to with bad markup themselves.
Monday, 19 September 2011
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>
Monday, 19 September 2011
...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>
Monday, 19 September 2011
...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="#"/>
Monday, 19 September 2011
...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>
Monday, 19 September 2011
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/
Monday, 19 September 2011
HTML5 forms
Monday, 19 September 2011
HTML5 formsPreviously called Web Forms 2.0
‣More powerful form controls
‣Built-in validation
Monday, 19 September 2011
Slider<input type="range" />
Monday, 19 September 2011
Date-time controls<input type="date"><input type="datetime"><input type="week"><input type="month">
Monday, 19 September 2011
number<input type="number">
Monday, 19 September 2011
color<input type="color">
Monday, 19 September 2011
Search boxes<input type="search">
Monday, 19 September 2011
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>
Monday, 19 September 2011
Other new input types<input type="email"><input type="url"><input type="tel">
Monday, 19 September 2011
ValidationForm validation used to be horrendous
Monday, 19 September 2011
function validate() {
var str = “”;
var elements = document.getElementsByTagName('input');
// loop through all input elements in form
for(var i = 0; i < elements.length; i++) {
// check if element is mandatory; ie has a pattern
var pattern = elements.item(i).getAttribute('pattern');
if (pattern != null) {
var value = elements.item(i).value;
// validate the value of this element, using its defined pattern
var offendingChar = value.match(pattern);
// if an invalid character is found or the element was left empty
if(offendingChar != null || value.length == 0) {
// add up all error messages
str += elements.item(i).getAttribute('errorMsg') + “\n” +
“Found this illegal value: '” + offendingChar + “' \n”;
// notify user by changing background color, in this case to red
elements.item(i).style.background = “red”;
}
}
}
if (str != “”) {
// do not submit the form
alert(”ERROR ALERT!!\n” +str);
return false;
} else {
// form values are valid; submit
return true;
}
}
Monday, 19 September 2011
HTML5 gives you this<input type="text" required>
Monday, 19 September 2011
And this<input type="text" required pattern="[A-z]{1,20} [A-z]{1,20}">
Monday, 19 September 2011
Other new attributesautofocusplaceholderminmaxstep
Monday, 19 September 2011
New output mechanisms<output><progress><meter>
Monday, 19 September 2011
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;};
Monday, 19 September 2011
JS custom error messageinput.setCustomValidity('That is not the correct answer!');
Monday, 19 September 2011
Form awesomeness‣Much easier validation
‣Easier to implement complicated controls, with better semantics
‣They degrade to basic text inputs
‣Hinting at better UX
Monday, 19 September 2011
Monday, 19 September 2011
Form detractors‣Support not completely there yet
‣Not easy to customise text of error messages
‣Impossible to customise styling of error messages
Monday, 19 September 2011
Exampleshttp://people.opera.com/cmills/workshop/html5_forms.html
http://devfiles.myopera.com/articles/4582/html5-forms-example.html
Monday, 19 September 2011
http://www.flickr.com/photos/stonebird/28894187/
<video> and <audio>
Monday, 19 September 2011
<video> and <audio>New elements, plus new API for controlling audio and video
Monday, 19 September 2011
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>
Monday, 19 September 2011
The new school: <video><video src="video.webm" width="480px" height="283px" controls poster="poster.png" autoplay loop></video>
Monday, 19 September 2011
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>
Monday, 19 September 2011
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>
Monday, 19 September 2011
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"' />
Monday, 19 September 2011
Simple APIvar v = document.getElementById('player');
v.play();v.pause();v.volume = … ;v.currentTime = … ;
Monday, 19 September 2011
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)
Monday, 19 September 2011
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/
Monday, 19 September 2011
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
Monday, 19 September 2011
What’s bad about <video>?‣People can download <video> easily
‣Captioning and suchlike is at an early stage
‣Format wars...
Monday, 19 September 2011
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
Monday, 19 September 2011
.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...
Monday, 19 September 2011
<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>
Monday, 19 September 2011
Currently supported nowhere‣But you can add support in using JS libraries
‣Playr
‣Leanback Player
‣Captionator
Monday, 19 September 2011
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
Monday, 19 September 2011
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
Monday, 19 September 2011
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
Monday, 19 September 2011
http://www.flickr.com/photos/pixeljuice23/3121241987/
<canvas>
Monday, 19 September 2011
<canvas>‣Standard API for drawing
‣Scriptable graphics
Monday, 19 September 2011
The basics<canvas id="canvas" width="400" height="300"> ...fallback...</canvas>
Monday, 19 September 2011
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);
Monday, 19 September 2011
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);
Monday, 19 September 2011
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, … ]
Monday, 19 September 2011
Canvas can also do videoctx = canvas.getContext("2d");v = document.getElementById('player');ctx.drawImage(v,x1,y1,w1,h2,x2,y2,w2,h2);
Monday, 19 September 2011
<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
Monday, 19 September 2011
<canvas> cons‣Content is inaccessible
‣No animation API built in
‣Can be really slow for large dynamic areas, like UIs
Monday, 19 September 2011
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
Monday, 19 September 2011
http://www.flickr.com/photos/bzedan/2441516764/
Offline apps
Monday, 19 September 2011
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
Monday, 19 September 2011
AppCache Manifest reference<html manifest="blah.manifest">
Monday, 19 September 2011
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
Monday, 19 September 2011
Web (local/session) storagelocalStorage/sessionStoragelocalStorage.setItem(key, value);localStorage.getItem(key);localStorage.clear();localStorage.key = value;if (localStorage.key == '…') { … }
Monday, 19 September 2011
WebSQLvar db =openDatabase(dbName, version, displayName, expectedSize);db.transaction(function(tx) { tx.executeSql(sqlStatement, [], function (tx, result) { /* do something with the results */ });});
Monday, 19 September 2011
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
Monday, 19 September 2011
Caching issues?
Monday, 19 September 2011
http://www.flickr.com/photos/tjmartins/3890142316/
HTML5 accessibility best practices
Monday, 19 September 2011
HTML5 accessibility?‣Still no magic bullet
‣Some a11y boons
‣And some new (old?) problems
‣html5accessibility.com is very useful
Monday, 19 September 2011
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
Monday, 19 September 2011
The bad things‣Canvas!
‣Video a11y (coming soon)
Monday, 19 September 2011
Should we useHTML5 now?
Monday, 19 September 2011
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
Monday, 19 September 2011
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
Monday, 19 September 2011
Do feature detection/graceful degradation‣http://diveintohtml5.org/everything.html
‣http://www.modernizr.com/
‣http://yepnopejs.com/
Monday, 19 September 2011
And patch older browsers as needed‣https://github.com/Modernizr/Modernizr/wiki/
HTML5-Cross-Browser-Polyfills
Monday, 19 September 2011
http://www.flickr.com/photos/freefoto/5692512457/
HTML5 security?
Monday, 19 September 2011
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?
Monday, 19 September 2011
http://www.flickr.com/photos/freefoto/5692512457/
Device APIs
Monday, 19 September 2011
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
Monday, 19 September 2011
http://www.flickr.com/photos/mikecogh/1812288874/
Questions?
What would we like to see in the spec?
Monday, 19 September 2011
Thanks for listening!‣[email protected]
‣@chrisdavidmills
‣http://dev.opera.com/articles/tags/html5/
‣http://html5doctor.com
Monday, 19 September 2011