Quick Start Guide

Adobe Digital Publishing Solution

Last Updated 2015 July 29

 DPS 2015 Overview

Set up Build Create Manage Design App

Project App Articles Content Experience

Article 1
Collection contents are
displayed in a browse page.

Article 2 Collection 1 Article 3

The browse page appearance
is defined by the layout and
underlying cards.
Collection 2 Article 4 Collection 3

Tapping a card opens an article

or another browse page, which
Article 5 Article 6 Article 7 displays another collections
contents.

Adobe DPS (2015) version 2015.2.100 2015 July 29  Page 2

 What You Will Build

When you launch the app, the Tapping a card can display another Tapping a card can display the con-
browse page uses a 4-column layout. browse page, which is another collec- tents of an article.
Each card on this layout represents tion with a different layout applied.
an article or collection.

Adobe DPS (2015) version 2015.2.100 2015 July 29  Page 3

 Setting up DPS 2015

What you need

An account for DPS 2015
Tutorial bootstrap assets (recommended)
HTML Article Packager (optional)
InDesign plug-ins (optional)
(iOS apps) Valid development certificate (and password) and
development mobileprovision file that includes your device ID
(Android apps) Valid .p12 certificate

Obtain your trial account

To experiment with DPS 2015, you need to sign in to the DPS 2015 Portal
using an Adobe ID that has been verified to work in the environment. If you
dont have a DPS or DPS 2015 account, follow these steps to sign up for a trial
account.
1. To sign up for a free trial, go to the Digital Publishing Solution product
page and click Free Trial.
2. Follow the prompts to register.

Install InDesign plug-ins (optional)

Installing InDesign plug-ins is required in order to expose the UI for exporting article files.
When you install the plug-ins, you can still use all the same tools for working with the earli-
er version of DPS, plus you add the ability to export articles for DPS 2015.
Watch Video
1. Download the installer files:
https://helpx.adobe.com/digital-publishing-solution/help/install.html Getting Started video
2. Close InDesign.
3. Run the installer for the appropriate version of InDesign (CS6 or later).

Adobe DPS (2015) version 2015.2.100 2015 July 29  Page 4

 Creating a Project
A PROJECT IDENTIFIES INFORMATION about the app such as metadata,
store settings, articles, and collections. When you build an app, the app
uses the project settings and displays the projects content and layouts.
If you signed up for a trial account, you can use that account to follow
these steps. If youre a member of a team with a DPS subscription, a
Master Admin account is required to create a project. If you dont have a
Master Admin account, ask your Master Admin to create a test project for
you and assign you to that project as a user with all permissions.
1. Use the Adobe ID you signed up for the trial to sign in to the DPS
2015 Portal:
https://publish.adobe.com
2. If a project is already created, skip to the next section.
3. Click the Project Settings tab.
4. Click the Create New Project icon.
5. In the Basics tab, specify a Project Title and Link Reference.
For Link Reference, we recommend using a reverse domain name (such as
com.company.publication) to help ensure that you use unique, predictable names.
For Brand Image, you can specify an image that will appear at the top of the app menu
and in social sharing links. You can use brandimage.png provided in the Dps-assets >
AppBuilding > Asset_Generator-assets folder.
6. Click the Content tab. Select Publish all collections as free so that you will be able to
download all content in your test app.

Watch Video

Project Setup video

Adobe DPS (2015) version 2015.2.100 2015 July 29  Page 5

 7. Click the Analytics tab. Specify a Report Suite name, which is a required field for analyt-
ics tracking. For this tutorial, make up a Report Suite name.

8. Click the App Navigation tab. For this tutorial, choose the option to create one top-level
collection for both phones and tablets.

9. Click Create.
You can edit project settings at any time by selecting the project and clicking the pencil
icon. However, you cannot edit the top-level collection setting in the App Navigation
tab at this time.

Adobe DPS (2015) version 2015.2.100 2015 July 29  Page 6

 Building an App
Where do I get Apple iOS
APP BUILDING is a cloud service for all supported platforms. You can build iOS, Android, certificates?
and Windows apps. This Quick Start Guide walks through the steps for creating an iOS app.
These steps assume that you have already created your iOS certificate and mobileprovi- Apple requires a valid development
sion file. For more information about iOS certificates, see iOS Publishing Guide for DPS 2015. certificate and mobileprovision file
to view developer apps.
Create an iOS app For more information about iOS
The app you create can display both published and unpublished content from the selected
certificates, see iOS Publishing
project.
Guide for DPS 2015.
1. In the Portal, select your project (if you have more than one), and click Apps.

2. Click the Create New App icon.

3. Choose iOS as the platform, and click Next.
4. Specify the app name and Bundle ID.
The Bundle ID is the ID you specify when you create the App ID in the iOS Developer Watch Video
Center. For example, com.adobe.inspire is the App ID for Adobe Inspire.
Build Your App video
Important: Make sure that you use a valid Bundle ID. When you sign the app using a
mobileprovision file, the Bundle ID you specify must match the Bundle ID used in the mobile-
provision file.

Adobe DPS (2015) version 2015.2.100 2015 July 29  Page 7

 5. Specify the orientation for the tablet version of the app and the phone version of the
app. For this tutorial, we recommend portrait.
6. Select Enable Preview if you want the ability to preview unpublished content.

How do I preview unpublished

content?

Whenever you want to make un-

published content availabe in the
your preview app, click the Preview
icon in the Content and Layouts
section of the Portal.
If you select Enable Preview, click the Preview icon whenever you want to preview
your content, published and unpublished, free and protected. After you add or edit
content, click the Preview icon again. If you dont select Enable Preview, make sure that
you publish content in order to view it in your app.
7. Click the Assets tab, and specify the files to be used for the app icon and launch
images.
You can use the images provided in the dps-assets > AppBuilding > Asset_Genera-
tor-assets > iOS folder.

Adobe DPS (2015) version 2015.2.100 2015 July 29  Page 8

 8. Click Submit to build an unsigned app.

Sign and install the iOS test app (Mac OS only)

You need to sign the app so that it can be installed and run on an iOS device.
To sign the test app, you need the .ipa file for the app, a developer mobileprovision file that
matches the Bundle ID you specified when you built the app, and a developer .p12 certificate.
1. In the Apps section of the Portal, click the Unsigned App link to download the .ipa file
of the app you created.
2. In the Apps section of the Portal, click Download Signing Tool in the upper right
corner.
3. Install and launch the App Signing Tool.
4. Select iOS, specify the required files and password, and sign the app.

Adobe DPS (2015) version 2015.2.100 2015 July 29  Page 9

 5. Use your preferred method such as iTunes or Xcode to load the signed app to your iOS
device.
You dont have any content yet in your app, so theres no reason to launch it. Next, youll
start creating content.

Articles about building apps

Build DPS 2015 apps for iOS

Build DPS 2015 apps for Android
Build DPS 2015 apps for Windows

Adobe DPS (2015) version 2015.2.100 2015 July 29  Page 10

 Creating Content
THERE ARE TWO MAIN WAYS to create articles for DPS 2015.
Using HTML (responsive HTML)
Using InDesign (fixed layout)
If you create responsive HTML articles, the content can flow to fill the screen regardless of
device or platform, with no letterboxing.
If you create articles using InDesign, the articles are fixed to a certain layout, such as
768x1024 pixels. When displayed on a tablet or phone, the content is scaled and letterboxed
as needed to fit within the area.

A reflowable HTML article fills the screen (left). A fixed-layout article designed for a tablet is
scaled and letterboxed on the phone (right).

Adobe DPS (2015) version 2015.2.100 2015 July 29  Page 11

 Create an article from responsive HTML
You can skip this step below by using the article files in the dps-assets > ContentResourc-
es folder. These reflowable HTML articles are compressed into article files so that you can
upload them.
Watch Video
After you create HTML source files, you can use the HTML Article Packager utility to create
an article file for HTML content. This utility creates a required manifest.xml file and com- HTML Articles Video
presses the files for uploading.
1. In Finder or Explorer, open the folder containing the HTML Article Packager utility.
2. In a separate Finder or Explorer window, open the Dps-assets > HTML_Article >
folder.
3. Drag and drop the blueArticle01 folder onto the HTML Article Packager icon.

The BlueArticle01.article file is created on the same level as the HTML folder.

You will be able to upload this article file later in this guide.

Adobe DPS (2015) version 2015.2.100 2015 July 29  Page 12

 Create an article from an InDesign layout
You can skip this step below by using the article files located in the Dps-assets folder.
In InDesign, create the layout and use the Export dialog box to export an article file.
1. Make sure that you have installed the InDesign plug-ins that enable DPS 2015, and Watch Video
launch the version of InDesign youre using with DPS 2015.
2. Create or open an InDesign document. You can open the AvionicsArticle.indd In your Export InDesign Articles video
Dps-assets > InDesignFile folder.
3. If desired, use the Overlays panel to add interactive overlay.
All overlays are supported in DPS 2015 except for panoramas.
4. Save the document, and choose File > Export.
5. In the Export dialog box, choose DPS Article.

If you do not see a DPS Article option, make sure that you have the plug-ins installed.
6. Specify a name and location, such as avionics.article in the InDesignFiles folder.
Click Save.
7. In the Export dialog box, use the default settings and click OK.

Adobe DPS (2015) version 2015.2.100 2015 July 29  Page 13

 You will be able to upload this article file later in this guide.
8. If you want to experiment, create or open other InDesign documents or layouts and
export additional article files.

Adobe DPS (2015) version 2015.2.100 2015 July 29  Page 14

 Managing Content
WITH DPS 2015, you use the Content & Layouts section to create articles and define proper-
ties. You can then upload article files created with InDesign or HTML. Watch Video

Manage Articles video

Create an article and specify metadata
1. In the Portal (https://publish.adobe.com/), choose the project you created from the
Select a Project menu (if you have access to multiple projects).
2. Click Content & Layouts.
3. In the Content section, click the Add Content icon, and then click Add Article.

4. Specify the Article Name using a unique name that

can work well for linking between articles, and click
Done.
5. With the Article Metadata tab selected, specify the
Article Title that will appear in the viewer.
6. Fill in the Article Title and Author fields. This
metadata will come in handy when creating card
layouts later. Feel free to specify other metadata.
To make sure that the article can be downloaded in
this basic app, choose Free from the Article Access
menu.

Adobe DPS (2015) version 2015.2.100 2015 July 29  Page 15

 Now lets add a thumbnail image. The thumbnail can appear as one of the cards on a collec-
tion browse page.
7. Click the Images tab, and then click Upload under Article Image.
8. Double-click the image file you want to use for article thumnail. For example, you can
use AvionicsCardImage.jpg in the Dps-assets > InDesignFile folder.

9. Click Done to create the article.

Adobe DPS (2015) version 2015.2.100 2015 July 29  Page 16

 Upload the article file
The article is created, but it does not yet include the article filethe contents of the article.
1. In Content & Layouts, click the article youre working on, and then click the icon for
uploading content.
You can also double-click the article to edit the properties, and then click the Content
Files tab.

2. Click Browse, and double-click the article file. For example, you can use an article
file you created earlier, or you can use any of the .article files in the Dps-assets >
ContentResources folder.
3. Click Done.

Adobe DPS (2015) version 2015.2.100 2015 July 29  Page 17

 Create additional articles
1. Follow similar steps to create additional articles. (Before you can create articles, you
Selection Tips
must first deselect any selected article.) Shift-click to select contiguous
articles.
Command/Ctrl-click to select
non-contiguous articles.
Click an article to select it and
deselect others.
Click an article check box to
select or deselect it and leave
previous articles selected.

For each article, specify the Article Title and Author, upload an article image, and upload
an article file (either .article or .zip). There are a number of available assets in the Dps-assets
> ContentResources folder.

Publish articles
Publishing articles pushes them to the Distribution Service, where they can be downloaded Publish or Preview?
and viewed in your app.
If you built an app with Enable
1. In Content & Layouts, select the articles you want to publish. Shift-click to select multi-
ple articles. Preview selected, click the Preview
2. Click the Publish icon, and click Publish to confirm. icon in Content & Layouts when-
When the articles are published, their status changes to Published. If you edit the article, ever you want to view published
the status changes to Published, Out of Date. and unpublished content. Before
Before we can look at the published articles in your app, we need to add them to collec- you preview articles, youll need to
tions. add them to collections and finish
setting up your app.

Adobe DPS (2015) version 2015.2.100 2015 July 29  Page 18

 Create a collection
A collection consists of content elementsarticles, ads, banners, or other collections. For
example, a collection can be a monthly issue of a magazine, a set of articles by a certain
author, or a group of best of articles from various collections.
Watch Video
In the app, a collection can be displayed as a browse page. The browse page appearance
is defined by card and grid layouts. Manage Collections video
1. In the Portal, click Content & Layouts.
2. Click Collections.
Depending on your project settings, you will see either a single default collection
or default tablet and default phone collections. This special collection determines
which items appear in your app menu. Well add items to this top-level collection later.
3. Click the Create New Collection icon to add a collection.

4. For Collection Name, type a unique name such as yellowCollection.

5. Specify a Collection Title (such as Yellow Collection) and a Short Collection Title
(such as Yellow).
The Collection Title is commonly displayed in card layouts. If you specify a Short Col-
lection Title, it appears in the app menu instead of the Collection Title.
6. For the Collection Open Default option, select Browse Page so that the collection
browse page is displayed instead of the first article in the collection.
7. For Product IDs, specify a Product ID for the collection. We recommend that you use
a reverse DNS format, such as com.company.projectname.collectionname.

Adobe DPS (2015) version 2015.2.100 2015 July 29  Page 19

 The Product ID you specify is added to the list of Product IDs in the Products & Sub-
scriptions area of the Portal. You can also add Product IDs to Products & Subscriptions
and choose them when editing the collection.

8. Add any other metadata you want to experiment with. Metadata is especially import-
ant when mapping content to cards. You can edit collection metadata at any time.
9. Click Upload Image, and then double-click the file you want to use for the thumbnail
image and then the optional background image. The Dps-assets > Collection Resourc-
es folder includes collection images that you can use.

10. Click Done.

Adobe DPS (2015) version 2015.2.100 2015 July 29  Page 20

 Add items to the collection
You can add articles and a collection to both the home collection and the default collection.
1. In Content & Layouts > Collections, select the collection you created.
2. Click the icon to add items to the collection.

3. Select the articles you want to add, and click Add. In our example, we added the yellow
articles to the yellow collection.

Adobe DPS (2015) version 2015.2.100 2015 July 29  Page 21

 4. Click the twirl-down arrow next to the check box to get a quick preview of the collec-
tion contents.

5. Double-click the collection title to edit its contents. For example, you can remove
items, or drag items to change their order.

6. Select the collection, and click the Publish icon to publish it.

Create additional collections

1. Follow the same process to create a few
more collections:
Click the selected collections check
box to deselect it, and then click the
New icon.
Specify a Collection Title, a
Product ID, and a Collection Image
for each collection.
Add articles to each collection.
Double-click a collection to edit its
contents.
2. Publish the collections.

Adobe DPS (2015) version 2015.2.100 2015 July 29  Page 22

 Set up a collection hierarchy
Now that you have a basic set of articles and collections in place, youre ready to determine
how they will be displayed in the app. You have a number of different options. In this tutori-
al, you will add two more collections to create a nested structure.
1. Create a collection that will display additional, non-featured collections. In our exam-
ple, we call this the Reference collection.
2. Add collections to this Reference collection, and publish it. In our example, we added
all the color collections except for Purple, which well be featuring.
3. Create a collection that will act as the initial view when your app launches. In our
example, we call this the Launch collection. We added the Purple collection, a few
articles, and the Reference collection.
4. Add collections and articles to this Launch collection, and publish it.

Adobe DPS (2015) version 2015.2.100 2015 July 29  Page 23

 Add items to the top-level default collection
Items you add to the default collection become top-level content. Top-level content ap-
pears in the app menu. The top-most item in the top-level collection is displayed when the
app launches.
1. In Content & Layouts, click the default collection, and then click the pencil icon to edit
properties.
2. Click the Images tab, click Browse under Collection Image, and specify any image.
The image you specify for the top-level collection does not appear in the app; howev-
er, at this time, its still required.
3. Click the icon to add items to the default collection.
4. Select the collections you want to add, and click Add. In our example, we added only
the Launch collection and the Reference collection.
5. Make sure that the top-most item in the default collection is the Launch collection. In
our example, we want Launch to be above Reference. (Double-click the collection
title to reorder items.)
6. Publish the default collection.
Items in the top-level nav
collection appear in the
app menu.

The browse page of

the top-most item
appears when the
app launches.

Adobe DPS (2015) version 2015.2.100 2015 July 29  Page 24

 View the app
1. Make sure that you have created, signed, and loaded the app onto your device.
2. If you selected Enable Preview in your app, click the Preview icon in the Content and
Layouts section of the Portal.
3. Launch the app on your device.

Adobe DPS (2015) version 2015.2.100 2015 July 29  Page 25

 Designing the App Experience
CARDS AND LAYOUTS help determine the appearance of a collection browse page. Each
project includes a default card and a default layout. You can edit these defaults, and you can Watch Video
create additional cards and layouts.
Cards and Layouts video
Three factors determine the appearance of a collection browse page: card layouts, grid
layouts, and the collection content properties.

Edit the default layout

Lets add margins and gutters to the default grid layout.
1. In Content & Layouts, click Layouts.
2. Select the Default Layout, and click the properties pencil
icon to edit it.
3. In the Layout Details tab, specify margin and gutter
spacing.
4. Click Done, and then publish the grid so that the changes
are reflected in your app. (It may take a few seconds for
the changes to appear in the app.)

Adobe DPS (2015) version 2015.2.100 2015 July 29  Page 26

 Create new cards
When you create a card, you design the card, define the number of grid cells it spans, and
specify other properties.
In this tutorial, youll create two new cards: a 4x2 card that displays collections and a 2x1
card that displays featured articles. Feel free to design your cards however you want.
1. In Content & Layouts, click Cards, and click the icon to create a card.
2. Define the card properties.
For our first card, we created a card that spans 4 columns and 2 rows. We used one
metadata field for the Title, which we centered vertically. We increased the text size of
Title.

3. Click Done. Then publish the card.

4. Create another card for high-priority articles.
For our second card, we created a 2x1 card with two metadata fields: one for the Title
and one for Author. We used two different font sizes and used black text. We also add-
ed a top red border.
5. Click Done when you finish defining the card, and then publish it.

Adobe DPS (2015) version 2015.2.100 2015 July 29  Page 27

 Create a new layout
In this tutorial, youll create a new grid for collection browse pages that display articles..
1. In Content & Layouts, click Layouts, and click the icon to create a layout. (Click the
check box next to Default Layout to deselect it, if needed.)
2. Name the collection and specify layout properties.
In our example, we created a 4-column layout with margins and gutters. Feel free to
experiment with any design sizejust make sure that you create a layout large enough
to display your cards. For example, a 4-column card cannot be displayed on a 3-col-
umn layout.
Now youll set up rules to map cards to content. Note that mapping rules do not deter-
mine the order of items on the browse page. Instead, mapping rules determine which
cards are assigned to which content. The first mapping rule that matches the content is
applied.
3. Click the Card Mapping tab. Click the icon to create a mapping rule. Leave the default
settings as is because this rule should map a card to any content.

4. Click Next, select Default Card, and click Done.

Now youll create a second mapping rule that applies high-priority articles to the larger
card.

Adobe DPS (2015) version 2015.2.100 2015 July 29  Page 28

 5. Click the icon to create a mapping rule. Choose High from the Importance pop-up
menu.

6. Click Next, select the new card you created, and click Done.

The more specific rule should be above the 1x1 rule; otherwise, the high-importance
articles will be assigned to 1x1 cards. Lets add one more rule.

Adobe DPS (2015) version 2015.2.100 2015 July 29  Page 29

 7. Click the icon to create a mapping rule. Choose Collection from the Type pop-up
menu, and then click Next. Select the collection card, and click Done.

8. Click Done, select the layout, and click Publish.

9. In Content & Layouts, click Content, and edit article metadata to make sure that the
content will be applied properly to the cards.
For example, if your layout includes a mapping rule for articles set to a High impor-
tance, make sure that the first article in the collection is published with Article Impor-
tance set to High.

Adobe DPS (2015) version 2015.2.100 2015 July 29  Page 30

 10. In Content & Layouts, click Collections, and use the Layout tab in Collection Properties
to assign the new grid layout to at least one of your collections. Publish the collection.

11. View the modified collections in your app.

If you created an app with Enable Preview selected, click the Preview icon to view the
changes. Continue to fine-tune your cards and layouts, and click the Preview icon whenever
you want to view updates.

Adobe DPS (2015) version 2015.2.100 2015 July 29  Page 31

 Congratulations! You have completed this tutorial. Continue to experiment with different
designs and approaches. For additional information.
Read Help articles.
Visit the forum (http://forums.adobe.com/community/digitalpublishingsolution).

Our Launch collection displayed

in a browse page.
Tapping the Reference Materials
card displays this browse page.
Tapping an article card displays
one of the HTML articles.

Adobe DPS (2015) version 2015.2.100 2015 July 29  Page 32

Adobe DPS (2015) version 2015.2.100 2015 July 29  Page 33