Qt DevDays 2011, HTML5 in QtWebKit: Alexis Menard

Hi

everyone,

thanks

for joining today for talking about HTML5 and QtWacket.

This

talk is not just about, you know, hacking HTML5. I believe here we are not web developers, right? We don't make websites. I'm not a very advanced, skilled HTML developer.

I'm

following the spec and implement it. It's mostly for people that make hybrid applications, right? Like those that want to mix a bit of HTML contents with their C++ application or Qt application. So how you can basically use the new feature of HTML5 in your application. So it's not going to be how to develop an HTML5 website.

The

agenda for today is a bit of introduction. What is HTML5 and what is all that noise that we hear about that? What are the new features for user interfaces? Like what the user can see?

And

what you can use for helping you, you know, making the stuff under the hood, basically. What the user doesn't see. The user doesn't see. And the conclusion. About me, so my name is Alexis Menard. Yes, I'm French. You probably noticed my accent. I'm sorry. I'm the Qt WebKit team lead in INDT. So INDT is the No Care Research Institute

in

Brazil. There I'm taking care of like eight people that work on WebKit. Oops.

I

used to be a troll, exoslo troll. I used to work for Qt development frameworks. So I worked three years on Qt, QML, QGraphics. Last year I was doing a talk about QGraphics in depth.

You

guys, some of them, some of you guys received an N9. I work on the N9 browser. I made the video support for HTML5 on it. So if you like it, you can, you know who made it. Half of it was made by me and another was by a colleague. I'm an open source advocate. I contribute to many open source projects, of course, including WebKit.

And

I'm now an occasional KDE developer. I used to be much more active than now. Mostly because of my family. And I started as a student project in 2006. And then I worked on Plasma

mainly.

Plasma is the user interface for KDE. I refactored it quite a lot.

And

then I launched a mobile user interface for it, which now become Plasma Active, which is currently shipping. I've seen some examples on some of the partners there. So it's good.

So

working for R&D in Brazil is very cool because I left Norway. and my snow,

cold

weather, and darkness. My party friends and the awesome Norwegian food base of sausages.

For

Brazil, which is slightly different landscape. Beach, sun, I go to work in short every day.

And

I finally joined, was able to join my family. So my wife and my little daughter. And I drink Cay Pyrinnes all day long. So

it's

very, very good.

No,

seriously speaking, let's back to the subjects. HTML5, so what is that? So I found the codes,

which

was the main area that has not been adequately addressed by HTML is

VAC

subject referred

to

as web applications. So by web applications, I mean like stuff like Gmail, Google Docs, and all those stuff.

So

this specification attempt to rectify this. So helping people that make web apps to

make

their life easier, basically. And with this awesome logo that they came up with. HTML5 is a huge update. It's like

huge.

It's the successor of HTML4,

of

course. HTML4 was standardized in 1997, so it's like a while ago.

And

the world had changed since then.

So

they basically cleaned up a lot of stuff based on common usage of what they noticed on websites and how web developers were dealing with HTML. For example, the HTML language itself didn't have a grammar. So it's like,

for

instance web, if you,

for

instance, open a, I don't know, a tag, like, I don't know, a table tag, and then you don't close it,

it's

a mistake, right?

It's

bad HTML code.

But

there was no specification that was saying, okay, what should you do? Close it automatically or, you know, write an error or try to do some magic. So if you take your faulty HTML code and you run down in different browsers, then you will have different results. Because there were no norm for it. There was no grammar. There was no error handling specified by HTML4. So finally,

they

came up with

a

norm. So you, a standard. So you can say, oh, if I don't close this tag, then I can do this. Then, so finally, browser can implement the same way of handling errors while parsing HTML documents.

Which, in

the future, it will help having your HTML render the same

cross

-border. Cross, you know, Internet Explorer, Google Chrome, Firefox, and so on.

On

the sign-out, in WebKit projects,

it

meant that we entirely rewrote the parcel for HTML because of this. So,

at

some point, WebKit switched to an entire new parcel just for, like, following the,

the

spec and the new norm of HTML5. Which is good, right? So we hope that other browser vendors will do the same. Normally, Internet Explorer, Opera, and so on.

I

believe they do. I'm not checking everything, but I believe they do.

It

also extends existing elements. For example, you know, input tags. You can have, like, type input type button and stuff like that. And there are new ones. Like, for instance, input type email. So it will handle for you, you know,

an

input type, like, a field where you have to type an email address. So it will check for you if there is, like, an at, if it's a correctly formatted address and so on.

