Create iPad digital editions with Mag+

The possibilities for digital magazines on the iPad are breathtaking. Many publishers, excited about the possibilities, are keenly moving their titles on to this format – in a bid to delight readers both new and old. One software solution really catching on is Mag+, from Moving Media+, the platform behind pioneering titles like Popular Science+ and Transworld Snowboarding.

In this tutorial you’ll learn a more advanced technique, adding html functionality directly in InDesign to enhance the user experience.

Everything you need to know about the Mag+ software – including downloading it for free – is on http://www.magplus.com. In this tutorial, we assume you have already got to grips with the basics.

STEP 01

The right template
Start up InDesign and open the included template file [FILENAME]. This is the main template for all design work in the Mag+ format. If you want to add your own swatches and formats you do so as you would with any document, create or import them into your new document.

STEP 02

Set up document
Activate the Mag+ plugin and fill in the required fields. ”Issue” is the folder you export to, ”Id” is the name the document you will have in the code, ”Name” is what shows up in the Production Tool and when users bookmark a page, so make it something descriptive. All these can be named whatever you choose.

STEP 03

Prepare your assets
Prepare your image assets at this stage. The images you want to switch should all be of the exact same size and resolution. At this stage, also prepare a layout version of the first image in the sequence by making a copy and setting that copy to 132 dpi resolution, without changing file dimensions.

STEP 04

Assets in place
The folder [Changing Images] holds all your html assets. In here you’ll find the ”assets” sub-folder. Place your prepared images, except for the 132 dpi version, in here. In the included html document we point to that folder, but you can change it to another folder if you wish.

STEP 05

Code writing
Substitute the included image links in the html document for the ones you just created. The string <img src=”assets/chair0X.jpg” /> should instead point to your files. Also, change the viewport parameter ”width” to the width in pixels for the images you’re using.

STEP 06

Test run in Webkit
Test run your html document in Safari or Chrome (or another Webkit based browser), since they give the best approximation of how this function will work on the iPad. The webview windows in Mag+ use the iPad’s built-in browser capabilities. But it still makes sense to testrun on the desktop.

STEP 07

Test run on iPad
You should also test run your html functionality in Mobile Safari on the iPad. The simplest way to do this is to use Dropbox’s public folder for a direct web link. For more on how to achieve this in a simple way – see the boxout on ”Testing your html on the device”.

STEP 08

Basic layout
In InDesign, create your layout, remembering to make allowances for the richer functionality and reader interaction. So don’t place too much stuff on top of the image you are defining as an html area. More on this in the next step.

STEP 09

Drag and drop
The 132 dpi image you created in Step 3 is your placeholder for the html file. Just drag and drop it into your InDesign workspace. The 132 dpi resolution will show up at the correct size in your document.

STEP 10

Image to HTML
The image you dragged into InDesign can now be set up as an html area. Select it and set ”Object type” to ”HTML” in the Mag+ plugin. Click on ”File” to choose the local html file you have set up. This will now use that exact area as a webview window for your html.

STEP 11

Setting options
You can set your pinning options for the html just like you would with any other object. But there are a couple of options especially for the HTML object type. In this case, when we have defined an exact viewport size we can leave the ”Scale contents to fit box” checked.

STEP 12

Setup for review
Set up your system for reviewing by starting your Mag+ Reviewer app on your iPad. Make sure your iPad and your computer are on the same wireless network. Input the IP address from the info field at the top right in the Reviewer app into the ”Push review to device” field.

STEP13

Fast review
Hit ”Fast Review” to check out your vertical on your iPad. The html and the included assets are exported to the device and are locally stored within the file. Test out your html functionality on the iPad. You’ll see that the placeholder image is just used for the lo-res preview.

STEP 14

Export to PT
When you’re happy with what you see in the fast review, you are ready to export your vertical to the Production Tool. Simply make sure the ”Issue” folder is set up correctly and hit ”Export”. Point your Production Tool to that folder, hit Refresh if you haven’t already done so.

STEP 15

Include in issue
You should now see your exported vertical in the Clipboard section of the Production Tool, to the left. Drag that vertical into the Content Verticals area and place it where you’d like. If you have multiple verticals you can preview them together by hitting ”Review All” or ”Review Selected”.

TECHNIQUE
Web check with Dropbox

STEP 01

Create an account
If you don’t have Dropbox, open a free 2GB account at http://www.dropbox.com. For this purpose you’ll only need the “Public” folder, which serves as your web server.

STEP02

Move your assets
Copy your html folder into the “Public” folder of your Dropbox folder. Then right-click on the .html file and choose “Copy public link”. This is now your html index file.

STEP 03

Go to iPad
Send yourself the link, or write it directly into Mobile Safari on the iPad. Now you can check that your html works as it should. Good luck.