OS X Automation Workshop: Simple Template Publishing in HTML

The Multi-Column Article Demo

Once the Automator action and service workflow files have been installed, they can be used to create a web-app. In this tutorial, you will create a multi-column web-app by following these steps:

The Demo Files

To begin the tutorial, download the provided demo kit.

DO THIS ►Download the ZIP archive containing the Multi-Column demo materials. If needed, double-click the ZIP archive to unpack it to a new folder containing the tutorial items.

The demo kit provided with this tutorial contains a text file to be used as the content for the article, and various supporting media files, including an audio file, video file, and image file (see below).

Building a Multi-Column Article Publication

Begin the process of creating a multi-column publication by following these steps:

Open the Source Text File

The installed Automator action and service are designed process text selected in applications that support the standard contextual menu, such as TextEdit.

DO THIS ► Open the text file Fox Squirrel.rtf by double-clicking its icon. By default, the file should open in the TextEdit application.

Activate the Service

With the document open in TextEdit, you are now ready to use its content to create a multi-column web-app.

DO THIS ► Select all of the text in the document by selecting Select All from the Edit menu, or typing Command-A (⌘-A)

DO THIS ► With the document text selected, summon the contextual menu by right-clicking in the selection, or clicking in the selection while holding down the Control key. (see below)

DO THIS ► At the bottom of the contextual menu, select the menu option titled Create Article with Selected Text (see above). NOTE: on some computers, the service may be listed within a Services sub-menu on the contextual menu.

Enter Information in the Action Interface

Once the service has been selected from the contextual menu, it will run the corresponding Automator service workflow, using the selected text as input for the workflow. The interface for the Create Multi-Column Article Web App action will be displayed for your input and choices. (see below)

DO THIS ► Enter the name for the web-app, along with the corresponding content information, metadata, and license choice.

DO THIS ► Include a media item by selecting Other… from the Media File popup menu, and locating and selecting one of the media files from the demo kit, in the forthcoming file picker dialog. If the media file is the provided image, you can select the checkbox to use its embedded caption.

DO THIS ► Once a media item has been chosen, and the information and metadata have been entered, click the Continue button to have the workflow create a folder on the desktop containing the web-app.

View the Result

Once the service has completed, it will open the created web-app in Safari for viewing (see below).

The article can be scrolled horizontally, and the type size of the article text adjusted using the buttons at the top right of the first page (see above).

What’s Next?

In the next segment, we’ll examine the use of the Single-Page Web-App design.

TOP | CONTINUE

WORKSHOP SEGMENTS

WORKSHOP LEADER NOTES

In this segment, you will guide the attendees through the process of:

Downloading and installing the demo kit containing the materials used in the tutorial
Using the previously installed service to create an example publication that incorporates a multi-column layout design.

NOTE: the topic of sharing and viewing the created web-applications is covered at the beginning of the Desktop Web-Apps segment of this workshop.

The Automator action used in to create a multi-column web-app, has the ability to automatically assign a special CSS stylesheet to article paragraphs that function as sub-heads.

To trigger the auto-styling, place the tag [SH] (include brackets) at the beginning of each sub-head paragraph. The tag will be removed, and the stylesheet applied to the paragraph, when the web-application is created.

In addition, any paragraph can have italic styling applied to it by placing the tag [I] (include brackets) at the beginning of the paragraph to italicize. The tag will be removed, and the paragraph italicized, when the web-application is created.

The example text file included with this tutorial, makes use of these two auto-styling tags.

Ask attendees if they have used Automator or System Services before.
Like a chef following a recipe, use of workflows sometimes require preparation of materials, such as processing audio, video, or image files for use by the workflow. You may want to point out that are built-in System Services for processing audio, and for processing video files.

DISCLAIMER

THIS WEBSITE IS NOT HOSTED BY APPLE INC.

Mention of third-party websites and products is for informational purposes only and constitutes neither an endorsement nor a recommendation. MACOSXAUTOMATION.COM assumes no responsibility with regard to the selection, performance or use of information or products found at third-party websites. MACOSXAUTOMATION.COM provides this only as a convenience to our users. MACOSXAUTOMATION.COM has not tested the information found on these sites and makes no representations regarding its accuracy or reliability. There are risks inherent in the use of any information or products found on the Internet, and MACOSXAUTOMATION.COM assumes no responsibility in this regard. Please understand that a third-party site is independent from MACOSXAUTOMATION.COM and that MACOSXAUTOMATION.COM has no control over the content on that website. Please contact the vendor for additional information.