Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Adobe Dreamweaver

  • Print
  • + Share This
From the author of Preparing a Web Page to Export as an App

Preparing a Web Page to Export as an App

Decades ago, comedian Steve Martin performed a routine called "How to Earn a Million Dollars and Not Pay Any Taxes." The setup to this routine involved announcing in a carefree manner that the first step in this process was to go and get a million dollars. At this point in the routine, Martin would pause for a few seconds to allow the audience members to come up with a million bucks before proceeding.

In a similar vein, I could tell you that generating an app in Dreamweaver CS5.5 is easy—you just need to start with app-ready content. Because, really, the bulk of the work in generating an app in Dreamweaver CS5.5 is preparing a web page that's ready to convert to an app.

Here's a bit of good news on that front: The first two articles in this series explained how to create web-friendly pages that will properly convert to apps. If you've read those articles and worked through the examples, you're ready to go. For everyone else, let's quickly review what's involved in preparing mobile-friendly and app-ready web pages.

In the first article in this series, "Building Mobile Pages with Dreamweaver CS5.5," I showed you how to generate and customize ready-to-upload mobile-friendly web pages from Dreamweaver CS5.5's new mobile starter pages. That's one way to build mobile-friendly, app-ready pages. Those pages rely on three elements:

  • HTML5. The latest version of the ageless markup language used for web pages.
  • CSS3. The latest version of the stylesheet code used to design pages.
  • jQuery Mobile. The new kid on the block—a subset of JavaScript's jQuery library that provides animated and interactive elements designed for mobile devices. Unlike Flash, which has historically been the tool of choice for web animation and interactivity, jQuery Mobile is supported on Apple devices such as the iPod touch, iPhone, and iPad.

In the second article in this series, "Customizing Mobile Pages with jQuery Mobile in Dreamweaver CS5.5," I showed you how to build mobile-friendly pages by using Dreamweaver CS5.5's jQuery Mobile widgets to create your own pages, more or less from scratch.

So actually, if you've worked your way through either of these previous tutorials, or you know how to build jQuery Mobile pages in Dreamweaver CS5.5 without needing those articles, you're almost ready to generate an app from your page in Dreamweaver CS5. First let's look at a checklist of what you need to have in place before generating an app in Dreamweaver CS5.5:

  • You need to have a web page built exclusively with HTML5 (which can include audio and video), CSS3, and jQuery Mobile. No Flash objects.
  • Finally, if you're going to generate apps for Apple's mobile iOS (the operating system for the iPod touch, iPhone, and iPad), you'll need to be using Dreamweaver CS5.5 installed on a Mac. I'll go into the reasons why shortly, but you need to know about this constraint right away. If you're generating apps for Google's Android mobile operating system, you can use either a Windows or Mac install of Dreamweaver CS5.5.

Dreamweaver CS5.5 rather seamlessly invokes software developer kits (SDKs) from Apple and Google, along with PhoneGap, to generate apps. Once you've designed your single web page with HTML5, CSS3, and jQuery Mobile, you'll follow a relatively simple three-step procedure to build your app in Dreamweaver CS5.5. The following sections provide the details, but these are the basic steps:

  1. Configure the application framework(s). This is a one-time step. You install and connect Dreamweaver with the software development kits (SDKs) from Android and iOS. Once these SDKs are installed and configured for Dreamweaver, you don't need to mess with this step again.
  2. Define your mobile application settings. In this step, you specify the name and other parameters of your app.
  3. Build and emulate the app. This process is more or less a matter of clicking a button, waiting awhile, and then viewing your new app in a mobile device emulator on your laptop or desktop.

Ready to go? Let's get started.

  • + Share This
  • 🔖 Save To Your Account