CM
Uploaded byChris Mills
PDF, PPTX1,418 views

HTML5 Pearson preso

The document provides an overview of HTML5, including its history, new semantic elements like <header> and <article>, improved forms capabilities with built-in validation, and error handling standardized in the specification. It discusses both benefits like leaner markup and criticisms like incomplete browser support for new features. Examples are given throughout to illustrate new HTML5 syntax and capabilities.

Embed presentation

Download as PDF, PPTX
1 / 123
2 / 123
3 / 123
4 / 123
5 / 123
6 / 123
7 / 123
8 / 123
9 / 123
10 / 123
11 / 123
12 / 123
13 / 123
14 / 123
15 / 123
16 / 123
17 / 123
18 / 123
19 / 123
20 / 123
21 / 123
22 / 123
23 / 123
24 / 123
25 / 123
26 / 123
27 / 123
28 / 123
29 / 123
30 / 123
31 / 123
32 / 123
33 / 123
34 / 123
35 / 123
36 / 123
37 / 123
38 / 123
39 / 123
40 / 123
41 / 123
42 / 123
43 / 123
44 / 123
45 / 123
46 / 123
47 / 123
48 / 123
49 / 123
50 / 123
51 / 123
52 / 123
53 / 123
54 / 123
55 / 123
56 / 123
57 / 123
58 / 123
59 / 123
60 / 123
61 / 123
62 / 123
63 / 123
64 / 123
65 / 123
66 / 123
67 / 123
68 / 123
69 / 123
70 / 123
71 / 123
72 / 123
73 / 123
74 / 123
75 / 123
76 / 123
77 / 123
78 / 123
79 / 123
80 / 123
81 / 123
82 / 123
83 / 123
84 / 123
85 / 123
86 / 123
87 / 123
88 / 123
89 / 123
90 / 123
91 / 123
92 / 123
93 / 123
94 / 123
95 / 123
96 / 123
97 / 123
98 / 123
99 / 123
100 / 123
101 / 123
102 / 123
103 / 123
104 / 123
105 / 123
106 / 123
107 / 123
108 / 123
109 / 123
110 / 123
111 / 123
112 / 123
113 / 123
114 / 123
115 / 123
116 / 123
117 / 123
118 / 123
119 / 123
120 / 123
121 / 123
122 / 123
123 / 123
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 bling As 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
New semantics http://www.flickr.com/photos/zscheyge/49012397/ 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>&copy;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 algorithm Heading/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
Example http://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 ... yet But 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
Styling with CSS http://www.flickr.com/photos/nickwebb/3016498475/ 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 help article, section, footer { display: block; } document.createElement('article'); document.createElement('section'); document.createElement('footer'); Monday, 19 September 2011
CSS3 tricks input: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
Error handling http://www.flickr.com/photos/nickwebb/3016498475/ Monday, 19 September 2011
HTML error handling... ...never existed previous to HTML5 So 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 do This will cut down on a lot of cross site problems For more, see “100% Ragnarök’n’roll” at http://labs.opera.com/news/2011/07/21/ Monday, 19 September 2011
HTML5 forms Monday, 19 September 2011
HTML5 forms Previously 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
Validation Form 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); 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 attributes autofocus placeholder min max step Monday, 19 September 2011
New output mechanisms <output> <progress> <meter> Monday, 19 September 2011
JS validation checking form.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 message input.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
Examples http://people.opera.com/cmills/workshop/ html5_forms.html http://devfiles.myopera.com/articles/4582/html5- forms-example.html Monday, 19 September 2011
<video> and <audio> http://www.flickr.com/photos/stonebird/28894187/ 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 API var v = document.getElementById('player'); v.play(); v.pause(); v.volume = … ; v.currentTime = … ; Monday, 19 September 2011
Events v.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
Examples http://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 example WEBVTT 1 00:00:10.500 --> 00:00:13.000 A:start Elephant's Dream 2 00: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
<canvas> http://www.flickr.com/photos/pixeljuice23/3121241987/ 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 basics ctx = 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 canvas ctx = 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 array ctx = 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 video ctx = 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
Offline apps http://www.flickr.com/photos/bzedan/2441516764/ 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 file CACHE MANIFEST # send this with correct text/cache-manifest MIME images/sprites.png scripts/common.js scripts/jquery.js styles/global.css NETWORK: # never cached (apart from normal caching mechanism) onlineonly.css FALLBACK: # pattern matching. fallback file will also be cached images/ images/not-offline.png Monday, 19 September 2011
Web (local/session) storage localStorage/sessionStorage localStorage.setItem(key, value); localStorage.getItem(key); localStorage.clear(); localStorage.key = value; if (localStorage.key == '…') { … } Monday, 19 September 2011
WebSQL var 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
HTML5 accessibility best practices http://www.flickr.com/photos/tjmartins/3890142316/ 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 use HTML5 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
HTML5 security? http://www.flickr.com/photos/freefoto/5692512457/ 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
Device APIs http://www.flickr.com/photos/freefoto/5692512457/ 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
Questions? What would we like to see in the spec? http://www.flickr.com/photos/mikecogh/1812288874/ Monday, 19 September 2011
Thanks for listening! ‣ cmills@opera.com ‣ @chrisdavidmills ‣ http://dev.opera.com/articles/tags/html5/ ‣ http://html5doctor.com Monday, 19 September 2011

More Related Content

PPTX
All Topics of HTML
byGetStudy
 
PDF
Web Standards
byHelior Colorado
 
PPT
To View Or Not To View, That Is The Question! - Guy Bedford - 27/06/2011
byDrupalCape
 
PDF
Understanding flexbox
byDavide Di Pumpo
 
PDF
html/CSS crash course correct free course link
byJustin Ezor
 
PDF
html/CSS Crash course w/ interactive slides link
byJustin Ezor
 
KEY
HTML5: A brave new world of markup
byChris Mills
 
PDF
Intro to HTML 5 / CSS 3
byTadpole Collective
 
All Topics of HTML
byGetStudy
 
Web Standards
byHelior Colorado
 
To View Or Not To View, That Is The Question! - Guy Bedford - 27/06/2011
byDrupalCape
 
Understanding flexbox
byDavide Di Pumpo
 
html/CSS crash course correct free course link
byJustin Ezor
 
html/CSS Crash course w/ interactive slides link
byJustin Ezor
 
HTML5: A brave new world of markup
byChris Mills
 
Intro to HTML 5 / CSS 3
byTadpole Collective
 

Similar to HTML5 Pearson preso

PDF
Html5 training
byJames VanDyke
 
KEY
2022 HTML5: The future is now
byGonzalo Cordero
 
PDF
Html5 first look by aj.Ball
bySupote Phunsakul
 
PDF
HTML5 - getting started
byTed Drake
 
PDF
HTML5, just another presentation :)
byFrançois Massart
 
PPTX
Introduction to HTML5 and CSS3 (revised)
byJoseph Lewis
 
ODP
Light introduction to HTML
byabidibo Contini
 
PDF
A practical guide to building websites with HTML5 & CSS3
byDarren Wood
 
ZIP
Html5 public
bydoodlemoonch
 
PPT
HTML 5 Complete Reference
byEPAM Systems
 
PPTX
Web Information Systems Html and css
byArtificial Intelligence Institute at UofSC
 
PDF
Html5 deciphered - designing concepts part 1
byPaxcel Technologies
 
PPTX
An Overview of HTML, CSS & Java Script
byFahim Abdullah
 
PPTX
Html5 and-css3-overview
byJacob Nelson
 
PDF
[PSU Web 2011] HTML5 Design
byChristopher Schmitt
 
PDF
A Primer on HTML 5 - By Nick Armstrong
byNick Armstrong
 
KEY
Html 5, a gentle introduction
byDiego Scataglini
 
PDF
Web Concepts - an introduction - introduction
byclement swarnappa
 
PPT
xhtml_css.ppt
byfakeaccount225095
 
KEY
Html5, a gentle introduction
byDiego Scataglini
 
Html5 training
byJames VanDyke
 
2022 HTML5: The future is now
byGonzalo Cordero
 
Html5 first look by aj.Ball
bySupote Phunsakul
 
HTML5 - getting started
byTed Drake
 
HTML5, just another presentation :)
byFrançois Massart
 
Introduction to HTML5 and CSS3 (revised)
byJoseph Lewis
 
Light introduction to HTML
byabidibo Contini
 
A practical guide to building websites with HTML5 & CSS3
byDarren Wood
 
Html5 public
bydoodlemoonch
 
HTML 5 Complete Reference
byEPAM Systems
 
Web Information Systems Html and css
byArtificial Intelligence Institute at UofSC
 
Html5 deciphered - designing concepts part 1
byPaxcel Technologies
 
An Overview of HTML, CSS & Java Script
byFahim Abdullah
 
Html5 and-css3-overview
byJacob Nelson
 
[PSU Web 2011] HTML5 Design
byChristopher Schmitt
 
A Primer on HTML 5 - By Nick Armstrong
byNick Armstrong
 
Html 5, a gentle introduction
byDiego Scataglini
 
Web Concepts - an introduction - introduction
byclement swarnappa
 
xhtml_css.ppt
byfakeaccount225095
 
Html5, a gentle introduction
byDiego Scataglini
 

More from Chris Mills

PDF
More efficient, usable web
byChris Mills
 
PDF
Feedback handling, community wrangling, panhandlin’
byChris Mills
 
PDF
APIs for modern web apps
byChris Mills
 
PDF
APIs, now and in the future
byChris Mills
 
PDF
Guerrilla education
byChris Mills
 
PDF
Web versus Native: round 1!
byChris Mills
 
PDF
BrazilJS MDN
byChris Mills
 
PDF
Empowering the "mobile web"
byChris Mills
 
PDF
Documentation and publishing
byChris Mills
 
PDF
MDN is easy!
byChris Mills
 
PDF
Getting rid of images with CSS
byChris Mills
 
PDF
Future layouts
byChris Mills
 
PDF
Laying out the future
byChris Mills
 
PDF
Accessibility doesn't exist
byChris Mills
 
PDF
Responsive web design standards?
byChris Mills
 
PDF
Adapt! Media queries and viewport
byChris Mills
 
PDF
Adapt and respond: keeping responsive into the future
byChris Mills
 
KEY
Angels versus demons: balancing shiny and inclusive
byChris Mills
 
PDF
HTML5 and CSS3: does now really mean now?
byChris Mills
 
PDF
The W3C and the web design ecosystem
byChris Mills
 
More efficient, usable web
byChris Mills
 
Feedback handling, community wrangling, panhandlin’
byChris Mills
 
APIs for modern web apps
byChris Mills
 
APIs, now and in the future
byChris Mills
 
Guerrilla education
byChris Mills
 
Web versus Native: round 1!
byChris Mills
 
BrazilJS MDN
byChris Mills
 
Empowering the "mobile web"
byChris Mills
 
Documentation and publishing
byChris Mills
 
MDN is easy!
byChris Mills
 
Getting rid of images with CSS
byChris Mills
 
Future layouts
byChris Mills
 
Laying out the future
byChris Mills
 
Accessibility doesn't exist
byChris Mills
 
Responsive web design standards?
byChris Mills
 
Adapt! Media queries and viewport
byChris Mills
 
Adapt and respond: keeping responsive into the future
byChris Mills
 
Angels versus demons: balancing shiny and inclusive
byChris Mills
 
HTML5 and CSS3: does now really mean now?
byChris Mills
 
The W3C and the web design ecosystem
byChris Mills
 

Recently uploaded

PDF
Automated Governance for FME Flow: Smarter Admin at Scale
bySafe Software
 
PPTX
Microsoft Azure News - February 2026 - BAUG
byDaniel Toomey
 
PPTX
Automation Without Apprentices: How AI Challenges the Open Source Way
byIcinga
 
PDF
Explaining specific examples of purpose-specific BOM
byakipii ogaoga
 
PDF
final~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~.pdf
byomarbishtawi04
 
PDF
Effortless Distributed Systems with Aspire.pdf
byParticular Software
 
PPTX
PPTX game guess the logo with a twistppt
byAdrianAnig
 
PPTX
apidays Paris 2025 | Building Agentic Workflows
byapidays
 
PDF
TrustArc Webinar - From Trends to Action: Fitting AI Governance into Privacy Ops
byTrustArc
 
PDF
UiPath Automation Developer Associate Training Series 2026 - Session 3
byDianaGray10
 
PDF
From Hallucinations to High-Confidence AI with Data Enrichment.pdf
byPrecisely
 
PDF
Chapter 5 Security Mechanisms iin computer security.pdf
byGetnet Tigabie Askale -(GM)
 
PDF
From Artificial Intelligence to African Intelligence: Transforming Research &...
byMoses Kemibaro
 
PPTX
CTO Strategy OS 2026: The Tech, AI & Cloud Playbook Boards Want
byridwansassman
 
PPTX
Workflow and decision Automation with Flowable
bychakib ch
 
PPTX
Tech Trends 2026: AI Agents, Quantum Computing, Robotics & Cybersecurity
byridwansassman
 
