Transcript: The Future of HTML 5
I'm from Opera, which is the Norwegian, snowy bunch of scrumptious people who bring the Opera browser and Opera Mini, which is the most widely deployed browser on mobile phones in the world. But I'm not here to plug it. I do need to say that Opera is very actively involved with the specification of HTML 5. I'm not one of those people. Until a year ago I was a developer, and I've been looking at it from a developer's perspective. So anything I say is my personal opinion and not that of Opera in the HTML 5 working group.
HTML 5, I believe, is the future of web applications. It's the foundation upon which we will build web apps. So, what is it? Here we see HTML1, 2, 3 and 4. You can see that HTML 4 is a fully formed, fully evolved guy. If you're writing static pages that are mostly text, images, and links, you have no reason to stop using HTML 4. In the same way that XHTML 1 did not replace HTML 4, HTML 5 will not replace HTML 4.
It originally started life as 'Web Applications 1.0'. That's what the spec was called. It's only called HTML 5 since last year when it got brought into the W3C fold. It's being designed as an open standard and (I make no bones about it) it competes with Flash and Silverlight. Because, I believe— and maybe a lot of you guys do too— I believe that the web is too vital a platform— for commerce, for business, for society— to be in the hands of any one vendor. [He pauses for applause] I'm going to stop now while I'm on a high!
All of the browser manufacturers are participating in the development of HTML 5, including Microsoft. They were a little bit late to start actively participating, but they are participating. It started off with Opera, Mozilla joined in, then Apple. The guy who worked for Opera moved to Google, who make Chrome, and one of the co-chairs of the working group is a Microsoft employee. It's still in development, the spec is not yet finished, but it goes to last call this month.
Predicting the future is hard. This is a prediction of a lady's bedchamber in the year 2000 as drawn in 1900. It's somewhat inaccurate although it's very much like the hotel that Carson have given me for tonight, so... So what I'm going to do is show you the things you can do now, and then move further out to the things that are just around the corner, and hopefully I won't therefore be too inaccurate.
So, one cool thing for web apps is Canvas. Canvas started life as an Apple proprietary thing. All of the browser manufacturers liked it, we've all implemented it, and it's been codified as a specification. It's an immediate graphics mode without plug-ins. If you want to make dynamic graphics now, you either have to make them on the server, which is slow, or you use plug-ins, like Flash, or Java. But Canvas is an immediate graphics mode. I work for Opera, but I want to show this is cross browser, so here's some Canvas in Firefox. this is a nice app. This text is real text, but the background stuff is just Canvas making eye-candy and there's nothing wrong with eye candy. This is really cool.
What about IE?
No problem. Canvas explorer at sourceforge (exCanvas.sourceforge.net) is a freely downloadable JS library that will translate your Canvas on the fly into something that IE has had for donkey's years called VML. If you download this and plug it into your site, then Canvas will work in IE. Not perfectly in very circumstance, but well enough.
What about accessibility?
Okay. You're all top notch developers, or you'd not be here, so... after you look at this for slightly longer, you might think 'what about accessibility?' This is really important. Canvas at the moment, is unfortunately not accessible. Think of Canvas as an image without even alt text. It's just pixels manipulated by script. So even if you put text into a Canvas, it's just like an image of text made with photoshop. That text cannot be got by the DOM. There is no DOM— that's great, because it's really really fast, but it means there's nothing for assistive technologies to hook into.
The spec defines fallback content, and that just sits in-between the Canvas tags. This ain't good enough. The reason is, is that the fallback content is only given to browsers that can't use Canvas. If your browser can use Canvas, but you can't see it, you can't get to that fallback content at the moment. This is a known problem. There is an accessibility task force proposed by the W3C. I'm glad to say that yesterday Opera put their support in for this task force to be set up and I imagine that the other browser vendors will also do so.
There's a guy in Opera who I know and work with, and I've just introduced him to the guys in Adobe who are responsible for retro-fitting Flash for accessibility. So hopefully there'll be some movement on this, but at the moment, Canvas isn't accessible. It has to supplement stuff that's already on the screen.
Here's a nice example of this. This is a JQuery plug-in written by some guys called the Filament Group. What this does is it graphs the information on this accessible data table. So if for example I make this something like 450, hopefully you'll see it graph in real time. The JQuery plug-in is getting the information out of that data table and making it a graph. This is a brilliant example of accessible use of Canvas. Because of course, if you're using a screen reader, you can actually get to that information, and the Canvas supplements it.
E-mail Addresses and URLs
We can go even further than that and I can say, for example, name=email, type=email. Notice in HTML 5 you don't need quotes. If you want quotes, you can use them, but you don't need them. And that's because no browser ever really needed quotes. XHTML validators did, but browsers didn't care one way or the other so it's optional.
Okay this is Opera, which has given me this (in my opinion, somewhat 'mystery meat') icon that tells me this is an email field. So if I type in a malformed email address, it'll tell me it's not a legal email address, because inside the browser, it knows the format of email addresses. That's pretty cool, that saves you quite a bit of validation, and I can also say type=url, and now if I type in a malformed webpage, again, it'll say 'this is not a valid web address'.
You've done this in 3 minutes, and you go to the pub. That's a result. [Applause]
And there's more. This is also HTML forms. You might hear this referred to as 'Web Forms 2.0'— that's the old name, there was a spec called 'Web Forms 2.0' which got rolled into HTML 5. HTML 5 is a bit of a moving beast by the way, it splits out sub-specs like Amoeba, other specs get rolled in... think of HTML 5 as an encompassing term, like AJAX, or something— a broad raft of new technologies you can use.
So. DataList. This is a cool new input type. It looks like a select, and it gives you a selection of predefined options. But I don't want to be Mr, Ms, or Mad Professor, I want to be Dark Lord. So that allows me to either select from some predefined options, or put my own in.
Min & Max
Here is <input type=number> and I've said min=18 max=25 and it only allows me those options, and if I type in '27' it's too high and it handily tells me.
Now this one is really cool. This is cooler than Lou Reed and Bob Dylan having a snowball fight in Winter on Pluto it's so cool. Okay, so. We've all had to solicit date inputs and you never know— is the first of March 03/01 or 01/03; is the year 09 or 2009... and so, you see those horrible little date pickers flash up and everybody does them differently and they're a pain to write. So, <input type=date> and in the browser you get a calendar widget, so that you can't input an invalid date. That's given to you by HTML 5 aware browsers.
Here's an attractiveness slider. This is <input type=range>. If you've ever seen spinal tap, you'll know what I'm doing here— I'm giving myself an attractiveness of 11.
So, I've shown you in Opera. Let's have a look in the other browsers, because this is a cross-browser open specification. Some of these forms are coming into WebKit— so, this is Google Chrome. And you can see that Chrome haven't yet implemented the datalist or the date but it degrades back to just a normal <input type=text>. So it's backwards compatible in that sense. Now, WebKit do have the slider although they don't have the output tag that produces this [the output of the slider's value].
One cool thing that WebKit's got which we haven't got in Opera yet is the placeholder attribute. I can give a hint that in this field it says digit followed by 3 upper case letters— that's a hint for the user. If I click into that, it disappears and if I click out, it reappears. So that's really really cool.
You can also have multiple-file uploads too. This is file, <input type=file>, with the attribute of multiple. And there I select 3 things, and WebKit's told me that there are 3 files selected. So that's pretty blummin' cool.
But, I know you're thinking, what about legacy browsers? Okay, well I've already shown you that these new input types go back to <input type=text>, but you can do feature detection on this stuff. A guy called Faruk Ateş and another guy called Paul Irish have written this really cool library called Modernizr. It's 7kb. It does feature detection and tells you what the browser supports.
Okay, I've only got a few minutes and I want to show you some more cool things. This is further away now. This is geolocation. It's available in Firefox 3.5, in Safari on the iPhone, and in a Labs build of Opera. I hope it's going to work now. This is HTML5Demos.com. It's maintained by a friend of mine called Remy Sharp, who is.. just... 'Mr JQuery' out of Brighton. Your geolocation is obviously sensitive for privacy reasons, so the browsers all ask you whether you're willing to share your location with the website. You say yes, and hopefully though the magic of HTML 5 it's going to come back and tell us where we are. My web access has gone down, which is kind of defeating my ability to show you some of these live demos.
I'm going to overrun just slightly and show you something that's really pretty cool. This is HTML 5 video. I don't know if you would use this in applications, but we've all seen horrible horrible video embedding stuff that things like YouTube give us. In HTML 5 you can embed a video just like this. Here's my HTML 5 doctype, then...
<video src=a-video.ogg controls autoplay>Oops wrong browser, fallback content</video>
So I've got controls because I want the browser to give me stop/play/pause etc, I want it to autoplay, and this stuff in the middle is fallback content, where you should put a link for the user to download the video. And hopefully because this is on my local machine, I can show you. Here's the video, that's me and my kids mucking about there. This is no plug-ins. There's no Flash, or anything like that. This stuff lives inside the browser. And because these bits and bytes live inside the browser, you can muck about with them, with script. So here, for example, I can grayscale it in real time. If I want to, I can trace the edges. You can do all kinds of things. Anything your imagination will dream up, you can do, because this stuff lives inside the browser with no plug-ins.
So that's my time over I believe Mr Carson. I'm staying here tonight and I'm here all tomorrow, so if you've got any questions about HTML 5, I'll be delighted to answer them. Thank you very much for your attention.