Create a Single-Page iPad Web-App
The iPad is an exciting device for viewing Internet and network-hosted HTML-based content. Now, using the power of Mac OS X automation and your Mac, it's easy to create powerful web-applications, designed to present photos, text, audio, and video, in full-screen 1024 x 768 pixel views that can be seen and enjoyed on iPads and computers.
The services described on this page, turn text copied to the clipboard into a scrolling single-page iPad web-app, optionally containing an image, audio, or video file. Click the thumbnail images in the righthand column on this page, to view examples of some of the various page design options.
To learn more about Services in Mac OS X, click here.
Using the Service
Creating text-based content specifically for the iPad is as easy as copying text in any application to the clipboard, and then choosing the “Create Single-Page Web-App with Clipboard Text” service from the Services menu. Once selected, a dialog will be presented from which you choose the options for the design of your web-application. You make your design selections, choose any related image, audio, or video file, and click the Continue button to have a new web-app placed on the desktop. Place the web-app folder on your iDisk or other server, and then view the app from the Safari browser on the iPad!
The Action Interface
The Automator action used to create the web application bundle provides numerous controls for customizing the display and functionality of the app. Here's an overview of them:
- Title, Subhead, and Attributions - In these four text fields (1), enter the title of the application, the subhead, and any author-copyright information. This data will be appended to the beginning of the story text passed from the previous action.
- Optional Media - Optionally, the web-app can contain a duplicate of either an image, audio, or movie file added using the popup menu (2). Note that chosen images will be scaled to a maximum width of 720 pixels, and any chosen audio file will be converted to MPEG (ACC) format if the source file is an AIFF, WAV, or SDII file. Chosen movie files are assuemed to be in the correct H.264 used by the iPad and will not be re-processed automatically. The position of the media inserted into the story, is indicated by the selection in the location popup menu.
- Optional Media Caption - Optionally, you can include a coption, displayed with the inserted media, by entering the caption text in the caption text field (3). For added images, you have the option to use the caption data embedded in the IPTC description (caption) tag of the image file, by checking the “Use embedded metadata for caption” checkbox. NOTE: to NOT iclude a coption with the inserted media, leave the caption text field blank, and the checkbox unchecked.
- Application Metadata - Optionally, the web-application can contain a description and keywords that can be indexed by internet search engines. Enter a short description of the application in the description field, and a comma-delimited keyword list in the keywords text field (4).
- Text Styles - You can set the font familiy, size, color, and letter-spacing individually for each of the application text elements (5). The popup list of typefaces contains only those fonts installed on the iPad.
- Page Color - The background color of the applicaion page can be chosen from the popup menu (6). Here is a sample of some of the page background colors.
Deploying the Web-Application
The result of the creation process is a folder on the desktop containing the files, images, and media that comprise the web-application. Once the processing is completed, the service will open the application in Safari for you to try out.
To share the web-app with others, especially iPad users, rename the folder to whatever name you like (be sure to not use spaces or special characters in the name), and then copy the web-app folder into the Sites folder that is within the Web folder on your MobileMe iDisk. Once placed on your iDisk, the URL to view the web-app will be in this form:
For example: http://web.me.com/johnnyappleseed/dreamspeech
You can automate the process of posting the web-app bundle to your iDisk by using the Folder Copy to MobileMe Sites Folder service that is also installed with the creation service. To use this service, select the web-app folder in the Finder, and then choose the service from the Finder's Action menu:
The service will prompt for the MobileMe account name, and also include an option for automatically generating an announcement email message containing a link to the posted web-app:
Viewing on the iPad
Once posted to your MobileMe iDisk, the web-app will be viewable on any iPad with an internet connection. To enable full-screen viewing of the web-app on the iPad, follow these instructions.
- Titles and authors are required.
- An image's caption is derived from its embedded IPTC description (caption) data. You can use the Add Metadata to JPEGs service provided on MACOSXAUTOMATION.COM to write caption, titles, and keywords metadata into JPEG images selected in the Finder.
- Audio source files of WAV, SDII, or AIFF format will be automatically be duplicated and encoded to ACC MP4 during the processing for inclusion in the web-app bundle
Download the installer for the action and services.