PDF
Explaining the flow of purpose-specific BOM
byakipii ogaoga
 
PDF
Transcript: Escape from the Forbidden Zone: Smuggling green and inclusive tec...
byBookNet Canada
 
PDF
Empower your IT team with cloud-based PC management using Dell Management Por...
byPrincipled Technologies
 
PDF
GenerationAI_Paris_2025_Architecting_Intelligence.pdf
byapidays
 
Automated Governance for FME Flow: Smarter Admin at Scale
bySafe Software
 
Microsoft Azure News - February 2026 - BAUG
byDaniel Toomey
 
Automation Without Apprentices: How AI Challenges the Open Source Way
byIcinga
 
Explaining specific examples of purpose-specific BOM
byakipii ogaoga
 
final~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~.pdf
byomarbishtawi04
 
Effortless Distributed Systems with Aspire.pdf
byParticular Software
 
PPTX game guess the logo with a twistppt
byAdrianAnig
 
apidays Paris 2025 | Building Agentic Workflows
byapidays
 
TrustArc Webinar - From Trends to Action: Fitting AI Governance into Privacy Ops
byTrustArc
 
UiPath Automation Developer Associate Training Series 2026 - Session 3
byDianaGray10
 
From Hallucinations to High-Confidence AI with Data Enrichment.pdf
byPrecisely
 
Chapter 5 Security Mechanisms iin computer security.pdf
byGetnet Tigabie Askale -(GM)
 
From Artificial Intelligence to African Intelligence: Transforming Research &...
byMoses Kemibaro
 
CTO Strategy OS 2026: The Tech, AI & Cloud Playbook Boards Want
byridwansassman
 
Workflow and decision Automation with Flowable
bychakib ch
 
Tech Trends 2026: AI Agents, Quantum Computing, Robotics & Cybersecurity
byridwansassman
 
Explaining the flow of purpose-specific BOM
byakipii ogaoga
 
Transcript: Escape from the Forbidden Zone: Smuggling green and inclusive tec...
byBookNet Canada
 
Empower your IT team with cloud-based PC management using Dell Management Por...
byPrincipled Technologies
 
GenerationAI_Paris_2025_Architecting_Intelligence.pdf
byapidays
 

