A list of MIME types is available at http://www.w3schools.com/media/media_mimeref.asp.

Text Based Media

Wrapped URLs

The Resource tool has support for specifying a link. The media type is text/url. This can be displayed wrapped in an iFrame or possibly as a pop-up window. In fact, it may be possible to do both by providing a link next to the embedded frame to pop it up, though most browsers let you do this anyways using a right mouse click selection.

Virtual Labs

Since virtual labs are present on their own website and URL, they could be considered an extension of the URL content element implemented by CEUrl.

Structured Text

The following note from Jim Eng talks about using the FCKEditor, which is how structured text would be edited in Sousa:

Data Tables

Data tables could be very useful content elements for statistics, accounting, or anything that presents tabular data. There are many ways of representing such tables, but the simplest are comma separate values (csv) and tabbed delimited files (tab). Charting might also be done via structured vector graphics (SVG).

There is a nice open source CSV package that also handles TAB files at http://opencsv.sourceforge.net/.

Consider two parameters:

• Treat first row as headers - yes/no
• Treat first column as headers - yes/no

If cell data starts with "http://" treat the data as a picture source.

Time Based Media

Largely handled with the EMBED tag. See http://www.html-reference.com/EMBED.htm

Audio

With a source on a particular server, a WAV file can be played automatically with this HTML construct:

<EMBED src="file.wav" autostart=true loop=false volume=100 hidden=true><NOEMBED><BGSOUND src="file.wav"></NOEMBED>

More notes on http://www.world-voices.com/resources/addaud.html

MP3 files:

<EMBED src="file.mp3" autostart=true hidden=true>

MIDI files:

<EMBED src="file.mid" autostart=true loop=false volume=100 hidden=true><NOEMBED><BGSOUND src="file.mid"></NOEMBED>

Some attributes to handle:

Audio Thumbnail

This is a nice flash based audio player: http://www.1pixelout.net/code/audio-player-wordpress-plugin/

http://www.macloo.com/examples/audio_player/

Samigo is thinking of using it.

Video

Example of an embedded video file:

 <EMBED SRC="mymovie.avi" width=100 height=100 autostart=true>

Some attributes to handle:

Video Thumbnail
Eventually we'd like to have a significant still from the video as a thumbnail. This can be stored as an attachment to the main file. Meanwhile, something like this can be used:

Flash based video, like YouTube:

<object width="425" height="355">
    <param name="movie" value="http://www.youtube.com/v/5N0P0VLtk64"></param>
    <param name="wmode" value="transparent"></param>
    <embed src="http://www.youtube.com/v/5N0P0VLtk64" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed>
</object>

Flash

Flash files can be handled via EMBED as well.

<embed src="http://www.youtube.com/v/5N0P0VLtk64" type="application/x-shockwave-flash" wmode="transparent" width="600" height="600"></embed>

Here is another example:

<embed src="http://www.macloo.com/examples/flash/animation/martini.swf" quality=high bgcolor=#CC6600  width="550" height="400" name="martini" align=""
 type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>

Note the pluginspage reference, in case they don't have the plug-in.

Yet another example:

<object type="application/x-shockwave-flash" data="images/banner.swf" width="288" height="128">
    <param name="movie" value="images/banner.swf" />
    <img src="banner.gif" width="288" height="128" alt="banner" />
</object>

See also http://osflash.org/red5, an open source Flash server project.

Specialized Markup Langauges

Several extensions to HTML exist to handle special notation systems. A few of the more common include:

• MathML - Equations and math expressions (supported in some browsers)
• CML - Chemical formulae
• MusicML - Music scores and notation
• SVG - Structured vector graphics

Each of these extensions require an editor and viewer, usually provided as a browser plugin.

Other Vector Graphics mark up languages at http://en.wikipedia.org/wiki/List_of_vector_graphics_markup_languages.
Other markup languages at http://en.wikipedia.org/wiki/List_of_XML_markup_languages

Math Markup

Software list at http://www.w3.org/Math/Software/

• DragMath - Drag/drop math editor applet, http://sourceforge.net/projects/dragmath/

Many more applications on sourceforge.net.
Web applications seem to make use of SVG to display equations.

