Posts tagged "Adobe"

Using Twitter feeds in Adobe DPS

Edit: 7/19/2013  Twitter once again updated its APIs, so this article is inaccurate. I am working on a solution, and will update this article when I have one that works. There is a suggestion over in the DPS Forums, but the results seem to be spotty.

Recently Twitter changed its widgets so that they will no longer run outside of a web site. This presents a problem for folks who have relied on embedded Twitter widgets in their DPS publications. There is a workaround which should present no problem to readers, since they need to be online in order to read Twitter content in the first place.

First, post your widget to a web site, then either refer to it directly from your web overlay or embed an HTML file in your folio that contains an iframe that displays your widget. Here’s a more concrete example.

I have a widget called dpstweets.html, which displays all of the tweets that reference @adobedigitalpub. It resides at http://www.jameslockman.com/dps/jamestweets/dpstweets.html, and it consists of the following code:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>DPS Twitter Feed</title>
<style>
 .body
 {background-color:transparent}
</style>
</head>
<body>
<div>
 <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
 <script>
 new TWTR.Widget({
 version: 2,
 type: 'search',
 search: '@adobedigitalpub',
 interval: 30000,
 title: 'Adobe DPS',
 subject: 'See what\'s trending',
 width: 180,
 height: 187,
 theme: {
 shell: {
 background: '#8ec1da',
 color: '#ffffff'
 },
 tweets: {
 background: '#ffffff',
 color: '#444444',
 links: '#1985b5'
 }
 },
 features: {
 scrollbar: false,
 loop: true,
 live: true,
 behavior: 'default'
 }
 }).render().start();
 </script>
</div></body>
</html>

That in itself is pretty plain vanilla. However, if I were to embed this file into my DPS app as a web overlay, I would get a blank white rectangle. The easiest solution is to make my web overlay point to http://www.jameslockman.com/dps/jamestweets/dpstweets.html. I set it to auto play, allowed interactions, and made it transparent. Of course, that’s hard to see unless you preview the folio on your desktop or on your tablet.

The other solution is the iFrame, and it’s easy to implement.

I made a second HTML file that I called dpsiframe.html, and in the body tag, I put this:

<iframe src="http://jameslockman.com/dps/jamestweets/dpstweets.html" width="200" height="312" frameborder="0" marginheight="0" marginwidth="0">Your browser doesn't support iFrames</iframe>

You can look up how to stylize iFrames with CSS and with their own tags, but once I put this new html file into my web overlay in my folio, it worked like a charm.

CS6 users have an additional bonus feature, though. In InDesign CS6, you can just copy and  paste the <iframe src-” … /iframe> line of code into InDesign, and InDesign will make a nice poster frame of the page for you when you paste. It makes it much easier to figure out how the widget will fit into your layout. Give it a try with my iframe code above, and tell me that’s not awesome. You can’t, can you? Unless, of course, Twitter changes its widgets again and makes them unusable in iFrames.

Share on Facebook

Using content from InDesign documents in CQ5.5

When Adobe acquired Day Software, it got not only a revolutionary Web Content Management system, but also a revolutionary Digital Asset Management platform based on CRX, Day’s implementation of the Java Content Repository. Quick to recognize its potential as a binding agent for an end to end Adobe workflow that included asset creation and management, campaign deployment, measurement and targeting, and campaign refinement, CQ quickly jumped to the forefront of many of our minds here at Adobe.

Adobe Drive 3 can connect to a CQ DAM and provide version control for Creative Suite assets. While this functionality existed with CQ5.4, in CQ5.5, there are some built-in examples of how CQ can extend an InDesign workflow to the Web. CQ5.5 ships with a couple of workflow scripts designed specifically for InDesign Server, which is required for them to function. Without InDesign Server available to CQ, what follows won’t happen. If you are a CQ customer and would like to try this for yourself, download the InDesign Server trial and install it on the same server where you keep CQ5.5. Otherwise, read on and you’ll get a sense of what’s possible with CQ DAM and InDesign Server.

InDesign server must be running and servicing requests on port 8080. On my Mac, I issue the following terminal command to fire up ID Server prior to starting CQ. I assume that it’s similar on Windows:

/Applications/Adobe\ InDesign\ CS5.5\ Server/InDesignServer.app/Contents/MacOS/InDesignServer -port 8080

Once it’s running, it’s safe to start CQ in author mode. We’re looking at an author instance, not a publish instance, from this point forward. Once it’s running, you can mount the repository with Drive 3. Open Drive 3 and connect to your DAM. In my example, I’m running CQ on my local machine, hence the localhost connection.

Once connected, I can browse content in the DAM as if the DAM were a filesystem. CS apps such as Photoshop, Illustrator, InDesign, InCopy and Bridge understand that when CQ DAM is mounted via Drive, they can check files into and out of the DAM and access versions of those files in the DAM. This article isn’t about version control, though, it’s about repurposing content from InDesign in CQ5.5.

When I drop an InDesign file into the DAM via Bridge, Bridge creates a version and checks the file into CQ. In CQ, the appearance of that InDesign file fires off a series of workflow steps that, with the help of InDesign Server, create previews of that file, extract an IDML rendition of that file, extract text and images from that file, and assemble those items into a Page node in CQ. It’s this page node that’s the really, really cool product of ingestion.

Page nodes are reference-able in CQ using a reference component. Normally, when you place a reference component onto a page in CQ, you double click it and browse to the page you want to reference. Unfortunately, when CQ and InDesign Server make the page node of your InDesign file, it places that page into the “renditions” folder, which is a reasonable place to store it. Unfortunately, the Reference component doesn’t know how to look into the Renditions folder for this Page note. Fortunately, a colleague on the Chinese Solutions Consulting team, Joseph Lee, figured out a simple solution that allows us to use this page node as a source of content for other pages on our CQ site.

In the diagram above, the selected page node needs to move up two levels in the hierarchy so that it is at the same level as the jar:content node, just below the InDesign file’s primary node. We can drag it up there in CRXDE Lite, but that’s pretty “dirty,” as Joseph was quick to point out. Looking at the workflow, however, he identified a single modification that puts the page node into a place where it can indeed be found by a reference component. Note that it will no longer appear in the Renditions tab when you browse to the InDesign file in DAM, however. I think that the trade-off is worth it, though.

The change we need to make is in the DAM Update Asset workflow. Browse to your workflows console and double click DAM Update Asset. At the bottom of the workflow, there’s a step called Page Extraction. This is one of the new steps that’s included in CQ5.5. You need to change the Page Root Path to “/.” (do not include the quotes) just like below. This will instruct the workflow to create the page node directly below the InDesign file’s primary node. Once you’ve made the change, click OK and then Save in the upper left hand corner of the window. Now, you’re ready to reuse content from your InDesign files in your CQ pages.

To see this in action, let’s look at what the reference component will see after this workflow change, and after we either ingest a new InDesign file or make a change to it and check it back into the DAM, either of which will trigger the InDesign Page Extraction workflow and fix the page node location. Once you do this, you can now browse to it from a reference component.

In the figure above, I have selected a story that’s present in my InDesign document. Here it is in InDesign:

Now, here it is on my CQ page.

Now, here’s the really, really cool part. Nowhere in this process was I required to send my InDesign document overseas for XML extraction in order to get its content back into my Web Content Management system. Ingestion took literally seconds and allowed my authors to use the text and images from my InDesign documents immediately. In addition, when a user makes a change in InDesign and checks the document back into the DAM, the text will update in my CQ Author instance so that I can gracefully publish it to the Publish instance when I am ready.

Thanks again to Joseph Lee for his elegant but powerful suggestion to expose the page rendition to reference components.

I know that this workflow is a demonstration of capabilities, but what an amazing demonstration it is. A capable developer could develop components and workflows which would allow a CQ user to edit that same referenced copy, and then would fire off a workflow to re-inject that content back into the InDesign document. How about the situation where a CQ user mocks up a page layout and then pushes a button to tell InDesign Server to build an InDesign document using a specific template and the text and images from the repository. The possibilities are endless.

I firmly believe that CQ5.5 and its ability to drive InDesign Server heralds the beginning of a new era in multi-channel communications. Already the lines between print and web and apps are blurred. With InDesign Server and CQ5.5, those lines disappear entirely. Now, content truly becomes independent of presentation, which frees the marketer or publisher to extend their reach in existing channels and expand their businesses into emerging channels.

Share on Facebook

Nested Overlay conundrum and solution for DPS

One of my customers’ favorite aspects of Adobe’s Digital Publishing Suite is how new features appear every 6 weeks or so. This rapid pace of development means that the DPS team can respond to customer requests for new functions in the Overlay Creator and the Folio Producer parts of the solution. One of the recent changes was the addition of what are known as Nested Overlays.

Nested Overlays allow you to combine multiple overlays into one object. For instance, you can now include a buttons, videos or a Pan and Zoom Overlay in your slide show. This is very handy when trying to create an interactive slide show like you see on popular news sites: there’s a photo with some text under it and six dots along the bottom, and when you touch a dot or swipe across the image, it takes you to the image or video that’s in the slide show.

I have heard from customers that while this seems to work on the desktop Content Viewer, it often fails on the iPad. I was surprised, so I did some investigating and here’s what I learned.

