source: main/trunk/model-sites-dev/multimodal-mdl/collect/linkeddata-my-ipod/transform/pages/about.xsl@ 28435

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE videocollection [
  <!ENTITY ndash "&#8211;">
  <!ENTITY mdash "&#8212;">
]>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:java="http://xml.apache.org/xslt/java"
    xmlns:util="xalan://org.greenstone.gsdl3.util.XSLTUtil"
    xmlns:gslib="http://www.greenstone.org/skinning"
    extension-element-prefixes="java util"
    exclude-result-prefixes="java util">

    <!-- use the 'main' layout -->
    <xsl:include href="layouts/main.xsl"/>

    <!-- set page title -->
    <xsl:template name="pageTitle"><gslib:collectionName/></xsl:template>

    <!-- set page breadcrumbs -->
    <xsl:template name="breadcrumbs"><gslib:siteLink/><gslib:rightArrow/></xsl:template>

    <!-- the page content -->
    <xsl:template match="/page">
  
        <!--Display the description text of the current collection,
        and if some services are available then create a list
        of links for each service within a <ul id="servicelist"> element.-->

    <xsl:variable name="httpPath"> 
      <xsl:value-of select="/page/pageResponse/collection/metadataList/metadata[@name='httpPath']" />
    </xsl:variable>


    <style>
      p.about { text-align: justify; }
      h2 { /* line-height: 135%; */ }
      h3 { margin-top: 4pt; margin-bottom: 7pt; line-height: 135%; }

        a.mashup {text-decoration: none; } 
    a.mashup:link    {color:#000080;}  /* unvisited link */
    a.mashup:visited {color:#303080;}  /* visited link */
    a.mashup:hover   {color:#000040;}  /* mouse over link */
    a.mashup:active  {color:#0000a0;}

    </style>


    <script src="{$httpPath}/script/browser-detect.js" type="text/javascript">
    /* space filler needed */
    </script>


<div style="width: 800px; margin-left: auto; margin-right: auto;">


<style>
  li { padding-bottom: 10px; }
</style>

<h2>A Traditional Music Digital Library: my-ipod </h2>


<p class="about">This collection represents the <i>status quo</i> in traditional
digital library design for music content.  When the collection is built:


<ol>
  <li>The selected audio files are automatically converted to a format suitable for streaming
      over the web
  </li>

   <li>
     Metadata embedded in the files (such as ID3 tags) is automatically extracted and made
     available to form browsing structures, used in full-text indexes for searching, as well as
     being manipulated and presented to the user, where applicable.
   </li>

  <li>
    Automatically extracted metadata can be override by manually assigned.  This
    can either be done through a desktop application (the Greenstone Librarian Interface, or GLI for short) 
    a graphical user interface that controls all aspects of collection design, or directly through 
    the web browser, on a per-document basis.
  </li>
</ol>

</p>


<h3>A Walkthrough</h3>

<p class="about">Taking as a starting point a set of music files identified as worthy
of study, the <a href="#browse">figure below</a> shows the result of browsing
the formed digital library collection <a href="dev?a=b&amp;rt=s&amp;s=ClassifierBrowse&amp;c=salami-audioDB&amp;cl=CL1" target="_blank">by title</a> from a web browser.
The figure is a useful snapshot in which to orientate ourselves with
the main structure and features to the digital library.  Functionality that
persistently reoccurs is accessible through the header to the page.</p>

<p class="about">This includes:
<ul>

<li>help and preferences (top-right);</li>
<li>a quick-search option (located just
below) with links to more sophisticated searching options; and</li>
<li>pin-pointing where within the site a user is currently located
(top-left).</li>
</ul>


<a name="browse" />
<table style="width: 700px; margin-left: auto; margin-right: auto; margin-bottom: 6pt;">
  <tr>
    <td style="border: solid 1px;">
      <img style="width: 700px" src="{$httpPath}/images/figs/cropped/salami-browse.png" />
    </td>
  </tr>
  <tr style="background-color: #bbeebb">
    <td>
      <i>Browsing in the digital library
  <a href="dev?a=b&amp;rt=s&amp;s=ClassifierBrowse&amp;c=salami-audioDB&amp;cl=CL1" target="_blank">by titles</a>.</i>
    </td>
  </tr>
</table>


The specific content to this location within the site (in this case
browsing by title) is shown beneath the main banner.  Various
groupings of title can be accessed by clicking on the bookshelf icons
vertically aligned as the main part of the page: currently <a
href="dev?a=b&amp;rt=s&amp;s=ClassifierBrowse&amp;c=salami-audioDB&amp;cl=CL1#CL1.2">C–D</a>
is open, with the remaining letters to the alphabet below this,
accessed through scrolling.</p>




<p class="about">Interested in the song <i>Candela</i> our curious musicologist clicks
on <a href="dev?a=d&amp;ed=1&amp;book=off&amp;c=salami-audioDB&amp;d=D145&amp;dt=simple&amp;sib=1&amp;p.a=b&amp;p.sa=&amp;p.s=ClassifierBrowse" target="_blank">the link for this</a>.  This brings up the document view to this song:</p>

<a name="self-similarity" />
<table style="width: 700px; margin-left: auto; margin-right: auto; margin-bottom: 6pt;">
  <tr>
    <td style="border: solid 1px;">
      <img style="width: 700px" src="{$httpPath}/images/figs/cropped/salami-self-similarity2.png" />
    </td>
  </tr>
  <tr style="background-color: #bbeebb">
    <td>
      <i>The <a href="dev?a=d&amp;ed=1&amp;book=off&amp;c=salami-audioDB&amp;d=D145&amp;dt=simple&amp;sib=1&amp;p.a=b&amp;p.sa=&amp;p.s=ClassifierBrowse" target="_blank">musicologically enriched document view</a> for</i> Candela.
    </td>
  </tr>
</table>

<p class="about">Normally in a digital
library the document view brings up a page that is strongly derived
from textual metadata.  If the document viewed was a text-document,
some summary information such as title and author is typically
presented, say in tabular form, before the main text is presented.
Even in the case of multimedia digital libraries, the view presented
is still strongly derived from textual metadata: this time including
details such as the length of the video, the TV company that produced
it, whether captions are available, and so forth, accompanied with an
embedded video player for viewing the content—essentially more
textual metadata (in this case the URL to the video content) which in
terms of the user-interface is largely divorced from the other
elements displayed on the page.</p>

<p class="about">This contrasts sharply with the document view developed in this
digital library.
Naturally it allows the song to be played (akin to the embedded video player),
however this is largely of secondary importance to the 
other functionality available this is much more closely
integrated.</p>



<h3>Implementation details</h3>

<p class="about">The core part of the interactive elements in the document view were
implemented using SVG combined with Javascript.  The left- and
right-panning interactively available from the self-similarity map was
implemented by processing the raw audio stream, made accessible by the
Firefox Audio extension
<a href="https://wiki.mozilla.org/Audio_Data_API" target="_blank">API</a>.</p>

<p class="about">AudioDB content based searching was integrated into Greenstone through
two components of the digital library software architecture: its
build-time document processing plugin system, and its runtime
message-passing service-base framework.  The developed plugin accepts
a wide range of audio formats (including OGG and MP3), and converts
them to WAV, the format needed by AudioDB for processing.  The new
search service took the form of a proxy, accepting messages in the
XML syntax used by Greenstone, turning them into the necessary calls
to the AudioDB command-line interface, and then converting the output
from AudioDB back into the XML syntax expected by the digital library
architecture.  Finally, the two parts were packaged to operate as a
Greenstone extension; the software is available at:
<a href="http://trac.greenstone.org/gs3-extensions/audioDB/trunk/src" target="_blank">http://trac.greenstone.org/gs3-extensions/audioDB/trunk/src</a>.</p>

</div>


    </xsl:template>


</xsl:stylesheet>