It's

basic testing, right? Of course, it's not gonna check if the server exists and so on. But at least, you know, it avoids, like, lots of, a lot of GS code that you find in every single website that check this.

So

finally, websites can start moving to this rather than having their own GS code that actually does the same.

And

it also, for instance, input type color. So you finally have a color picker.

Stuff

that help the web developer and people that make HTML code a lot. And add new elements. For instance, you know, video tags and summary or detail tags, which

I

will not go into detail why. But it's, like, it's new features, basically. New tags, sorry. And you have new features, like, for instance, drag and drop. You can, for instance, drag from your desktop to a web browser. And you can finally get drop events. And then you can finally handle drag and drop properly. So you can drag, drop from one side to the other. And, like, from the desktop to your browser. And then the browser from the desktop.

Which

is good. So you can finally upload files without going through the file dialog and then show stuff and so on. So, of course, not that much website yet implement those. But, like, when the standard will be, when HTML5 will be standardized, which is not the case yet.

Then the

years that will follow, then browser will be compatible with the standard. Which means that you can finally rely on it. And

move

away your old code, basically. You've also, like, offline storage database. Like, you can finally have websites that store something on your computer. So the next time you open them, then it's,

they

can react to a previous, like, previous time you were there. Something much more advanced than cookies.

So,

many features. I will not go to all of them.

Just

for the record, CSS3 is not part of HTML5, right? So, like, HTML is just about HTML. CSS is about

style

-shed, right?

Though

I will talk about it in this presentation because I think it comes with it. Like,

it's

not part of the standard. It will not be part of the standard. But I think it's, like, both come together. You have to use it together to,

I'd

say, use this, like, so-called Web 2.0.

So,

how do you find a web application today? For instance, Roku video player. Spotify is one of them. You know, it's, like, it's an hybrid app that's, like, half the content is online. And then you get your clients on your computer. And then it uses your computer to actually play music. But get the content from online. Stream it from online. So those are

web

apps, basically.

Because half

they'll use interface HTML.

But

they also have application because they use stuff on your computer.

The

OV store on the N8

is

one of them, too. It's using HTML5 for the user interface. And Netflix. Some of the clients of Netflix, like, I think, on the PS3 is using it. And,

of

course, not the one on Windows because it's using Silverlight. But

some

of the clients actually use this.

So

what are the success stories of those kind of

web

apps? It's, like, they have creative user interfaces, right? It's, like, they're usually very appealing. Like, they're nice to look at. Like, Spotify is great.

And

they have a very, very great experience when they're connected to the web. Like, Spotify is just about this, right? Like, you have a lot of playlists. You can share playlists. People can vote. You can start. It's, like, when you're connected, those apps are very added values comparing to, I'd say, a dedicated music player, right? Which just have local content.

And they

receive updates, right? Since you're connected, they can change the user interface by just, you know, changing the file they're using online, right? So that the user interface may change from a day to another one. And it doesn't require any user interaction, right? Because they just deploy new HTML5 on the server. And then they just render it on the local app.

And

you get a new UI

for

free.

And

they are not just web pages.

They

are integrated with the platform, you know? It's, like, they store stuff on your hard drive, you know? It's, like, they use, they integrate with the platform, like, copy-pasting and stuff like that, right? So it's, like, they have added values comparing to

a

regular web page.

So, of

course, this target's, like, you know, hybrid app for you guys because

I'm

not talking about, you know, Google Docs or stuff like that.

So,

what are the new features for user interfaces? And HTML5 finally comes with audio and video tags. And audio and video tags for

playing

audio files and playing video files. It's very obvious. So,

video

tags is basically to get rid of Flash. Let's put it like this. Get rid of Flash for video playback. I mean, the number one use case of Flash after games is,

I'm

not sure, actually, probably the first use case of Flash is video playback and then games.

And the

problem with Flash is, like, unless

latest

version,

there

was no hardware acceleration. And even today, there is no hardware acceleration on Linux, if I recall correctly. So, it's, like, it's really bad for playing HD videos. Finally, if you have a video tag that is built in on the web browser, then the browser can actually, the web engine can integrate with the platform and then have support for video acceleration, which is very, very good. Unfortunately, there is an active debate on which codec the video tag should support, whether it's WebM or H.264. Hopefully, they will solve it because this is a mess.

And,

but still, it is there at work. And, by the way, all the features I'm going to talk about today is the one that works in QwebKit. So, these features you can use today. And my presentation is made in HTML5. So, for instance, you see it's dynamic. If you want it in silver, you get it in silver. If you want it in blue, you get it in blue. So, you can pick it in blue. And I can, right away, demo the video part by just clicking on it. And then I got the video

playing.

So,

and

this is the hardware accelerated, which is very good.

And,

by the way, also the presentation runs on the WebKit 2 base browser made with QML and Qt5. So, I eat my own dog food.

While

making this presentation, I also fixed many times Qt5 and WebKit, which was very great. So, yeah, you can show videos finally, which is great. You can hide them. And while you hide them,

it's

not like a plug-in, right? We know that the video is hidden. So, we don't have to do some magic with the plug-in. We can just, you know, stop rendering it. While it's still playing, we just don't draw anything on the screen because we know that the video is hidden.

And the

plug-in is always more complicated

because

the plug-in, so either run on separate windows. So,

then

start to be a mess or it's like windowless, but then it's like playing on top of the video. So, it's like on top of the web page. It's just a huge mess, plug-ins.

So,

the video is really nice because it's very well integrated. So, on QtWebKit, they work on all platforms we support.

Mac,

they use QuickTime. On Linux, they use the Streamer.

And

on Windows, we use QtMultimedia, which happens to use now

the

Windows Media Foundation, which is the Windows API. So, that's all for...

So,

as I said, I will talk about CSS as well a bit. I just come up with features randomly, right? There's no... I think it's feature interesting. For instance, like you can finally do border radius, like having rounded corner images, which help a lot of people because you don't have to make your own images. And then

do

the right, like the rounded right in-game for Photoshop and you can finally have built-in support for it. And then this is like

end

up into a proper painting API rather than, you know, having you, having multiple images set on your web server. It's like finally this is ending by Qpainter, for instance. And that works well.

You

can also animate with CSS. So, you can make this awesome animation that I made with the clouds. So, just so that you understand a bit, I'm gonna just show you the code. So,

the

cloud is just as you can see a CSS

thing, which

is load an image.

And

then you got the drop, which is like the small RAM thing. And then I have multiple of them. So, as you can see here, like I create my cloud

and

I create all my drop, right?

And

then

I

would say, so that's the animation with just fold. So, it's like moving, right? Then I set the duration.

Then

I set the is in curve. So, timing function, they call it. Linear.

And

then how many times I want to run the animation, I say infinite.

So,

and the cool part is, if I come back here, is that you can specify key frame. And it would say, okay, at 0%, my drops

will

be

at

opacity 1. So, you see them, right? And then the transform would be, so translation would be 0. So, the original position, which is just under the cloud.

And

then at 80% of the animation, I would say opacity is still 1. But I move them around. And then WebKit will interpret for me all the position in between. So, you don't need to care about it. And then at 100%, I would say opacity is 0. So, from 80% to 100%, you will animate the opacity from 1 to 0, right? So, you have this fade out effects, kind of, right?

And

then also the translation. CSS, animation CSS,

very

good

comparing

to JavaScript. Before, everything was JavaScript. You know, you make a timer and then you start moving stuff around.

That

was the only solution you had.

The

advantage of CSS

is

that it's easy to use. You see, like, the key frame, very easy to use. You understand it very well.

There

are useful timing functions. Like, you can specify in what time and how many times you want to run it and so on. So, it's very, very easy. And

one

of the major advantages of CSS animation is better performance. Why? Because

on

WebKit,

the

CSS animation run on separate layer than the page you render.

And

this particular layer is hardware accelerated.

So,

we use OpenGL for animating them. Which means that animation gets fast.

And

in most cases, there's 80% of the use case you had before where you just move stuff around. Like, typical drop down menu that you have and stuff like that.

So,

I recommend to use CSS animation over JavaScript glue code

or JavaScript,

you know, hacking code you had before. Which I had also. Because they are just hardware accelerated which is so much better.

There

is this new canvas element. So,

it's

easy. Let's put it in one world. It's just like a Kupinter.

But

on the web. Probably have less feature or more feature. But like, it's just like Kupinter. It's an imperative 2D API. So, same. It's an interactive HTML file presentation. So, we can just do it. So,

you

get from the document, you get the elements.

So,

canvas example smile. So, if I go back to my source code, you'll see that here.

I

got a canvas, right? Canvas element. Perhaps I should increase a bit the... Yeah. So, I got canvas which has an ID canvas example smile.

So,

I get it in my variable. Of course, the canvas elements, the API is only JavaScript, right? You just do comments on JavaScript.

