Adobe Fireworks CS6 -jQuery mobile theme skinning support
Primary Language: English
Create a new jQuery mobile theme, review the global assets and styles available, including the "instructions on how to create mobile themes" page, before previewing and exporting the theme.
My Recent Work
You did not do any work on this video
Information Tags
Timing Category Subcategory Tag
No Information Tags Available for this video
Subtitles in: English
Start End Subtitles
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.
Copy and paste the embed code above
Copy and paste the embed code above