...
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:
| Note |
|---|
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. {note} h2. 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 [ |
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:
| Code Block | ||||
|---|---|---|---|---|
| ||||
<EMBED src="file.wav" autostart=true loop=false volume=100 hidden=true><NOEMBED><BGSOUND src="file.wav"></NOEMBED>
{code}
|
More
...
notes
...
on
...
http://www.world-voices.com/resources/addaud.html
...
MP3
...
files:
...
| Code Block | ||||||
|---|---|---|---|---|---|---|
| }
| |||||
<EMBED src="file.mp3" autostart=true hidden=true>
{code}
|
MIDI
...
files:
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
<EMBED src="file.mid" autostart=true loop=false volume=100 hidden=true><NOEMBED><BGSOUND src="file.mid"></NOEMBED>
{code}
|
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
| Panel | ||||
|---|---|---|---|---|
| ||||
Audio Data |
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:
| Code Block | ||||
|---|---|---|---|---|
| ||||
<EMBED SRC="mymovie.avi" width=100 height=100 autostart=true>
{code}
|
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:
| Panel | ||||
|---|---|---|---|---|
| ||||
Video Data |
Flash based video, like YouTube:
| Code Block | ||||
|---|---|---|---|---|
| ||||
<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>
{code}
h2. Flash
Flash files can be handled via EMBED as well.
{code:xml} |
Flash
Flash files can be handled via EMBED as well.
| Code Block | ||||
|---|---|---|---|---|
| ||||
<embed src="http://www.youtube.com/v/5N0P0VLtk64" type="application/x-shockwave-flash" wmode="transparent" width="600" height="600"></embed>
{code}
|
Here
...
is
...
another
...
example:
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
<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>
{code}
|
Note
...
the
...
pluginspage
...
reference,
...
in
...
case
...
they
...
don't
...
have
...
the
...
plug-in.
...
Yet
...
another
...
example:
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
<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>
{code}
h1. 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 [ |
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,
...
...
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
...
...
This
...
interesting
...
note
...
from
...
MathDonalds:
...
| Note | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| =
|
|
|
| }
||||||||
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
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/ {note} The following markeup: {note} <math |
The following markeup:
| Note |
|---|
<math xmlns='http://www.w3.org/1998/Math/MathML' mode='display'>
<mn>0</mn> <mn>∞<<mn>∞</mn></msubsup><mfrac><mrow><mo lspace="0em" rspace="thinmathspace">dx</mo>
<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>ε</mi><mo>)</mo></mrow></msqrt>
mfrac><mi><</mi><msubsup><mo>∫</mo> <mn>0</mn> <mn>∞</mn><<mn>∞</mn></msubsup><mfrac><mrow><mo lspace="0em" rspace="thinmathspace">dx</mo> </mrow><mrow><mo>(</mo>
lspace="0em" rspace="thinmathspace">arctan</mo><msqrt><mrow><mi>x</mi>
<mn>0</mn> <mn>∞<<mn>∞</mn></msubsup><mo>=</ mo><mi>π<mo><mi>Ï€</mi><mo>.</mo> </math> {note} is rendered in FireFox as: {html} <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>∫</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>ε</mi><mo>)</mo></mrow></msqrt> </mrow></mfrac><mi><</mi><msubsup><mo>∫</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> {html} 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: |
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:
| Code Block | ||||
|---|---|---|---|---|
| ||||
<?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
...
...
- -
...
- A
...
- Java
...
- app
...
- to
...
- display
...
- 3D
...
- molecules.
...
ChemML
...
is
...
now
...
CML.
...
Music Markup
...
- SMDL:
...
- Standard
...
- Music
...
- Description
...
- Langauge
...
...
- MusicXML:
...
...
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
...
...
.
...
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:
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
<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>
{code}
|
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
...
...
.
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:
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
<embed src="../svggen/color-prop-02-f.svg" width="480" height="360"/>
{code}
!SVG-Example.png!
h1. |
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
...
-
...
...
.
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:
- 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:
| Code Block | ||||
|---|---|---|---|---|
| ||||
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&hl=en&q=Mumbai,+Maharashtra+India&ie=UTF8&cd=1&geocode=0,19.017656,72.856178&ll=19.611544,73.125&spn=3.785801,7.338867&z=8&iwloc=addr&output=embed&s=AARTsJod4cEtKTmQj0PneKfJaAl2GS9RvA"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&hl=en&q=Mumbai,+Maharashtra+India&ie=UTF8&cd=1&geocode=0,19.017656,72.856178&ll=19.611544,73.125&spn=3.785801,7.338867&z=8&iwloc=addr&source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>
{code}
!google-map.jpg!
h2. Google Charts
Google has an interesting web service that allows charts to be generated using a URL.
See [ |
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
...
...
Charts
...
and
...
gchartrb:
...
...
Example:
...
This
...
line,
...
http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello\|World,
...
generates
...
this
...
chart: