(For more resources related to this topic, see here.)

Standard HTML5 publishing

You will first publish your project using the standard HTML5 publishing options:

1. Open the HDSB_publish.cptx file.
2. Click on the publish icon situated right next to the preview icon in the main toolbar. Alternatively, you can also go to the File | Publish menu item.

   The Publish dialog contains all of the publishing options of Captivate 7, as shown in the following screenshot. In the left column of the dialog, of six icons marked as 1, represent the main publishing formats supported by Captivate. The area in the center, marked as 2, displays the options pertaining to the selected format.

   

3. Take some time to click on each of the six icons of the left column one-by-one. While doing so, take a close look at the right area of the dialog to see how the set of available options changes based on the selected format.
4. When done, return to the SWF/HTML5 format, which is the first icon at the top of the left column.
5. Type hdStreet_standard in the Project Title field.
6. Click on the Browse button associated with the Folder field and choose the /published folder of your exercises as the publish location.
7. In the Output Format Options section, make sure that the HTML5 checkbox is the only the one selected.

   If necessary, adjust the other options so that the Publish dialog looks like the previous screenshot.

8. When ready, click on the Publish button at the bottom-right corner of the dialog box to trigger the actual publishing process.

   This process can take some time depending on the size of the project to publish, and on the overall performances of your computer system. When done, Captivate displays a message, acknowledging the successful completion of the publishing process and asking you if you want to view the output.

9. Click on No to close both the message and the Publish dialog.
10. Make sure you save the file before proceeding.

    Publishing your project to HTML5 is that easy! We will also use Windows Explorer (Windows) or Finder (Mac) to take a closer look at the generated files.

Examining the HTML5 output

By publishing the project to HTML 5, Captivate has generated a whole bunch of HTML, CSS, and JavaScript files:

1. Use Windows Explorer (Windows) or Finder (Mac) to go to the /published/hdStreet_standard folder of your exercises.

   Note that Captivate has created a subfolder in the /published folder we specified as the publish destination. Also notice that the name of that subfolder is what we typed in the Project Title field of the Publish dialog.

   Unlock access to the largest independent learning library in Tech for FREE!

   Get unlimited access to 7500+ expert-authored eBooks and video courses covering every tech area you can think of.

   Renews at $15.99/month. Cancel anytime

   START FREE TRIAL

   The /published/hdstreet_standard folder should contain the index.html file and five subfolders, as illustrated by the following screenshot:

   

   • The index.html file is the main HTML file. It is the file to open in a modern web browser in order to view the e-learning content.
   • The /ar folder contains the audio assets of the project. These assets include the voice over narrations and the mouse-click sound in .mp3 format.
   • Every single HTML5 Captivate project includes the same /assets folder. It contains the standard images, CSS, and JavaScript files used to power the objects and features that can be included in a project. The web developers reading these lines will probably recognize some of these files. For example, the jQuery library is included in the /assets/js folder.
   • The /dr folder contains the images that are specific to this project. These images include the slide backgrounds in .png format, the mouse pointers, and the various states of the buttons used in this project.
   • Finally, the /vr folder contains the video assets. These include the video we inserted on slide 2, as well as all of the full motion recording slides of the project.

   All of these files and folders are necessary for your HTML5 project to work as expected. In other words, you need to upload all of these files and folders to the web server (or to the LMS) to make the project available to your students. Never try to delete, rename, or move any of these files!

2. Double-click on the index.html file to open the project in the default web browser.
3. Make sure everything works as expected. When done, close the web browser and return to Captivate.

   This concludes our overview of the standard HTML5 publishing feature of Captivate 7.

Testing the HTML5 content

Producing content for mobile devices raises the issue of testing the content in a situation as close as possible to reality. Most of the time, you'll test the HTML5 output of Captivate only on the mobile device you own, or even worse, in the desktop version of an HTML5 web browser. If you are a Mac user, I've written a blog post on how to test the Captivate HTML5 content on iOS devices, without even owning such a device at http://www.dbr-training.eu/index.cfm/blog/test-your-html5-elearning-on-an-ios-device-without-an-ios-device/.

Summary

You learned about the publishing step of the typical Captivate production work flow. You learned how to publish your project using the standard HTML5 publishing options. We also used Windows Explorer (Windows) or Finder (Mac) to take a closer look at the generated files. By publishing the project to HTML 5, Captivate has generated a whole bunch of HTML, CSS, and JavaScript files.

Resources for Article:

Further resources on this subject:

• Top features you'll want to know about [Article]
• Remotely Preview and test mobile web pages on actual devices with Adobe Edge Inspect [Article]
• An Introduction to Flash Builder 4-Network Monitor [Article]