Now, the video tag is not going to be alone on the screen.
Here I have added a few more things. Except from the video, though, there are no images
on this screen. The heading here is Web font, selectable font.
The graphics here is SVG. And you can see that he nods in approval for WebM here. This
is done with CSS transitions. This is also CSS transitions down here. We
can do a whole lot declaratively now without the need for JavaScript.
There is some JavaScript higher, though. You can see the national anthem has been rendered
at the bottom here and that's done in the canvas element with a little JavaScript library
to render musical notation. So all of this is coming together now.
We think video, being a first-class citizen will join the other content types we have
and we will have very rich Web pages in HTML and CSS 3.
My prediction is if we use these techniques right we can get rid of half of the images
for the Web, because they are mostly there for styling purposes, but by adding all this
video stuff, there are still going to be lots of images out there.
So to the Web community, I'd like to say start using this. We need to go out with our video
cameras. We all have video cameras in our pockets, and we should do it.
This guy in Germany just went to his local zoo and filmed the octopus, and it's fantastic
how this video really increases the educational value of Wikipedia or whatever kind of content
you are doing. The video is truly amazing. To Google, I would like to say thank you.
It's very civil of to you spend time and money getting WebM off the ground, releasing it
to the open. And I look forward to working with Google in the future to make sure that
the Web remains open, to be used for all sorts of browser, with all sorts of content.
At Opera, we put the Web into all sorts of phones. We are on hundreds of different phone
sets, reaching millions of people who would never otherwise have video access. And we
truly believe that Web access is going to be one of the human rights of the century.
Thank you. [ Applause ]
>>Sundar Pichai: Thanks, Mike and Hakon. So it's really exciting. One of the core tenets
which underlies the Web success is that it's based on open standards like HTML, TCP/IP,
JavaScript, et cetera and it's great to see video get that option as well.
So for an effort like this to be successful, we really need the support of the entire industry
to make this happen. So I guess I am on the wrong slide.
So we have been reaching out to many, many partners. And we have received overwhelming
support, so we are very grateful for that. I want to call out a few people.
First of all, we wouldn't be able to do this today without the support of people like the
open source efforts like Vorbis and Theora. So we are very grateful to what they have
done, and we are looking forward to working with them.
Secondly, for VP8 and WebM to succeed, it's really important that we have hardware support.
Especially given how many mobile devices are getting connected to the Web and serving videos.
So hardware is very, very important, and we are working with many, many hardware partners
and publishers. You can see the names on the list. And we are working very hard to make
a highly optimized RTL freely available soon to our hardware partners.
So we have talked about HTML5 APIs. How modern browsers are supporting these APIs and given
you examples of real-world applications. We have more examples on the way but at this
point I would like to invite Kevin Lynch, CTO of Adobe. Adobe has been doing a lot of
work to support HTML5, including providing tools which are really important for developers.
So let me invite Kevin Lynch to the stage. [ Applause ]
>>Kevin Lynch: It's great to be here with all of you today at Google I/O. HTML5 is great.
It's a great move forward for HTML on the Web. And seeing the examples here this morning
it was a lot of fun seeing it come along and what's possible now in HTML.
At Adobe we have been for 25 years now enabling people to express themselves using a variety
of technologies. And it's really fun to see new technologies come out like this that people
with take advantage of in expressing themselves, and we are really excited to work on enabling
that to happen. Of course we work on a variety of technologies
at Adobe, and today I want to focus on HTML5 and what we are doing around that technology.
And I am going to give you three examples of some of the work we are doing in support
of HTML5. So the first thing I want to show you is what
we are doing in Dreamweaver. And Dreamweaver is the most popular pro HTML editing tool
besides Notepad. And I would like to show you some stuff we
are doing in here. This is a Web site we have mocked up, and one of the areas that we have
been really looking at here in support of HTML is how do you actually do this with HTML5
across screens? Because now, obviously, we are all start to go target multiple devices.
So we are working here with HTML5 and a new capability that we're adding to Dreamweaver
CS5, and it's called Multiscreen Preview. What this enables you to do is see a three-up
of your Web site design so you can understand how it's going to look across these devices.
You can see right now it doesn't look that good across these devices, but you can use
CSS to customize your design. So what we are doing is making it really easy to hook up
alternate CSS style sheets based on media queries. So if I want to have a phone-sized
one, a tablet-sized one, and maybe a desktop-sized one, I can set the width of each of these
different style sheets so when it hits that width, it will show that particular style
sheet with the design. And now you can see your design in three different formats. The
same HTML5 code underneath, but now you are able to see three different renditions with
CSS. In fact, doing this production right now,
it's hard to understand how your stuff is working. You have to keep trying it on all
these different devices. We support navigation here, so if I want to click, I can start playing
through my site and see where I still need to work on my site some more.
This is going to be a big productivity increase for people trying to do HTML5 across devices.
In addition to HTML5 work across devices, you can also do code editing. Code completion,
supporting things like the nav tag and other areas of HTML5, but also doing CSS things.
For example, when I am changing this page here, and you can see it changing between
the different style sheets now, even live design view. So as you are editing the code,
you can see the different views live while you are doing it. And say I want to edit this
tablet one, I can open up the CSS for it, and right now there is not much of an effect
on these, but if I want to, I can actually make this go bigger here, if I want to. Let
me get the tablet one. There you go. It's popping up right there, but it's not very
smooth. So I can add transition. Part of the new work that's going on in CSS is support
for transitions. You can see I have got code completion for all the new attributes in CSS.
So I can do a Web kit transition here. If I want to make it do maybe half a second transition,
I can go and roll over, and now you can see I get a smooth rollover rather than the jerky
one from before. That's supporting all the new transition effects
in CSS in live view inside Dreamweaver so you can start editing, and of course this
does gradual enhancement as you have browsers that support these versus ones that don't.
But it works consistently now in the authoring tool.
The other thing we have been looking at is how do we support enabling graphics inside
the authoring environment some more. Let me show you another page in the site. And this
is a table that has some availability for the one table that's in this cafÃ©. And
you can see it's booked or its free. It would be better if I had a picture showing the availability
here so let's go over to illustrator. And illustrator already supports SVG.
We're working on some enhancements, though. And here is a graphic of a time clock, it's
just a bunch of shapes and colors. And I am going to actually connect this with JavaScript
and CSS and make it a dynamic clock that shows the free and busy times at the cafÃ©.
And to first set the two different states, I'm going to select the fill color here in
illustrator. And from illustrator I am going to create a CSS style. And this is going to
represent the busy times, so I will name it "busy." Now I am going to select this other
one over here, the green one, and I am going to make that a CSS style that says "free."
And now my JavaScript code can use those CSS styles and apply the right color to each of
the different wedges. Let me export this as an SVG file.
Okay. Now I am going to be able to go back into Dreamweaver and I am going to be able
to insert this on the page. So here is where the table is and the JavaScript code reads
the table and updates the SVG based on that. So let's insert the SVG. Click, insert SVG,
get my image, there's the clock, import it, there's the object in SVG. And now when I
preview this inside the browser, it should show the clock. So we have the free busy times
now showing with JavaScript updating the SVG with CSS style sheets, and of course it's
showing the current time, too. So that's an example of how we are working
to smoothly integrate graphics editing and HTML5 in a really seamless way. This is something
we are working on inside Illustrator.