1.
HTML5: A richer web for everyone Chris Mills, Opera Software Slides available on http://slideshare.net/chrisdavidmills

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

3.
What is HTML5?A new version of HTML that defines:‣ More consistent features‣ New features that compete with Flash‣ Easier and quicker ways to implement things that were previously complicated‣ Error handling, and other such useful things

4.
It’s not all rosy‣ Tooling more limited than say, Flash or HTML4‣ Cross browser support not quite as easy as Flash‣ HTML5 not much good if you have JavaScript disabled

5.
But things are getting better‣ All modern browsers support most of this stuff now‣ Workarounds are perfectly possible‣ Tools are getting better (from HTML5boilerplate.com to Dreamweaver)

6.
HTML5 does not replaceHTML4 You are already using HTML5 by using HTML4.x‣ It’s backwards compatible‣ It fills up holes‣ It competes with proprietary/plugin technology

7.
HTML5 isn’t...‣ CSS3, WOFF‣ SVG, SMIL, WebGL‣ Geolocation, WAC‣ Indexed DB, File API‣ Server-sent events‣ Web workers, XHR2

8.
Let’s look at the newfeatures http://www.flickr.com/photos/zscheyge/49012397/

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

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

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

12.
HTML5 formsPreviously called Web Forms 2.0‣ More powerful form controls‣ Built-in validation

13.
Slider<input type=”range” />

14.
Date-time controls<input type=”date”><input type=”datetime”><input type=”week”><input type=”month”>

15.
color<input type=”color”>

16.
Other new input types<input type=”email”><input type=”url”><input type=”tel”>

17.
ValidationForm validation used to be horrendousWho wants to spend the time coding somethinglike...

18.
function validate() { var str = “”; var elements = document.getElementsByTagName(input); // loop through all input elements in form ...this?? for(var i = 0; i < elements.length; i++) { // check if element is mandatory; ie has a pattern var pattern = elements.item(i).getAttribute(pattern); if (pattern != null) { var value = elements.item(i).value; // validate the value of this element, using its defined pattern var offendingChar = value.match(pattern); // if an invalid character is found or the element was left empty if(offendingChar != null || value.length == 0) { // add up all error messages str += elements.item(i).getAttribute(errorMsg) + “n” + “Found this illegal value: ” + offendingChar + “ n”; // notify user by changing background color, in this case to red elements.item(i).style.background = “red”; } } } if (str != “”) { // do not submit the form alert(”ERROR ALERT!!n” +str); return false; } else { // form values are valid; submit

19.
HTML5 gives you this<input type=”text” required>

20.
And this<input type=”text” required pattern=”[A‐z]{1,20} [A‐z]{1,20}”>

21.
<canvas>Scriptable graphics‣ Standard API for drawing‣ Supporting across all modern browsers

22.
<canvas> examples‣ http://dev.opera.com/articles/view/html-5- canvas-the-basics/‣ http://ejohn.org/blog/processingjs/‣ http://www.hakim.se/experiments/‣ http://www.canvasdemos.com/‣ http://people.opera.com/patrickl/experiments/ canvas/particle/3/

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

24.
Fallback<video width=”480px” height=”283px” controls poster=”poster.png”> <source src=”video.mp4” type=”video/mp4”> <source src=”video.webm” type=”video/webm”> <p>Your browser doesn’t support HTML5 video. <a href=”myVideo.webm”>Download the video instead</a>.</p></video>

25.
And why is this all so goodagain? http://www.flickr.com/photos/zscheyge/49012397/

26.
Better consistency‣ Better machine readability & interoperability: ‣ Easier syndication and reuse ‣ Less time worrying about design consistency ‣ Less time training up new team members‣ Defined error handling means things work more consistently, even if they are broken! ‣ Better cross browser apps ‣ Less time spent debugging

27.
Better accessibility‣ For example, HTML5 video is keyboard accessible out of the box‣ New elements bringing consistency is also important here‣ Less time and money spent on accessibility‣ 1 in 5 people in the UK have some kind of disability - a market you can’t ignore

28.
Less reliance on JavaScript‣ Less work for your developers to do, so faster implementation and prototyping‣ Less pain for designers and other less technical team members‣ Faster loading sites

29.
Less reliance on Flash‣ Means less skills needed in the team‣ HTML5 plays nicer with the rest of the page‣ Less Flash means better accessibility (note: there are some HTML5 accessibility gotchas, like Canvas)‣ Downloading a plugin breaks brand experience and can confuse users

30.
HTML5 works on iDevices‣ Like iPad and iPhone‣ A crucial market to be in‣ Flash has not been allowed on these devices

31.
Thanks for listening!‣ cmills@opera.com‣ @chrisdavidmills‣ http://dev.opera.com/articles/tags/html5/‣ http://html5doctor.com