Posts tagged "InDesign"

Determining DPS Reader context with JavaScript and HTML

I have many customers who ask how to deliver different content to readers based on their reading context. For instance, I have a magazine customer who wants to ensure that readers who are using browsers to read a magazine online receive a message telling them that they can read the magazine offline on their tablet. While there is no way to distinguish between an app-based reader and a browser-based reader for DPS-native overlays, it is possible to do it in a Web Content overlay using JavaScript. (If you have my DPS Examples app installed on your iPad, and you’re reading this blog on your iPad, then tap here to see an example of content that changes with context.)

The object window.location.protocol will return file: for app-based readers, and it will return http: for browser-based readers. Using this, we can make a function to switch a div on or off based on the value of window.location.protocol.

Consider the following HTML snippet:

<head>
<!--I'm using Typekit for the web font and HTMLResources for the tablet
You'll need to get your own kit (available with your Creative Cloud membership)
and include contentviewer.adobe.com in the kit settings
-->
<script type="text/javascript" src="//use.typekit.net/get_your_own_typekit_code.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script>
 //This function turns divs on or off depending on how the reader accesses the folio
function webOrApp() {
 if (window.location.protocol == "file:") {
 document.getElementById('webMessage').style.display = "none";
 }
 else
 {
 document.getElementById('appMessage').style.display = "none";
 }
}
</script>
<!--the styles are just to show differences between app and browser
--><style type="text/css">
@font-face { font-family: minion-pro-bold;
 src:url(../../../HTMLResources/fonts/MinionPro_Bold.otf) format("opentype");
 } 
.web {
 font-family: "minion-pro-display",serif;
 font-style: normal;
 font-weight: 700;
 font-size: 36pt;
 color: #CFF;
 text-align: center;
}
.app {
 font-family: "minion-pro-bold",serif;
 font-style: italic;
 font-size: 36pt;
 color:#FCF;
 text-align: center;
}
</style>
</head>
<body bgcolor="#0000FF">
<div id="webMessage" class="web">This message is for readers on the web.<br>
<img src="chimp.png"></div>
<div id="appMessage" class="app">This message is for readers in the app.<br>
<img src="monkey.png"></div>
<script>webOrApp();</script></body>

This very basic example loads the page and then fires the switching function at the end, so that it can “see” the two divs and therefore hide the appropriate one. If the reader is using an app, then window.location.protocol returns file: and the div called “webMessage” gets switched off. In order for it to work for you, you will need to provide two images to replace my chimp.png and monkey.png. Put them in a folder along with an html file containing the snippet, make a Web Content overlay, and point it at the html file. Be sure to set it to auto play, and depending on the content of the divs, you might want to turn off “Allow User Interaction.”

The example also includes fonts to match the InDesign layout. In the App, I use the HTMLResources folder, about which you can learn more about in the help file for Hyperlinks. In the browser, I use fonts from Typekit, which is a web-based font service from Adobe that’s part of Creative Cloud Membership. You could also use Adobe Edge Web Fonts or other hosted web font services.

Now, to test how this works, you need to make a folio, add your InDesign file as an article, publish the folio into an app that has Web Renditions enabled and Social Sharing turned on in the Viewer. Notice the publish the folio instruction. In order to see the folio in a browser, you need to publish to a Viewer App and then socially share the article. Since Single Edition can’t use social sharing, this will only apply to customers who use Pro or Enterprise. In addition, in order to test whether this works, you will need access to a DPS Application account that has Web Renditions enabled and a Viewer App that has Social Sharing turned on. Once you’ve published, open the folio, browse to your app, and then share it by email with yourself to test.

Here is how the folio renders on an iPad:

context_on_ipad

…and in a browser:

context_in_browser

The ease with which we can distinguish between readers in a browser and readers in an app allows publishers to provide content that can target users based on how they engage with that content, as well as to offer differentiated advertising. It also allows you to take advantage of browser features that won’t work on a tablet due to the limitations of the WebKit overlay, simply by making two versions of the HTML and switching on the appropriate div. Sometimes, simple solutions open up complex possibilities, and this is one of those solutions.

Share on Facebook

Launching external apps from a DPS folio

Inter-app communication is a frequent request from my DPS customers. For instance, they would like to be able to launch Mail with a message already populated, or send a tweet, or post to LinkedIn. While it could be possible to do that within a Web Content Overlay, often times it is preferable to send a request to the native application or service on the device.

iOS applications have a method to allow apps to talk to each other called a Custom URL Scheme. Not all apps make use of this feature, though; it is up to the developer to implement it properly. This method is documented at Apple’s Developer Connection, and I have an article in the Adobe Developer Connection that uses the Custom URL Scheme method to navigate within a DPS folio using JavaScript and HTML. This article will discuss communicating with external apps via the Custom URL Scheme.

Some Custom URL Schemes are well understood and have been part of the HTML consciousness for a long time.

mailto:

and

tel:

are used frequently to send emails and dial a telephone, for instance. I have an article in this blog that talks about using the mailto: Custom URL scheme. How, then, can we use similar methods to communicate with other apps? First, we need to determine the Custom URL Scheme that is registered to an app. Some apps make their Custom URL Schemes well known, like Google Maps. Others do not. You can search for apps and get some help with how to craft a URL at Magnatron’s handleOpenURL site. Searching that site for Twitter, for instance, I can see that the native Twitter app uses the “twitter:” scheme and some directives to start the Twitter app and have it so something. Here are some of the commands:

twitter://user?screen_name=jameslockman
twitter://timeline
twitter://mentions
twitter://messages
twitter://list?screen_name=jameslockman&slug=abcd
twitter://post?message=hello%20world

It’s clear that if we know how to properly phrase our request, then we can easily create integrations between DPS apps and other native apps. Armed with the Custom URL Scheme, I decided to try to use it for a specific use case.

I had a request from a customer who needs to launch a Connect meeting on their iPad from a DPS application. The customer wants to provide eLearning content in DPS for offline use, and then provide a button in the DPS folio that will launch Connect Mobile and pre-populate the meeting room information.

I asked around internally, and the Connect Mobile folks were kind enough to provide me with the following Custom URL Scheme for Connect Mobile:

connectpro://https://connect.server.address/connect.room.path

OK, I thought, I’ll just make a button in InDesign and set it to go to the URL. Unfortunately, when I tap the button, the colon (“:”) after “https” didn’t pass over to Connect Mobile, so the URL got passed as

https//connect.server.address/connect.room.path

In addition, DPS launched an empty Web Overlay so that when I returned to the folio, I had to tap the “Done” button to close the overlay. Not very elegant, and not exactly what I was looking to accomplish.

After some back and forth with a few people on the Connect side (Props to David Knight, Vincent Le Quang and Minh Huynh for taking time out of their busy days to help diagnose the issue) and a lot of trying and failing with variations on escaping the colon character, it dawned on me that the solution was easy and should have been obvious.

When we create a button or hyperlink in InDesign, that button’s or hyperlink’s URL target gets passed out of the folio and to the Content Viewer, which then passes it on to iOS. This is two steps, and the special character was getting decoded and then left behind, which makes sense. The answer is to use a Web Content Overlay, which provided only one step to iOS as it is a native iOS Webkit Overlay.

I made an HTML snippet, escaped the problematic colon character with %3A, and inserted the HTML (Object>Insert>HTML) into my folio:

<a href="connectpro://https%3A//connect.server.address/connect.room.path">tap here to go to the meeting (%3A escaped)</a>

InDesign recognized the inserted HTML as a Web Content Overlay, so all that’s left to do is to set the Web Content overlay to auto play. Now, when I tap the link in DPS, my Connect Mobile app launches, the meeting URL is filled in, and all I need to do is tap Next to log in to the room. Once the session is running, I can use the 4 fingered swipe to switch back and forth between the DPS app and Connect. Pretty neat!

In most cases, you should be able to use Custom URL Schemes on buttons and hyperlinks directly from InDesign. However, you may need to put that URL into a Web Content overlay in order to allow special characters to pass out to iOS, and ultimately to your external app. Of course, it is possible to use JavaScript to dynamically compose a Custom URL Scheme request, so expect some more interesting examples from me in the future.

Share on Facebook

Programmatic Navigation in DPS article live on Adobe DevNet!

Often I get the question: how can I just push a button and reset my folio to its initial conditions? The answer can be found in my latest article in Adobe’s Developer Connection article.

Be sure to have my DPS Examples app loaded on your iPhone or iPad when you read the article, so you can test the reset button yourself.

Share on Facebook

DPS Examples app now available for iPad and iPhone

Many of you have asked for an app that provides examples of the DPS techniques that I outline in this blog. Well, at long last, I’ve pulled it together.

DPS Examples is an app for iPad and iPhone, available now in the iTunes Store. It provides functional examples as well as direct access to the blog posts to which they refer. Going forward, new articles will always feature a correlating folio in DPS Examples, and I’ll work to backfill over the next few weeks. Of course, it’s free, so go ahead and download it from iTunes and give it a spin. Be sure to accept push notifications so I can alert you to new posts as they arrive.

Share on Facebook

Using Adobe Captivate projects in DPS folios

Update: This method no longer works for Captivate 7 projects. See the post about using Captivate 7 projects in DPS folios.

I have many customers who ask whether eLearning and Adobe Digital Publishing Suite can play well together. While DPS isn’t designed to support Learning Management System (LMS) based course management and content delivery, it is possible to use HTML5 eLearning content in your DPS folios. In addition, it is possible to use Direct Entitlement as a method for restricting specific learner’s access to learning units. Ideally, you would add the entitlement APIs to your existing LMS, which would allow you to leverage your existing course management and reporting infrastructure with DPS as the delivery vehicle. Conveniently, Captivate 6 now supports HTML5 output for your eLearning projects and AICC reporting for your assessments. In this article, we will explore how to use Captivate to create HTML5 eLearning content for use in DPS. We will not explore how to integrate Direct Entitlement APIs with your LMS. (If you have my DPS Examples app installed on your iPad, and you’re reading this blog on your iPad, then tap here to see examples of Captivate content running in a DPS folio.)

It is important to create learning units that will fit on the iPad screen. iPad 1&2 have pixel dimensions of 1024×768, and New iPads have a pixel dimension of 2048×1536. Captivate has some project presets that are designed for iPad 1&2. You will notice that the projects have dimensions that are shorter than the height of the device. This allows for navigational user interface (UI) controls to be shown when the learner views the content. Since the Captivate Projects will be imported as Web Content Overlays in InDesign, you need to be sure to include an area for swiping to the next article or page, or perhaps InDesign buttons with navto:// hyperlinks that sit on top of the learning content so that the learner can use them for navigation.

Having properly sized your project, go ahead and create Video Demos, Software Simulations and Assessments with Captivate. Note that since many Captivate interactive elements are based on Action Script, they won’t work with DPS. Check the help system to see a comprehensive list of what does an what doesn’t work in HTML5. Fortunately, Captivate 6 includes an HTML5 preflight tool called HTML5 Tracker. It’s located under Window>HTML5 Tracker.

The HTML5 Tracker will check your project and report on any slides that won’t export properly. Use this tool for initial assurance that the project includes no unsupported features for HTML5 output. Having passed the first test, you should preview your project in a browser. Find this option under File>Preview>HTML5 Output in Web Browser. Be sure to check on a Webkit-based browser like Safari or Chrome, as DPS uses the embedded iOS Webkit browser for displaying HTML content.

 

If your project includes assessment, then you need to ensure that it is configured to use AICC results reporting and that your LMS can receive the reports from your project.

Having proven that your project works in a browser on your computer, it’s time to publish your project. Choose File>Publish. Disable SWF and enable HTML5. Disable Scalable HTML5 Content as well, since the learner won’t be able to resize the browser window on their iPad. Create a new folder in which to publish, and push the Publish button.

While normally a good thing, the index.html file that Captivate 6 makes includes a browser check. This browser check doesn’t know about the embedded webkit browser that DPS uses, so we need to remove it from the index.html file. Open it in your favorite text or HTML editor and remove the two script tags indicated below.

Having removed these tags, save the file and make a Web Content Overlay in your DPS project, point it at the index.hml file, and you’re done.

I have successfully tested this with quizzes, software simulations and software demos. There are many other use cases for Captivate, and I encourage you to explore eLearning with the potent combination of DPS and Captivate 6.

Share on Facebook