Secrets & Happiness of Digital Publishing

Installing your developer app »Over the Air« without syncing with iTunes [Updated]

When you develop your DPS app (or any iOS app) you then, near the end, need to test the app on your device and also send it to your clients for them to test.

The most obvious way for distributing was always sending the .ipa file via email to your client, let them drag it into iTunes and sync their iPads with iTunes. This is a tedious process, for you and for the client.

But you can also distribute your development app »Over the Air« and install right from the iPad browser. This is available for Pro and Enterprise, even Single Edition.

Note: This will not bypass the App Store for final distribution. This is only for testing your development app and you still need the UDIDs of all the iPads you want to test on (Enterprise customers can sign an app without the UDID binding).

In short: You create a xml manifest.plist file and upload it with your ipad file and one icon to your own server. You then create a special link that points to the manifest and the iPad will then install the app wirelessly to the provisioned ipad.

You just need three files:

• Your developer-viewer.ipa
• A 57 × 57 icon (the DPS Icon Template creates one for you)
• manifest.plist file describing your app

So basicly, you have everything ready except the manifest.plist file wich we will look at now.

manifest.plist file

The manifest.plist file is a short xml file that describes the location and metadata of your app:

You can create this file in your text editor. You can take my example and edit all the lines after the <!— -> comments. Basicly you just need to edit 4 lines:

<string>software-package</string>
<key>url</key>
<string>http://nybok.de/viewer/developer-viewer.ipa</string>

First, change the url value inside <string> to the absolute location (including the full http://-Link) of the .ipa file you will upload later

<string>display-image</string>
<key>url</key>
<string>http://nybok.de/viewer/apple-adhoc-57.png</string>

The same for the 57 pixel png icon

<key>bundle-identifier</key>
<string>de.nybok.showcase</string>

The bundle identifier has to exactly match the one you see in the overview in Viewer Builder

<key>title</key>
<string>our lovely showcase</string>

this required string will be visible in the popup dialoge prior to installing.

If you make something wrong in the manifest file you probably won’t get an error later — the app will just not install.

Read more about wirelessly distribution at the official apple documentation.

Uploading the files

Then upload all the files onto your webserver through FTP. Your webserver should serve the manifest.plist file as text/xml plist and the ipa file as application/octet-stream ipa (should work on most servers).

If you don’t have a webserver, your public dropbox directory might work as well.

Generating the special URL

Then you just need to point your iPad to the the manifest.plist file with this special URL:

itms-services://?action=download-manifest&amp
;;;;url=http://nybok.de/viewer/manifest.plist

This will load the manifest.plist file in wich the iPad will look up for the .ipa file and — if everything looks ok — starts the download on the iPad:

Of course this URL is not fun to type in and looks ugly. You should use a shortening URL to make the URL more meaningful. Unfortunately, bit.ly does not allow shortening itms-services://-URLs. I only know of tinyurl.com that will do this and where you can also set up a custom short URL. So the shortened URL I use here is

http://tinyurl.com/nybok-showcase

wich I then just type into the iPad’s Browser or send via eMail to my client.

I use this type of distribution for any app I create, even for tests on my own because it is so easy, once set up you just need to replace the ipa file on your server.

Update 8/16: As a few people pointed out to me, there are services that do these things for you. Namely TestFlight and HockeyApp. They are great, especially for beta-testing your app including bug reporting. (Not the best workflow for DPS) But they do not allow anonymous installation and are not entirely free. Diawi is a service that does this anonymously and easy. With the procedure above you have all the files on your own server.

—Johannes

Creating SuperOverlays. Now, there is a panel for that.

We have written about the concept of a “SuperOverlay” before: Put anything you want above another overlay (wich is not possible with non-interactive things like background images).

In short, if you want something to be placed above —say— your video or slideshow, just convert it into a slideshow with two identical slides and set it to autoplay. 

This can be a hideous task when you just want to create them and test something or if you need to create many of them.

So I made a panel for you that will create these SuperOverlays with 2 simple clicks:

The panel is available for InDesign CS6 in Adobe Exchange.

Adobe Exchange? Adobe launched Exchange last week: A marketplace place, similar to an app store like the one from Apple or Google Play, where you can get new panels and plugins very easily and install them right away.

Install the Adobe Exchange Panel for CS6 from adobeexchange.com

After opening the Panel in CS6 you will find the “Create SuperOverlay” panel featured for InDesign, or search for it.

You can get the panel for free, install it and restart InDesign. You then can find the panel under “Extensions” in the window menu.

You can use SuperOverlays for different things:

and many other things.

The panel also gives you the chance to simply revert the object to a free InDesign object that you can then edit and convert again to a SuperOverlay.

The Panel is using a script to set the specific settings in the Overlay Creator panel. This script will check if you selected a MSO. Big thanks to Uwe Laubender, who helped me a lot in making the script reliable.

If you are curious, the code is available on github. You can also review and rate the panel in the Adobe Exchange panel.

—Johannes

Cross-Publication Linking [Bonus: QR codes]

Disclaimer first: This is an undocumented feature in Adobe DPS and it’s implementation is experimental. This feature might improve (or change completly) once it’s ‘official’. I just had the idea in my head for several weeks right now — and I want to get it out. So please be careful and test for yourself.

Disired result

In our multi folio app we want to link from one article in the current folio/issue to another article in another folio/issue. This is great for “read other stories from Timbuktu” or “See our report from last year”. 

Additionally, we could link to the article from our website (when viewed on the iPad). Or print a QR code in our magazine that could open the digital version in our magazine.

What we need

This only works with Multi-Folio Viewers in Version 21 upwards, and you need to have your own “Custom URL scheme” specified in the viewer builder process:

This custom URL scheme is used to refer the app we want to link you. This means you can basicly link to any other DPS app (made with v21+), the user needs to have the app installed.

Creating Cross-Publication Links

To test this feature on your own iPad, install Bob Bringhurst’s DPS Tips app to your iPad or iPhone, we will use his app as an example.

Bob’s custom URL scheme in his DPS Tips app is

com.bringhurst.dpstips

We can use this scheme to open his app, for say, from the Safari Browser.

Open this link in the iPad’s Safari.

What I used is following URL scheme in the <a>-tag of this link:

com.bringhurst.dpstips://

this tells the device to open the app with the URL scheme if it is installed on the device.

Here comes the magic: We can additionally send a command to the app that opens the article “Digitial Publishing Overview” in the “Folio Basics” folio.

com.bringhurst.dpstips://v1/folio/DPS%20Folios/02_Folio_Overview

We can use this link in the “Go To URL” action of a button in InDesign to open Bob’s article straight from an article in our folio:

Let’s look closer at the syntax of the URL:

com.bringhurst.dpstips://v1/folio/DPS%20Folios/02_Folio_Overview

The URL consists of a few defined sections:

com.bringhurst.dpstips://

This is the custom URL scheme from your viewer, as defined in the viewer builder. If you use just this URL, the library will open. You can use this link to also back-link to your own library.

v1/folio/

Though this is not yet officially documented by Adobe, you need this part to tell the viewer to open a folio. the “v1” might refer to the internal version of the API. Ignore it, just use it.

DPS%20Folios/02_Folio_Overview

This is the folioname/articlename combination of the folio and article to open. These are the internal names you speficied in the Folio Builder. The internal name of the Folio and the articles as seen in the panels:

(Sorry Bob for exposing your internal names ,-)

You need to encode your names to make them URL-friendly. Any spaces will be “%20”.

So the link to open the cover would be

com.bringhurst.dpstips://v1/folio/DPS%20Folios/00_Folio_Cover

For wich we could use

com.bringhurst.dpstips://v1/folio/DPS%20Folios/

as a shorthand to open the first article of the folio directly.

If the folio is not yet downloaded or bought, this process will start immediatly.

Final result

So, when you once know your custom URL scheme and your v21-app is approved, you will be then able to link to other articles in your own app. If the user has not yet downloaded the folio, the viewer will start downloading/bying.

If you try to open a single edition app with this command, the app will crash after the launch screen.

Bonus

QR codes. The whole world is crazy for these little QR codes. You should always think twice before using them. But here is a great idea: Providing a bridge between the physical world (print) and the digital world. So we could use a QR code to open an article in a folio from an installed DPS app. With just one click.

For this, you need to create a QR code with the URL scheme from above. Like this one:

It is a little bit tricky. If you use the hyperlink format in the QR code, it might not work, because the custom URL scheme is not exactly a valid http-URL. For this example, I just put the custom URL plain into the QR code as test. My QR code reader on the iPad “QRafter” converted this into a link for me:

So if you want to use this feature already, go ahead and make your own tests. There might be a official, maybe different way, of linking to other articles in the future. But if you want to live on the bleeding edge, this is the way to go now.

—Johannes

Adobe DPS v21: Versioning and direct Previews

Adobe just released version 21 of the Digital Publishing Suite for everybody using InDesign to create digital magazines. As always the Folio Builder Panel is mandatory to update, you can keep your producer tools at the version you like.

If your Folio Builder Panel is telling you to update, the link inside the message is wrong (Anselm reported this morning). Make sure to grab the latest version after log in at digitalpublishing.acrobat.com.

The most important change in this release is the ability to set the folio version upon creation of the folio. With this you can create a folio that is compatible with a viewer down to v20 although you have the recent producer tools installed.

Since the Adobe Viewer v21 is currently in review at Apple, you can create a folio in v20 to be compatible with the current available viewer or if your live app you are creating for is made with an earlier version of the tools. You cannot create a folio for an earlier version than 20.

Other changes in v21:

Preview the current layout on the iPad or iPhone

For iOS users, it is possible to send just the current article to the iPad or iPhone for preview. Previously, you could only preview whole folios. This makes it a lot faster to preview your content on the device. The article does not require to be included in a folio.

Improved Social Sharing

If you create your folio in PNG format, the Web Viewer is handling interactive overlays a lot better now. If you create a PDF folio, the viewer in the desktop browser will still show PDFs of your article.

Auto-View during Download

When you buy or download a new folio, the viewer immediatly opens it when content is available.

Subtle texture in browse mode

Any viewer from v21 will show a subtle texture in the background of browse mode.

A lot of other improvements are on the backend side this time, so there are not many improvements for authoring in InDesign except of the versioning feature.

—Johannes

Using Adobe Edge for Animations (better then ever!)

Adobe released Adobe Edge in preview 6 a few weeks ago, nearly closely to version 20 of Adobe DPS. They now work better together: When you create an animation in Adobe Edge and Publish for DPS, your animation will start instantly and faster as before (there was a two-second-delay in your animation).

For a short and complete tutorial on how to prepare your Edge Animation for use in Adobe DPS, check Anselm Hannemann’s blog post “Creating Interactive Overlays with Adobe Edge”.

—Johannes

View high resolution

Enabling Hot Zones in Viewer Builder

Adobe mid-released a new version of the Viewer Builder (now 2.0.2) that let you set up a “Hot Zone” where a user can tap on to get to the next/previous page.

Unfortunately, Adobe decided to release this as an DPS enterprise edition only feature at the moment, that might find it’s way into Single or Pro Edition later.

—Johannes

sidecar.xml generator [new version]

There is an all-new version of the sidecar.xml generator out now!

When using Adobe DPS on big projects, it might be important to keep all article related metadata like title, description, smooth scrolling setting, etc. together in an xml file called “sidecar.xml”.

You can use this file to automatically fill out all necessary data for each article or keep the metadata in sync between all your renditions. How to use a sidecar file.

(Renditions are duplications of the same folio for different screen sizes (iPad, iPhone, New iPad) and/or devices (iPad, Android, Kindle). Read more about the renditions).

However, generating this file in XML structure by hand can be complicated and confusing. Therefore I made the sidecar.xml generator last summer for DONE magazine and released it for the public.

During the last days I rebuilt it from scratch and added a few new things:

• Import any sidecar.xml file
• Preview your metadata how it might look on the iPad
• a new design based on bootstrap
• new logic does not enable you incompatible settings

Open the sidecar.xml generator

The projectlives on github now, where you can access the code or help improving it.

If you have any questions for problem, feel free to get in touch with me here or on github.

If you find this useful, you can flattr me by hitting the flattr button below :-)

—Johannes

Adobe releases v20 of DPS

On May 2nd, Adobe pushed a new update of the DPS, now in version 20. Here are the important infos and updates (all details here):

iPhone support

You can now build apps for the iPhone as well (create folios in 480x320 or 960x640), they appear in the content viewer for iPhone and in your app. You can only create multi folio apps for the iPhone for now. Therefore, Single Edition does not yet work with the iPhone.

The iPhone viewer does look and work a bit different. While you scrub with the slider at the bottom, the iPhone is going into the browsing mode automatically.

The app you build is an universal app that works both on the iPad and iPhone. Or you can build them individually.

Web Viewer 

Folios that are enabled for social sharing via facebook or twitter (new!) or email (new!) or copy link (new!) can now be viewed in the browser, maintaining interactivity. You can protect articles that are not accessible in the browser. View a Demo here.

InDesign CS6 compatibility

When InDesign CS6 is available, the v20 tools will be compatible and you wil be able to use CS6 with these tools.

Improved Folio Producer

The design and workflow of the Folio Producer at digitalpublishing.acrobat.com is improved. Publishing a folio to the distribution service now runs in the background. An article has now the “Hide from TOC” setting, making it disappear from the Table of Contents without setting it as an Ad.

Improved Folio Builder Panel

The folio builder panel now shows the size of the folio. Small improvements when creating articles and folios, but still now out-of-date indicators, update-all or something else that would improve the usability.

