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

<?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}/script2/browser-detect.js" type="text/javascript">
    /* space filler needed */
    </script>


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


<h2>I Can't <i>Believe</i> It's All Javascript!</h2>

<!--
<div style="background-color: #DD3611; color: white; padding: 4pt; margin-bottom: 6pt;">
<table>

  <tr>
    <td>
       <img src="{$httpPath}/images/firefox-128.png" />
    </td>
    <td>
    <p class="about">
      <i><font size="+2">
        An experiment with Firefox's Advanced
        Audio Processing Extension ...
      </font></i>
    </p>

    <p class="about">
      <i><font size="+2">
... featuring a mash-up of 
<a class="mashup" href="http://www.greenstone.org" target="_blank">Greenstone</a>,
<a class="mashup" href="http://www.omras2.org/audioDB" target="_blank">AudioDB</a>, and
<a class="mashup" href="http://seasr.org/meandre/" target="_blank">Meandre</a>.
      </font></i>
    </p>


          <div id="bd-version" style="display:none;" class="about">
        <p>
          <img src="{$httpPath}/images/warning-icon.png" />
            Version of Firefox detected:
              <script type="text/javascript">
                document.write(BrowserDetect.version);
              </script>
        </p>
        <p>
            You need to upgrade to a more recent version of Firefox 
            (v4.0 or greater) to access all the audio features of 
            this demonstration.
        </p>
          </div>

          <div id="bd-browser" style="display:none;" class="about">

        <p>
          <img src="{$httpPath}/images/warning-icon.png" />
Browser detected:
          <script type="text/javascript">
            document.write(BrowserDetect.browser);
          </script>
        </p>
            <p>You need to access this web-site using Firefox 
            (v4.0 or greater) to access all the audio features provided.
        </p>
          </div>




  <script>
    <xsl:text disable-output-escaping="yes">

if (BrowserDetect.browser == "Firefox") {
  if (BrowserDetect.version &lt; 4) {
    document.getElementById("bd-version").style.display="block";

  }
}
else {
  document.getElementById("bd-browser").style.display="block";

}
      </xsl:text>
    </script>




    </td>
  </tr>
</table>
</div>
-->

<p class="about">A music DL collection that explores what is possible with only client-side processing.


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

</style>


<ol>

  <li>
    <i>Client-side workflows:</i> the client-side Javascript
    processing code is refactored to follow the same methodology as
    Meandre components.
  </li>

  <li>
    <i>Visualization:</i> the
    Pre-computed self-similarity heat-maps are dropped from the
    collection building process in preference for the same information
    being computed through Javascript running in the user's web
    browser.
  </li>


  <li>
    <i>Annotation:</i> ...

  </li>
</ol>

</p>


</div>


    </xsl:template>


</xsl:stylesheet>