The “crazy” world of              HTML5                            Chris Mills, Opera SoftwareMonday, 19 September 2011
Who am I?     ‣ Opera open standards evangelist and tech writer     ‣ Telling the world about open standards & Opera     ‣...
Monday, 19 September 2011
What is HTML5?     A new HTML spec that defines:     ‣ New semantic elements     ‣ New features such as native video, more...
Or according to some...     ‣ HTML5     ‣ CSS3, WOFF     ‣ SVG, SMIL, WebGL     ‣ Geolocation, WAC     ‣ Indexed DB, File ...
A brief history of HTML     ‣ HTML first proposed 1989-1991     ‣ HTML3 first standardised in 1995     ‣ HTML 4.01 standar...
HTML5 history + politics     ‣ W3C decided the future was XHTML     ‣ This didn’t go down well, and no-one cared          ...
Why did XHTML fail?     ‣ XHTML2 features aren’t backwards compatible       with “the Web so far”     ‣ XHTML1 didn’t work...
HTML5 history + politics     ‣ HTML5 (was web applications 1.0) started by       WHATWG in 2004ish     ‣ Adopted by W3C 20...
HTML is the new HTML5?     In January 2011, Ian Hickson announced that the     WHATWG HTML5 spec was dropping its version ...
Why can HTML5 succeed?     ‣ It is backwards compatible with HTML4     ‣ It is written to be competitive with other       ...
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, ...
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>     ‣...
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="articl...
Most common classes and     IDs?     Google did a study of the most common classes     and IDs on the Web. so did Opera.  ...
Most common IDsMonday, 19 September 2011
Most common classesMonday, 19 September 2011
HTML5 update     <header></header>     <nav></nav>     <section id="main">      <article></article>      <article></articl...
<header> and <footer>     <header>      <h1>Top level heading</h1>     </header>          <footer>       <p>&copy;2011 Chr...
<section> and <article>     <section id="main">       <article>      ...      </article>      <article>         ...      <...
<nav>     <nav>      <ul>       <li><a href="#article1">First article</a></li>       <li><a href="#article2">Second articl...
<aside>     <aside>      <h2>About the author</h2>      <p>Chris Mills is a front-end bling junkie       working for Opera...
<time>     <p>Article published on the      <time datetime="2011-03-12T09:48">       12th March 2011, at 9:48am      </tim...
<hgroup>     <hgroup>      <h1>Top level heading</h1>      <h2>This is a really descriptive subtitle</h2>     </hgroup>Mon...
<figure> and <figcaption>     <figure>      <img src="bear.jpg"         alt="this is the bear that I wrestled" />      <fi...
Where does this leave the     humble <div>?     Use it for anything that isn’t covered by other new     elements, and is j...
The HTML5 outlining     algorithm     Heading/section hierarchy based on sectioning     element hierarchy, not <hx> elemen...
The HTML5 outlining     algorithm     <h1>My title</h1>     <div>      <h2>My subtitle</h2>     </div>     <h1>My title</h...
New semantics rock!     ‣ Better machine readability     ‣ Better interoperability     ‣ More consistency of code     ‣ Be...
Lax syntax?     Some say that HTML5 syntax is really lax — you:     ‣ don’t need to quote attributes     ‣ can minimise at...
Lax syntax?     But this more accurately reflects what real     developers do, rather than what the XHTML spec     THINKS ...
Example     http://people.opera.com/cmills/workshop/     http://devfiles.myopera.com/articles/4612/     pwei_sample_html5....
Browsers don’t ACTUALLY     support these ... yet     But we can get them displaying fine     ‣ You can style any element ...
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       seman...
Extra styling help     article, section, footer {       display: block;     }     document.createElement(article);     doc...
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...
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     mark...
This sample...     <p><b>This text should be bold</p>     <p>Should this text be bold?</p>     <p><a href="#"></b>This tex...
...in Opera...     <p><b>      This text should be bold      <p>Should this text be bold?</p>      <p>        <a href="#">...
...in Firefox...     <p><b>This text should be bold</b></p>     <b/>     <p><b>Should this text be bold?</b></p>     <b/> ...
...in IE...     <p><b>This text should be bold</b>        This text should be a link     </p>     <p>Should this text be b...
HTML5 states exactly what     to do     This will cut down on a lot of cross site problems     For more, see “100% Ragnarö...
HTML5 formsMonday, 19 September 2011
HTML5 forms     Previously called Web Forms 2.0     ‣ More powerful form controls     ‣ Built-in validationMonday, 19 Sept...
Slider     <input type="range" />Monday, 19 September 2011
Date-time controls     <input type="date">     <input type="datetime">     <input type="week">     <input type="month">Mon...
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">      <op...
Other new input types     <input type="email">     <input type="url">     <input type="tel">Monday, 19 September 2011
Validation     Form validation used to be horrendousMonday, 19 September 2011
function validate() {      var str = “”;      var elements = document.getElementsByTagName(input);      // loop through al...
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     stepMonday, 19 September 2011
New output mechanisms     <output>     <progress>     <meter>Monday, 19 September 2011
JS validation checking     form.checkValidity()     formelement.checkValidity()     formelement.setCustomValidity()     in...
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 ...
Monday, 19 September 2011
Form detractors     ‣ Support not completely there yet     ‣ Not easy to customise text of error messages     ‣ Impossible...
Examples     http://people.opera.com/cmills/workshop/     html5_forms.html     http://devfiles.myopera.com/articles/4582/h...
<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 videoMonday, 19 September 2011
The old school way     <object width="425" height="344">     <param name="movie" value="http://     www.example.com/v/LtfQ...
The new school: <video>     <video src="video.webm"           width="480px"           height="283px"           controls   ...
Fallback     <video src="video.webm"            width="480px"            height="283px"            controls            pos...
Adding different formats     <video ... >       ...      <source src="video.mp4" type="video/mp4">      <source src="video...
Specifying codecs     <source src="videofile.mp4"         type=video/mp4; codecs="codecs="avc1.4D401E,     mp4a.40.2" />  ...
Simple API     var v = document.getElementById(player);     v.play();     v.pause();     v.volume = … ;     v.currentTime ...
Events     v.addEventListener(loadeddata, function() { … }, true)     v.addEventListener(play, function() { … }, true)    ...
Examples     http://people.opera.com/patrickl/experiments/webm/     fancy-swap/     http://people.opera.com/cmills/mediaqu...
Native <video> is awesome!     ‣ Works well with other open standards     ‣ Built-in keyboard accessibility     ‣ API for ...
What’s bad about <video>?     ‣ People can download <video> easily     ‣ Captioning and suchlike is at an early stage     ...
WebVTT (née WebSRT)     ‣ Add text tracks onto a video     ‣ for things such as subtitles and captions     ‣ .vtt files co...
.vtt file example     WEBVTT     1     00:00:10.500 --> 00:00:13.000 A:start     Elephants Dream     2     00:00:15.000 --...
<track> element example     <video controls>      <source src="video-file.mp4" type="video/mp4">      <source src="video-f...
Currently supported     nowhere     ‣ But you can add support in using JS libraries      ‣ Playr      ‣ Leanback Player   ...
Future Audio APIs     ‣ Web Audio API (and Moz’s Audio Data API)     ‣ Supported in Chrome and FF, respectively     ‣ Acce...
APIs for streaming media     ‣ getUserMedia — get a media source (eg a       microphone or a web cam)     ‣ PeerConnection...
Adaptive streaming     ‣ Each stream stored in multiple quality levels     ‣ As bandwidth changes, the supporting device  ...
<canvas>                               http://www.flickr.com/photos/pixeljuice23/3121241987/Monday, 19 September 2011
<canvas>     ‣ Standard API for drawing     ‣ Scriptable graphicsMonday, 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...
Drawing an image onto a     canvas     ctx = canvas.getContext("2d");     var logo = new Image();     logo.src = logo.png;...
Accessing an image data     array     ctx = canvas.getContext("2d");     canvasData = ctx.getImageData(x,y,w,h);     [R,G,...
Canvas can also do video     ctx = canvas.getContext("2d");     v = document.getElementById(player);     ctx.drawImage(v,x...
<canvas> pros     ‣ Great for games and image/video manipulation       (now JS processors have caught up)     ‣ Much faste...
<canvas> cons     ‣ Content is inaccessible     ‣ No animation API built in     ‣ Can be really slow for large dynamic are...
Examples     ‣ http://dev.opera.com/articles/view/html-5-       canvas-the-basics/     ‣ http://html5doctor.com/video-canv...
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 C...
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/...
Web (local/session) storage     localStorage/sessionStorage     localStorage.setItem(key, value);     localStorage.getItem...
WebSQL     var db =     openDatabase(dbName, version, displayName,     expectedSize);     db.transaction(function(tx) {   ...
Web databases: future     ‣ WebSQL supported in Opera/Webkit     ‣ But being discontinued     ‣ Moz/IE prefer IndexedDB   ...
Caching issues?Monday, 19 September 2011
HTML5 accessibility           best practices                            http://www.flickr.com/photos/tjmartins/3890142316/M...
HTML5 accessibility?     ‣ Still no magic bullet     ‣ Some a11y boons     ‣ And some new (old?) problems     ‣ html5acces...
The good things     ‣ A lot of elements have keyboard accessibility       built in     ‣ New semantics mean lot of advanta...
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 perfe...
The UK road system is     never finished...                            http://www.flickr.com/photos/50014762@N03/4632637811...
In general...     ‣ ...don’t do browser sniffingMonday, 19 September 2011
Do feature detection/     graceful degradation     ‣ http://diveintohtml5.org/everything.html     ‣ http://www.modernizr.c...
And patch older browsers     as needed     ‣ https://github.com/Modernizr/Modernizr/wiki/          HTML5-Cross-Browser-Pol...
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 cr...
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...
Questions?   What would we like to     see in the spec?                                http://www.flickr.com/photos/mikecog...
Thanks for listening!     ‣ cmills@opera.com     ‣ @chrisdavidmills     ‣ http://dev.opera.com/articles/tags/html5/     ‣ ...
Upcoming SlideShare
Loading in …5
×

HTML5 Pearson preso

2,132 views

Published on

HTML5 overview presented to Pearson,

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,132
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
162
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

HTML5 Pearson preso

  1. 1. The “crazy” world of HTML5 Chris Mills, Opera SoftwareMonday, 19 September 2011
  2. 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 bandMonday, 19 September 2011
  3. 3. Monday, 19 September 2011
  4. 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 thingsMonday, 19 September 2011
  5. 5. 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
  6. 6. A brief history of HTML ‣ HTML first proposed 1989-1991 ‣ HTML3 first standardised in 1995 ‣ HTML 4.01 standardised in 1999 ‣ Corrections submitted in 2001Monday, 19 September 2011
  7. 7. HTML5 history + politics ‣ W3C decided the future was XHTML ‣ This didn’t go down well, and no-one cared about XHTML2Monday, 19 September 2011
  8. 8. 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 WebMonday, 19 September 2011
  9. 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 2011Monday, 19 September 2011
  10. 10. 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
  11. 11. 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.xMonday, 19 September 2011
  12. 12. HTML5 features http://www.flickr.com/photos/cybertoad/247896160/Monday, 19 September 2011
  13. 13. There’s nothing wrong with HTML4... http://www.flickr.com/photos/birdfarm/519230710/Monday, 19 September 2011
  14. 14. But HTML5 has more bling As if! Not publishing this one...Monday, 19 September 2011
  15. 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. 16. New semantics http://www.flickr.com/photos/zscheyge/49012397/Monday, 19 September 2011
  17. 17. HTML5 doctype <!DOCTYPE html>Monday, 19 September 2011
  18. 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. 19. 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.htmMonday, 19 September 2011
  20. 20. Most common IDsMonday, 19 September 2011
  21. 21. Most common classesMonday, 19 September 2011
  22. 22. HTML5 update <header></header> <nav></nav> <section id="main"> <article></article> <article></article> ... </section> <footer></footer>Monday, 19 September 2011
  23. 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. 24. <section> and <article> <section id="main"> <article> ... </article> <article> ... </article> </section>Monday, 19 September 2011
  25. 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. 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. 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. 28. <hgroup> <hgroup> <h1>Top level heading</h1> <h2>This is a really descriptive subtitle</h2> </hgroup>Monday, 19 September 2011
  29. 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. 30. 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
  31. 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 compatibilityMonday, 19 September 2011
  32. 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. 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 doMonday, 19 September 2011
  34. 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. 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 handledMonday, 19 September 2011
  36. 36. Example http://people.opera.com/cmills/workshop/ http://devfiles.myopera.com/articles/4612/ pwei_sample_html5.htmlMonday, 19 September 2011
  37. 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. 38. Styling with CSS http://www.flickr.com/photos/nickwebb/3016498475/Monday, 19 September 2011
  39. 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 thoughtMonday, 19 September 2011
  40. 40. Extra styling help article, section, footer { display: block; } document.createElement(article); document.createElement(section); document.createElement(footer);Monday, 19 September 2011
  41. 41. CSS3 tricks input:valid { color: lime; } input:invalid { color: red; }Monday, 19 September 2011
  42. 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. 43. Error handling http://www.flickr.com/photos/nickwebb/3016498475/Monday, 19 September 2011
  44. 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. 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. 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. 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. 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. 49. 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
  50. 50. HTML5 formsMonday, 19 September 2011
  51. 51. HTML5 forms Previously called Web Forms 2.0 ‣ More powerful form controls ‣ Built-in validationMonday, 19 September 2011
  52. 52. Slider <input type="range" />Monday, 19 September 2011
  53. 53. Date-time controls <input type="date"> <input type="datetime"> <input type="week"> <input type="month">Monday, 19 September 2011
  54. 54. number <input type="number">Monday, 19 September 2011
  55. 55. color <input type="color">Monday, 19 September 2011
  56. 56. Search boxes <input type="search">Monday, 19 September 2011
  57. 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. 58. Other new input types <input type="email"> <input type="url"> <input type="tel">Monday, 19 September 2011
  59. 59. Validation Form validation used to be horrendousMonday, 19 September 2011
  60. 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. 61. HTML5 gives you this <input type="text" required>Monday, 19 September 2011
  62. 62. And this <input type="text" required pattern="[A-z]{1,20} [A-z]{1,20}">Monday, 19 September 2011
  63. 63. Other new attributes autofocus placeholder min max stepMonday, 19 September 2011
  64. 64. New output mechanisms <output> <progress> <meter>Monday, 19 September 2011
  65. 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. 66. JS custom error message input.setCustomValidity(That is not the correct answer!);Monday, 19 September 2011
  67. 67. Form awesomeness ‣ Much easier validation ‣ Easier to implement complicated controls, with better semantics ‣ They degrade to basic text inputs ‣ Hinting at better UXMonday, 19 September 2011
  68. 68. Monday, 19 September 2011
  69. 69. Form detractors ‣ Support not completely there yet ‣ Not easy to customise text of error messages ‣ Impossible to customise styling of error messagesMonday, 19 September 2011
  70. 70. Examples http://people.opera.com/cmills/workshop/ html5_forms.html http://devfiles.myopera.com/articles/4582/html5- forms-example.htmlMonday, 19 September 2011
  71. 71. <video> and <audio> http://www.flickr.com/photos/stonebird/28894187/Monday, 19 September 2011
  72. 72. <video> and <audio> New elements, plus new API for controlling audio and videoMonday, 19 September 2011
  73. 73. 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
  74. 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. 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. 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. 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. 78. Simple API var v = document.getElementById(player); v.play(); v.pause(); v.volume = … ; v.currentTime = … ;Monday, 19 September 2011
  79. 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. 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. 81. 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 videoMonday, 19 September 2011
  82. 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. 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 videoMonday, 19 September 2011
  84. 84. .vtt file example WEBVTT 1 00:00:10.500 --> 00:00:13.000 A:start Elephants 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. 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. 86. Currently supported nowhere ‣ But you can add support in using JS libraries ‣ Playr ‣ Leanback Player ‣ CaptionatorMonday, 19 September 2011
  87. 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 gamesMonday, 19 September 2011
  88. 88. 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 supportMonday, 19 September 2011
  89. 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 greatMonday, 19 September 2011
  90. 90. <canvas> http://www.flickr.com/photos/pixeljuice23/3121241987/Monday, 19 September 2011
  91. 91. <canvas> ‣ Standard API for drawing ‣ Scriptable graphicsMonday, 19 September 2011
  92. 92. The basics <canvas id="canvas" width="400" height="300"> ...fallback... </canvas>Monday, 19 September 2011
  93. 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. 94. 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
  95. 95. 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
  96. 96. 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
  97. 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 ExcanvasMonday, 19 September 2011
  98. 98. <canvas> cons ‣ Content is inaccessible ‣ No animation API built in ‣ Can be really slow for large dynamic areas, like UIsMonday, 19 September 2011
  99. 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/PaintbrushJSMonday, 19 September 2011
  100. 100. Offline apps http://www.flickr.com/photos/bzedan/2441516764/Monday, 19 September 2011
  101. 101. 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 dataMonday, 19 September 2011
  102. 102. AppCache Manifest reference <html manifest="blah.manifest">Monday, 19 September 2011
  103. 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.pngMonday, 19 September 2011
  104. 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. 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. 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 mobileMonday, 19 September 2011
  107. 107. Caching issues?Monday, 19 September 2011
  108. 108. HTML5 accessibility best practices http://www.flickr.com/photos/tjmartins/3890142316/Monday, 19 September 2011
  109. 109. HTML5 accessibility? ‣ Still no magic bullet ‣ Some a11y boons ‣ And some new (old?) problems ‣ html5accessibility.com is very usefulMonday, 19 September 2011
  110. 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 ATMonday, 19 September 2011
  111. 111. The bad things ‣ Canvas! ‣ Video a11y (coming soon)Monday, 19 September 2011
  112. 112. Should we use HTML5 now?Monday, 19 September 2011
  113. 113. 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 finishedMonday, 19 September 2011
  114. 114. The UK road system is never finished... http://www.flickr.com/photos/50014762@N03/4632637811/Monday, 19 September 2011
  115. 115. In general... ‣ ...don’t do browser sniffingMonday, 19 September 2011
  116. 116. Do feature detection/ graceful degradation ‣ http://diveintohtml5.org/everything.html ‣ http://www.modernizr.com/ ‣ http://yepnopejs.com/Monday, 19 September 2011
  117. 117. And patch older browsers as needed ‣ https://github.com/Modernizr/Modernizr/wiki/ HTML5-Cross-Browser-PolyfillsMonday, 19 September 2011
  118. 118. HTML5 security? http://www.flickr.com/photos/freefoto/5692512457/Monday, 19 September 2011
  119. 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. 120. Device APIs http://www.flickr.com/photos/freefoto/5692512457/Monday, 19 September 2011
  121. 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 appsMonday, 19 September 2011
  122. 122. Questions? What would we like to see in the spec? http://www.flickr.com/photos/mikecogh/1812288874/Monday, 19 September 2011
  123. 123. Thanks for listening! ‣ cmills@opera.com ‣ @chrisdavidmills ‣ http://dev.opera.com/articles/tags/html5/ ‣ http://html5doctor.comMonday, 19 September 2011

×