Recently Updated Content on Connexions

Thursday, May 26, 2011

Authoring Tips: Embedding powerpoint presentations


You just spent a week pulling your slides together and gave the presentation of your life. Now you are feeling bounteous and want to share your presentation with the world. Good for you.

The CNXML markup that Connexions uses does not natively support powerpoints, which is why we suggest using one of our editors to convert your information to CNXML -- paragraphs, lists, images, and all. That makes it easily searchable, it can be read by screen readers and other devices, and our system will generate a professional PDF and EPUB version of your module along with the online version.

If you still want the interactivity of the original presentation, you can embed that into the online version, and use an alternate print image to place a static image in the PDF in its place.

To do this, upload your presentation to SlideShare, or another third-party site that will give you code to embed into another website. SlideShare creates flash objects for embedding, which CNXML can include as a child of a <media> tag. Copy the src URL into the CNXML code, and voila! A dynamic module in Connexions.

Want to try this yourself? Check out our help page which explains where to find the embedding code and copy it in to your module.

Tuesday, May 17, 2011

Authoring Tips: How to size images


Yikes! I missed last week's posting while we prepared for the Plone Symposium this week.

Sizing images

The most-uploaded media type we see are images of some sort. It's a good idea to always create and save your images in the size you want them to appear online. That means that you don't need to specify height and width attributes, and your image will always appear clear and not blurry. But in those cases where you need to scale or resize your images, the height and width attributes will do the trick. Specify the height and width in pixels:

<media id="a_unique_id" display="block" alt="An example.">
  <image mime-type="image/png" src="myfile.png" height="480" width="640" />
</media>

Thumbnail images

Alternatively, you may want to only show a relevant portion of an image, but link to a bigger version of the image to give more context. This is especially useful for screenshots. Upload both the thumbnail file and the larger file to your module, and specify the thumbnail image with the thumbnail attribute. It will link to the larger file when clicked:

<media id="a_unique_id" display="block" alt="An example of a thumbnail.">
  <image mime-type="image/png" src="mybigfile.png" thumbnail="mythumbfile.png" />
</media>

Alternate media online and in print

Finally, you may want to have two images: one suitable for online viewing, and one suitable for print. For instance, a scalable image may be used online, so that viewers can zoom in and out on the image without losing image quality, and a static image can be specified for print. Even more exotically, a video or slideshow may be used online, with an image file used in the print version. To do this, you need to specify two media items (video/image, image/image, etc.) within one <media> tag:

<media id="a_unique_id" display="block" alt="An example of an alternate print-image.">
  <image mime-type="image/png" src="myimagefile.png" for="pdf" />
  <video mime-type="video/mpeg" src="myvideofile.mpg" for="online" />
</media>

Friday, May 13, 2011

New Release of Connexions for Android


Version 1.5 of Connexions for Android has been released. It contains cosmetic and usability changes along with a bug fix. You can now search Connexions from any of the screens by selecting Search from the menu. All of the screens have menus activated by the menu button. If you are viewing a list of items, some features are on the "long press" menu that pops up when you hold your finger on an item. If you tried the app before and were unimpressed, please try it again and give us some feedback on the changes.

You can download the app directly from Connexions or from the Android Market. If you try the app and find it useful, please leave a comment in the Android Market.

Monday, May 9, 2011

Mobile Connexions Updated


The mobile web version of Connexions has been updated to include the Table of Contents when viewing a Collection. This will allow for easier navigation and lessen the need to bookmark modules as frequently. Many thanks to Roche Compaan of Upfront Systems and Mark Horner of Siyavula for the update. Try it out on your phone and let us know what you think.

Wednesday, May 4, 2011

Authoring Tips: Images and other multimedia


It is possible to create a module that is nothing but text. However, we find that many people have images, examples, documents, and more that they want to have interspersed in the text; after all: "a picture is worth 1,000 words". And so I'll blog (in three parts) about how to utilize multimedia in Connexions. This post will introduce you to the <media> tag. In the following weeks will will discuss popular sizing requests (like thumbnail images) and then a very popular request: embedding videos or powerpoints.

You will notice that the <media> tag is not an option in the drop-down "insert" menu on Edit-in-Place. You need to manually add in <media> code. For that it is handy to have the <media> help reference handy (cnx.org/eip-help/media) so that you can copy over the example code and change what is needed. The <media> tag allows you to easily include audio, image, flash, video, java-applet, and labview files right in the content of your module, as well as any other type of file (for download only). Let's use images as an example.

Upload the image

Click on the green "Files" tab just under the orange title of the module. There you can click on the blue "Add an image/included file" button to add any files you want to include in your module. Be sure to note the file name for later.

Files tab.

Use <media> to include the image

Click on the green "Edit" tab to return to Edit-in-Place. Open the element you want to add media to for editing (or insert a blank paragraph where you can add the code for your media):

Blank paragraph in EIP.

The code to add an image looks like this:

<media id="a-unique-id" alt="Describe the image.">
  <image mime-type="image/jpeg" src="YourFileName.jpg" />
</media>

The mime-type of the media file depends on the filename extension. If your image is not saved as a JPEG like in this example, you can look up the mime-type here.