So,

you can get then a context from the canvas. So, there is the 2D context and there is the 3D context. I'm not talking about the 3D context yet. So, let's stick with the 2D one.

And

then when you get the context, it's just like if you get a Kupinter. You can just do

context

.bugging path. Then it will start putting a path. Then you can say context

.line

.width

equals 4. And

then you can start doing everything you want. So, I just did a small example. I'm a bit lazy to type everything. So, I just

copy

paste it. But you'll see it's very easy.

So, I

just draw an arc and then I move my painter around. So, I just drew multiple arcs. And then at the end, I stroke everything

on

the screen. And if I evaluate this code,

then

it makes a really nice smiley.

So,

yeah, that's just this. So,

you

get the power of doing custom drawing.

Which

is very, very good. I think it's a very nice improvement to

the

HTML in general. Because you can finally do painting easily.

Why

you would use that? Shart is a very good use case of it. It's insanely easy to draw like bars with this. It's like you just have your old data that are processed. Then you get it in JavaScript. Then you can easily draw a graph.

Like

sharts, you know, of 80%, 90% and so on.

You

can draw lines easily. It's like

I'm

pretty sure that it already exists. Sharts library based on Canvas.

So, if

it's not, it will. It's probably people will come up with. So,

it's

like this was really hard to do before. Because it's like

that

for me, it's a huge improvement. You can also write simple 2D games. You know, like Pac-Man stuff. It's like very easy to write with this.

And

you can also use this for certain types of animation.

You

know,

you

can, you know, draw, clear, draw and so on. So, it's like, it's just like using Kupinter, right? So, you can also use somehow Kupinter for doing animation, right? So, it's good for that.

You've

got also WebGL.

It

extends JavaScript. Same to allow 3D contents.

It's

also context on the Canvas elements.

You

know, so instead of getting the context 2D, you can get the context 3D. And then,

boom,

you have

OpenGL

access. You can just draw GL codes. Like, it's just using the OpenGL ES APIs, the 2O, and you can draw anything you want. So, no need for a plugin, which is very great. I mean, people like me that are working on WebEngine, they hate plugins. So, the less plugins we use, the better it is for us. So,

then

you have, like, co-access. You can do everything you want. So, all the fancy demos you see on the internet about HTML5 is, like, most probably using WebGL. Unfortunately, I'm running a WebKit 2 based browser. We don't have yet WebGL working there. So, I cannot make it anymore.

But

I have Google Chrome.

I

could show it. But that's fine. You can find demos online. Anyway.

What

about handle the hood improvements?

So, you

get, JavaScript got, like, a lot of smarter selectors.

You

know, you are used to get element by ID, which is a bit, like, limited.

Now,

you can, for instance, like, get elements by class name. You can say, okay, I'd like to all div, or I'd like all tables, or, I don't know, all h1.

You can, you

can also query selectors, you know, like, CSS selector. You can query selector all, and it makes life so much more easier. For instance, the example is, like, oh, I'd like all the

selector

h1, which is, like, a type, CSS type, slide. So, it's like, then you get a list of it, and then you can do stuff with it.

So,

I use it for,

in

that particular use case, I use it for moving my slide around. So, I could get all, and then I can move them around. Oops, later on doing issue. Web workers, so what is this? It's like, you know, in JavaScript, this main problem is, like, if you have, like, heavy JavaScript code, you know, something that computes a lot,

then,

you know, it may slow down the web browser.

So,

now, you get this web worker. It's basically a way for you to offload scripts

processing

in a separate thread. So,

for

instance, in this example, so I create a script, you know, and I create a worker, and I specify which JavaScript file it will use.

And

then, this will be the JavaScript file that will be executed. And then, on the work, and then, the worker will start.

And

if you look on the worker.js file, then I just try to find prime numbers, right? So, I just go around,

and

then,

as

soon as I get one, I post a message. And this, then my main script will get it on this worker-on-message handling, you know, like worker-on-message means that you will receive the message from the worker,

and

then you can do anything you want.

You

get the events, and then you can get the data what you sent. So, I send the prime number.

So,

that's really nice. You can finally offload stuff. Webkit's taking care of you creating the thread. Webkit's taking care of the messaging between the two.

You

just use it like this.

Post

and on-message. So, one you post, and the other you get a callback, basically.

So,

I also encourage you to use that. If you want to offload a bit, so you keep the UI responsive. Local storage. Let you save data on disk. This is also very nice. So, you can finally have websites that are a bit

less

stupid. They'll remember what you did last time. Or, web applications that are less stupid. So, it's very, this one is very easy to use. It's like,

it's

a key value-based API. You store a key,

you

store a value for a key, and then you can get it.

So, and

the data is stored on the hard drive of the user. So, next time you visit the page, you can query it, and then you can see if there was something stored before. So, I have a small example. So, for instance, on my presentation, I have a button that will save the current slide I'm looking at. So, I just save it.

And

then if I reload the page, of course, I'm going back to the beginning of my web page.

And

then I implemented, like, if I press the R key, then it will actually look for the local storage and see which slide I store.

And

it will just restore it. Last time I've seen. So, that's cool too. Makes nice values for people that reopen the

app,

basically. Of course, you can do that easily in C++, right?

That

if you have a hybrid app, you can just make a co-object that stores this into key settings, and then you're done.

But, how

many C++ line of code you need to do this versus two lines? So, it's like, you can use those, right? That's what my talk is about. Like, showing you new feature that you can use in your hybrid app, so that you can save C++ code for it.

This

is one example.

There's

also application cache. So, the way it works is like,

it's

not a cache where you put stuff, it's like caching resources.

So, on

the HTML tag, you specify a manifest, and the manifest is like,

you

describe what you want to cache on the hard drive.

But,

I'm talking about resources. Like,

I

have this huge PNG image that I load on my website, and, well, I want to store it on the hard drive, because the next time the guy is visiting the web, or launching the app, or visiting the website, I just don't want it to download it again.

So,

you can finally, in the manifest, say, on the cache part, you can finally say, okay, well, please save my image.png on the hard drive, and use it next time you visit the website.

It's

like

cache,

web browser always cache data for you, right? Like, they were trying to be smart.

But,

this is a way for you, web developer, or hybrid app developer, to specify what to cache to the web browser, which is slightly more advanced and better than what the browser were doing before. So, what browser actually do today, they will still do it tomorrow.

But,

this is a way for web browser to be aware of it. So, if your CSS file is huge, which I don't recommend, by the way, but if it's huge, then you can just say, okay, cache it.

Same

for the JS file, same for PNG file, same for HTML files.

Then,

there's another part of this manifest, which is

network. So,

you can specify which files

of

your application or website needs network access.

So,

that if the user goes to it, you can finally have a good handling of,

I

don't have internet connection.

So,

and then you get this fallback part, where you will say, okay, if any

network

file is being accessed, then I will fall back to another one.

So,

you can finally gracefully handle cases where

there

is no network access.

Instead

of having, like, can't connect to network, and then ugly page from the web browser,

right?

You can finally, on your web app, you can say, okay, well, there is no network, but I'm running locally. So,

it's

like, okay, I can finally fallback to, you know, offline.html that may be a bit

nicer,

or

just

have the features, but limited to local access, basically. So, I just made a small

table

to recap. So, if you're offline, everything that is described on the cache manifest will use the cache, right? So,

it

will load from the disk and use it. If you're online, it will check if it's an updated version for you, and then if it's not, then it will update, right? If it is.

Network, if

you're offline, all the files that are described under the network part, they will not be used. So,

they

will just fallback to the fallback part.

But

if you're online, of course, you will just use, always use the remote file.

That's

also a way for you to enforce using a file on the server that you want to be sure that they use

that

one, the last version and not something that is on the cache. A CGI script or something like that is most probably the

one

you put there.

And

the fallback, if you're offline, it will use the fallback. Of course, my example before was very simple, right? I say fallback star offline means that any network file that has been accessed will go to offline. But you can be, you can refine. For every file, you can say, okay, fallback to that one, fallback to that one, fallback to that one. And so, if you're offline, then fallback will use the fallback. And if you're online, of course, you will use the remote. So, same as the network, right? How you enable data storage with QWebKit? You can, in QWeb settings, you can set the local storage path. So, this is what the small demo I did with the current slide that I saved.

You

can override the path

by

specifying where you want to store those data.

And

otherwise, by default, you save it to the QDesktopServices data location, which is

in

Linux.cache, .local.cache, whatever.

And

you can also set the offline web application cache path, which was what I was explaining before.

This

is where it's going to store the PNG file, where it's going to store the CSS that I want to cache.

There

are many attributes. I didn't talk about the local storage database enabled, but I just

mentioned

it briefly because it's...

If

I talk about everything, I won't have time.

So,

anyway, this is basically a led you access to a database kind of thing. Just not like the local storage where it's just like key value.

This

is like, so you get full power of the database, you know, select, insert, update, all those SQL languages, basically.

That

works also in QWebKit today.

And

if you want to enable everything, in one shot, there is a shortcut, enable, persistent storage, boom, you're good to go. Everything is enabled. So, everything will work. If you have HTML code that you're using it, then it will just work. If you don't enable it, then it will just do anything.

It

will still load, it will still parse, it will still execute, but will not do anything.

So, one

of the strengths of QWebKit is integration with C++, right?

So,

all I was talking about, it's just a tiny bit of HTML file, right?

You

can easily integrate with your existing app.

So,

if you see benefits of using HTML5, then you can easily integrate it with your existing app. So, I just remember that on the web frame, you can add a C++ object

so

that you can expose your

C++

API to your web world. So, you can mix both, right?

You

can mix HTML5 and your existing

logic that

you have in C++. So, for example, here,

I

create my object. And then, you know, I just have a slot. And then on the main frame, I can add it to JavaScript window object, my object. And then I instantiate it, like this part, right?

And

then in JavaScript code, in my web world, I can just use it like this. My object, it's a global object in the JavaScript global object. And then I was just like,

call

it.

So,

that's a very good feature of code. You can mix both worlds.

So,

I hope this will help you to understand how you can use HTML5 as well as what you already have

in

code, like based on code, right?

HTML5 will

help you to write part of your UI if you want to. That's what I meant.

And

you can still interface with all you already have.

So,

it's just like, no, don't think about HTML5 and HTML, like something that just run on the web browser. It can totally run on a separate, like on your app, basically.

You

can also, from C++, evaluate JavaScript. It will just execute, you specify the JavaScript in, as a parameter of evaluate JavaScript. And then it will just run the JavaScript in the web world for you. So, it's also a way from your C++ world to command the HTML world.

And

then if the function has a written value, then you get it as a client.

You

can also add complete widgets to pages with QW plugin factories. So, you can have your QWidget that show up in the page too.

But

I said,

we

don't like plugins. So,

it

works, but I don't recommend to use it.

But

if it's, for instance, you see that, for instance, in HTML, you cannot...

You're

not very happy with table.

You

know, it's like to make tables. And then you want to use QtReview.

You

can just do it with this.

So, you

can still make your UI in HTML. And then if you feel that it's not going to fulfill everything you need, you can still sneak in stuff from QtReview. So, that's good too.

So, I

like when people ask questions. So, I reserve a lot of time for questions.

So,

that's it. If you want to get started, there is html5works.com. So, it has a lot of examples on how to use it. HTML5 is huge. It's still not finished. It has, like, millions of features. And it

will

take me a day to explain everything. On the wiki page of QtWebkit, I forgot to put the link, but I should... You can find it on Google. So, it's like on the wiki page of QtWebkit, on webkit.org, you can find what feature of HTML5 we support, and what is the status. If it's beta, if it's experimental, if

it's

not implemented at all.

Google. So, we

are not yet... The Qt part of Webkit is not yet in power with, let's say, Google or Apple. So, they support more features than we do. Like, for instance, Google is, like, way better for everything that is like WebGL than, let's say, Apple or Qt, for instance. But we're good. We are working hard. So, it's gonna come. If it's missing, it's gonna come.

So... And

even if you heard about Webkit 2, I did a talk just before about Webkit 2, you know, it's like QtWebkit, the layer of QtWebkit 1, it's not gonna receive any improvement in Qt5. But everything that happens on the core,

on

WebCore, like on the core of the engine, you'll get it anyway. So, any new HTML5 feature that doesn't require a layer API in QtWebkit, which is

80

% of them, then you'll get it for free. So, don't worry. QtWebkit 1 will, in any cases, get updates somehow. So, and the Webkit 1, we don't remove the code. It's there as well. So, don't worry. Otherwise, there is also this cool website, CanvasDemo, that shows how you can do cool stuff with Canvas.

And

also, of course, W3 specifications are pretty, pretty good. It's like really nice to read.

That's

how we base our work, basically, to implement them. So, HTML5 is like full of great stuff. It powers application of today. Already today, many websites use HTML5. Even if the standard is not yet finished, because this web browser uses it. And it will for sure power the web of tomorrow. Like, it's a for sure. It's like

web

apps, like Google even made an entire operating system on top of that. Like, Google Chrome OS, right? Like, it's just a web browser, basically. So, it's like,

it

will power the web of tomorrow. So, you

better

look at them also.

When

