Posts tagged "mobile"

Now Available: New eBook on Fireworks’ CSS and jQuery Mobile features

Using the CSS3 Mobile Pack for Adobe Fireworks CS5

Using the CSS3 Mobile Pack for Adobe Fireworks CS5

If you’ve found yourself wondering how Adobe Fireworks can fit into your web and mobile design workflows, or how you can introduce students to a visual method of designing for mobile, I may have just the thing for you.

Today, my new eBook, Using the CSS3 Mobile Pack for Adobe Fireworks CS5, went live at http://www.peachpit.com/.

While there are already a couple good how-to tutorials available at the Fireworks Developer Center, I wanted to take a deeper, more practical approach to this new extension. I wanted to go beyond the how and hopefully address the why. I walk you through the basics, but then I move you to a realistic application of the extension. You will learn about both parts of the CSS3 Mobile Pack:

  • CSS Properties Panel
  • jQuery Mobile Theme Builder

CSS Properties Panel

In the chapter on the CSS Properties panel, for example, you’ll be doing more than simply exporting a rounded corner rectangle as CSS3 mark up; you will be taking a completed web page design and – using Fireworks and a Dreamweaver HTML5 starter page layout – building a standards-based web page, complete with navigation, semi-transparent content areas and stylized text.

Final web page design that matches the original Fireworks mock up

Final web page design that matches the original Fireworks mock up

The only bitmap in the page is the background image. And it was all done with a minimum of coding. Maybe it’s just me, but I think that’s pretty cool.

jQuery Mobile design, mocked up in Fireworks, then exported to Dreamweaver and previewed in Device Central.

jQuery Mobile design, mocked up in Fireworks, then exported to Dreamweaver and previewed in Device Central.

jQuery Mobile Theme builder

In the chapter on the jQuery Mobile Skinning, you will study and work with the jQuery Mobile template file, also part of the CSS3 Mobile Pack, and learn how to customize an existing skin and export that new mark up over to Dreamweaver to quickly create a simple, customized mobile web site.

Time-saver in production and in the classroom

Whether you are comfortable with code or not, the new tools in this extension can be a creative and time-saving boon.

A designer  can export out standards based mark up, which can be further edited and tweaked by a developer in their preferred web page editing environment. Or if the designer wears both hat, he or she can move quickly from a visual design to realizing that design in HTML and CSS. I think this is a great example of Fireworks bridging the gap between designers and developers.

And for students learning the craft of web and mobile design, it gives them the opportunity to create their design first, and then see how that design becomes converted to code. Or, depending on the design itself, learn about the limitations to be aware of when building a standards-based design that targets multiple devices.

Either way, it’s a win-win.

Final thoughts

The fact that the extension is also FREE is another bonus. I think it’s pretty cool that Adobe released this extension now, rather than making anyone wait for the next version of Fireworks.

If you’re interested in the ebook, it’s available for less than $6.50 USD at http://www.peachpit.com/. Feel free to follow me on twitter @JimBabbage. If you’ve got questions, that’s a great place to find me.

 

Fireworks Mobile Design Tip: Batch Processing app icons in Fireworks

In the previous post, I talked about using Fireworks to create multiple application icons for an Android device, and then how to export those multiple icons as individual flat files.

In this post, we’ll look at how to batch process those larger images into three different sizes, and how to automate that process for future work. The original icons were created quite large – 244 pixels square, to be exact. This made it easy to be very detailed when creating the look of the icons. And while this is useful from and editing and creative perspective, the project requires three sets of smaller dimension icons for an Android application.  Well, Fireworks excels at this type of workflow and produces very small files to boot. Continue reading…

Fireworks Mobile Design Tip: Exporting Layers to Files

In July of 2011, I presented a Fireworks session at D2WC called Wireframing and Prototyping for Mobile using Adobe Fireworks. I was so pleased to see a very full room of attendees. Even happier to note that many were not current Fireworks users.

Yes, I did say happy. The reason is simple. I want people to know what they’re missing out on. :-)  As you might be noticing, I’m a big Fireworks fan. Huge, even.

My original goal with this session was to focus on some sample prototypes and wireframes, but based on the crowd and many of the questions fired at me, I changed the slant slightly and talked more about how many of the Fireworks built-in features are designed to save you time, without sacrificing quality. Time is money as they say. Projects are quoted on estimated number of hours, so the sooner you can complete a wireframe or a prototype, the sooner you can move forward to actually wiring up the actual application, and the happier everyone is.

The sooner students can learn how to achieve optimum results in less time, the more employable they are.

As usual, I had way more content than I needed or had time to use, so I’ve posted the files (including brief slide deck, a couple tutorials and LOTS of assets) on my web site.

Aside from using Fireworks pages to mock up wireframes and prototypes, FW also has many other built-in features that can really help with any kind of prototyping, especially mobile.

A couple things I really wanted to get to in my session but ran out of time were:

  1. Exporting layers to files
  2. Batch processing for mobile

In this tutorial we’ll look at exporting layers to files.  I’ll also be releasing a new tutorial that will cover batch processing the new files created from this tutorial. Continue reading…

Adobe Acrobat Connect Pro goes Mobile.

There was some big news today for users of Adobe Acrobat Connect Pro. Adobe has just announced a new mobile version of the popular communication tool, which is used widely in education for virtual classrooms and online meetings. This new mobile version will allow iPhone and iPod Touch users access to the virtual classroom from anywhere.
First previewed at MAX 2009, Connect Pro Mobile version 1.0 is now available for FREE on iTunes. Just go to http://itunes.com/apps/AdobeAcrobatConnectProMobile to download it now.
Connect Pro Mobile was built using a pre-release of the next version of Adobe Flash Pro and was published as a native iPhone application. This is first publicly available Adobe-authored application that uses the Packager for iPhone technology. Because Connect Pro Mobile was created using Flash, Adobe will also be able to use the same code to deliver this application on other mobile devices when AIR for mobile devices becomes available. We anticipate iPad users will be able to take advantage of Connect Pro Mobile as well. For more information on iPad applications with Flash, go to http://blogs.adobe.com/flashplatform/2010/01/building_ipad_apps.html
Key Features of the Application:

  • Attend Connect Pro Meetings with integrated conference call or Voice over IP audio.
  • If your meeting host is using integrated conferencing, you can let the meeting call you, and avoid entering cumbersome dialing codes.
  • See who has joined the meeting, and their role (host, presenter, or attendee)
  • View presentations, PDF documents, videos, and screen sharing provided by the meeting organizer. Rotate, pan, and zoom to choose your personal ‘best view’ of shared content
  • View webcamera broadcasts from unlimited live camera feeds provided in the meeting
  • Participate in chat conversations throughout the meeting.
  • Join meetings attended by users on virtually any computer system: Mac, Windows, Linux, and Solaris. Plus other mobile attendees on iPhone and iPod touch.


To learn more about this application, please view the Connect Pro Mobile overview video.
Connect Pro Mobile lets you join meetings run by anyone with an Acrobat Connect Pro account. If you want to try hosting meetings for others to join on their iPhone or iPod touch, sign up for a FREE 30 DAY TRIAL here: http://www.adobe.com/products/acrobatconnectpro/trial/

Creating Easy to Make and Share Photo/Web Galleries!

When it comes to creating and sharing your personal or professional digital photo creations with the world there is no better tool or place to do so than with an Adobe tool or Adobe web based service. In this post on the Adobe Education Technologies Blog I’ll cover some of our easy to use tools to get you started!

Continue reading…