HTML5 Pearson preso

  • 1.
    The “crazy” worldof HTML5 Chris Mills, Opera Software Monday, 19 September 2011
  • 2.
    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
  • 3.
  • 4.
    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
  • 5.
    Or according tosome... ‣ 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
  • 6.
    A brief historyof 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
  • 7.
    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
  • 8.
    Why did XHTMLfail? ‣ 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
  • 9.
    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
  • 10.
    HTML is thenew 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
  • 11.
    Why can HTML5succeed? ‣ 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
  • 12.
    HTML5 features http://www.flickr.com/photos/cybertoad/247896160/ Monday, 19 September 2011
  • 13.
    There’s nothing wrongwith HTML4... http://www.flickr.com/photos/birdfarm/519230710/ Monday, 19 September 2011
  • 14.
    But HTML5 hasmore bling As if! Not publishing this one... Monday, 19 September 2011
  • 15.
    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
  • 16.
    New semantics http://www.flickr.com/photos/zscheyge/49012397/ Monday, 19 September 2011
  • 17.
    HTML5 doctype <!DOCTYPE html> Monday, 19 September 2011
  • 18.
    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
  • 19.
    Most common classesand 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
  • 20.
    Most common IDs Monday,19 September 2011
  • 21.
    Most common classes Monday,19 September 2011
  • 22.
    HTML5 update <header></header> <nav></nav> <section id="main"> <article></article> <article></article> ... </section> <footer></footer> Monday, 19 September 2011
  • 23.
    <header> and <footer> <header> <h1>Top level heading</h1> </header> <footer> <p>&copy;2011 Chris Mills examples</p> </footer> Monday, 19 September 2011
  • 24.
    <section> and <article> <section id="main"> <article> ... </article> <article> ... </article> </section> Monday, 19 September 2011
  • 25.
    <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
  • 26.
    <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
  • 27.
    <time> <p>Article published on the <time datetime="2011-03-12T09:48"> 12th March 2011, at 9:48am </time> </p> Monday, 19 September 2011
  • 28.
    <hgroup> <hgroup> <h1>Top level heading</h1> <h2>This is a really descriptive subtitle</h2> </hgroup> Monday, 19 September 2011
  • 29.
    <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
  • 30.
    Where does thisleave 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
  • 31.
    The HTML5 outlining algorithm Heading/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
  • 32.
    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
  • 33.
    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
  • 34.
    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
  • 35.
    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
  • 36.
    Example http://people.opera.com/cmills/workshop/ http://devfiles.myopera.com/articles/4612/ pwei_sample_html5.html Monday, 19 September 2011
  • 37.
    Browsers don’t ACTUALLY support these ... yet But 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
  • 38.
    Styling with CSS http://www.flickr.com/photos/nickwebb/3016498475/ Monday, 19 September 2011
  • 39.
    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
  • 40.
    Extra styling help article, section, footer { display: block; } document.createElement('article'); document.createElement('section'); document.createElement('footer'); Monday, 19 September 2011
  • 41.
    CSS3 tricks input:valid { color: lime; } input:invalid { color: red; } Monday, 19 September 2011
  • 42.
    Styling fallbacks <div id="video"><video> <!-- Flash fallback inside --> </video></div> video { margin: 0 auto; } #video { margin: 0 auto; } Monday, 19 September 2011
  • 43.
    Error handling http://www.flickr.com/photos/nickwebb/3016498475/ Monday, 19 September 2011
  • 44.
    HTML error handling... ...never existed previous to HTML5 So browsers had to work out what do to with bad markup themselves. Monday, 19 September 2011
  • 45.
    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
  • 46.
    ...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
  • 47.
    ...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
  • 48.
    ...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
  • 49.
    HTML5 states exactlywhat to do This will cut down on a lot of cross site problems For more, see “100% Ragnarök’n’roll” at http://labs.opera.com/news/2011/07/21/ Monday, 19 September 2011
  • 50.
    HTML5 forms Monday, 19September 2011
  • 51.
    HTML5 forms Previously called Web Forms 2.0 ‣ More powerful form controls ‣ Built-in validation Monday, 19 September 2011
  • 52.
    Slider <input type="range" /> Monday, 19 September 2011
  • 53.
    Date-time controls <input type="date"> <input type="datetime"> <input type="week"> <input type="month"> Monday, 19 September 2011
  • 54.
    number <input type="number"> Monday, 19 September 2011
  • 55.
    color <input type="color"> Monday, 19 September 2011
  • 56.
    Search boxes <input type="search"> Monday, 19 September 2011
  • 57.
    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
  • 58.
    Other new inputtypes <input type="email"> <input type="url"> <input type="tel"> Monday, 19 September 2011
  • 59.
    Validation Form validation used to be horrendous Monday, 19 September 2011
  • 60.
    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); Monday, 19 September 2011
  • 61.
    HTML5 gives youthis <input type="text" required> Monday, 19 September 2011
  • 62.
    And this <input type="text" required pattern="[A-z]{1,20} [A-z]{1,20}"> Monday, 19 September 2011
  • 63.
    Other new attributes autofocus placeholder min max step Monday, 19 September 2011
  • 64.
    New output mechanisms <output> <progress> <meter> Monday, 19 September 2011
  • 65.
    JS validation checking form.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
  • 66.
    JS custom errormessage input.setCustomValidity('That is not the correct answer!'); Monday, 19 September 2011
  • 67.
    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
  • 68.
  • 69.
    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
  • 70.
    Examples http://people.opera.com/cmills/workshop/ html5_forms.html http://devfiles.myopera.com/articles/4582/html5- forms-example.html Monday, 19 September 2011
  • 71.
    <video> and <audio> http://www.flickr.com/photos/stonebird/28894187/ Monday, 19 September 2011
  • 72.
    <video> and <audio> New elements, plus new API for controlling audio and video Monday, 19 September 2011
  • 73.
    The old schoolway <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
  • 74.
    The new school:<video> <video src="video.webm" width="480px" height="283px" controls poster="poster.png" autoplay loop> </video> Monday, 19 September 2011
  • 75.
    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
  • 76.
    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
  • 77.
    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
  • 78.
    Simple API var v = document.getElementById('player'); v.play(); v.pause(); v.volume = … ; v.currentTime = … ; Monday, 19 September 2011
  • 79.
    Events v.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
  • 80.
    Examples http://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
  • 81.
    Native <video> isawesome! ‣ 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
  • 82.
    What’s bad about<video>? ‣ People can download <video> easily ‣ Captioning and suchlike is at an early stage ‣ Format wars... Monday, 19 September 2011
  • 83.
    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
  • 84.
    .vtt file example WEBVTT 1 00:00:10.500 --> 00:00:13.000 A:start Elephant's Dream 2 00:00:15.000 --> 00:00:18.000 A:end L:10% At the <b>left</b> we can see... Monday, 19 September 2011
  • 85.
    <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
  • 86.
    Currently supported nowhere ‣ But you can add support in using JS libraries ‣ Playr ‣ Leanback Player ‣ Captionator Monday, 19 September 2011
  • 87.
    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
  • 88.
    APIs for streamingmedia ‣ 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
  • 89.
    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
  • 90.
    <canvas> http://www.flickr.com/photos/pixeljuice23/3121241987/ Monday, 19 September 2011
  • 91.
    <canvas> ‣ Standard API for drawing ‣ Scriptable graphics Monday, 19 September 2011
  • 92.
    The basics <canvas id="canvas" width="400" height="300"> ...fallback... </canvas> Monday, 19 September 2011
  • 93.
    The basics ctx = 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
  • 94.
    Drawing an imageonto a canvas ctx = 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
  • 95.
    Accessing an imagedata array ctx = 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
  • 96.
    Canvas can alsodo video ctx = canvas.getContext("2d"); v = document.getElementById('player'); ctx.drawImage(v,x1,y1,w1,h2,x2,y2,w2,h2); Monday, 19 September 2011
  • 97.
    <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
  • 98.
    <canvas> cons ‣ Content is inaccessible ‣ No animation API built in ‣ Can be really slow for large dynamic areas, like UIs Monday, 19 September 2011
  • 99.
    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
  • 100.
    Offline apps http://www.flickr.com/photos/bzedan/2441516764/ Monday, 19 September 2011
  • 101.
    The web ispretty 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
  • 102.
    AppCache Manifest reference <html manifest="blah.manifest"> Monday, 19 September 2011
  • 103.
    Manifest file CACHE MANIFEST # send this with correct text/cache-manifest MIME images/sprites.png scripts/common.js scripts/jquery.js styles/global.css NETWORK: # never cached (apart from normal caching mechanism) onlineonly.css FALLBACK: # pattern matching. fallback file will also be cached images/ images/not-offline.png Monday, 19 September 2011
  • 104.
    Web (local/session) storage localStorage/sessionStorage localStorage.setItem(key, value); localStorage.getItem(key); localStorage.clear(); localStorage.key = value; if (localStorage.key == '…') { … } Monday, 19 September 2011
  • 105.
    WebSQL var 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
  • 106.
    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
  • 107.
  • 108.
    HTML5 accessibility best practices http://www.flickr.com/photos/tjmartins/3890142316/ Monday, 19 September 2011
  • 109.
    HTML5 accessibility? ‣ Still no magic bullet ‣ Some a11y boons ‣ And some new (old?) problems ‣ html5accessibility.com is very useful Monday, 19 September 2011
  • 110.
    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
  • 111.
    The bad things ‣ Canvas! ‣ Video a11y (coming soon) Monday, 19 September 2011
  • 112.
    Should we use HTML5 now? Monday, 19 September 2011
  • 113.
    When should Iuse 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
  • 114.
    The UK roadsystem is never finished... http://www.flickr.com/photos/50014762@N03/4632637811/ Monday, 19 September 2011
  • 115.
    In general... ‣ ...don’t do browser sniffing Monday, 19 September 2011
  • 116.
    Do feature detection/ graceful degradation ‣ http://diveintohtml5.org/everything.html ‣ http://www.modernizr.com/ ‣ http://yepnopejs.com/ Monday, 19 September 2011
  • 117.
    And patch olderbrowsers as needed ‣ https://github.com/Modernizr/Modernizr/wiki/ HTML5-Cross-Browser-Polyfills Monday, 19 September 2011
  • 118.
    HTML5 security? http://www.flickr.com/photos/freefoto/5692512457/ Monday, 19 September 2011
  • 119.
    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
  • 120.
    Device APIs http://www.flickr.com/photos/freefoto/5692512457/ Monday, 19 September 2011
  • 121.
    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
  • 122.
    Questions? What would we like to see in the spec? http://www.flickr.com/photos/mikecogh/1812288874/ Monday, 19 September 2011
  • 123.
    Thanks for listening! ‣ cmills@opera.com ‣ @chrisdavidmills ‣ http://dev.opera.com/articles/tags/html5/ ‣ http://html5doctor.com Monday, 19 September 2011