Leading the Web to its Full Potential
Next Open Web Platform. About W3C we are making standards for the web. It was created by Tim Berners-Lee in 1994. And we are a global organization; we have people all around the world. Not that many, but we do. And a lot of people are participating in groups, and you hear of groups from the HTML Working Group to group you’ve never heard of or want to hear from.
W3C Recommendation track
A little bit of W3C jargon: that’s W3C Recommendation track. It goes from Working Draft, and a series of working drafts, and then you go to Last Call when the Working Group thinks that they are done. And they publish a Last Call document, and we encourage a review from everyone. Then when there are all sorts of issues they go to Candidate Recommendation, and we’re waiting for implementation feedback. Once we are satisfied that yes, we believe that this spec can be implemented, and it can interop, and we have tests, then we move to Propose Recommendation. After that it’s a straight shot to Recommendation in general.
If you take a specification like the HTML 5 specification, it’s still in the Working Draft status. We still have several open issues opened against the document. In particular, several accessibility issues that need to be resolved before we can move the document to Last Call.
Web 1.0
When we talk about the Open Web Platform, looking at these three - at the beginning we had the web, back in 1994, and that’s the Yahoo! page. I’ve actually used that slide several times already, so it’s perfect that I’m here at Yahoo! and finally showing you that slide here. [laughs] We only had three technologies: HTTP, URL, HTML, limited bandwidth, desktop only, and the only kind of interaction was that we can click on links, and that was it. So a very passive user experience.
Web 2.0
With the Web 2.0, which started around 2004 and still continues nowadays, we added more specification. We were able to do more. CSS got deployed, JavaScript as well, and Flash. Flash for videos mainly, nowadays. Everyone’s installing the Flash plugin to be able to see those nifty cat videos on YouTube. We have better bandwidth - of course, we’ll never get enough. And we have more computing powers - and of course, we’ll never get enough.
More devices. The arrival of the iPhone proved to everyone that it was possible to implement a full web browser on a mobile phone. If you remember in the early days, ten years ago when we were saying at the W3C that we should apply the web technology to the phone, the response from the WAP forum was to create WML, because they didn’t think that you could run a web browser on the phone. Well, we saw it went, basically nowhere. Since then, they re-aligned themselves, and they are deploying web technology on the phone.
So we have a more interactive user experience. We have blogs, vlogs, wikis, all kinds of stuff now. We can all have fun on the web and publish as well, which was, after all, the original vision that Tim had; that, not only should we be able to actually get pages from the web, but also put content into the web as well. Except that what he had envisioned wasn’t exactly what happened from a technical point of view.
What’s our future?
So what’s next? In W3C we are pushing the web in two areas, which are orthogonals. One is the Web of Data, that we refer to, of course, the Semantic Web, cloud computings that we are also interested in and mash-ups, data integration in general. And the other one is the Web of Interaction. They are to improve the user interface that we have in front of us when we have a browser, and that’s the second one that I’m going to talk about.
Web x.0: Web of Interaction
We started with HTML, what I would call a first generation web language, and we started to create several second generation web languages. CSS, very early on created at W3C, I believe, back in 1996. SVG, we’ve been talking about it for all those years, saying ‘it’s going to be cool guys’. And guess what? It’s going to be cool, guys! MathML: a much more narrow community out there, a mainly scientific community, was able to succeed in putting math on the web. It’s lower, but it’s getting there. And a lot of other specifications getting there.
The Next Open Web Platform
If I had to do a list of what is on the web, and what is part of the next open web platform, here is that list. It’s got dot, dot, dot at the end because I’m not sure I got all of them. In fact, I’m pretty sure I didn’t get all of them.
The HTML 5 specification is right there at the top. Someone at our last Technical Plenary showed up with a printing version of the HTML 5 specification, and it was big like that; several inches, for sure. My reaction to that was like: well, welcome to the club, because the HTML 5 specification is big like that, then you add CSS, then you have the web app specification, then you have HTTPs, then you have your URL and so on, and you end up with a stack like that. I’m not scared at all to have a big HTML 5 specification because it’s only a small subset of what a web browser can do, and needs to do.
Today I’m not going to go through every single one of them because we won’t have time for that. I picked and chose some of them, and I’m not saying that what I didn’t pick is not important, it’s just that I had to make a choice, unfortunately, in the interests of time. Not all of those specifications are done within W3C, and still they are relevant for the web. I mean, HTTP, TLS, IRI: those are done within IETF. We are participating in those efforts. One of the editors of the HTTP specification is from the W3C staff, but those are not done at W3C.
Another one like that is ECMAScript 5, which you guys should know a little bit, which is done within ECMA mainly for purely historical reasons. At W3C we were a little bit slow at deciding what JavaScript was really all about. Another one like that is the WebGL specification for 3D on the web, done within the Khronos Initiative, because they are the one who did OpenGL. The last one on that list is Web Sockets protocol, which is done within IETF as well. We are doing the API part of it, but the protocol part is done within the IETF.
HTML5: Quick (and dirty) history
A little bit of quick and what I would call dirty history of HTML 5 - how did we end up there? If you remember, back in the 1999 period it was all about how we needed to make sure HTML is going to scale, that we’re going to be able to do all kind of extensions. And that’s where XML came from: a merge between the HTML and the SGML communities. In the process of doing that, we decided that that was a way to go, and we stopped maintaining HTML.
In 2004 we did a workshop on Web Applications and Compound Documents, where we invited to talk about what was the future of web applications. Again, two communities went there: the HTML one and the XML community. I wasn’t there myself. The XML community won, to some extent, to debate there, and it was decided it’s all going to be XML. Well, guess what? Apple, Opera, and Mozilla were at that meeting and didn’t think that was the way, and wanted to be able to keep building on top of HTML. So they decided that W3C wasn’t the way to go, and they created the WHAT WG. Ian Hickson, who used to work for Opera and now works for Google - we all know each other in this very small community, I will say - started the effort of Web Application 1.0, which was later renamed HTML 5.
In 2007, W3C realized that we were making a mistake, in fact. Tim Berners-Lee wrote a blog saying yeah, we screwed up on that one. We decided to have two efforts going in parallel, one which was the HTML Working Group working on HTML 5, and the other one to continue the work on XHTML 2.
Finally, in 2009, in June last year, we announced that we were stopping the work on XHTML 2. While the XHTML 2 Working Group still exists because they are doing some remaining stuff around XHTML 1.1 for the mobile industry, they are no longer working on XHTML 2. We may regret that decision later, but the future will tell us. I certainly don't regret it so far.
HTML 5: HTML or XML?
So what is the future between HTML and XML? People thought when we announced that we were stopping the work on XHTML 2 that we were stopping XHTML. Well, that’s not true, because guess what? The HTML 5 specification has two serializations: one which is HTML, and the other one which is XML. So it has two syntaxes, in fact. The way the parser works is kind of dependent on the media type. If you use text/html, you are in the HTML world, and if you use application/xhtml+xml, you are in the XML world. Almost all the browsers are actually implementing the XHTML media type, except one.
A little note: polyglot documents are documents that can be parsed both as HTML and as XML, and can be interpreted by the parsers in the same way as well. It’s a subset of HTML documents, but it’s also a subset of XML documents. There are some quirks around the parsing of the style and the script elements, for example.
We are taking advantage of the XML platform. We are incorporating SVG and MathML into HTML 5. It’s part of the specification, normatively referenced. Another thing that is getting there as well is, for those of you who are used to having a specification talking only about the markup language, the HTML 5 specs also contains a lot of API stuff there, including the DOM Core, including the DOM HTML, but also a lot of extensions to various specific HTML tags.
Decentralized extensibility… or not?
One of the debates which is happening in W3C and is still not resolved, because it’s kind of like those VI versus emacs debates - there is not necessarily a right answer - is decentralized extensibility. Some people would argue that the HTML spec is already extensible in a decentralized way because there is a little clause in the spec which says “other applicable specification”, meaning other specifications can say whatever they want on top of HTML. Which, in fact, no one can prevent that from happening.
But there are various ways, extension points, in HTML, and in the XML serialization as well. The main difference is you can use XML namespaces in the XML serialization. You cannot use them at the moment, or in a very limited way, only for the purpose of SVG and MathML in the HTML serialization. That generates a whole debate because some people would like to add namespace support into the HTML serialization syntax, and some people don’t even want to touch XML namespaces with a ten-foot pole.
Data, Microdata, Metadata
Another debate which has been happening more recently is around microdata and metadata and all kind of data, which is also another extension point for HTML 5. The whole question is: how do we represent data in HTML so that we can then, later on, use this data in my web application or into mash-ups between websites, and how do you integrate that data together?
There are currently two proposals, one which is a microdata proposal which was done by Ian Hickson; he put into the HTML 5 spec. Then some people thought, well, yeah, it should belong in its own specification, and that was splitted out recently. It can let you do simple things in a simple way. It has an API so that you can use it in web applications as well. The other one is RDFa. It’s based on Semantic Web. It lets you do simple things in a complex way, and complex things in a complex way as well. It’s using some form of XML namespaces, it doesn’t even use full XML namespaces right there.
The debate is still open. If you look at microdata, it's pretty new so it doesn’t have any kind of deployment. Firefox says they are interested in implementing it, but the main consumers of those data in HTML are not going to be the web applications of your own website, it’s going to be other people wanting to use the information for mash-up and integration purposes.
RDFa is older and is seeing some deployment. The Google and the Yahoo! search engine, in fact, are supporting some form of it, and the New York Times released last week a website, data.nytimes.com, which contains the ontology that they are using internally to classify all the articles that they have. So that journalists can find them when they write news articles. There is a big ontology of 29,000 terms that they are using, and they linked it manually to Wikipedia and geonames, and it’s using Semantic Web technology. So you can go from Wikipedia into the ontology of the New York Times, and so on, and get information. Also, you can download RDF information out of that.
HTML 5 Forms
Another thing in the HTML 5 specification is forms. What used to be web forms is now part of the specification. More types to do type validation, so we don’t have to do that using JavaScript libraries. It’s pretty advanced. You have range, where you can even put a min and a max, whether this entry is required or not. It lets you do pattern matching on the value as well, whether there is one or multiple values that need to be entered by the user, or could be entered by the users. Datalist is actually a list of possible entries by the user, as well. So it’s more advanced. We even have progress and meter.
However, one of the questions people ask is: how ready is HTML 5? Well, it varies quite significantly between the parts in the specification. And HTML 5 Forms, I would not classify that in the stable parts at all. Opera has started to implement it, and they’re the only one at the moment. I’d be willing to bet that soon the others are going to start to get into that. They’re going to probably find stuff they want to change. So I would be careful with that section. Of course, you are also welcome to review it and provide feedback as well. I didn’t see a sense of urgency from the others besides Opera to implement it. I didn’t see a sense of urgency from the others to actually implement that part, either, so I would not put that into the things that are stable.
HTML 5.0 Video
In contrast, you have the HTML 5 video element getting a lot of traction. Opera was the first one to send a proposal, back in 2008. If you remember, Hakon Lie was pushing to make video a first class citizen of the web. In the same way as we can link images on the web, why can’t we link video on the web as well? It is there - there is a video element tag, and there is an API that goes with it, so you can actually take advantage of your applications.
If you look at something like that text, it contains some JavaScript underneath so that when you click vid.play, it basically uses the JavaScript call to say ‘video play’, and it starts playing. Because it’s perfectly integrated, I can use CSS opacity on it. We don’t have to re-invent a new opacity value just because it’s a video, and the z-index lets you put text on top of the video, or under the video if you want to. And it works.
That’s getting stable, I would say. For example, a year ago we had a stop function on it which got removed. Two weeks ago, on the other hand, there was a discussion regarding the autobuffer attribute, and people realized that maybe that’s not exactly what we need for our use cases. It’s very likely that the autobuffer attribute will be replaced by something else at some point. So even there, it’s not 100 per cent stable.
Codecs and formats
There is a big dragon lying around video, and it’s what format are we going to settle on. Well, there are plenty of video codecs out there, plenty of audio codecs, and plenty of format containers. If you look at current implementations, you’ll find that Safari is implementing the video element using the MPEG 4 format, and also lets you use others formats if you happen to have them supported by your QuickTime engine on the platform. Firefox is implementing Ogg Theora format, and while they don’t support other formats at the moment through extensions API, I believe that they are interested in doing that. Opera is also supporting Ogg Theora, and also other formats through extensions APIs that are available on the platform as well. So we guaranteed to have MPEG 4 in Safari, we guaranteed to have Ogg Theora supported in Firefox and Opera, but Theora is not supported by Safari. And MPEG 4, by default, is not supported by Firefox and Opera.
HTML 5 Requirements for a Video Codec
The reason is because there are dragons lying there around the requirements for a video codec. In particular, regarding the IP. It’s not really a technical problem here, it’s really IP related. There are licensing terms around MPEG 4. You’re not supposed to provide an MPEG 4 decoder open source like that, so it’s a problem for Mozilla. They want to have a codec that can actually fit the open source development model so they can put the code into there. Apple said that they are not going to support Ogg Theora because they fear of submarine patents that might affect the format. The Xiph foundation behind the Ogg Theora format is not aware of any, but they are not able to prove that, of course. There is no official legal study on Ogg Theora to be able to say that. So that still remains a problem.
For an organization like W3C to be able to resolve that, it means that I’m going to have to put lawyers around the table and ask them the question: can we use Theora, and if not, what are the patents that are impacting the format, if any? Or I have to go and try to negotiate with MPEG 4 to try to get the baseline profile royalty free, and when it comes down to that, it’s like you have MPEG LA who is doing the licensing around MPEG 4. But there are only a subset of the patent holders who have MPEG 4, so it’s not only MPEG LA but it’s also all the companies that we might not know. As long as this problem is not resolved, it will certainly get in the way of the deployment of the HTML video element.
The State of CSS
Switching to CSS a little bit. Where are we with CSS? The Group hasn’t been publishing anything major, any new recommendations, for the past seven or eight years. They are still active; they have been working for the past seven or eight years, and there is still a lot to do. They recently published a set of Candidate Recommendations that they believe are going to be ready for testing.
They’ve been trying to wrap up CSS 2.1 for so many years that I stopped counting. The main problem with CSS 2.1 is not that we don’t believe the spec is ready, it’s that we don’t have a major test suite. That’s one problem, and we know that it’s not fully implemented by any of the browsers out there. IE8 is probably the one that is doing the best on it, but we can’t prove it. My take is W3C has to release CSS 2.1 and be done with it, knowing that yes, we don’t have 100 per cent implementation of it, but the remaining of the browser vendors are not really interested in going into all the corner cases that you have in CSS and resolve every single one of them to make W3C happy.
And, in the meantime, a lot of the browsers are more interested in the new features of CSS 3, in fact. Apple, for example, back last year, submitted new modules around CSS, transformation, 2D transformations, 2D transformations and animations. And let’s face it, if you’ve seen any of their demos around the CSS animation and transformation, when can I use it? That’s the best answer you can get. [laughs] That’s a question you can make. It’s pretty nifty.
CSS 3 Selectors
I picked a few CSS specifications that went to CR recently and are getting there. CSS 3 selectors - if you ever try to actually style a table you realize that you need to put a lot of CSS classes, or style attributes, or ID elements into your table so that you can address each cell on the table in order to style it. That table doesn’t contain any of that. It’s totally styled using CSS 3 selectors outside the table. You can address rows, you can address columns pretty easily. For example, you don’t have a border on the side there. It serves to say ‘:first-child don’t put a border on the left’ and that’s it, one selector. If you wanted to do that without CSS 3 selectors, you would have to put a class attribute on every single one of those cells to be able to do that.
There are still, of course, things that are not that easy to do. This effect around this column, red highlighted, it still requires four CSS selectors to do it, and that’s because HTML tables are represented in the markup as rows and not columns. That’s the main reason why. It’s not because CSS is stupid… There is no concept of columns in the HTML tree itself. You’ll see that in the way I’m using CSS 3 colors with an opacity on it. That’s actually on the color itself, that is the opacity.
CSS 3 Borders
Another one which is getting there is CSS 3 borders. You can basically use this border-radius. In the alpha version of Opera 10.5 they actually drop their prefix, because since it went to CR the agreement in the CSS Working Group is that as soon as a spec goes to CR you are allowed to actually use the real name of the property and not add -moz or -webkit or -o in front of it. So they actually dropped the prefix. They still support it so that previous content will work, but if you put border-radius, that will work in Opera 10.5. We can expect the others are also going to follow as soon as they release new versions as well.
Border-image is also there. It works pretty simply. You have an image which is divided in nine parts, and you can control how the division is happening. Then you indicate whether you want those parts to be stretched or repeated, like that.
Fonts
This is the kind of effect you can have when you combine all of that, and plus you add fonts. Fonts is one of the subjects that has been talked about in W3C for the past 12 or 13 years and that we never manage to resolve. If you try that page in all the browsers, you will not get the borders. For example, in IE. But you will get the right font, including in IE6. The text itself will be rendered with the appropriate font, including in IE6, and it’s because CSS font face has a fallback mechanism. So, even if at the moment IE supports EOT - they’ve been supporting it since IE6 or IE5 - Firefox, Opera and Safari/Google have been supporting true types TTF (and now TTL), and now Open Type OTF.
Last year two formats emerged. One was CWT, which is a lighter version of EOT, and WOFF, Web Open Font Format. Both were actually created by Mozilla; the specs were introduced by Mozilla, both of them. And WOFF is getting a lot of traction. It’s probably the one that’s going to be deployed in everything supported by all the browsers in the long run. I do not believe that CWT is going to get a lot of traction. While some of the companies are interested in implementing it, I don’t believe they will all do it. We are in the process of setting up a Working Group to work on fonts. It will mention both the CWT and the WOFF formats in it, but I believe that in the long run CWT will be forgotten for WOFF. Everyone is interested to support WOFF at this time, and the font vendors are also interested in being able to use it.
The State of SVG
Talking about SVG. As I told you, we’ve been talking about how great SVG is for the past ten years. I’m exaggerating a bit, but only a bit. But it’s getting there - that’s the good news. It’s referenced by the HTML 5 spec. Opera supports SVG 1.1 and SVG 1.2 for quite a long time. I mean, SVG 1.2 was released recently, but they’ve been supporting SVG for quite a long time. The main reason is because SVG was deployed a lot on the mobile platform in Japan. Firefox and WebKit also support most of SVG 1.1. I would say that WebKit still has some features to implement and stuff like that, so there are some dragons in terms of interop there. If you produce an SVG you need to be careful a little bit there, but they are getting there.
Microsoft joined the Working Group two weeks ago. They didn’t say why. They joined the Working Group two weeks ago. If you want to know why, you are welcome to go and ask them.
Authoring tools are getting better as well. Inkscape is one of them; an open source authoring tool for SVG. A lot of people are starting to use it, and if you produce some document in SVG in Inkscape and you paste it into Firefox there is a good chance it will work out of the blue like that. So the good news is that we’re getting there, we’re [?] getting there.
The dragon you’re going to run into is that if you take, for example, Firefox, and you try to put SVG into an HTML document, it’s not going to work. If you try to put SVG into an XHTML document, on the other hand, it will work. The HTML 5 specs tell you how to put SVG inside HTML, but it’s not there yet. They haven’t implemented it. That’s going to be the same thing with Opera, and the same thing with WebKit as well. If Microsoft ever implement SVG one day - they haven’t been supporting XHTML so far - it’s going to be interesting what they’re going to do in that space. There might be a bit of irony where they’re going to support the HTML syntax. Then you’ll have to face the problem: if I wanted to work with Firefox it has to be XHTML, and if I wanted to work with IE it has to be HTML. So we’re not fully done yet, but we’re getting close.
XHTML5/SVG Video Player
I’m going to show you some demos of what you can do once you have a spec like HTML that includes SVG. That’s actually, again, the HTML 5 video element, and around it - or more precisely, underneath - this bar right there is SVG. It’s an XHTML document. If you try to do the same document as HTML, you’re not going to see the bar at all because Firefox is not going to interpret the markup as SVG. That’s SVG, and indeed, it works quite well. If you click on the play button it will play the video.
There is captioning on it. Firefox does not support captioning. I did a library to convert Timed Text captions into HTML using CSS and displaying the caption at the right time by listening to the on timeupdate event coming out of the video. Same thing here, it’s listening to the on timeupdate event coming out of the video, so when I click on the play button here what it does is say to the video ‘play’, and in return the video tells the SVG ‘I’m playing’. Which means that if I show the controls - they all come with default controls, but you can show if you want to in Firefox - you’ll see they’re acting exactly the same way, because those controls are also going to be using the API inside the HTML 5 spec. So if I pause that one, both interfaces are reacting the same way. If I mute it, they are all going to react the same way as well. And it’s all done using JavaScript. That’s one example of what you can do.
XHTML5 / SVG Mask
Another one is this. Take the previous slide with the video, put it into an iframe and apply an SVG mask on it, that’s what you get. Suddenly you have the SVG mask which is applied in real time by Firefox on the iframe. and that works perfectly well. Since this is a previous slide, if you actually switch and go to that slide then you have the slide within the slide. I don’t know how many times you can go like that without crashing Firefox. I’d be curious, actually, if it crashes or not. It might not. [laughs]
Gaussian Blur
Another example is this: the Gaussian blur article. I took an article out of Wikipedia, and I wanted to show that you can write it using almost only HTML, SVG and MathML. There is only one image, one PNG image, in that document and it’s right there, it’s the one where you have an eye on it. The image underneath, with an eye but this time blurred, is done by Firefox using SVG. All the browser effects here are applied using Firefox. The image of the Commonwealth flag is a big one, a 1600 by 1800 SVG, which I’m downscaling so that it can fit, and I’m applying a blur effect on it. It’s all done using Firefox.
The math here is MathML. If you actually go on the Wikipedia article, those are images, and the thing which is happening right now which is that Firefox is splitting the formula on two lines because it cannot display fully on one. You wouldn’t be able to do that with Wikipedia because they’re using images. It’s the same thing over there - this little formula is also splitted as well.
If you use the contentEditable attribute from HTML 5, and attach the attribute to a paragraph or a span, the user can edit this. And you receive an onChange event if the value of the text is changing there. In that case, I can do that, and I can change the text. Using JavaScript you’re changing the blur effect within the SVG as well.
By the way, this document is using CSS multi-columns effect, so if I take this and make the window a lot smaller then Firefox is showing the document on only one column. That’s all done by Firefox. That’s my stress test document, I would say, because if you see here, you have a matrix which is not displayed properly by Firefox. They don’t support MathML matrix here. If you try that document in WebKit, the math is not going to show up because they don’t support math yet. Opera is going to do a good job at it, especially Opera 10.5, except that I don’t believe they don't support the matrix either. But if I try it on my phone with Opera Mobile the SVG is going to work, except that they don’t support the contentEditable attribute. But the SVG is going to work just fine. So it’s getting there.
A rough view of the future
Another slide I’d like to show is that one, what I would call my ‘ugly slide’, the one that tells you that you don’t want to hire me as a web designer. If you put all those technologies together on one slide, this is what you basically would get. This time I’m using CSS transformation which is supported in WebKit, supported in Firefox, and it’s supported in the alpha version 10.5 of Opera as well.
Besides the position of the elements, which I did as quick and dirty, you will get the exact same rendering in all of those three. You have HTML 5 buttons right there. This is not something you are able to do with HTML 4, to actually be able to put span element on the text of your button. We can rotate all of that. If I click on this button, a little JavaScript is going to change the CSS transform property and rotate my button.
Because MathML is inside the tree, if I click on this button I can go using the pure DOM core functions and go and change the math formula as well, which is still using CSS transformation. There is an SVG in the page, and I can go there in my input text field in HTML, and using one line of Javascript I can go and, if I get the focus… No, I was not pressing the right button. I can go delete that and I can change that, and it will work. And because SVG is part of the tree, if I change a value of the Gaussian blur element then I can actually change that as well.
There is a video on that. You can play the video while it is being transformed as well. But, you know, I can put some JavaScript, and if I want to I can actually rotate the video while the video is playing. Why not? You mightn’t want to use this very often, but…
[laughter]
2D Context
Going into a list of other things that you might want to look into. 2D context. That came out of Apple originally. The canvas element in HTML 5 gives you a graphic context in the HTML page, and then using the 2D context API you can actually do 2D drawing operations there. If you use the WebGL API you will be able to do 3D operations there. What you’re doing is drawing on a bitmap. If you compare that, if you wonder what is the difference between SVG and Canvas 2D? Well, with the Canvas 2D API, what you can do is a bitmap operation, you are just drawing. If you don’t remember where your drawing ends up, you won’t know where it is.
But you can do some pretty stuff if you want to manipulate the pixel value. For example, during the Google I/O conference last year they did a presentation on copying the content of a video inside a graphic context. The video was playing, we say, within that context, and they were doing face recognition inside that area. That’s something you will not be able to do with SVG, because you cannot access the pixel level in SVG at all.
On the other hand, when I was changing my blur effect on the previous slide, I would be able to change my blur effect here because I drew it already, and I cannot just delete what I just did or undo it. It was drawn on the page. So different use cases, and it really depends on what you want to do there, whether you’re going to pick SVG or the 2D API.
2D Context
An example of a 2D API is this, which I didn’t do myself. You can draw on the page on this. That contains the canvas element, and you draw on it. If you stop it, in this case, this particular demo is remembering the mouse events and replaying them at the right time as well. There is another demo, which I don’t have here, which is the SVG edit one. It’s an SVG editor as a web application and it’s using the canvas API as well, for you to draw, except that it will later convert what you just drew into an SVG document.
Web Sockets: Protocol and API
One thing that I think everyone should look into or watch at least is Web Sockets. The use case is you have an application online and you need to update it on a regular basis, whether it’s because it’s an email or you’re doing real time collaborative editing. Right now you don’t have a lot of solutions to do that, except using the XHR object and pulling the server at regular intervals to guess and see if there are any updates since the last time I checked. It could be quite consuming on the server, and Web Sockets is therefore the rescue.
It’s basically making an HTTP 1.1 request to the server. There is a feature in HTTP 1.1, which has been there for a decade, which is called Upgrade. You’re basically asking the server: can you please upgrade me to something else, to another protocol, whether it could be an IRC protocol or whatever you want. In this case, you’re telling it: upgrade me to the web sockets. After a few handshakes like that, what you basically have is a TCP connection with a server. Now you don’t have to send plenty of HTTP headers every time you’re requesting something from the server, and the server doesn’t have to wait for you to tell you there was an update. It can just send those to you as well. So that is going to be used heavily in future web applications.
I believe - and I’m not quite sure - that WebKit is implementing that, or has some version of it at least. Firefox was looking to implement it in Firefox 3.7. But now they’ve said they’re not going to release 3.7, it might be a 3.6.something, I’m not quite sure about that. There are still some security issues, so that’s why I’m saying on this line ‘subject to origin constraints’. It all goes into the cross origin problem that we already have if we want to do a mash-up of multiple websites, but it’s going to use the same solution in that space.
Web Workers
I forgot the change the title of the slide, but here I’m talking about Web Workers. It’s multi-threading in your JavaScript applications. You’re basically creating a worker to say the task is inside this stuff, and using the eventing system you will be told when the results arrive through the postMessage API, which is also used to do communication between frames.
Geolocation API
I was showing earlier some HTML documents, some XHTML documents and some XHTML documents with SVG, so let’s go the other way around - let’s do an SVG document with some XHTML inside. That text right there is SVG, you have an HTML table right there, and you have, of course, an SVG here. Unfortunately I’m not going to be able to run this demo in front of you because I’m not connected on the network, so I’m going to have to describe what’s happening. You’re going to have to use a little bit of your imagination.
When I click on this button, it’s making a JavaScript call requesting the GPS location of the web browser. What Firefox, in this case, is showing you is a little toolbar which says ‘do you want to share this location with this application, with this website in fact?’ Because once you give the GPS location back to the JavaScript, that’s it, the JavaScript can do whatever it wants with it, including sending it back to the server where the JavaScript came from. If you say yes, then since it is a callback mechanism it will return the GPS location into the JavaScript to the application. If I were on the network, what you would see happening right now is that would be replaced with the approximate GPS location of my laptop, and here this logo would be replaced with a Google map. A real Google Maps that would be able to zoom and slide on the side if you wanted to. That’s HTML within SVG.
How does it do that? How does it know where my laptop is? I don’t have a GPS device on my laptop. The way Firefox implemented it is using Google Latitude. They are basically sending your IP address to Google, which in return gives them a GPS position. So it’s not always that precise.
Device APIs
Moving a little bit more away from what some people would put into the classification of HTML enhancements, there is another entire space about deploying web applications as standalone applications, not necessarily just in the web browser.
In the mobile space, for example, there is a lot of interest in deploying applications using web technologies, and you need to be able to do a lot more to access a lot more information than what you can do with the current Web APIs. You want to be able to see the calendar, tasks, contacts, camera, all kinds of stuff that you can imagine. Is my system online or offline? Is it the right time so that I can use a network connection? All those kinds of stuff. There is a group in W3C working on device APIs, and they just started the work two months ago.
Widgets: Web Applications on your desktop
When we talk about deploying standalone applications, we need to have a way of packaging web applications so that the user downloads one file and then has the application installed on its system. That’s what widgets are for. It’s basically a zip file which contains all your HTML, CSS, JavaScript, and images - whatever you want to put in it that your web application, which is going to run as standalone, is going to be able to use. You can imagine, it’s using a lot of the HTML 5 features. I didn’t talk about web storage, but web storage is used by the widget API as well.
That’s a screenshot of my desktop using Opera widgets, which is not quite yet an implementation of W3C widgets, since they were pretty early on on that. But it’s all using HTML, CSS, and JavaScript right there.
…Or your mobile
And if you take this Twitter application and put it on my phone, this is what you get: the same application running on my phone. W3C widget is getting deployed. For example, the latest version of Windows mobile will have built-in support for the W3C widget. Certainly Opera is going to look into it. Nokia is also interested to deploy that on their mobiles, and have a store so that they could sell applications using that as well.
There was one interesting announcement, which I’ve been waiting for the past year and a half, last week at the CES conference that happened, we have, now, our first implementation of the W3C widget in IPTV set top box. As you can imagine, everything which is happening right now on the mobile in terms of deploying applications is going to happen to television. You guys all know a little bit about that since you’ve been doing some work in that area with Sony already.
Almost two years ago I was in South Korea and they showed me a television which has support for HTML right there without having the need for an external box, and it was able to show widgets. Not W3C widgets - it was two years ago - but widgets in HTML. The television was plugged into the internet and downloading the widget from a central server managed by Samsung, actually. Verizon is looking into deploying more and more widget on your television, so you can Tweet or whatever you want to do while you’re watching your show as well. It’s no longer going to be only restricted to mobiles.
How Can I Participate?
So how can you participate? We have mailing lists, we have workshops, even if they are not in the area that are currently going to happen. Join the Working Groups. When it comes down to HTML and CSS, my biggest worry is: how do we test a lot of that? If we want people in the street to be able to use that, we have to test. And we should not only test HTML 5, we should not only test CSS 2.1, we should not only test Geolocation, we should test them all together. Because after all, that’s how we are going to use them: altogether. That’s one thing I would like W3C to do more - a lot more - is testing, and improve the testing around those specifications quite a lot. If you want to make a specification like HTML 5 successful, we have to test it, and test it as much as possible.
Thank you
That’s it. Those slides are available online. You can go and see them, look at the code as well, and try those slides in different web browsers to see the difference. Some of them will not work, some of them will work, or kind of work. But feel free to go and look at them for sure.