Adding Multimedia to Your Connexions Content

Introduction Connexions modules can contain many different types of multimedia. This document explains how you can add the following types of multimedia objects to a module: Images Flash objects Movies Java applets Audio files LabVIEW demonstrations Any type of multimedia object that can be embedded in a Web page can be put into a Connexions module using the CNXML media tag. The only requirement is that the object must have a valid MIME (Multipurpose Internet Mail Extension) type. MIME is a protocol that enables the transmission of data, such as sound or movies, over the Internet without first having to be translated into an ASCII format. See MIME Types for more information. This module contains examples of the CNXML entries and their resulting displays for the different multimedia objects.

Using the media tag The media tag is used to insert media objects into a CNXML document. The media objects can be images, applets, movies, sounds, or any object with a valid MIME type. Media requires the attributes id and alt, and also has optional src, display, and longdesc attributes. Media must contain at least one of the following children tags: image, audio, flash, video, text, java-applet, labview, object, or download. Below is an example of how to use the media tag.


<media id="media_example" alt="a dog on a bed">
   <image mime-type="image/jpeg" src="image1.jpg"/>
</media>

The above code would result in this display:

If you need assistance adding a multimedia object, or you have questions about an object not listed in this module, please contact Connexions technical support at techsupport@cnx.org.

Making Media Accessible for All Users It is important for authors to remember that not all users are able to experience media the same way. Visually impaired users will not be able to view graphical content, while those hard of hearing will not be able to experience audio content as intended. As an author, should always strive to make their content as accessible as possible to all audiences; in addition to allowing more users to enjoy and benefit from your work, you will also make it easier for many organizations required by policy or law to provide materials that meet accessibility standards. Alt Text and LongdescAlt text is a required attribute of media and should be used to provide brief textual descriptions of visual content. These descriptions can be read by screen reading software packages used to assist visually impaired users. Keep your alt text short but descriptive; imagine somebody trying to describe an image you cannot see and think about the information you would find most important. Don't be redundant. The user is already aware that this is an image, so don't start your description with "This image is . . . " or "A picture of . . . " Keep it short and sweet. Describe only the relevant aspects of the image; it might for example, be important to describe the subject of a photograph as having freckles, but it is not necessary to count how many freckles she has on each cheek. Use correct grammar and spelling. For the majority of users requiring alt text descriptions, this content will be read out loud; these descriptions should adhere to the same quality and style standards used elsewhere in your work. longdesc (or "long description") files are used to describe images that are too complex to summarize in alt text. Rather than including the description in the CNXML markup, the full, detailed description is contained in a separate file that is linked from the media element. This allows you to describe the image in as much detail as necessary without needing to keep the description short. A longdesc file: Can be any file type, though a basic text-only HTML file is most appropriate. Can be loaded into a Connexions module like any other image or resource file. Is not a replacement for alt text, but instead is a chance for the author to elaborate on alt text. Is only necessary when the image is so complicated that an alt text description is not sufficient to describe it. The following example shows how to link to a longdesc file titled quarterly_report_desc.html:

<media id="longdesc_example" 
       alt="a brief description of the quarterly report image would go here" 
       longdesc="quarterly_report_desc.html">
   <image mime-type="image/png" src="quarterly_report.png" />
</media>

In this example, quarterly_report_desc.html would most likely be a simple text file describing the details of the chart, including the data points, overall trends, and any other relevant information. A screen reader user would have the option of following this link in order to get a detailed understanding of the data that would otherwise be conveyed and understood by sighted users through visual information.Captioned Video and Audio TranscriptsCaptioning is another important consideration when dealing with video content. Users who are hearing impaired may not be able to understand all of the information being conveyed in a video, limiting their access to the material being described. This can be addressed by submitting videos that are captioned, allowing those users to read along with the spoken materials. If you are not able to caption your videos, another option is to include audio transcripts of the materials as a module resource that can be easily accessed using a link. While there are no specific tools or standards for providing this type of content, the important thing to remember is to make it as easy as possible for as many people as possible to access the information you are trying to communicate.You can read more about how Connexions addresses accessibility concerns in m17212 - Accessibility Features of Connexions.

Images Some of the image file types and their corresponding MIME types used in Connexions modules are: epsmime-type="application/postscript" pngmime-type="image/png" jpgmime-type="image/jpeg" gifmime-type="image/gif" This list is not all inclusive. Any image with a valid MIME type can be used in a module.

Inserting an Image To embed images in your module, insert CNXML entries similar to the following example into the "index.cnxml" file for your module:


<figure id="figure-01">
   <title>Example Figure</title>
   <media id="figureexample" alt="an envelope with a blue page">
      <image mime-type="image/png" src="Xenveope-blue-on-blue.png"/>
   </media>
   <caption>A graphic image displayed as a figure.</caption>
</figure>

