Posts tagged "web overrlays"

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

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