| 00:00:08 |
00:00:13 |
Fireworks CS6 supports jQuery mobile,
which is a framework for developing |
| 00:00:13 |
00:00:18 |
mobile optimized websites using
jQuery to compensate for all |
| 00:00:18 |
00:00:20 |
the different platforms so you don't
have to dial up specifically |
| 00:00:20 |
00:00:24 |
for iPhone or Windows Phone 7 or
Android or any of the Nokia |
| 00:00:24 |
00:00:28 |
platforms. But by using jQuery mobile,
you create a mobile optimized |
| 00:00:28 |
00:00:32 |
website that looks consistent across
different mobile devices. |
| 00:00:32 |
00:00:36 |
And to do so in Fireworks, you
go to the Commands menu and go |
| 00:00:36 |
00:00:40 |
to jQuery Mobile Theme and Create
New Theme, which opens up a |
| 00:00:41 |
00:00:43 |
model file based on |
| 00:00:44 |
00:00:47 |
the default settings in jQuery mobile,
which includes all these |
| 00:00:47 |
00:00:52 |
icons, miscellaneous icons, standard
res, high res icons, active |
| 00:00:52 |
00:00:55 |
buttons, icon backgrounds,
things like that. |
| 00:00:57 |
00:01:00 |
And with all these global assets,
if you look at the pages menu |
| 00:01:00 |
00:01:04 |
over here on the right, the global
assets is page 1 in the file. |
| 00:01:04 |
00:01:08 |
And then if we click down through
the file, we'll see the different |
| 00:01:08 |
00:01:11 |
primary color themes that are established
in jQuery mobile. Now |
| 00:01:11 |
00:01:15 |
you can duplicate this if you're
designing for a specific company |
| 00:01:15 |
00:01:18 |
that has a color theme or color
system that they want to stick |
| 00:01:18 |
00:01:22 |
to. You can duplicate any of these
pages by dragging the page |
| 00:01:22 |
00:01:26 |
down to the little duplicate page
icon here in the bottom, and |
| 00:01:26 |
00:01:32 |
suddenly you get a copy of A, which
you can then change the colors, |
| 00:01:33 |
00:01:39 |
modify to your heart's content.
Let's do something overt as it |
| 00:01:39 |
00:01:41 |
were. And then |
| 00:01:42 |
00:01:46 |
all the base colors that are available
in the jQuery mobile theme |
| 00:01:46 |
00:01:50 |
can be modified to your heart's
content. Then down here on page |
| 00:01:50 |
00:01:53 |
8, here are the instructions, everything
you need to know on |
| 00:01:53 |
00:01:57 |
how to create mobile themes, starting
with step 0, who should |
| 00:01:57 |
00:02:00 |
be doing this. This feature is
meant to be used by anyone who |
| 00:02:00 |
00:02:03 |
wants to design mobile website
themes using the jQuery mobile |
| 00:02:03 |
00:02:06 |
framework. There is more information
at that website link and |
| 00:02:07 |
00:02:09 |
then there are the instructional
steps, |
| 00:02:10 |
00:02:13 |
and really, it's remarkably simple.
There are three big steps |
| 00:02:13 |
00:02:16 |
but the big one for us is Preview
and Export. And you can do |
| 00:02:16 |
00:02:20 |
that in a couple of different ways.
You can go to the Window |
| 00:02:20 |
00:02:25 |
menu to Extensions, to jQuery Mobile
Theme In-App Preview, and |
| 00:02:25 |
00:02:28 |
I've got to get to a page to
do so. Let me get over here. |
| 00:02:31 |
00:02:37 |
And it launches this window which
shows us how the art that we |
| 00:02:37 |
00:02:41 |
have modified on the page behind us
looks. Now we haven't actually |
| 00:02:41 |
00:02:43 |
modified it so it looks like it
does on the screen, but if you |
| 00:02:44 |
00:02:46 |
wanted to fiddle with any of these
colors or change any of these |
| 00:02:46 |
00:02:49 |
icons, they would show
up here. And then |
| 00:02:50 |
00:02:55 |
you would go back to commands and
to Export Theme, which would |
| 00:02:55 |
00:02:57 |
give you the option to |
| 00:02:58 |
00:03:01 |
choose where you're going to export
all this stuff, and it will |
| 00:03:01 |
00:03:05 |
write out the Java Script and CSS
that you need along with all |
| 00:03:05 |
00:03:09 |
the graphic files for the application
to be used in your website, |
| 00:03:09 |
00:03:13 |
with a mobile version of your website
rather. It's a fantastic |
| 00:03:13 |
00:03:18 |
robust feature and it's a huge advantage
now in Fireworks CS6. |