The src attribute in the image tag gives the location or source of the image that you want to appear in the module. After loading the image file into the 'Files' tab on your module, simply provide the full file name (e.g. "envelope-taller.png") to specify which image should be used. The actual display for the previous CNXML example is:

Adjusting the Size of the ImageYou can use optional size attributes to control the size of the image displayed in both online and print versions of the content. There are a few things to keep in mind when specifying image sizes in CNXML: Images that are displayed larger than their original size will look fuzzy or grainy. Resizing an image online relies on the web browser to determine how to redraw the image. This can sometimes lead to unpredictable and undesirable results that vary from browser to browser. Whenever possible, resize the image to the desired dimensions before loading the file into Connexions to avoid this problem. It is not necessary to specify both the height and width of an image. If you supply only one of these, the other value will be calculated to preserve the same height-width ratio as the original image. You only need to supply both when you wish to change the shape of the image. You can choose to resize an image for online viewing, printing, or both by supplying the corresponding attributes as described below. Sizes specified for one version have no effect on the other. If you do not supply sizing information, the image will be displayed in its original size by default.

Adjusting the Size of an Online Image You can adjust the size of the image in the on-line version of your document by using the height and width attributes. The following code will display the image in its original, default size:

<figure id="element-439">
   <media id="tajmahal" alt="The Taj Mahal">
      <image src="TajMahal_medium.jpg" mime-type="image/jpeg"/>
   </media>
   <caption>
      The photograph of the Taj Mahal in this figure and the following figures
      was taken by <link url="http://www.flickr.com/photos/babasteve/">Steve
      Evans</link>.  It is licensed for public use under the Creative Commons 
      Attribution License.
   </caption>
</figure>

This code results in the following image:

The following CNXML code shows how to display the same image with a specific size (in this case, 250 pixels wide by 250 pixels tall):

<figure id="figure_size_adjusted">
   <media id="TajMahal" alt="The Taj Mahal">
      <image mime-type="image/jpeg" 
             src="TajMahal_medium.jpg"
             height="250"
             width="250" />
   </media>
</figure>

The resulting figure is displayed below:

When specifying width and height, enter the value in pixels. For example, the code above will produce a print image that is 250 pixels tall and 250 pixels inches wide. It is not necessary to specify both the height and width of an image. If you supply only one of these, the other value will be calculated to preserve the same height-width ratio as the original image. You only need to supply both when you wish to change the shape of the image. The height and width attributes do not affect the size of the image in the print (PDF) version of the module. To change the printed size of the image, use the print-height attribute (see below). You can use any combination of print and online sizing attributes for an image.

Adjusting the Size of a Printed Image You can adjust the size of the image in the print (PDF) version of your document by using the print-width attribute. The height of the image will be adjusted proportionately to the width set in print-width. There is no print-height attribute. The following CNXML code shows how to display the Taj Majal image above with a specific printed size (in this case, 4.5 inches wide):

<figure id="figure_size_adjusted">
   <media id="TajMahal" alt="The Taj Mahal">
      <image mime-type="image/jpeg" 
             src="TajMahal_medium.jpg"
             print-width="4.5in" />
   </media>
</figure>

When specifying print-width include the unit of measurement in the value. This can be in (inches), cm (centimeters), pt (points) or any other value supported in LaTeX. The code above will produce a print image that is 4.5 inches wide and a height proportional to its original dimensions. The print-width attribute does not affect the size of the image when viewing the version of the module. To change the online size of the image, use the height and width attributes. You can use any combination of print and online sizing attributes for an image.

Creating a Linked Thumbnail Image A thumbnail is a small version of an image that, when clicked, displays the larger, full-size version of that image. You can create a thumbnail in your modules by completing the following steps: Using image-editing software, create a thumbnail-sized version of your image file. Make sure to change the name of the thumbnail image so that you know which is which (e.g. "myimage_thumb.png"). Add the thumbnail image to your module using the files tab as you would with any image fie. Create the media and image elements as you would normally do for a full-sized image. Use the optional thumbnail attribute to the image element as shown in the example below. Here is an example of the CNXML code required to include a thumbnail image that links to a full size version:

<figure id='thumbnail'>
   <media id="thumbnailmedia" alt="The Taj Mahal (thumbnail version)">
      <image mime-type='image/jpeg' 
             src='TajMahal_medium.jpg'
             thumbnail='TajMahal_Thumb.jpg'/>
      </image>
   </media>
</figure>

This code results in the following linked image:

Including Alternate Media for Print Connexions allows you to insert an alternate media file in your module that can be formatted and sized specifically for the print version of your content. For example, you may want to provide a color image for online use and a black-and-white image for print. You can also use this feature to provide alternate media types, such as using a Java applet for online use and an image for print. To create an alternate image for print, simply include two image elements (or, say, a video element and an image element) inside the media tag. The first element will be used in the online version of the module, while the second will be used for the print version. The following code gives one example for including an alternate print image. In this case, online users will see image.png, while image.eps will be used for the print version of the module.


