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:

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.

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

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 Longdesc

Alt 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.

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:

<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>

Captioned Video and Audio Transcripts

Captioning 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.

Images

Some of the image file types and their corresponding MIME types used in Connexions modules are:

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:

Figure 1: A graphic image displayed as a figure.

Example Figure

Adjusting the Size of the Image

You 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:

Figure 2: The photograph of the Taj Mahal in this figure and the following figures was taken by Steve Evans. It is licensed for public use under the Creative Commons Attribution License.

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:

Figure 3

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.

Tip:

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.

Tip:

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.

Tip:

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:

1. 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").
2. Add the thumbnail image to your module using the files tab as you would with any image fie.
3. Create the media and image elements as you would normally do for a full-sized image.
4. 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:

Figure 4

<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>
          

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:

Figure 5: Two images displayed horizontally in one figure.

Blue on Blue Orange on White (a) Subfigure 1. (b) Subfigure 2.

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>

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>

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>

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:

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