Another thing worth checking out is that Rutgers kindly shared an FCK
plugin for the WebEQ math editor
(http://www.dessci.com/en/products/webeq/) on contrib. The plugin
lives at https://source.sakaiproject.org/contrib/rutgers/fckplugins/mathedit/.

Another plug-in for FCK and TinyMCE at http://www.mathdonalds.com/
This interesting note from MathDonalds:

The following markeup:

is rendered in FireFox as:

The above doesn't render correctly for two reasons. First, a name space extension needs to be included at the top of the page:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" 
               "http://www.w3.org/TR/MathML2/dtd/xhtml-math11-f.dtd" [
  <!ENTITY mathml "http://www.w3.org/1998/Math/MathML">
]>

Secondly, the file needs to be saved as ".xhtml".

WebEQ isn't free, but it's not too expensive for an academic
institution, cheap enough vs developer time to write something else
that it may be worth checking out for your needs.

• Josh Ryan (josh@asu.edu)

Another option which may be worth exploring is DragMath: http://www.dragmath.bham.ac.uk/index.html(though it's GPL, so likely not redistributable with Sakai.

MathPlayer is a plug-in for IE Explorer 7.0: http://www.dessci.com/en/products/mathplayer/ - Free.
Hermitech's Formulator Mathml Weaver for Explorer is also free: http://www.mmlsoft.com/index.php?option=com_content&task=view&id=6&Itemid=7

Here is a good page to show examples of embedded MathML markup http://pear.math.pitt.edu/mathzilla/Examples/markupOftheWeek.mhtml

Chemistry Markup

• JChemPaint: http://almost.cubic.uni-koeln.de/cdk/jcp
• JMol: http://jmol.sourceforge.net/ - A Java app to display 3D molecules.

ChemML is now CML.

Music Markup

• MML: http://www.musicmarkup.info/
• SMDL: Standard Music Description Langauge http://xml.coverpages.org/gen-apps.html#smdl
• MusicXML: http://www.musicxml.org/xml.html

Several projects that support MusicXML on sourceforge.net.

VRML and X3D

VRML has been superceded by X3D, developed by the Web3D Consortium. See http://en.wikipedia.org/wiki/Web3D_Consortium and http://www.web3d.org/.

The Virtual Reality Markup Language was designed to describe 3D objects using a text markup document. Some 3D graphics applications, like Carrara allow objects to be exported into a VRML file. Here is an example:

A player plug-in is needed to view VRML files. The Cosmo VRML player is available from NIST at http://cic.nist.gov/vrml/cosmoplayer.html for free. Once installed, VRML files can be interactively viewed (pan, rotate, etc.). Some help is available at http://cic.nist.gov/vrml/cosmo/Doc/frames-help.html. The VRML file types all map to a MIME type of "x-world/x-vrml":

The Cosmo controller can be embedded using the following HTML code:

<embed src="file:///C:/Documents%20and%20Settings/Mark/My%20Documents/_work/Sakai/Projects/POCS-Sousa/Media/sakai.wrl" 
type="x-world/x-vrml" width=300 height=300>VRML Player Not Detected.</embed>

The source file must be a valid URL for the file to appear. Here's what it looks like:

The controller is also sensitive to the positioning and orientation of the object. It also can refer to texture files that either must be in the same directory as the VRML file, be included in a ZIPped archive (.wrz), or be a fully qualified URL.

The 3D-Online viewer is available at http://www.3d-online.com/.

Structured Vector Graphics

SVG (Structured Vector Graphics) is a project of the W3C at http://www.w3.org/Graphics/SVG/. The specification describes a way to create markup that can be rendered as a graphical image using vectors, shading, etc.

SVG files can be displayed using EMBED or OBJECT, similar to video:

<embed src="../svggen/color-prop-02-f.svg" width="480" height="360"/>

On-line Textbooks and Course Materials

Open Courseware (OCW)

MIT
Utah State

Textbook Revolution

150 textbooks available at http://textbookrevolution.org/.

Mash-ups, Virtual Labs, etc.

See Wikipedia - Mashups.
See Mashups.com.
See Mashup APIs - a great source of mashup apps and APIs.
See WebMashups.com - another API directory.

Tool sites

• School Forge

Several websites offers special gadgets, web services, etc. that can be used for teaching and learning. These include:

• Google Maps
• Google Sets
• Google Financial
• Google Calendar
• Google Spreadsheets
• Google Translation
• Google Knol - on-line encyclopedia
• Simile- MIT Timeline
• Dictionary
• Thesaurus
• Wikipedia
• Autodesk Freewheel (CAD drawings)
• Bible Lookup
• cPath Medical Database Lookup
• Currency Conversion
• Unit Conversion
• EditGrid Spreadsheet
• Hostip.info (IP Lookup)
• NOAA Weather Service
• Sparklines Graph Generator
• Physics Labs
• Biomedical Labs
• ChemCollection Chemistry Labs

Meta-level support for mash-ups is provided by facilitators like:

• Microsoft PopFly
• Yahoo! Pipes
• Alchemy Point
• Batanga
• Programmable Web
• Google Mash-up Editor

Google Maps

Adding Google map is simple a matter of copying the text provided from the "link to google map" feature in Google Maps. It produces a embedded i-Frame with content like:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;hl=en&amp;q=Mumbai,+Maharashtra+India&amp;ie=UTF8&amp;cd=1&amp;geocode=0,19.017656,72.856178&amp;ll=19.611544,73.125&amp;spn=3.785801,7.338867&amp;z=8&amp;iwloc=addr&amp;output=embed&amp;s=AARTsJod4cEtKTmQj0PneKfJaAl2GS9RvA"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&amp;hl=en&amp;q=Mumbai,+Maharashtra+India&amp;ie=UTF8&amp;cd=1&amp;geocode=0,19.017656,72.856178&amp;ll=19.611544,73.125&amp;spn=3.785801,7.338867&amp;z=8&amp;iwloc=addr&amp;source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>

Google Charts

Google has an interesting web service that allows charts to be generated using a URL.

See http://code.google.com/apis/chart/

Intro to Google Charts and gchartrb: http://www.infoq.com/articles/bass-google-charts-gchartrb;jsessionid=E011DC11AF089859BF365F2BFBE69E4E

Example:

This line, http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello\|World, generates this chart: