1 April 2013
To follow along with this tutorial you will need:
User level: Intermediate, Advanced
|Required products||Sample files|
One advantage of the Adobe Digital Publishing Suite Enterprise license is the ability to add up to six custom navigation toolbar items (the Library and Viewer icons take up the remaining two slots). Many publishers use the custom navigation slots to bring readers to custom HTML storefronts, account settings pages, and FAQ content. What is interesting is that other publishers have started to take advantage of the navigation toolbar as a means to engage with their readers beyond DPS publications. A great example of this is Source Interlink's Motor Trend. Motor Trend has a very active community of driving enthusiasts that love to discuss and comment on the latest car news. Motor Trend also produces a large quantity of high-quality YouTube episodes. Rather than have readers jumping in and out of different apps to view their content, Motor Trend recognized that they could use custom navigation slots in their DPS app to give their users a centralized experience that promotes further exploration and participation (see Figure 1).
Start out by creating a high-resolution icon, which can then be saved down to the standard definition size. The HD retina icon size is 150×86 pixels. The standard definition icon is 75×43 pixels. If you are looking to match colors to the default Library and Viewer icons, the blue is #48DFFF. You can choose to give the background a darker color as the down-state, or you can save your icons with a transparent background, which will also look fine. If you are having a hard time matching the default Library icon, you can replace this icon with a custom-designed one.
If you would like to bring readers to an online website using the custom toolbar, the easiest way to achieve this would be to create a HTML page that contains a re-direct action. In the script tag you will see a URL listed. (Paste the text below into a document named index.html.)
<!DOCTYPE html> <html laneg="en"> <head> <title></title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/> <meta http-equiv="refresh" content="0;URL='http:// http://www.adobe.com/devnet/digitalpublishingsuite.html'" /> <meta http-equiv="Cache-control" content="no-cache"> </head> <body> </body> </html>
To add a custom icon to the navigation toolbar:
These options are shown in Figure 3.
To add a Twitter feed button to my app, I downloaded some sample code from TutorialZine, jQuery Twitter Ticker.
To get started, download the sample code attached to this article. Open the Script.js file in a text or code editor, and on the first line, enter the username for the Twitter user from which you want to pull tweets (see Figure 4).
In my example, I removed the Twitter bird graphic and the jScrollPane, as I felt the tablet's native scroll bar would function better (see Figure 5). Changing the look of the Twitter feed requires editing the demo.css file.
You can find additional tips on working with the Twitter Ticker on the TutorialZine site.
To load up an Instagram feed inside of my app, I repurposed the code outlined in Dan Pavitt's post on forrst.com.
I took the RAW code copied from the top of the post and pasted it into an HTML template. To grab your own Instagram feed, you need to make sure that you have your user ID and access token defined. The post on Forrst walks you through the process of obtaining your user ID and access token by working with the Instagram Developer page.
To work with the example file, open up the instagramfeed.html file in a text- or code-editing application (see Figure 6). On line 62, change the eight-digit user ID to match your own, and change the access token below that to match your account.
Figure 7 shows the results. The stylesheet for this content is very simple, with only five styles defined.
Tapping on any image will window-shade up the individual image page from Instagram (see Figure 8).
In my HTML template, I simply pasted the code that was generated by the RSS2HTML site. Although no stylesheets are explicitly called out in the HTML file, I was able to determine a few styles used by the code generator; Figure 10 shows the results. Feel free to modify the styles.css file included with the sample to suit your own needs.
Adding a YouTube video channel is incredibly easy. If you have created your own YouTube page, copy the URL and use the same method as the redirect example from the beginning of this article. In the example below, I have the YouTube Keyboard Cat channel loaded in the viewer.
<!DOCTYPE html> <html laneg="en"> <head> <title></title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/> <meta http-equiv="refresh" content="0;URL='http://www.youtube.com/channel/HCIaoXdyy-nYg/videos' " /> <meta http-equiv="Cache-control" content="no-cache"> </head> <body> </body> </html>
Figure 11 shows the results in the app.
With the release of R25, it is now possible to link to navigation toolbar items from within a folio. Create a button or a hyperlink in InDesign with a URL defined as: "goto://ApplicationViewState/[Label]" where the label is equal to the name of the toolbar button specified in DPS App Builder (see Figure 12).
For more ideas and resources, visit the Digital Publishing Suite Developer Center.
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.