Click on any phrase to play the video from that point.
HTML-5 and other web standards have really given designers and developers
the ability to create some really dynamic content that works across devices.
Let's take Dreamweaver CS6 for instance. You have this new fluid grid layout
allowing you to basically have a grid setup for each device. So whether it's mobile tablet
or desktop, you can quickly set up a CSS grid system. In fact, I'll just call this one Grid.
And you can see it right here. Now notice this div actually says that you can insert divs
from the Insert panel. So over here on the Insert panel, you can insert additional divs,
as you can see here, and I could call this Nav, something like that, and now I have 2.
And the power of this is I'm able to resize this div to make it maybe 2 columns, okay,
and this is for the mobile layout, okay? So this is the CSS for the mobile layout.
I can click to Tablet. Notice how that's set up that way. So I can adjust this
per each device, and then we have the desktop as well. And what's great
is what you're doing is you're actually modifying this grid CSS.
And you can really basically use that same HTML content and a different--
apply basically a different look using CSS, and it will actually scale well across these
different devices. Another thing you can use if you go to File, New, you have the ability
to go to Page from Sample and use the updated jQuery mobile framework.
These are touch and UI-based interactions that you can add as well as a whole
framework that you can use for a new mobile-specific site.
Not only that, I will select this last one which gives you the ability to ultimately potentially
output it to PhoneGap, and I'll show you what that means in a second.
But you can see if I select Live View, you can see that this is already set up as
a mobile-specific website. And from there, you can use PhoneGap Build to actually
build your own separate project that basically makes this an app.
So it's really powerful what you can do in Dreamweaver. But I want to go beyond
Dreamweaver. I want to actually jump into Flash, because since we're talking about
web standards, you're probably wondering, well why am I opening up
Flash Professional CS6? Well what's available in here is we have this extension.
It's the Toolkit for Create JS extension. So check this out.
I can take something typical like this. It happens to be like a banner ad,
and from here typically I'd export out an SWF file. In this case, I would just go ahead
and target a folder on my desktop, and then click Export. This is awesome,
because if I click that it actually takes my--what was once my Flash content and
makes it HTML content, as you can see right here, and this would play fine
on an iPad or any sort of mobile device, iOS or Android. So this is really cool
sort of extending your skills from Flash to HTML. It's really exciting.
Also part of the Creative Cloud is a new product. It's called Adobe Edge.
And what it allows you to do is create cool animation and interactivity
for web standards. So it will output HTML, CSS, JavaScript--really cool.
In fact, let's just take a look at it right here. And what I have going on here is,
sure enough you guessed it, some animation. I am just kind of scrubbing
through the timeline. It's pretty easy to add animation. Say, for instance, if I wanted
to animate this object in, I could maybe push it off initially, and you can see as I've
pushed it off it gives me this X and Y--these key frames is what those are.
And then I can scrub in about right there, and then I can move it into position
just like that. And as I do that, it builds this tween. Pretty easy to use. You can see it
zip in, and then it will stop there. Beyond that you can insert triggers, and triggers are
basically JavaScript that you can add, and you can even use any of these snippets
over here on the side to add any of that functionality. But from there, again this is
HTML content, any sort of web-standard content, which would be HTML, JavaScript,
and CSS to drive this experience. But from here I can go ahead and preview this
in a browser just to get an idea of what the final experience is like.
And the animation that I just worked on is on the second frame. You can see
everything slide in, and then there's those spools. So Edge really enables you to
create some powerful experiences. It is actually available as part of the
Creative Cloud as well as the other products that I talked about. Really cool, sort of
taking your current skills, hitting not only new devices but having your content
scale across many devices. It's really powerful. I encourage you to check out
Creative Suite 6 as well as the Creative Cloud.
