The third thing I wanted to show is you some further out thinking we are doing about how
we can do animations inside of CSS, and JavaScript and HTML5.
So here is an application that is a prototype that we are using to experiment with CSS in
JavaScript. And this is an advertisement we are using as an example and we put this together
because we like Ducati and we thought it would be fun to show it as part of the example.
This is using totally HTML and CSS and I can transition between a couple states. So you
can see I have a pre-roll state here. I've got a bunch of layers. I can see the different
items on the page. And when I go to a different state, it animates automatically.
I want a bike to come in here, so to do that I am going to make the different shapes I
have defined here with CSS appear on the stage. And I can do that simply by editing these
values, so I make this show up by changing its left side, and then I am going to change
its opacity. And then you will see the bike will fly in from the right. It is happening
live as I do this editing here and when I change between the two states you can see
the animation is working. I want to make this nav down here work and
add a second bike to come in. So I am going to duplicate this, calling it bike 2 and that's
creating another CSS animation basically around the second state, and I want the first bike
to go away and the second bike to come in. So first let's make the first bike go away,
we'll make it fly off fast and make it a thousand pixels off the stage and there goes the bike.
So now I am going to make the new bike fly in. And I want the bike to fly in, be visible
and show up on the left like we did before. I have to type in pixels. There it is.
All right. Cool. So now I have these different states set up
in my application. And I want to make it so that when I click on the nav, go to that bike.
So I am going to add a trigger. On click of the nav bike 2, which is a CSS ID, I am going
to be able to now animate to that bike. So let's preview this in the browser. There's
the ad, rolls in, thing comes up, I click on bike 2, and it acts and bike 2 comes out.
Isn't that cool? [ Applause ]
>>Kevin Lynch: Of course I can add other transitions and rollover effects and things like that,
but that's some of the work we are doing now to see what's really possible in terms of
enabling tooling, great tooling around CSS, HTML5 and these other technologies.
So that's some of the work we are doing. Now, there's one more thing I wanted to talk
about, which is support for video. And you know there's been a lot of great work in video
done on the Web, and it's great to see innovation continuing, and we are really excited to see
the VP8 work that's happening now. So we are so excited, we are going to put VP8 inside
a Flash player and we are going to distribute VP8 to over a billion people in less than
a year of its release. So we are going to really help push out the
VP8 CODEC. [ Applause ]
>>Kevin Lynch: We're really excited at what people are going to be able to do as video
keeps maturing like this and innovating. And the other area we are working on is of course
we are working with Google on a bunch of devices with Flash, and you are going to see a lot
more of that on day two. We are really excited about it, and we are
really happy with the innovation that's going on in the Web and happy to be part of it.
So thank you very much for having us here. >>Sundar Pichai: Thanks, Kevin.
So we have seen these great Web applications and what you can do with HTML5.
But I want to talk about a couple of problems which remain on the Web.
The first is that it is very hard for users to find Web applications. In the earlier days,
literally you could walk into a retail store and pick software off the shelf. Then we talked
about all the popular desktop applications, and it turned out there were sites like download.com
where you could go and find these applications. Since 2004, we talked about how Web applications
are the main way by which developers are writing applications on computers. It turns out it's
very hard to find these applications. Think about this example. Let's try to find
a great chess game on the Web. I have tried do so. It turns out there are many, many great
chess games on the Web, but it's very hard to find one which is really good. There's
no way for you to get ratings and reviews. You can search for it but you can't see rating,
you can't see reviews. You don't know how many people are using this game. You can't
engage in a discussion with other people who are playing the same game.
It turns out it's actually much easier on a mobile phone to go find a chess game, whereas
it is very, very hard to do the same on the Web.
So that's one problem. Photograph the second problem is, as developers, when you write
these applications, you need users to discover and use these applications. You need reach.
You need to know how many users are you going to get for this application.
The second thing developers care about is monetization. Today, advertising is the primary
form to do this and it works great in many, many cases. So advertising has been a very
important form much monetization on the Web. But we want to create other alternatives as
well. For example, it should be easy to create and
sell a premium application on the Web. So these are the two problems we have been
thinking hard about, and as part of that, we want to give you an early preview of a
product, what we call Chrome Web Store. So I am going to introduce Kan Liu who is
the product manager on the Chrome team who is going to walk us through the Chrome Web
Store. Again, this is an early preview. We are pulling
this off Chrome nightly build, so bear with us. What you are saying is a new type age
of Chrome. It's a friendly paradigm to most users. These are applications, icons which
we have installed right on the New Tab page. One caveat though, these are Web applications.
You can find them on the Web anywhere but now you can conveniently add it onto your
New Tab page. As you can see there's Clicker. Jim Lanzone
talked about the clicker.com. I love that application. I have it installed on my new
tab page. Let's go ahead and try one application. Let's
try Tweetdeck. I'm sure many of you are using Tweetdeck right now in this audience. Tweetdeck
has redone a complete HTML5 version of their application as well, and so what you are seeing
is fully in the browser. It's really slick. You can drag and drop it. Let's go ahead and
add a key word for Google so we can start watching the tweets come in. So you can add
Google. They used the notifications API to deliver tweets to you right in the browser.
They also used the Joy location API. So you can click on it and see where all the tweets
are coming from. So this is all done using HTML5 in the browser.
Let's go ahead and send a tweet, and we can send it to the Google I/O channel, live Google
I/O. So this is an application which I have conveniently
installed in the New Tab page. Let's go back there. One icon you will see
on the bottom right is what we calm the Chrome Web Store. So you click on the Web Store icon
and it takes you to a gallery full of applications. And so you can go here, discover applications,
find ratings review, find how many users are using these applications, add comments, et
cetera. So Darkroom, you saw the demo earlier. You
saw the application. It cost 4.99. I can go ahead and buy it.
We have worked very hard to simplify the process so once you set it up, it's normally one click
to buy an application. So you can buy it and add its straight into
the New Tab page of Chrome, and you can start using it right away.
So let's go back there. It turns out one of the important class of applications on the
Web is games. And people spend more time -- In all app stores, games are the most popular
form of application. So let's try a couple. Plants & Zombies. It is a very popular game
on phones. Now you have it in the Chrome Web Store. So you can click on it, and as you
can see, it's a full immersive full screen experience right in the browser the way most
people want to play games. And this is built on Flash. And applications in the Chrome Web
Store can be built on standard Web technologies, including Flash, and we will support all of
them in the Chrome Web Store. So the goal of this game is to knock zombies
out, so -- we can move on. [ Laughter ]
>>Sundar Pichai: Let's go to the Web Store. Another game which is a different class of
game which I am excited to show, we call this Lego Star Wars. It is a 3D game. We were wondering
what game to show this audience, and we figured as long as it has 3D, Legos and Star Wars,
it's going to work well. [ Applause ]
>>Sundar Pichai: So we worked with this company called Unity Technologies. They have a game
engine which really simplifies the development pipeline for game developers.
We are showing it using their plug-in, but they have a working demo in their sandbox
of porting this game on top of native client of open source technology which we will have
in Chrome. Most game engines are written in native code,
and it's going to be very hard to rewrite these in JavaScript. But now you can use something
like native client to run them directly in the browser.
So the purpose of this game is to go rescue R2D2 and kill all the bad droids out there.
As you can see, it is a full 3D game. It is very rich, and it leverages a lot of HTML5
APIs. And Unity is working to put all that you are
game on top of native client to get it working in Chrome.
So these are rich, immersive 3D gaming experiences which will be coming to the browser as well.
So let's move on.