<figure id='printimage'>
   <media id="print_image_example">
      <image mime-type='image/png' src='image.png'/>
      <image mime-type='application/postscript' src='image.eps'/>
   </media>
</figure>

You can use any two media objects in this way to create print alternatives. When two media objects are included inside a media element, the first will be used for the online version and the second will be used for the print version. However, if the first element in a media is a longdesc element, the second element will be used online, and the third element will be used for print.

Using Subfigures You can place two or more images within the same figure using the subfigure tag. This is useful when you have two related images that you want to display side-by-side or one above the other. To display two images within the same figure, insert CNXML entries similar to the following example into the "index.cnxml" file for your module:

<figure id="figure-2" orient="horizontal">
   <subfigure id="subfigure-1">
      <title>Blue on Blue</title>
      <media id="sub_example" alt="An envelope with a blue page">          
         <image mime-type="image/png" src="Xenvelope-blue-on-blue.png"/>
         <caption>Subfigure 1.</caption>
      </media>
   </subfigure>
   <subfigure id="subfigure-2">
      <title>Orange on White</title>
      <media id="sub_example2" alt="An envelope with a white page">
         <image mime-type="image/png" src="Xenvelope.png"/>
         <caption>Subfigure 2.</caption>
      </media>
   </subfigure>
   <caption>Two images displayed horizontally in one figure.</caption>
</figure>

The resulting figure is displayed below:

The orient determines how the subfigures are arrange respective to one another. This attribute can have a value of either horizontal or vertical.

Flash Objects You can insert Flash objects in your module. Here is an example of the CNXML code required to include a Flash object:

<figure id='flashfig'>
   <media id="new_flash" alt="flash animation of the connexions logo">
      <flash mime-type="application/x-shockwave-flash" 
             src="flash.swf"
             height="250"
             width="250" />
      </flash>
   </media>
   <caption>"Welcome to Connexions" example Flash object.</caption>
</figure>

The Flash object appears in your module the same way in which a movie or an image appears:

"Welcome to Connexions" example Flash object. The example above is enclosed within figure tags to allow captions for explanation purposes. The figure tags are not required to include these media objects in a module.

Movies Movies can be added to your module using the same basic structure as with other media types.

<figure id='moviefig2'>
   <media id="movie" alt="Building on the Past">
      <video mime-type="video/mpeg" 
             src="Building_on_the_Past.mpg"
             width="350"
             height="300"
             autoplay="false" />
      </video>	  
   </media>
   <caption>
     The Creative Commons movie: "Building on the Past". 
     Click the Play button to start the movie.
   </caption>
</figure>

The movie is displayed below:

The Creative Commons movie: "Building on the Past". Click the Play button to start the movie. The example above is enclosed within figure tags to allow captions for explanation purposes. The figure tags are not required to include these media objects in a module.

Java Applets Java applets are another media type you can use in your Connexions modules:


<figure id="javafig">
   <media id="java_example" alt="a complex sinusoid">
      <java-applet type="application/x-java-applet"
                   code="PhasorDemo.class"
                   width="430"
                   height="500" />
      </java-applet>
   </media>
   <caption>3D Animation of a Complex Sinusoid. Click the Run button to start the animation.</caption>
</figure>

The actual display for the previous CNXML example is:

3D Animation of a Complex Sinusoid. Click the Run button to start the animation. If the graphic does not appear in the figure above, you may need to install or upgrade the Java plug-in on your computer. Please go to java.com to download the latest version of the Java plug-in. The example above is enclosed within figure tags to allow captions for explanation purposes. The figure tags are not required to include these media objects in a module.

Audio Files Audio files such as mp3, real audio, and wav files can be inserted into your module quickly and easily. To include audio files in your document, upload the corresponding audio file and include code similar to the following in your "index.cnxml" document:


<figure id='musicscale'>
   <media id="music_example" alt="chromatic scale slurred">
      <audio mime-type="audio/x-wav" src="chromatic_slurred.wav"/>
   </media>
   <caption>A chromatic scale performed on clarinet by Michael Lawrence.</caption>
</figure>

The actual display for the previous CNXML example is:

A chromatic scale performed on clarinet by Michael Lawrence. The example above is enclosed within figure tags to allow captions for explanation purposes. The figure tags are not required to include these media objects in a module.

LabVIEW Demonstrations For information on including LabVIEW demonstrations in your module, please see Creating LabVIEW demonstrations for Connexions.

Parameters Some multimedia objects need options or parameters to display properly. You can pass this information to the multimedia objects with the param tag. The param tag allows you to specify the run-time settings for an object inserted into XHTML documents. Here is an example of a param tag for an audio (wav) object:

<figure id="audio2">
  <media id="music_example2" alt="Slurred chromatic scale">      
    <audio mime-type="audio/x-wav" src="chromatic_slurred.wav">
      <param name="title" value="Chromatic Scale"/>
    </audio>
  </media>
</figure>

The actual display for the previous example is