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

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

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

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/

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

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;

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://www.flickr.com/photos/stonebird/28894187/

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

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/

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

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

And patch older browsers as needed‣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!‣cmills@opera.com

‣@chrisdavidmills

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

‣http://html5doctor.com

html5 pearson preso

new html5

html5 history

html5 syntax

politics html5

html5 css3

html5 doctype

html5 update

html5 featureshttp

Technology

apps preso

html5 tema4 atributos en html5

supercar preso

oasis preso

tallinn preso

nami preso

preso myowns2m

resumes preso

html5 - isbn 978-3-8272-4730-8 - © 2011 by pearson...

[ms-html5]: microsoft edge / internet explorer html5...

khoi ngo nguyen html5 overview. outline history about html &...

scalaxb preso

twitter preso

concentrated html5 & attractive html5

hire html5 developer for html5 development and html5 game...

html5 canvas: images and drawings -...

eduignite preso

google preso

preso fcul

short preso