Google I/O 2012 - New Web Tools and Advanced CSS/HTML5 Features from Adobe & Google

Uploaded by GoogleDevelopers on 29.06.2012

>>Alex Danilo: Hello, everybody. And welcome here tonight. You have waited for the keynote
act, I see. We're the last act of the day, best of the day, of course.
So I guess you're all wondering why Adobe is here.
The answer to that is they're a very valued contributor to the WebKit project, and WebKit
project is of course the core of Google Chrome and a lot of other nice browsers out there.
And of course, we like to share because of course the Web is about sharing. And what
I mean is I don't mean social media. I mean they're a bunch of mad scientists -- actually,
visionary physicists back in the early '90's -- and they decided they wanted to share physics
stuff, like scientific papers, so they built the first Web browser and Web server. And
then a few years later Marc Andreesen came along and said, Well, images would be cool
and he added images to the browser. And then over the years, as you've seen, the evolution
of the Web has just gotten better and better and we have all these amazing features today.
So basically the Web is open and so Adobe and Google we all work on Web technology,
we work with a lot of other companies as well. So enough about that. Who are we? My name
is Alex Danilo, and I'm a developer advocate on Chrome.
And with me I have Christian Cantrell, who is a product manager, a developer himself,
so he knows a lot of the stuff that you guys do.
And we also have Vincent Hardy, who is a principal scientist. And Vincent and I have worked on
CSS and SVG for a number of years now. So the Web is evolving and that's a really
good thing because we don't really want the browser from the early '90's, do we?
And the thing is what we're seeing now is along the timeline of Web browser evolution
all these new features have been coming in and coming in and the feature set is accelerating.
New features are not just accelerating, but there an accelerating acceleration.
So the thing is what do you do as a developer? It's like we want to help you. And that's
why we built Chrome. Chrome is built for simplicity, security and speed. And what's going to give
you simplicity is tools. It better tools to make your job easier and that will give you
more time because it will make your development job faster, so we give you simplicity and
speed, and that's what we're going to show you today.
Now, what are you supposed to do as a Web developer? Come to Google I/O. And the second
thing is go watch all the YouTube stuff, go watch it afterwards, enjoy it, get all the
demo material, experiment with it. And one thing I would really like everyone
in this room and everyone watching to do is to talk to us.
The Web is about people, it's open, we share, and we listen to you. So if you as a Web developer
sit around and you go like, "Oh, I wish CSS did that," come and tell us, we'll try and
push it through the standards bodies, we'll get the other browser makers to do it and
we'll do it together. So anyway, this is the kind of thing we're
trying to promote today, more creative options. The old days used to muck up a wire frame,
give it to the Web developer who writes JavaScript and something pops out the other side.
And we want to change that workflow. We want to, like, bring on the declarative Renaissance.
So we're putting features in the browser that are declarative. They're not JavaScript. And
we're providing tools so the designers can come along and go, Well, I can build that
page myself. I don't need to give it to a JavaScript programmer.
And so Adobe, of course, had a rich history in topography and fonts and graphics, so the
stuff we'll see today is a whole lot of new CSS features, from magazine style layouts,
some cinematic effects and amazing graphic type stuff, and of course we bring this all
to you in Chrome. And if you're sitting there going, "Oh my
God, my users use IE, a really old version, what do we do about that," well, we give you
Chrome Frame as well so you can have Chrome and Chrome Frame and they provide the platform
on which you can make these incredible new apps.
The other thing is we bring tools, we have Chrome Developer Tools, and of course Adobe
we're about to show you some new tools they have been working on.
And of course with their tools and our tools it creates a synergy that makes your workflow
so much easier and smoother. And of course, the one thing that I'll emphasize
yet one more time is that the Web is open, the Web is everybody's, and we both participate
in the W3C and a number of other standards organizations. In fact, there are over 370
companies who are participating in the W3C and they steer the direction of the Web. So
if you want a new feature, come to us, we'll do it for you, okay?
So on that note I'll pass it over to Christian and he shall tell you all about these features.
>>Christian Cantrell: Thank you, Alex. So I think probably the best way to understand
the perspective of Adobe when it comes to helping to move the Web forward is to look
at the Web platform team's official "Le Motto," which is a better Web and awesome tools.
So I'm going to be talking about three things that are going to help us achieve that goal,
the first of which is text. So the Web is already a very powerful platform
for text, so Adobe wanted to build on that because we really wanted to bring magazine-like
layout to the Web. And we want to do that -- we're doing that in primarily two ways
with two specifications and two implementations as well, CSS Regions and CSS Exclusions.
The example you see here is using CSS Exclusions to have some text flow along the edge of this
mountain. Here's another example where you see text
flowing between different regions, in this case to make columns, also flowing along these
images here. So this is combining CSS Regions and CSS Exclusions.
Now, this is the kind of thing that you're probably accustomed to seeing, we're all accustomed
to seeing really in print and magazines or something like that. Usually not something
that you would see on Web. Something like this the Web would typically have been laid
out in another application, a screen shot would have been taken or something strange
like that, which obviously we don't want. We really want true magazine-like layout with
the Web. So I'm going to start with the CSS Regions,
and this is just sort of a brief overview. The concept of CSS Regions is actually quite
simple. You have a block of text here, a flow, you have some elements here which are your
regions, and with a couple of lines of very simple declarative CSS, that text can start
flowing through those regions. It's that simple. I'm going to actually start with a couple
of demos to help illustrate the point. In addition to being a developer at Adobe I'm
also a science fiction writer. And I frequently write things and release them under a creative
comments license online. And when I release them they tend to look something like this,
which is to say ugly, right? So I put a lot of work into the story and
then I release it in a way that I'm not really that proud of. And the reason is because I
want it to work on as many devices as possible. I know people like to read on phones, they
like to read on tablets, they like to use all kinds of different types of browsers and
machines, so I try and make it sort of the lowest common denominator.
But it honestly doesn't look that good, so when I started working with CSS Regions I
was really excited about what I could do with my own work and how I could present it in
a much more interesting fashion. So this is the same story which I've applied some regions
to. And you can see that I have a page count up here, which is nice, and you can see that
my text is flowing from region to region here all automatically. I have some page numbers
down here. If I were to resize my browser here you can
see the page count in the upper right-hand corner is changing. As the page count changes,
if I drag it up and decrease the height of the available space you can see the pages
have automatically adjusted themselves. So this is a much nicer experience and something
that I can be a little bit more proud of. I have a couple more prototypes, but I want
to go ahead and skip to the last one, which is my favorite. I call this the sort of adaptive
or responsive prototype. And this is unique because it's designed not just to work on
any size screen, it's designed to actually be optimized for any size screen.
So this is the same story once again, but it uses -- it has some gestures where you
can turn pages. It uses some heuristics to determine the optimal width for a column and
the optimal -- the maximum number of columns it can fit. And you can see if you have much
higher resolution, it will automatically determine your column width for you and add more columns.
Even the graphic here on the left-hand side is scales as I change the column width because
it's done with SVG. So this thing -- this layout is going to work
on a screen as big as a wall or something as small as just a phone.
So I had a lot of fun working with my own content with this. And I started thinking
that I really wanted to be able to consume other content on the Web in a really nice
way as well. And you know, I really wanted to be able to just sort of reflow content
into sort of a magazine or book-like format really easily, so I started experimenting
with this Chrome extension that I call Qualify. And when I click on this extension up here
all the content on the page is just automatically reflowed using CSS Regions in a way that I
think is much nicer to consume, and it's all adjustable based on font size and all that.
As an aside, if you guys went to any of these shadow DOM sessions or Web component sessions,
this is actually using the shadow DOM, so it's not polluting the DOM at all. So as far
as the DOM is concerned, you know, if there are scripts running on the DOM or something,
actually nothing has changed here at all. It's all done behind the scenes on the shadow
DOM. If you have no idea what I'm talking about, shadow DOM is awesome. Check it out.
Okay. So since we're making contributions directly to WebKit, any browser that leverages
WebKit is going to receive the benefits of those contributions. And in this case the
Chrome beta -- actually, I shouldn't say beta anymore, it's not in beta anymore since like
yesterday, I guess. So Chrome on Android also has some CSS Regions support, so this is the
screen shot I took from my Galaxy Nexus. So let's look at some code. The first thing
I want to point out here is just a simple selector called content. And it has a property
called flow-into here. And this flow-into property is creating a named flow called article.
And what's notable about this is that my content is just going to be a big block of semantic
text. So I'm not worried about, you know, creating divs or some form of element that
are regions and copying and pasting text into each one. Obviously that would defeat the
whole purpose. That's not really flowing. You could have done that forever.
So you have this semantic block of text which is content and it knows nothing about the
way it's going to be laid out. And then I have this class called region.
And it has a flow-from property here, and it's referring to this named flow article,
which is defined up here. So with just that I'm able to get text flowing
between regions. Now, what about getting paging capabilities
and, you know, the swiping effects and the columns and the layout and all that?
In order to do that you will have to write some code. You're going to have to tap into
the CSS object model. And it's not a lot of code. It actually pretty
straight forward, and I'll just go through it. We started our layout with a function
called add region here, and I created a new region. And I'm going to set this attribute,
the class attribute, to region, which we saw in the previous slide is the named flow.
And this is a really important line of code right here, this region.addeventlistener.
So we're gonna add this region.addeventlistener to our region, and we're going to call this
function called on layout update. Basically what this is saying is if the text
inside that region changes in any way, if text is added, if text is removed, if the
font size changes, if the element is resized for any reason, then call this on layout update
function so that I can run some -- you know, take a look at the page, figure out what happened
and update my layout. And then just add that region to the -- pin that region to the body
of the document. So let's look at this on layout update function.
Again, this is called whenever my flow changes within my regions, so I get a reference to
the region from the event target, nice and straightforward, and then I start looking
at this region overflow property. And if the value of that property is overflow,
which is to say if there's more text than actually fits in that region, then I'm going
to need to add another region. So I sort of recursively call this add region function,
right? Otherwise if it fits, then call region layout
complete and you're done, you can do your layout and stuff.
So what's missing from this is the code that determines the width of your regions, the
placement of your regions, the left, right, top, bottom, and all of those kinds of things.
It puts page numbers and the scrolling effects and all that, but that stuff's actually not
all that bad. And the very first prototype that I wrote,
I wrote that in, you know, a day. The last one, you know, I sort of built a few prototypes,
takes a couple of days. And these are the kinds of things that people
will write, they'll open source. I'll open source everything I've done here along with
a qualified plug-in so people can see how it's done. So it's not bad to do all this
stuff yourself, but we know that it has to be easier. We know that people want to do
it in a declarative way. And so we've proposed something called CSS
page templates. And CSS page templates really come from our
experience with tools like InDesign, which is what you're looking at here. This is a
screen shot of InDesign where I've created some master pages. One master page has an
image in the upper left-hand corner, another master page has an image in the center here
with two columns of text on either side. And what I can do is I can just add pages
to my document and just apply these master pages to those pages and they're automatically
formatted the way I want them. So it's really nice and easy. We've learned from building
these kinds of tools that, you know, people want easy ways of doing these kinds of things.
So let's take a look at CSS page templates. We're going to look at it in two parts. The
first one is the flow. And this is probably pretty familiar because this is more or less
what we just looked at, except for instead of creating one named flow, I'm creating two.
So I have a selector called article and a selector called timeline and I'm creating
two named flows here, the article flow and the timeline flow.
And then I have this selector here, combine articles. And it has this interesting property
called overflow style. And I'm saying page X. So this line of code is basically saying
"Don't call my -- don't call my event handler and make me have to add regions and lay them
out and all that, just page X, page along the X axis," in other words, page horizontally.
So the templates themselves, you use this @ syntax to define them. So we have an outer
definition of a template here and then we have slots inside of the template.
In this case we have a left template and a right template. Both of these are getting
their content from this article flow. Then we have a center slot which is getting its
content from the timeline flow. So pretty straightforward, simple, declarative
stuff, CSS that everyone is comfortable with, and the result is something like this.
We have some English text here which is flowing from left column to the right column, and
then we have this German text which constitutes a timeline which is flowing along the center
column. And it's paging along the X axis as we specified,
or in other words paging horizontally. There are seven pages total.
And all of that was just with a few lines of declarative CSS.
Now, this is still a proposal; however, we do have shims or polyfills, JavaScript polyfills
or shims, that you can use to actually see this stuff in action and actually see it work.
And we'll have a URL on that at the end of the presentation. It's not enough, though,
just to be able to flow text from region to region. If you really want true magazine-like
layout you need more powerful tools than that, or I should say additional tools. And this
is a screen shot of InDesign. This is where somebody has flowed some text around a clipping
path here. Right? Again, that's something we're used to seeing in print. We want this
on the Web. This is an example of it happening on the Web. Again, this is both CSS Regions,
where text is flowing between regions, and also the exclusions where text is flowing
along the contours of this image. So where are we with CSS Exclusions right
now? We're really focused on some of the low level implementations which really involve
the optimization of algorithms that flow text around polygons and inside of polygons.
I'll actually show you a quick demo here. This is something that one of our engineers
put together. And you can see that this is just sort of an example of an algorithm that
determines on the left side how a text should flow inside of some arbitrary polygon. In
this case it's a star shape. And on the left it's content flowing around the polygon.
And so this is stuff that has to be really bulletproof and has to be really performing.
So right now we're really focusing on optimizing those algorithms. They're going to be contributing
directly to the WebKit, and that's going to be the foundation on top of which we build
Exclusions. Okay. So this is a really busy slide. I'm
not going to go over this. This would bore you guys all to death. It's too late in the
day for that, but I wanted to just point out one really important element of this timeline.
This is basically the full timeline of everything from when we first started thinking about
Regions and Exclusions all the way up through the present.
I really want to focus on this bottom row here, the blue row.
I was at Google I/O last year and I was working at the booth and I was demoing CSS Exclusions
and Regions, and people would come up and take a look at it -- and we had a prototype
back then. It was just a prototype build. And they'd look at it and they immediately
got it, right? When you see text flowing around shapes and everything it's awesome.
And so they would say, Wait, what browser is that? Are you using Firefox? Is that WebKit?
Is that Chrome? Is that Safari? Like what is that?
And I would say, Well, this is actually our own prototype browser. This actually doesn't
work anywhere. And they'd like walk away kind of crest fallen
and be like "Damn, I kind of wanted to do that."
So a year later, almost exactly a year later, all of the live demos that I showed you work
in the version of Chrome that all of you have on your computers right now, which is really
remarkable to me. That's one year's time. 80 percent of CSS Regions has implemented
and is in Chrome and is on your computer right now.
So we're making really good progress. As far as other browsers, Mozilla has committed to
Exclusions and Regions in their 2012 road map.
The preview version of IE 10 supports Regions and Exclusions. And since the implementation
is being done directly in WebKit, we expect the next major version of Safari to pick it
up as well. I'm going to change gears a little bit here
and I'm going to talk about the Web development workflow, something a little different.
Actually, instead of talking about it, I think I'll do a little demonstration.
So I'm going to open up my text editor here and I'm going to open up a little prototype
website that I am going to pretend like I'm working on. And I'm going to talk about the
Web development workflow, which typically looks something like this. You start off in
your editor. You make some kind of a change. Maybe you wonder if this menu belongs at the
top or not. So you remove it, you save it, you alt tab over to your browser and you hit
command R to reload. You say nah, I really wanted that. You go back, you undo, you save,
you go back, you reload. And if you're a Web developer, which I'm assuming that all of
you have at least some Web development experience, if not many years of experience, you do this
thousands of times a day, right? It's completely ingrained in muscle memory,
and it's a pretty good workflow, right? There's no compilation process or anything like that.
It's pretty fast, pretty smooth. Maybe you use something like live reload,
which makes it even slicker. Now what happens when you add mobile into
that workflow, as we increasingly are. If you are building a website now, you are probably
thinking about mobile to some degree. Well, you still have this workflow that I just described,
but you have this entire additional workflow that's like -- pulls it down and -- and really
makes it much less efficient, right? So it looks a little something like this, right?
You go through that process I just described, you go okay let me check on my device. So
up pick up your device, and it's been a while so it's locked. So you unlock it. And you
are security conscious, because you are a at Google conference so you have to enter
your PIN, of course, then you have to navigate to your browser, then you have to type in
this URL, this long complex URL of your development machine or whatever it is and you make at
least one or two mistakes, of course. Then you fix 'em and you check it out. Then when
you are done with that, then you can just pick it up and hit reload, but you're still
picking it up, unlocking it hitting reload. Picking up the next device,unlocking, hitting
reload. And on the very last one, you're going to find a bug, right?
And then you're going to go back to your desktop and fix it and you're going to start all over
again. So the really cool process that we're all pretty very much accustomed to becomes
really pretty terrible on mobile devices when you incorporate mobile devices into this Web
development workflow, but I guess I shouldn't say terrible. But it's not as efficient, let's
put it that way. So Adobe looked at that problem and thought
that maybe we could do something about it. So I'm going to switch over to -- to my browser
here. And assuming that I have an internet connection, if I'm lucky, I'm going to go
to the Boston Globe. I'm lucky. And the reason that I'm picking the Boston
Globe here is because this is sort of a famously responsive website which probably required
thousands and thousands of combined hours of testing on mobile devices so that people
who built this, very smart people, and they know the pain.
Now, what I'm going to do is I'm going to come over here and switch over to the ELMO.
And I'm going to put my devices over here on the left and I'm going to put my -- my
left anyways -- and I'm going to put my desktop over here on this screen. And what you are
going to see is that they're all synchronized, right?
And I'm going to click on an article here, and they all follow along, right? So that
same Web development workflow that I showed you earlier, now I can -- I can still do with
all of my devices connected, right? I can just glance over and see. I don't have
to pick them up, I don't have to change URLs, I don't have to tap on links and all that
kind of thing. There's no limit to the number of devices that you can connect to here, by
the way. Something else I want to point out here is
Adobe shadow, it's not like bundling up this content and pushing it out to the devices,
right? Rather it's telling the devices to go make its own request for the content. And
that's an important distinction because that means that the user agent and the http headers
and all of the information that the server needs in order to determine the correct content
to send to that particular device is all present. So you can get, you know, smaller images if
you are on smaller screen or higher resolution images if you are on one of these nice new
modern screens or whatever it is, right? So you are seeing the real deal on these devices.
So let's see here ... it's nice to be able to, you know, just this much is sort of a
big win, but there's even more we can do. If I click on the little shadow extension
up here in my browser, I can do some remote inspection of my device here. And so I've
now connected to my iPad and you can see that as I start to mouse over the content, in my
Web Inspector on my desktop, you can see this being highlighted on my iPad over there.
So this is, you know, the kind of thing that we're accustomed to doing, you know, on our
-- when we're doing Web development on our desktop and now it extends nicely to our devices.
And we can do more than just highlight, we can also change things so I can, you know,
say something like -- I can change this headline to be a little more relevant to me, right?
So I just changed the headline over here. I prefer something like this.
I can execute some JavaScript remotely on any one of these devices. See I just popped
up an alert here. So I will come over here and dismiss it. So after I've sufficiently
messed up this page by vandalizing it or whatever, I can just come over here, pull it down and
refresh it. If you guys have done development on a lot of different mobile devices, you
will know that clearing the cache is actually kind of a pain, like getting a fresh copy
of everything on all of these different devices, and so shadow takes care of that for you by
dumping the cache and making a fresh request. Or if I want to do it to all of my devices,
I will just come over here and I will tell them all to refresh, so I will click on that.
I don't know if you saw, but they all just refreshed, it's very quick.
Also I can take screen shots of all of my devices here. I'll just click on this icon,
takes a little bit of time, open up the directory here and you can see that I have -- this is
the screen shot from my iPad, so I can compare them all, sort of check out pixels next to
each other. [ Applause ]
>>Christian Cantrell: Oh, thank you. Awesome.
That is worthy of applause, I agree, thank you.
This is the Galaxy Nexus here, and also some text files were created with some meta data
so I can, you know, sort of get a good feel for how something looked for the specific,
you know, URL and LS version and stuff like that.
So -- so there's shadow. It's available right now. You can go to, download
it, see if it helps for your workflow. I'm a big fan myself.
Okay. I'm going to change gears again and talk a little bit about tooling. So tooling
is something that Adobe is well known for. We do a lot of tooling, so when we were looking
at ways we can contribute to the Web, tooling was something that seemed kind of obvious.
But we didn't just want to go create sort of the same old kinds of tools. We really
wanted to take a fresh approach and see what kind of innovation we could bring to tooling.
So we decided to experiment with an open source code editor for the Web written entirely with
Web technologies. Just to see what would happen.
And what happened was something called brackets. I'm going to go through a few bullet points
here and then I'll get to the demo, but I want to provide context here. First of all,
it's open source. When I say it's open source, I mean it's open source, right?
Like a lot of companies, they used to say something was open source and we'd all go
oh cool it's open source, and you would look at the license and be like wait a minute.
Open source is actually kind of a useless term. So really what license? And we are releasing
under MIT license, and that's a very, very liberal license.
All of the codes on GitHub, even the backlog is public. It's on a site called Trello, so
you can actually go see what the team is working on. So everything is being done in the public.
There's also IRC channels and there's lists and stuff like that that you can follow.
This is something that we realized kind of early on, which is kind of cool, this concept
if you can use brackets, you can hack on brackets. If you need brackets, if you use brackets,
you can change brackets. This point was really driven home to me when
I was working on my Google I/O slides and I realized I wanted brackets to be able to
bump up the font size so that the audience could see the code while I was demoing it,
but it didn't have that feature. It's still very, very early. I should point out this
is still very early stages of development. So I emailed the product manager, Adam Leeman.
I said, "Can you guys add this by Google I/O?" Or I said, "Are you planning on adding this
by Google I/O?" And he responds, he says, "Here's the link,"
you know, "here's a link to the public -- public backlog, you can check for yourself, it's
all public, you don't have to ask me." And actually he didn't say it like that because
he's a nice guy. But I went and I looked and it wasn't scheduled. I said, "Well, can you
guys get it in?" He said, "No, but it's open source you can
get in." I thought, you know, that's true. Like that
-- like, I'm really critical of editors, right? We all are. Everyone in this room is really
critical about editors. And for the first time I just had the power
to make it how I wanted it. So I just forked it, I mean, I'm a good JavaScript programmer,
I forked it, you know, I cloned it, I branched it, and I built the feature all in JavaScript
and submitted a report request and it got merged and I added the feature. It was really
empowering to be able to just change things I didn't like about the editor that I use
every day. I'm sorry, I forgot to change that back.
Thank you. So brackets is intended to run outside of
the browser for now. Right? So we built it with Web technologies, we were
first thinking like wouldn't it be awesome to take this editor and actually run it inside
of a browser? We thought that might be really innovative and cool and different. Then we
thought, no, probably not. We want to focus on a more traditional development
experience right now and keep it outside of the browser, but we are definitely looking
at embedding it in the browser in the future and accessing various cloud serves with it.
We are not trying to build an IDE. We are trying to build a streamlined editor. We are
not trying to compete with Visual Studio, Eclipse or something like that. We are trying
to build something fast and streamlined. We want it to be an editor. And so we have a
good extension model. It's an evolving extension model, which is really designed to help us
keep a lot of the things that maybe everybody doesn't want out of the core product and so
that people can just bring in what they want. And the last thing that I want to say is that
the core editor is codemirror, which is a separate project which is something that we
are also actively contributing to. Okay. So enough talk. Let's take a look at it.
In fact, you actually have already seen it, so this is brackets. I was using it earlier.
It's a very simple editor. I mean, I have my files over here on the left, I have my
code here on the right, and I can hide my files. You know, I have some menus up here.
These are actually temporary. These menus are going to become native menus. They are
just in here temporarily. But this is it. I mean it's a relatively straightforward and
simple experience, simple UI. And the point of brackets is to really sort of get out of
your way. And it's to sort of break down the barriers between what it is that you intend
to do and actually doing it. So if I'm looking at this piece of text right
here and I decide that I want to make some kind of a change to it, let's say I want to
tweak the line height of this text, then the first thing that I have to start doing is
dig through a bunch of CSS files, right? And, you know, I have to look at, you know, I have
to look for selector vision, I have to look for this ID, I have to look for main content
or maybe article, I have to look for, you know, maybe a container and I have to try
and find where, you know, which styles are actually applying to this piece of text. And
if this is a big project, I could have a dozen CSS files, right?
They could be hundreds of lines long and it could be a real pain, right?
So as I'm foraging sort of around looking for these rules, I'm not programming, I'm
not doing what I'm intending to do. It's affecting my productivity. So instead what I want to
do is I just want my editor to do that for me. I want to hit command E, I just want to
hit a keystroke and I want to have my editor do that for me, right? I want to have it bring
up this editor right here. This is an inline editor, and it's telling me exactly which
rules apply to where my cursor was. If it's multiple documents, it will show me the different
documents right here on the right and I can just pick the right one.
And I can go down here and I can make a change, so maybe I change this to 33 -- now, this
isn't just a few or perspective of my CSS. This is an actual editor. You can see I just
made a change and now it's this file is marked as dirty here and here and I can hit save.
So I have saved it. I have actually edited the document, the CSS, inline, directly in
context, which is really nice. But it's not enough just to be able to edit
the CSS. We actually need to be able to see what we're doing and see how it's affecting
our document. So I'm going to go up here and click on this lightning bolt, move this over
to the side, and look at this, I'm going to bump up the font size. It's awesome.
[ Laughter ] [ Applause ]
>>Christian Cantrell: Well, thanks! Thank you.
And then I'm going to put my browser over here on the left and I'm going to go back
down to this paragraph that I was talking about before and I'm going to open up this
editor, and go down to the line height, which is what I intended to do and I'm going to
start tweaking the line height. You can see that it's changing there on the
left, right? Let me do something a little more dramatic, let me really change it. So
while I'm actually changing it, I'm seeing what I'm doing, right? Which is going to make
my workflow much more efficient. Maybe I want to change this margin down here a little bit.
So while I'm coding I'm actually seeing in real-time what's going on here and I can just
save it. Now, you -- you might be accustomed to doing
this kind of thing in -- in something like the -- like the WebKit devtools, right? Where
you are able to tweak your CSS, but the problem with that is that you are not doing that inside
of your editor, so you make all of these changes and there's no way to capture them back to
your source files. Let me make this full screen, bring my files
out here and bring up my index page. Now, this also works with JavaScript, too.
So I can scroll down to, you know, some function, function call here, and drop my -- drop my
cursor next to a function here. If I don't remember the method signature, the function
signature, I can just hit command D, it brings up another editor, I can read the whole function
so I know what's going on. Hopefully it's documented. In this case it's not. But you
can see how, you know, how brackets is really designed to get out of your way, to break
down barriers, to let you do what you intend to do and, you know, get your features implemented
as quickly and smoothly as possible. Brackets is available now. You can start playing with
it. You guys can start adding features, fixing bugs, et cetera and we'll have the URL at
the end of the presentation if you want to learn more. So those are the things that Adobe
has going on around text, around Web development workflow and some things we have going on
around tooling. We also have a lot more going on that focuses more on graphics and for that
I'm going to turn it over to Vincent. [ Applause ]
>>Vincent Hardy: Thanks, Christian. Yes, I'm going to talk about graphics and cinematic
effects for the Web. One thing that I want to point out is the tool that we're using
for the presentation is actually, you know, it's not a keynote or not a PowerPoint or
it's not one of the presentation tools. It's actually Chromium. Slightly tweaked version
of Chromium, but it's a Web browser running full screen and the whole presentation is
written with HTML with actually a library called (indiscernible) but all of the slides
are put together using HTML, so we're doing this in part because it's possible, of course,
and also in part to test out all of the things that we're working on and the type of new
effects that we're trying to bring to the platform or that are already available on
the platform. So I'm going to start with an example. So
what you're looking at here is actually an SVG image embedded into an inline HTML document,
that's something that you can do today. It has a drop shadow, which is an SVG filter
applied to it, it's very subtle, so you might kind of see it around the edges of the logo.
And it has a gray scale filter applied to it as well. And when I hover on it, the gray
scale filter gets animated and the -- to restore the colors and you saw this kind of flag animation
happening on the content. So this is using all kinds of filter effects, I will talk about
the different kinds of filter effects that are applied here and how you write this. Another
thing that's more subtle on this is the -- is the -- is happening in the interaction of
the SVG MH with the background, you can see there's a slightly textured background and
the image actually blends in the background in a way that you have not seen before. This
is not opacity. This is actually a blind mode. And we're combining and having interaction
between the logo and the backdrop. How do we do this traditionally?
So -- oops. Okay. All right. So traditionally, this is
done with -- with authoring tools, so we do this with tools like Photoshop, we do with
tools like Illustrator, or GIMP, we do this with tools like After Effects. Those tools
combined let you create better graphics, that let you define complex vector effects or filter
effects or let you play with, you know -- you know, measures of coordinates in a space to
do effects like flags. How do you do this on the Web platform, though?
So this is coming to the Web. The way it's coming is through a number of filter effects.
We have -- we have -- at the bottom in gray we have the text shadow and box shadow, and
I have a glitch in my rendering here. I apologize for that, but so text shadow and box shadow
are kind of the ancestors of the modern filter effects that are coming. They can do simple
things, but they are available, and they can be powerful.
And we have the new filter property, and that starts to be implemented in -- in the browser
and starts to being -- using the browser. If you've seen the keynote this morning, the
Cirque du Soleil demo was using filter effects and they are now in Chromium and WebKit as
well, they are also in IE for -- for scale or vector graphics. The way you use filter
effects is in one of three ways. The -- this is one to start with is probably filter graphs,
those are filter defines as a set of nodes that you can combine to create the effect
that you would want, very much like you would do in a tool. The second way is through shorthands,
so filter shorthands are shorthands for filter graphs. So there are some filter types that
are, you know, very common that you might want to use. And instead of repeating the
same filter graph over and over again, the specification provides the shorthands for
those. And then the third way is custom filters or
shaders, which gives you the full power and full access to the power of the GPU. It's
a new proposal. It's being standardized right now and this is what does the GPX like the
waving effect that we saw. So the first -- the few effects about what's
possible today. This is just playing with text shadow and combining multiple text shadows
of different colors. You can do a neon-like effect and when I hover on it, I get a nicer
glow. It's very simple, and it's just combining CSS animation and the filter property. The
tech shadow property, sorry. Similarly you can use a box shadow, so the box shadow will
apply, (inaudible) of tech shadow, but to the box, the CSS box, and we can use it for
example, to track the user's attention on, you know, where the text entry currently is,
so here I have, you know, laser saber effect on the text entry, and that helps the user,
that helps the usability, and so it's pretty pleasant visually. So these are available
today and people start using those on Web pages. Now, let's turn to the new filter effects
and the ones that are starting to be available now. The -- the easiest way to use them is
with shorthands, so if you'll look at the way you would write this in your CSS, you
would just add the filter property, you would say colon, and then you'll invoke one of the
filter functions, so if we do this on this original image, and apply, for example, a
gray scale filter, I just have to say, you know, filter, Colin, gray scale one, and that
applies a full gray scale filter, and one of the beauties of this is that I can vary
the parameter in the gray scale function and that can be subjected to CSS animations and
CSS transitions making it extremely trivial to write, say, hover effect where, you know,
the image will go from gray scale to full color on hover. There's a bunch of those effects,
not going to go through all of them, but you can see that visually they provide, you know,
already a pretty nice variety of things you can do. Now, the -- oops. Having problems
with my navigation. Sorry about this. As I said earlier, the shorthand filters are actually
shorthands for filter graphs, and filter graphs come from SVG. They are now being applied
to not just SVG element, but all of HTML, and I'm going to show you something that traditionally
you would do in Photoshop, remember, you know, many years ago I used to read those books
called Photoshop Wow! books, and there was one edition for each version of Photoshop,
and they would explain how to do those, you know, the combination of filter effects to
do something like a chiseled gold effect, and the way you would put this on your Web
page is you would do it in Photoshop, you'd do export this as a PNG or a JPEG and then
insert that into your Web page. Well, now, you can design your filter, but you don't
have to, you know, export as a PNG, it can still be text, so here I'm going to filter
a piece of text, which means that my content remains searchable, et cetera, and accessible,
and I can toggle that, you know, nice gold chiseled effect. And also since this is all
declarative and it's done in markup, I can manipulate it -- I can manipulate it dynamically
in JavaScript, so here I've done something, you know, fairly simple. I hooked up one of
the lighting filters in this filter graph to the position of the mouse, and as a result,
when I move the mouse, the light seems to come from a different direction, so that's,
you know, pretty nice flexibility. So, you know, maybe you're not putting, you know,
chiseled gold on your page that often, but something that's more common is something
like this, curve shadows. So curve shadow is something you see on a lot of Web pages
today, and the way it's implemented, right now in the best case, because there are sometimes
horrible hacks, but the case use before and after elements boxes that are moved to the
side of the box and they're rotated, and they have a background box shadow on them, but
this is, you know, a little convoluted, this is really visual effect and belongs to filters.
That turns out to be fairly simple to write in -- as a filter graph, and also the nice
thing about it, it's very easy to remain place for script or CSS, so here I can just manipulate
one of the parameters of one of the nodes in that filter graph and have varying effects.
So to give you a feel of what this looks like, here is a little code sample, and the thing
that is important to note here is that I'm not going to go through all the details of
that filter graph, but things to remember are you have a filter element, that's the
top element here in the light blue color, and that's what you would reference from your
filter property, so the filter property will point to it, and then you have a number of
filter nodes that you can arrange and combine. They each produce a different effect. And
at the end of the filter you can combine and arrange those effects and stack them up in
the way you want. So that's very similar again to what you would do in an authoring tool,
and all those operation and combinations can be captured in the markup, and the nice thing
again is that since this is markup, this is part of the DOM, and the DOM is accessible
for scripts, and you can make it all dynamic. So now let's move to the last type of shaders.
So since the shaders are used for the filter function again, except that you're using a
new syntax for the value, instead of having a shorthand or pointing to your filter graph,
we use a custom function. Before we dive into this, this is what the kind of things it does,
so here you see when I hover, I start applying a filter -- custom filter effect and the two
things happening are first the rendering is distorted, it has this nice curvy effect applied
to it, and that's what vertex shaders do, so this is about distorting geometry and moving
vertices around, and the second thing you can notice is there's a fairly subtle effect
-- shading effect on the rendering, so the original element that we're filtering is all
white, and here you can see there're shades of gray, and that's what (inaudible) shaders
or pixel shaders do for you. The other thing that you mentioned is, you know, shaders run
on the GPU, so this is, you know, usually very fast. So the model says the shaders is
that -- the conceptual model, when you use it, you want to author it or just use it as
a shader, is that think of it as your content being rendered into an image, and then a mesh
of points or vertices is mapped on to this offscreen rendering, and what the vertex shader
lets you do is manipulate those -- those mesh points, or mesh vertices in a 3D space, and
that gives you the ability to do all kinds of, you know, extremely beautiful distortions
in a 3D space. And that is the end of step 2. That is what the vertex shader produces.
And then the last step is that you can manipulate pixel values, so once you've distorted the
geometry all you want, you can then apply the values on the pixel colors, and more precisely
can produce pixel colors that will be combined with the rendered content. So let's look at
how to use shaders step by step, so again, very simple, use a custom function, and you
pass parameters to it. If we zoom in to what the parameters are, the only required parameter
is the vertex shader. This is the only thing that's required, so if you want to just pass
the vertex shader, that's fine. There's an optional parameter which is a fragment shader
that will manipulate the pixel values, then you specify the vertex mesh. The vertex mesh
is the granularity you want for, you know, how many points you want to be able to manipulate
that will be mapped on top of your rendering. Depending on the effect, you may want more
or less of them. And then finally, and this is very powerful, you can pass parameters
to vertex shaders, and those parameters can then be animated through CSS transitions and
CSS animations, sorry. All right. So let's look at step by step,
if I use only a vertex shader and the size of the vertex mesh, here is how it looks,
on the left-hand side is the thing I want to filter. On top of it I've drawn the vortex
mesh or something that symbolizes the vertex mesh. This little gray square represents the
vertex mesh, so I've asked for a vertex mesh that is two rows and two chums, so I have,
you know, nine vertices to manipulate, and now on the right-hand side you can see that
all of those vertices have been moved -- have been moved by my vertex shader, and as a result,
I get this distortion that gives the impression that my element has been folded in two. Now,
what if I wanted to do something a little more sophisticated and give it a little more
realistic look, like if I wanted the thing to be darker at the -- you know, where the
fold happens in the center, and just regular coloring on the edges. Well, that's when I
would use -- start using a fragment shader, so here I've added this fragment shader, and
what the fragment shader does is that it looks at the current core unit of the rendering
and will produce a darker value in the center and a lighter value on the edges, and this
gets combined with the rendering and provides this very nice shading effect. And I mentioned
earlier that passing parameter was -- was a useful feature and a powerful feature in
shaders, so here we have the same -- the same shaders we had in the previous example, the
one fold, and the vertex shader and the fragment shader, but I'm now passing a parameter that
controls the amount of folding I do, and the more I fold, the more -- I mean, the bigger
the amount, the bigger the effect, and the bigger the shading in the center. So since
this can be, you know, manipulated through scripts, I have hooked up a little slider
here, and if I go to the left, I'll have less of the effect, and you see what -- how the
code changes, and if I move to the right, I'll go to the full extent of the -- of the
effect. And there's no limit on which parameters you pass and the type of parameters, the sophistication
offers a wide variety of parameters, you can pass, you know, matrices, colors, transforms,
all kinds of things which can then be manipulated through CSS and scripts as well, so it's pretty
powerful things, and this is a simple example but I'm hoping people will do real crazy things
with the feature. I want to give a little taste of what the code looks like. The syntax
and the language that's used for writing those little programs that will act on vertices
or on pixel values, the language is GLSL, so it's the same language that is used in
Web GL for when you write shaders for Web GL. The vertex shader, at the end of the day,
if you look at line 13, that is what a vertex shader does. The main function of the shader,
which starts on line 7, its whole role is to compute a GL position, and that's basically
how you want to displace the vertex that's being processed, and it's called once for
every vertex. So if you want to learn more about GLSL, you know, there are a lot of poll
documentation on the Web for Web GL, but also for open GLES, because that is the same exact
language. It's -- you know, it's seal like. It's a little different. But it's not that
hard, and there's lots of examples to start from. Fragment shaders or pixel shaders, similarly
it's the same language as for GLSL. There's a slight difference -- actually not that slight.
There's a difference with regular fragment shaders using Web GL or open GLES is the output
of the filter is not a GL frag color. If you're a graphic expert, you're familiar with that
value, which is the typical role of a fragment shader. In our case, and for security reasons,
what we produce is a pixel value that is then combined with the rendered output. There has
been a lot of work done on making shaders secure, and the result of this was that with
this modification we don't give access to the rendered content to shaders, and as a
result they are safe, and they can still do all the, you know, the use cases that we've
talked about so far. Now, we don't expect people to, you know, write as many shaders
as they will use shaders. We expect that, you know, we'll have, for example, we plan
to provide shaders that people can start experimenting with. We expect that experts will write nice
shaders with a set of well documented parameters that a lot of people can use, and one of the
things we've started to think about is, well, how can we make it easy for people to configure
a shader the way they want and make it look exactly right?
So this is what the CSS shader studio does, and I'll show you a few example of that--
of that tool. So here we're in this prototype tool. It's not a -- it's not an application
or a tool that, you know, we would sell or anything. It's a demo tool. And on the left
hand side you have a set of shaders. When you select one, you -- the user interface
provides you the parameters that you can configure for the shader, so those are -- if you remember
the syntax, the parameters you pass at the end of the custom function. In the center
you see a prototype like rendering that's affected by the shader, and at the bottom,
there's a time line that lets you animate the different values for the shader. So, you
know, before the presentation I prepared one on the -- this warp shelter we have, and I
set it up so that, you know, at time zero I've set up the, you know, the warp the way
I wanted with this little UI that lets me move the vertices visually, and the end of
the animation is restored to its state. Now, if I run it, you know, I will have kind of
a transition effect that -- I may want to put on my Web page when I'm shoring up UP's
of information, for example. There's all kinds of different effects you could do. Scroll
is one of my favorites. If I go back here, I pre-define it, if I move the roll ratio,
for example, I can do the effect I want, and again if I run it, it's going to, you know,
show me a preview of this type of effect I might want. I can also do things like shuffling
tiles for example. Here, where -- when I move, I can -- I can kind of explode the content
and that's because when I move the vertices of the -- you know, on the vertex mash, I
have the option of keeping them attached in which case it's like moving a -- distorting
a piece of rubber, but I have also the option of having detached tiles or detached, you
know, tiles on the rendering. And if I have many of them, I can have a nice protocol effect
like we're seeing here. So the idea here is to make it, you know, a visual experience
for, like you do when you're trying to create a grayed-in, except it's a little more complicated
in this case, and the tool will provide, you know, the nice syntax that you can just cut
and paste into your CSS page, your CSS file, and if you want to do the animation effect
itself, you can just grab it here, we export the exact syntax that we need to go into the
CSS file again. So hopefully that type of, you know, visual tool will help. You know,
people start using the feature, and make it painless, and visually interesting to create
them. So this tool is not yet available, but we're planning to make it available later
this year so that people can -- can look at it, and experiment with shaders easily. All
right. So another effect or visual effect that we're working on is around texturing
and blending. So blending is something that's very common in graphic packages, like Photoshop
or GIMP. The idea of texturing is to control how what you draw blends or mixes with where
you draw, so you draw something, and you want it to interact with the backdrop. So currently
we have opacity, so if I use opacity on the menu like this, like at my "home, about, products"
menu, I use opacity and I kind of see the background behind, and that's nice, but it
makes it a little washed out, and it's not quite what you want. It's not quite what graphic
designers want, because they're used to those nice blend modes that they have in tools like
Photoshop again. We're working on a new proposal -- it's actually not that new proposal, it's
a feature that has been in SVG for awhile, but it's now being brought to the larger CSS
and HTML, and it's CSS compositing and blending, and it can do things like this, so now what
I've done is I've turned on blend mode, it's a (inaudible) mode, and the blue that I have
now interacts in a different way with the background, and just to show that this is
not just images, you know, the way people do this kind of effect today on the Web is
that design it in Photoshop, they export a bunch of images and then they put it on the
-- on the page. Here I have the CSS animation on the color, and you can see that the color
animation happens and produces a new rendering for the menu item, and that gets blended in
with the background. I didn't have to scrub a thousand bit maps to do so. Using, you know,
blending and compositing is made with two properties. It's extremely simple. I have
two small demos. So what you see here in the backdrop is what we're drawing on top of,
and we're drawing this yellow bar on top of those three elements. The way you specify
it is very straightforward. You have an alpha compositing property, and by default it's
source over, so a bit of a technical term; that just means draw what I draw on top of
the background. And that's -- you know, so far that's no surprise. But I have a bunch
of options and, you know, I can say I just want, you know -- sorry. Destination over,
for example, will draw what I'm drawing behind the backdrop. I can do source in, dust in.
There's a bunch of different effects that you can use that will combine in different
ways with the background, so that's the first of two properties. The second one is blend
mode, so again, if I'm trying to combine foreground and a background in various ways, I just use
a blend mode property, and by default it's normal, meaning that the colors don't interact.
But I can change it to something like plus, multiply, you know, color dodge or difference
and have various effects, and those are exactly the ones that you would find in graphic packages
today. [ APPLAUSE ]
>>Vincent Hardy: Thank you. So, so far we've proposed all this and worked with the community,
the working groups in (inaudible) to bring this to CSS. We're working on possibly contributing
this or proposing this for canvas as well, and we've done a prototype of this I'll show
quickly. It's in -- this is really blending edge prototype we've done in FireFox, nicely
build in FireFox, and what you see is basically the same concept in canvas. At the bottom
of the screen here, we have the -- the code. I'm drawing two images, and the first one
is the background, which is a visual canvas, then I change the compositing operation to
be an overlay -- sorry, a multiply mode, blend mode, and I then draw this kind of colorful
graphics on top of it, and I get this better, nicer integration with my background, so this
is something that's, you know, again (inaudible) but we're considering offering this property
for different graphics model than canvas is. All right, so, the things we talked about
today is that the -- you know, the world of the Web developers and of creators has been
intersecting, you know, there's been features, but there's not been that many of them in
the past, and we're trying to increase that intersection between the two so that there's
a lot more happening on the Web and a lot more features available to developers, so
this is really the area we're focusing on now is, you know, trying to make this area
larger and try to provide more tools for this area, because we believe that if we do this,
we'll have a lot more exclusivity on the platform, meaning that you can express a lot more in
the markup in your CSS, or your HTML, that will make everybody more creative, and we
think there's an opportunity for a new generation of tools and new, you know, new ways of interacting
between creators and developers. So thank you very much for your attention. And if you
have questions, we are probably going to be able to take one or two, but we can also talk
after the end of the sessions. Thank you very much.
[ Applause ]