Już 62 411 użytkowników uczy się języków obcych z Edustation.
Możesz zarejestrować się już dziś i odebrać bonus w postaci 10 monet.
Jeżeli chcesz się dowiedzieć więcej o naszym portalu - kliknij tutaj
Jeszcze nie teraz ZAREJESTRUJ SIĘlub
Zaloguj »
ZAREJESTRUJ SIĘ
Nie masz konta?
Google I/O 2010 Keynote Day 1, pt. 4
Poziom:
Temat: Media
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.