Other improvements

Resizeable Content Viewer (if your screen is smaller than the folio you are watching), Preview on Device does no longer require you to use Phonedisk and smooth scrolling articles in PDF will be kept as PDF when they are no longer than two pages (smooth scrolling articles longer than that will automatically be converted to static PNG/JPG).

Can I update Adobe DPS?

If you are a pro or enterprise customer, you can build your own content viewer for iPad or iPhone and test your v20 folios.

Everybody else should wait for the generic Adobe Content Viewer to be approved by Apple. Neil Enns from Adobe shares the status of the approval here.

You can always keep an eye (or RSS reader) on this site: caniupdateadobedps.com

—Johannes

Adobe InDesign CS6: Workflow improvements for Digital Publishing

Today, Adobe announced the new InDesign CS6, as part of the new Adobe Creative Cloud service, where you can get all of Adobe’s desktop tools from the Master Collection, all Touch Apps and a bunch of web services and storage for a around 50 Dollars, monthly.

There is a pretty comprehensive post from the fine folks at indesignsecretes.com covering all the newness of InDesign CS6.

I will focus on the improvements in InDesign that are useful for DPS (or any digital publishing tool in InDesign).

Alternative Layout and Liquid Layout Rules

The most important feature when it comes to digital publishing, especially for use in Adobe DPS: One InDesign file can now cover multiple versions of the same layout and keep all the content synchronized. That can be a horizontal and vertical pair, or even adress multiple devices, like iPad, Xoom and iPhone.

see full screen here

The pages panel now includes several, so called “Alternative Layouts”, where InDesign will make a new version of the layout according to the new dimensions. While doing that, InDesign will apply Liquid Layout Rules (see below). The designer than has the chance to do specific changes to the layout to make it look beautiful on all devices/sizes.

A design process cannot be fully automated, by design. With the raise of adaptive formats like HTML, some things are achievable in that matter, but it always needs caring for all sizes or “breakpoints”. Especially for intensive layouts like in editorial design.

The content (most importantly text frames) is linked through all Alternative Layouts. So if you make (text) changes to the original layout, it can be distributed to all other layouts.

The designer specifies rules in the original layout to determine how objects should move when an alternative layout is created. This is where Liquid Layout enters the stage.

Liquid Layout Rules

With Liquid Layout Rules applied to each object, or by adding guides, any object on the page knows how to behave, resize or distribute itself when a new layout is created. They can be object-based or defined by guides. For a text frame, you can even specify the number of columns to be flexible when the text frame gets wider.

Linked Content & Content Collector

Now, text frames and all other content can be linked from the same document, an alternative layout or even from other documents. This makes repurposing content much easier.

There are also two new tools, the Content Collector and the Content Placer. With them you can collect elements, groups, text frames, images, whateveryoulike from one document and then drop them in another layout or document and instantly have them linked.

Other improvements for digital publishing

Split Window View — now you can look at two different positions in one InDesign document with the split window view.

Insert HTML — Inserting HTML is easier and is kept alive as working HTML/animations/awesomethings in your .folio or even in exported HTML and EPUB.

Export to PNG — the export dialog now includes PNG as output format, wich makes it easier to use for web output or in some places of DPS.

Packaging — Assets in use by the Overlay Creator (like image sequences, panoramas, web views) are included in the packaged folder ready to be distributed to another computer. 

—Johannes

DISCLAIMER: I don’t work for Adobe directly, though as Adobe Influencer for Digital Publishing, I speak for Adobe and present their products.

Creating App Icons for iPad, new iPad and Android with one click

I updated the Template for Viewer Builder Icons.psd to support the retina artwork you need for building the icons of your viewer app.

The Viewer Builder asks you for a set of different icons, a few for the old iPads, the new iPads and for Android, in different sizes.

With this handy photoshop template you just replace or edit a single smart object with your artwork you prepared at 512×512px. It then automatically scales for every needed size.

Use “Save for Web and Devices” and choose “All User Slices” and you end up with a bunch of viewer-builder-ready icons like these:

• Download Template for Viewer Builder Icons (PSD, 6 MB)
• The Template has a new place on github: frischmilch.github.com/DPS-App-Icons-Template

A word about precision: it seems impossible to place and size a smart object at round values in exact sizes without the edges to blurry out. Therefore I resized the icons a little bit, wich will blurry your artwork a bit. For pixel-perfect icons on the iPad’s homescreen, design the 72 and 144px icons without this template and use this for quickly creating all necessary icons during testing.