Child pages
  • Content Notes
Skip to end of metadata
Go to start of metadata

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:

We added a button for the citations helper in 2.5 and (as I recall) we found five projects in which we needed to make changes to have that take effect in tools that use the rich text editor. I can't say that this is all tools that use the editor because any tool can use the FCK editor or another editor without actually participating in the community norms. At this point I think there are at least two system wide properties that are supposed to be supported in every placement of the editor. One is the sakai.properties setting for which editor is to be used. The other is whether to show the "resources-search" button (the citations helper). There may be others I'm unaware of. I'm pretty sure there was another one that has been eliminated in 2.5.

I just used eclipse's search for references to "org.sakaiproject.util.EditorConfiguration" on a checkout of the full trunk build and found four projects that referenced it (velocity, sam, jsf and metaobj-util). It seemed like there should be one more, but I don't see it now. It may have been Melete (not included in my current build from sakai trunk). If any RSF tools use the rich-text editor, I suspect they do not respect the community norms because I don't see any references to EditorConfiguration.

BTW, our intention in creating the EditorConfiguration class as a utility was that it be a central place where you can get info about the configuration of the editor without introducing any new dependencies on other projects that may have optional features they want to add to the editor. For example, information about whether to show the button for the citations helper is discovered using reflection. If it fails in any way (suggesting the citations helper is not enabled in this instance of sakai), the button is not shown, and an attempt is made to fail early to avoid extra overhead. There may be a better way to do this, but nobody I discussed it with suggested a better way.

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

Item

Weight (kilo)

Cost

Use

Backpack

1.8

20

Holds other items.

Candles

0.1

2

Light in dark places.

Blanket

0.9

8

Keeps you arm at night.

Rope

1.0

12

Climbing up cliffs.

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:

Attribute

Values

align

left, center, right

autostart

true or false

hidden

true or false

src

source of the audio, usually a URL

height

control height

width

control width

Audio Thumbnail

Audio Data
Description of the audio clip goes here.

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:

Attribute

Values

align

left, center, right

autostart

true or false

hidden

true or false

src

source of the video, usually a URL

height

control height

width

control width

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:

Video Data
Description of the video clip goes here.

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/

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:

MathML Support for Firefox

Firefox does have builtin MathML support, but to have mathematical expressions rendered correctly you have to install additional fonts.

  • MIT MathML Fonts Package for Windows XP/2000
  • MIT MathML Fonts Package for Mac OS 9/X

MathML support was broken in Firefox 1.5 between 1.5.0.2 and 1.5.0.7. So, if you still use one of these versions of Firefox and do not want to migrate to Firefox 2, you may have to update your browser to the most recent version in 1.5 branch.

See http://www.mozilla.org/projects/mathml/ for more information. Special fonts are needed available at http://www.mozilla.org/projects/mathml/fonts/

The following markeup:

<math xmlns='http://www.w3.org/1998/Math/MathML' mode='display'>
<mrow><mi>B</mi>
<mo>(</mo><mi>P</mi><mo>)</mo></mrow>
<mo>=</mo><msubsup><mo>&Integral;</mo> <mn>0</mn> <mn>∞</mn></msubsup><mfrac><mrow><mo lspace="0em" rspace="thinmathspace">dx</mo>
</mrow><mrow><msqrt><mrow><mi>x</mi>

<mo>(</mo><mi>x</mi><mo></mo><mn>1</mn><mo>)</mo><mo>(</mo><mi>x</mi><mo></mo><mn>1</mn><mo>+</mo><mi>&epsi;</mi><mo>)</mo></mrow></msqrt>
</mrow></mfrac><mi><</mi><msubsup><mo>&Integral;</mo> <mn>0</mn> <mn>∞</mn></msubsup><mfrac><mrow><mo lspace="0em" rspace="thinmathspace">dx</mo>

</mrow><mrow><mo>(</mo>
<mn>1</mn><mo>+</mo><mi>x</mi><mo>)</mo><msqrt><mrow><mi>x</mi>
</mrow></msqrt></mrow></mfrac><mo>=</mo><mn>2</mn><mo lspace="0em" rspace="thinmathspace">arctan</mo><msqrt><mrow><mi>x</mi>
</mrow></msqrt><msubsup><mo>|</mo> <mn>0</mn> <mn>∞</mn></msubsup><mo>=</mo><mi>π</mi><mo>.</mo>

</math>

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

ChemML is now CML.

Music Markup

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

MIME Type

File Extension

x-world/x-vrml

flr

x-world/x-vrml

vrml

x-world/x-vrml

wrl

x-world/x-vrml

wrz

x-world/x-vrml

xaf

x-world/x-vrml

xof

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

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:

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:

  • No labels