When you build a slide show, you need to create a Multi-State Object, or MSO. This MSO is a container for all of the different slides you want to present, with each state in the MSO representing a slide. Inside of each state, you can include DPS overlays. In my example, I have three slides in my slide show, so I have three states in my MSO. On the second slide, I have a Pan and Zoom Overlay, because the text is too big to fit in the space I’ve allowed. When I preview on the desktop, this works as expected. When I preview on the iPad, however, it doesn’t work.

The solution is easy, and I came upon it after following some of my own advice. When I first began teaching about interactive features in InDesign CS5, I exhorted my students to “think like a developer!” This meant that they needed to start naming their design elements if they wanted to have a productive relationship with the Flash developer who would take their comps/projects and turn them into full-fledged apps. This reduced guesswork and established a workflow that fostered collaboration between the two. Until InDesign CS5, designers all worked in Photoshop and sent layered PSDs with layer comps and written instructions to the developers, who chopped them up and added interactivity. This Photoshop-centric is still prevalent today, and it is fraught with errors in communication. I promote the idea of using InDesign as an interactive comping tool, however, and make judicious use of the layers panel to name my design elements. The key here is how InDesign names objects when you don’t.

By default, InDesign names all of its objects with the name of the primitive surrounded by brackets, like <rectangle> or <graphic frame>. If you place a graphic, the name becomes <nameofthisgraphic.psd> or whatever the graphic’s file name is. If you type some text, the first few words of the text frame become the name of the object, plus those surrounding brackets. It turns out that these names look suspiciously like HTML tags, but as tags, they have no meaning. I think (and I expect to get either some dope slaps or back slaps for this) that the webkit part of the iPad Content Viewer gets confused when it sees these names in the nested overlays. If you change the name of the overlay from InDesign’s default to something without brackets, your overlay will work as you expect.

In my example, I drew a box and pasted my text into it in order to make the Pan and Zoom overlay. InDesign named the box <graphic frame>. We can see this in the Layers panel. One of the great features of the Layers Panel is that we can use it not only to reorder the objects within a layer, but we can also use it to change the names of the objects. When I change the name to More Than Professors and update my folio, my overlay works as expected. It is not necessary to adhere to a strict Action Script naming convention, which would have a name like moreThanProfessors. The Content Viewer doesn’t seem to be bothered by spaces in the name, but if you’re going to be working with a Flash developer, then you should consider talking with them about how they want objects to be named.

On the left, the result with InDesign's default name. On the right, the result with my custom name.

Changing times require changing workflows. For interactive design and DPS specifically, it is time for designers and developers to share best practices. While naming conventions have never been a concern of a print designer, they are critical for a developer. In InDesign, these two worlds collide, and the collaborative workflow I have been preaching for the last two years is now paying off.

Share on Facebook

Using Adobe CQ5 as a repository for Acrobat Shared Reviews

Acrobat has a great feature called Shared Reviews, which allows an Acrobat Pro user to send a PDF to one or more people for their comments while allowing each of the reviewers to see all of the comments that had been made by all of the other reviewers. While the default method in Acrobat 9 and X is to use Acrobat.com as the repository, it is possible to use another server, such as Adobe CQ5, as the repository.

In a shared review, Acrobat needs two things: a PDF that has been prepared to receive comments and share them with other reviewers, and a network location that all of the reviewers can access for storing the comments. In a Shared Review, the comments are stored in a comment repository that is disconnected from the PDF itself. Acrobat uses this methodology so that it can always check with the repository to determine whether there are new comments that have been added to the PDF while you were away from it. It is very important that the repository be in a network location that is accessible to everyone, and that means using a WebDAV server. Why WebDAV? WebDAV shares use a path that looks the same on all operating systems, which is not the case for a SMB, AFP, or other operating system specific file system protocols. In addition, it is not necessary to mount the remote volume in order to communicate with it, since WebDAV has a number of file system access features that can be used through standard web calls. Acrobat knows this, so it does not need to mount the repository in order to use it for shared reviews.

To begin, we need to create a folder in CQ5 that will act as the repository for reviews. It is important that this repository be somewhat obfuscated to the casual user, so it is good to put it inside of a universal access folder that sits inside of an admin access folder. For instance, if I made a top level folder in the DAM called acrobat_reviews and inside of that another folder called repository, I would set the permissions on acrobat_reviews so that only the administrators can see it, and I would set the permissions on the repository folder so that everyone can read and write. You can also create a folder elsewhere in the repository that’s not in /var/dam. This is handy because it prevents Adobe Drive users from seeing the repository at all when they mount CQ DAM through Adobe Drive. Of course, you will want to consult your CQ system administrator to ensure that your repository location and permissions abide by your corporate policies.

Create a new folder in CRXDE LiteLet’s create a folder outside of CQ DAM and use it as our repository for Acrobat shared reviews. You will need a CQ5 Author instance to which you have administrative access and Acrobat X or a version of Acrobat that supports shared reviews. First, open up CRXDE Lite. You can create a folder other ways, but using CRXDE Lite is quick and only requires a web browser.

Navigate to the root of your CQ system, right-click on the root, and choose Create>Create Folder.

Name that folder acrobat_reviews. Right click on “acrobat_reviews” and choose Create>Create Folder again, and then name this new folder “repository”. The path bar should now show /acrobat_reviews/repository.

You’re not done yet, though, because the changes to the repository haven’t been written. You must click the “Save All” button to save the repository changes.

Now, let’s set permissions for the folders. Recall that we want to forbid access to the acrobat_reviews folder but allow access to the repository folder. In this example, we will use the user known as anonymous. You might want to use your LDAP or Active Directory groups to govern access, for instance, assuming that you have connected your LDAP or Active Directory system to your CQ instance. To set permissions, we need to use the CQ User Manager, otherwise known as CQ Security. Return to your CQ author instance landing page and click the User Manger. Double click the Anonymous user and click the Permissions tab.

Click the plus sign to the left of acrobat_reviews to show its subfolders. Leave the permissions on the acrobat reviews alone, and set the permissions on the repository to Read, Modify, Create and Delete as shown.

Click the Save link above the Path column heading to save the permission changes.

Now, we’re ready to use CQ as a repository for our Acrobat X Shared reviews.

In Acrobat X, open a PDF you want to send for Shared Review and click the Comment button to open the Comment Pane. Click the Send for Shared Review button, and then choose “Automatically collect comments on my own internal server” and click Next.

Choose the Web Server folder option. Enter the full URL to your repository. In my example, my repository is operating on my laptop and is running on port 4502. The URL to the repository is therefore http://localhost:4502/acrobat_reviews/repository. You will need to know your server URL and active port to the author instance in order to enter your own information, though. Click Next and Acrobat will prompt you for your credentials to access the repository. I used the Anonymous user, so I enter anonymous (lower case “a”) for the user and leave the password blank. If you click Save this Information, then the userid and password will be saved in Acrobat’s keychain. Each user who accesses the review will have to enter their own credentials. For groups, therefore, it makes sense to use groups to control access to the folder and therefore provide at least userid and password access to the reviews. Acrobat will create and delete a test file on the server, after which it will prompt you to choose how to send the review notification to reviewers.

You can choose to send the file with your default email application or send it later. If you are on a Mac, Acrobat looks for Microsoft Entourage, so if you aren’t using Entourage, then you might have trouble sending email from Acrobat on your Mac. In that case, save the file to attach to email later. On Windows, Acrobat supports more email clients. In any case, test to ensure that Acrobat supports your email client. If you decide to allow Acrobat to create the email, there are two options. You can choose to send the PDF as an attachment or as a link in the email message. Pick one, click Next, and then enter a name for your Server Profile. This will allow you to reuse these settings when you start Shared Reviews later.

Once you send the file to someone for review, they will need to be able to access the server, so be sure that the server URL is accessible to all of the reviewers. When a reviewer opens the PDF, they will login to the server, add comments, and then post them to the repository for other reviewers to see.

Because of its built-in WebDAV and easy to configure security, CQ5 is a great technology for Shared Review and Forms Data Collection workflows.

Share on Facebook

Adobe DPS course available at Lynda.com

There is a new course available at lynda.com to help users get started with Adobe’s Digital Publishing Suite.
with: James Lockman
Course Description:
Up and Running with Adobe Digital Publishing Suite shows designers how to create interactive publications for tablet devices using Adobe InDesign and the Adobe Digital Publishing Suite. Introducing this emerging publishing platform, author James Lockman discusses the DPS workflow, comparing it with existing EPUB and print workflows, and highlights key layout and design considerations when designing for DPS. The course explains how to incorporate hyperlinks, slideshows, panoramas, audio and video, and pan and zoom capabilities as a means of adding value to a publication. Lastly, the course sheds light on compiling interactive folios and testing and publishing finished projects. Exercise files accompany the course.
Topics Include:
  • Determining your digital publishing market
  • Designing for an interactive publication
  • Creating buttons
  • Setting up image sequences
  • Building the panorama viewer
  • Configuring audio and setting video playback options
  • Creating a web viewer portal
  • Structuring articles into folios using the Folio Builder
  • Testing a folio locally
  • Publishing folios
  • Building viewers for iPad and Android
Duration:
2.68 Hours
Here’s a sample:
Share on Facebook