Google I/O 2012 - Chrome Sandbox Part 1

DANIEL SIEBERG: Hi there.
I'm Daniel Sieberg on day two of I/O Live.
And we are in the Chrome showcase, joined right now by
NJ from Adobe to talk about a couple of really cool projects
that you've been working on, Shadow and Brackets.
Which one do you want to start with, by the way?
NJ JARAMILLIO: Let's start with Brackets.
So Brackets is a free and open-source code editor for
front-end web development.
So it's built in HTML, CSS, and JavaScript, and it's for
editing HTML and CSS and JavaScript.
So if you're the kind of person who can use Brackets,
you do front-end web development all day, you can
actually contribute to and extend Brackets because it's
an open source project.
So I'm going to go ahead and launch it here.
And you can see that although it's built-in HTML, we're
currently packaging it as a desktop application, mainly so
that you can edit the files on your local hard drive.
And we're actually using a Chromium-based shell.
So that's one of the ways that we're using Google technology
to help with the project.
So you can see that this is actually the
Bracket source code.
By default, Brackets opens editing it's own source code--
it's kind of this conception thing.
And you can see that it's got the standard color coding and
other things that you would want in a text editor.
Now, it's not totally ready for prime time yet.
We've only been working on it for a few months.
But because it's open source, we're hoping that the
community can jump in and help make it better.
And a couple of the ideas that we're seeding, that we think
are a little bit innovative about this, that you might not
find in a more generic text editor, are focused on
front-end web development.
So for example we have this idea of quick editing.
So here I've got a tag for Body, and let's say I want to
tweak the styles for that.
I can just hit a Quick Edit key, and we find the rules
that are relevant to that tag.
And then we just bring them right in to here.
You can tweak them quickly, and then just dismiss the
editor really quickly.
So you don't have to jump around between files a lot.
Or if I've got a tag that has a bunch of rules applied, I
can browse between them.
DANIEL SIEBERG: Very cool.
So it's all about making life a little easier and more
efficient when you're working with code.
NJ JARAMILLIO: Exactly.
And then on top of that, we have this idea of live
development.
Again here, we're leveraging the Chrome Developer tools.
Now, normally when you use the Chrome Developer tools or
other kinds of in-browser tools, you're kind of poking
at stuff in the browser, and you're copying and pasting
what you want to do back into your code.
But here we've actually enabled it directly from your
code editor.
So if I'm here in my real code, this is my actual source
code, and I go and I start typing, you can see it updates
the color--
DANIEL SIEBERG: It's reflected in the browser [INAUDIBLE].
NJ JARAMILLIO: Exactly, exactly.
Or If I want tweak the margin between these guys here, oh,
they're a little too tight, I start typing
a new margin value.
And as I'm typing I can see, oh, that's too big, oh,
that'll work nicely-- so I have this really live
development experience.
DANIEL SIEBERG: That's really cool.
All right, let's move on to Shadow then and see what
that's all about.
NJ JARAMILLIO: OK, that's great.
So Shadow is really aimed at, again, speeding the workflow
of mobile web development.
So a problem I have a lot is I'm working on a mobile
website, and then I have to go to all my different devices
and check out what I did, and I have to go and refresh, and
all this all this kind of stuff.
DANIEL SIEBERG: See how it looks, of course, which is
very important.
NJ JARAMILLIO: Exactly.
Shadow makes it really easy to just do it
all from your desktop.
So I've got this little shadow extension.
Again, it's built as a Chrome extension.
And you can see that I've got all my devices connected here.
So now let me go to a website like the Boston Globe website,
which is well known for being a good,
responsive design website.
And I go there.
And you see, as soon as I go here it starts to refresh on
all my devices.
I don't have to touch them at all.
DANIEL SIEBERG: I don't know if folks can see that here,
but it is on all of these devices.
It happened almost simultaneously.
NJ JARAMILLIO: Exactly.
So I've got my iPad, I've got my brand-new Nexus 7 here--
plug--
and all that stuff.
And you can see that as I navigate around, it's
following what I'm doing.
So it's literally shadowing what I'm doing, which is where
the name comes from.
And so this is available as a free download right now, as a
preview release on Adobe Labs at labs.adobe.com.
DANIEL SIEBERG: Very cool.
And so, any learnings that you want to pass on to other
developers as you work on both of these projects?
NJ JARAMILLIO: Well one of things, especially for
Brackets, is we found that some people say things like,
is JavaScript a robust enough language for doing this kind
of web development?
And we found that actually, you can build a high-quality
performant text editor with file access and all this kind
of stuff, built directly in JavaScript and CSS and HTML.
And we've learned a lot by doing this project, and we
also want to hear from people who are much more experienced
developers than us.
Take a look at our source code.
We're on GitHub, github.com/adobe/brackets.
You can come, fork the code, make a pull request, build
extensions.
We really want the community to contribute their own ideas
to it, because we think it's really going to be a great
platform for text editors for web development in the future.
DANIEL SIEBERG: All right.
I love that collaborative effort.
NJ, thank you so much.
We appreiate it.
NJ JARAMILLIO: All right.
Thanks very much.
DANIEL SIEBERG: OK.
We turn now to the guys at Autodesk.
And I'm sorry, Randy, I forgot to bring my 3D glasses.
Is that going to be all right?
Can we still check this stuff out?
RANDY YOUNG: Yeah, we have things in reality here, so
you'll be fine.
DANIEL SIEBERG: All right.
Well, so we're talking about the ability to share and view
files from a desktop to the cloud.
Walk me through what you've got.
RANDY YOUNG: OK.
So I'm here to talk about Autodesk 360, which is our
cloud offering to enable our desktops to share
over mobile and web.
And so what we did here for Google I/O is we connected
into Google Drive through a Chrome map, to display large
files in the web browser.
DANIEL SIEBERG: And so some of these are 3D objects that
normally would be very difficult, if not
impossible to view?
RANDY YOUNG: Yeah.
So without the desktop apps, just until recently, you
wouldn't be able to share these files at
all over the web.
So we actually created this WebGL plug-in that will allow
you to view large-format files on the web browser.
DANIEL SIEBERG: All right.
Let's have a look.
RANDY YOUNG: OK.
So what we did was you can get in through
adding the app to Chrome.
And then through Google Drive you can actually share files
with people that don't actually have the desktop app.
And through the plug-in they can see these large models,
and even click on objects and highlight and get metadata
inside of the objects.
So it's really enabling people to see their designs and share
their designs with people that don't necessarily have the
desktop apps.
DANIEL SIEBERG: That's fantastic.
Great.
Anything else you want to mention real quick?
RANDY YOUNG: Just go visit us on 360.autodesk.com.
DANIEL SIEBERG: 360.autodesk.com.
All right.
Randy, thank you so much.
We're going to move on now and talk to Michael, who's got a
demo for us here involving the ability to capture objects
using a camera on a different device, and then get this
mesh, and finally print it out through a 3D printer.
Walk us through this.
MICHAEL BEALE: That's right.
We've got a video playing in the background here.
And it's an example of Chris here, taking photographs of a
flower that he's seen in the market.
And he's reconstructing a 3D mesh from all the different
camera angles.
It's a product we've given to the
community called 123D Catch--
something that you can get on our website if you go to
123Dapp.com.
Once you've taken those photos and you've reconstructed the
mesh, you can print them out through cardboard cutouts.
So if you've got some paper and scissors you can cut out
these little templates, use a Chromebook.
It's a WebGL app, so it's accessible by lots of
different browsers, et cetera.
DANIEL SIEBERG: And you've been working with the folks at
MakerBot, I see.
MICHAEL BEALE: Right.
The tech shop guys, with their laser cutters.
We tried out some of these ideas.
And we've cut out, here, a Tyrannosaurus Rex with
cardboard using some laser cutters.
Using that same 3D mesh, we can also
send it to a 3D printer.
So this is one of the MakerBot 3D printers.
And we've been demonstrating here at Google I/O how we can
print out something like a little
owl made of PVC plastic.
It takes about half an hour to print one of these out.
But it demonstrates for the consumer market that they can
get something from taking a photograph and bring it all
the way to something that they can prototype very quickly.
DANIEL SIEBERG: A tangible object.
MICHAEL BEALE: Yeah.
DANIEL SIEBERG: That's amazing.
All right, any lessons you want to pass along as you went
through this project?
MICHAEL BEALE: I think if I could probably give something
back to the developer community, I'd say, keep
pushing for WebGL and the open standards.
We're trying to move all of our desktop things to give
them reach.
So WebGL's a great standard to push forward.
DANIEL SIEBERG: Extremely powerful.
We'd love to see wider adoption of it, of course.
MICHAEL BEALE: That's it.
DANIEL SIEBERG: All right.
Well, are you going to play with your models here as we
say goodbye?
Is there anything else?
MICHAEL BEALE: We'll probably print a few more out for you.
DANIEL SIEBERG: Print a few more out?
OK, cool.
Michael, thank you so much.
We appreciate it.
MICHAEL BEALE: Pleasure.
DANIEL SIEBERG: All right.
For this segment I feel like I should be doing a cartwheel in
or something more dramatic.
We're talking about Cirque du Soleil and we're joined by
Chris from Subatomic Systems and Justin
from Cirque du Soleil.
I'm really excited to see this demo, so maybe Chris, can you
talk me through what was involved with
putting this together?
CHRIS WEBB: Sure.
So Movi.Kanti.Revo is an interactive journey that takes
the user through an imaginary world of beauty and awe and
wonder, and is designed primarily to engage the
person's imagination and evoke their emotions.
And it utilized the latest web technologies that are
supported by Google Chrome to do this.
So the experience itself, which we have here, is a
preview for Google I/O. And the full version of this will
launch in September.
DANIEL SIEBERG: Now I'm going to get you to walk us through
the demo while Justin, you talk us through the narrative
of what's going on here with the Cirque du Soleil theme.
So can you go ahead and walk us through?
CHRIS WEBB: Sure thing.
DANIEL SIEBERG: So Justin, go ahead and describe what we're
seeing here.

JUSTIN GILBERT: So we started with the experiment.
So we see the immersive world.
And actually you see the girl.

DANIEL SIEBERG: What is she doing here?
CHRIS WEBB: This is our guide.
And here at the intro, at this stage she's showing the user
how to interact, to navigate through the experience.
DANIEL SIEBERG: Because obviously there's no menu that
comes up or anything like that.
CHRIS WEBB: No, there's no menu that comes up.
DANIEL SIEBERG: But you can interact with it in ways that
you wouldn't expect, necessarily.
CHRIS WEBB: Correct.
Yeah.
This interactive experience utilizes getUserMedia to
recognize the user's face and then detects movement of the
user to actually navigate through the experience.
So there, the guide is showing us if we lean
left, it moves left.
If we lean right, it moves right.
If we look up, down, the camera moves accordingly.
DANIEL SIEBERG: Now can you walk us through some more of
the sequences here?
CHRIS WEBB: Sure.

She's about to come back.
OK.
DANIEL SIEBERG: Oh, I hear her coming.
And what's the overall goal with this, Justin, in terms of
the user experience and getting into that Cirque du
Soleil world-- which people know maybe from watching one
of the performances, but online, what's the hope in
terms of terms of user experience?
JUSTIN GILBERT: Yeah.
Basically when you see a show we put people on the edge of
their seat because we want people to
connect to their emotion.
And what we want to achieve with this kind of application
is just to reproduce this in the interactive space.
DANIEL SIEBERG: There she is again.
OK, so what's she doing here?
CHRIS WEBB: This is one setting in the journey.
Again this is a preview, so we're getting an abbreviated
experience.
And then the full experience that comes out in September
will be a beginning to end journey that takes us through
a number of settings within this imaginary world.
And here, our guide is about to take the leap of faith,
which will take us to the next setting.
And as a user, you actually follow her as
she takes the leap.
DANIEL SIEBERG: And you can control some elements of her
experience as she's going through this?
CHRIS WEBB: Yeah.
In fact, I'll use a keyboard here for the demo purpose to
show you how the user, if they move left or right, can
control the world--
DANIEL SIEBERG: Wow.

CHRIS WEBB: --and actually move through it.
So you're literally traveling through the world based on
your movements.
DANIEL SIEBERG: Wow.
That's awesome.
Well, Justin from Cirque du Soleil, and Chris from
Subatomic Systems, I know you guys have worked
really hard on this.
And I think that a lot of folks are going to be excited
to try it out.
Thank you so much for giving us a little preview.
I'm going to cartwheel out of here and move
on to the next one.
Thanks, guys.
JUSTIN GILBERT: You're welcome.
CHRIS WEBB: Sure thing.