you evaluate, there was a talk about whether I should use HTML5, whether I should use HTML5, whether I should use C++.

I

think it's up to you, it's like up to your skills. But you should give a try to HTML5. You can achieve pretty cool stuff. Like, I did the presentation, right? It's like, it has fancy animation, you see? Like, fade in, fade out. And I didn't use any already made framework. I just made it by myself. And it was very, very quick. So, then I'm not necessarily a very skilled HTML developer. I'm an implementer. So, I recommend to give a try.

So,

I'd like to thank you for being here today.

And

if you have any questions, just bring it.

But

you have to wait the microphone first.

Do you have a website which is totally made with HTML5?

Yes, there is. Unfortunately, we cannot. I know one for sure, but we can't access it here because it's like Pandora.

In

the US, like this radio online player. The entire website is made in HTML5. There are many of them. It's like, I actually have a demo here. Well, let me see.

I

will like just activate it on my,

yeah. Just

put a very ugly e-frame. That's in my presentation.

Yeah.

As you can see, it's like,

yeah,

it's like,

this

is an online website that is just like using canvas, right? And it's an entire drawing thing.

You

can do a lot of things with it. So, like, unfortunately, the toolbar doesn't show up for some reason. But, like, you can specify gradients. You can basically do drawings. And this is an entire HTML5 app,

right?

So, you can like have buttons here. You know, you can specify the colors.

And

so, this doesn't have any C++ code, right? It's online. So, you can do pretty advanced stuff, right?

Okay. Thank you.

And Gmail,

Google

Docs are HTML5 apps. Like, they use a lot of features from HTML5. You just open the source code of them and then you grab for some, you know, keyword from HTML5. You see that they use a lot. Funny enough, I discovered all that. That's, you know, when you are on Gmail and someone talk to you, there's this ding, ding.

You

know, it's like this sound. I was expecting them to use audio element for it. Now, in fact, they still have a flash plugin that is size 00 that they hide on the top of the website. So, I was like, no, guys, no.

So,

I think they do that for compatibility, but still, no.

So,

yeah. There are a lot of examples. Like, you don't have like full features. You have like full features HTML5 websites, but you have many of the existing websites using features that are already implemented.

So, yes,

hello.

The

web worker process, is it integrated with C++?

Sure.

In the web worker, can I call it C++ code?

Web

worker?

What did you say? Script. Web worker.

Yes. The worker

process, is it integrated with C++? Can I,

over

the web bridge, if I start a web

worker

process, can I call it C++ inside?

No.

So, it's built in in WebKit.

So,

it's like, where the web, the... It's JavaScript.

Yeah. It's

JavaScript only.

Thank

you.

We followed the spec for this. It's not a good WebKit feature. It's like, it's a spec of HTML5.

Hello. Does QWebKit support geolocation API?

I didn't talk about it, but yes, we do. As I was saying, I cannot explain everything, but it's like, we do support geolocalization.

The

N9 is using it. It works. You can use it there. It works.

On

phones, you will use the GPS and so on. Like, it will actually use the underlying API, but like, of the operating system.

On

desktop, I'm not very, very sure that actually it works on every platform because Windows doesn't have API for it. So, we can't use it. And it depends the platform, basically, because we need a platform that gives us geolocalization information, right? On Mac, you have it. Yes. But on Linux, you have it with GeoClue, right? But on Windows, I don't think there is anything. So, I'm not sure it actually works. Okay. So, that's the problem with some of the features. It's like, it's a bit inconsistent,

depending

the platform you're running on. But geolocalization is mostly for mobile phones.

And

then, that works.

Okay.

Thank you. That works on Symbian. That works on Mego. That works on Mimo.

Hi. You mentioned this worker. And that means that threads come to JavaScript, but JavaScript has no mutexes or anything. For instance, is it possible to access the DOM elements from the worker? And then, what would happen if I have two?

Yeah,

wait, wait. You're a bit limited of what you can do

on the

worker. Okay. It's like, accessing the DOM and so on is not recommended.

Not recommended or not possible?

Actually, I'm not sure it's possible. I have to check myself, actually. But it's like,

it

will not crash. That's for sure. That you can modify the DOM from the worker?

I'll

be fair. I don't know. I have to check. But it's a good question. But it will not crash for sure. Because the way the messages stuff work is like posting. It's just like Qt, right? It's not direct access.

So,

it's like, it's going to pass to some kind of event queue and then process one by one.

So,

like... But there are no such threading techniques like semaphores, mutexes or anything else.

No, no, you can't. But you don't have that in JavaScript. So, you don't need this. So, it's like, the worst case you could get is like an undefined object, right? Let's say, in a worker, you access something on the DOM. I believe that you can access stuff on the DOM. But the worst case, what you get is like an undefined object, right? We just don't do anything in JavaScript. We just throw an error, but not crash.

So,

you can easily check every time you're on the worker if my object that I want to access is undefined. That means it has been deleted by someone.

Then

you can undo it properly,

right? So,

you don't need mute access. You just rely on JavaScript features, I'd say.

Okay,

thank

you. But

I believe you can access it. I don't see why you can't.

So...

But perhaps, mistaken,

but...

It needs to check.

Hi.

You mentioned about hardware acceleration for CSS effects.

Yes. What's

the hardware acceleration situation for the Canvas 2D context and SVG?

So...

So,

for SVG, I'm not very sure because I don't work on the EVG parts. Though I believe there is someone that works on it there. I remember. And... But so there was... Fortunately, Andreas is not here, but he worked a lot on it. But

for

the CSS, it's for sure hardware accelerated. For Canvas

2D,

it's not... I don't think it is. We just do...

We

just do normal Cupid intercourse. I'm not sure, but... Same.

I

need to check. I mean, it's like huge. I don't work on those parts. So it's

like... Yeah.

But I can check. It's very easy. Or I can point you to the person that knows.

Oh,

hello. I have the question about the security in the storage feature.

In

the... A question about the security in the storage feature. Yes. In HTML5. How is this works in WebKit? Because, for example, we're loading some evil page, which is trying to read something from the hard disk or store some huge data.

Well, it's like...

It

means that... That means that to get an exploit from that means that the... It means that someone had access to your hard drive and your user accounts and then start writing into your own directory, which already is like... Requires

very

huge exploits. Like, you need to be able to write into your home directory of the user. What it does though is like, you get the website and like the file of the website and then store it and reload it. It's not as worse as having... Like,

if

you wrote an HTML5 that is faulty with an exploit inside, it's the same... The cache has nothing to do with it. It will just cache it on the hard drive.

What

you're talking about is like, if someone modified the cache, right?

But

that means that you already have access to the user accounts. That's already a huge security flow on the machines itself, on the IT system. So, then WebKit can't do anything about that. If the user accounts like, let's say, Unix is... On Linux, if you violate it, it's like already too late for WebKit.

The

cache just take what is online, put it on the hard drive. If you have... If someone managed to modify the hard drive, then it's like...

It

can do way worse than this. So, the real security issue for WebKit is what comes from online.

If

the HTML5 is... HTML files is faulty, then... Then... Then that's a problem. That's what WebKit is trying to handle. But saving on the hard drive and someone modifying it, then... No, we can't... We can't have control on this.

And

the second question. Do you have any idea when the HTML5 specification will be finished?

No.

I'd say 2016 or something, probably. But I have no idea. It takes a long time. But that's the thing. I think at some point, they will finally say... Because there are drafts, right? And some of the drafts are... You know, markets like advanced or very stable or like all web browsers of the market already implemented it, which means that the spec itself is good.

I

think at some point, they'll say, Okay, we take what is already there, plus

some

that are on very advanced status, and then they close it. and then the next stuff is going to be for the next version.

Now,

when they will do this, no one has control on that. It's like use political discussions. But like... Many of the specs, you need to implement them to find their flows, basically. Like when implement... Like people come up with ideas and spec, write a spec, and then when browsers start... Like browser vendors start to implement it, then we find flows.

I

contributed back to the video spec. because there was some problem with it. So it's like... You never know. I mean, just like C++, right? C++11 was standardized like, I don't know, two months, three months ago, right? Or something like this. It's like took how many years? It's like

almost

11 years. The last number was 99, right? Or 2003. 2003 is like, come on.

It's

the same. We don't know.

And

plus after... Even if the standard is released, then

it

will take some years for browsers to be fully compatible with the standard.

So... Well,

if you do an HTML... Entirely HTML5 website, and you rely on features that will, you know, were so-so, and for... Like, it will take... Even after the standard, it will take some years for you to be sure that your HTML code is going to render properly on every browser of the market that support HTML5.

that's

the problem.

And

especially in terms of Explorer, you know, they are very, very slow for implementing stuff. Oh, they make progress. Like, they make huge progress now. They're finally opening up their minds, so it's good.

So,

yeah. I don't have VTA for that. I wish I could.

Any

other questions?

Thank

you.