Merge branch 'master' into templateallthemarkup
[mkws-moved-to-github.git] / tools / htdocs / index.html
index 1d929b5..9835c66 100644 (file)
       body {
       font-family: Gill Sans, "Gillius ADF", Gillius, GilliusADF, Sans-Serif;
       }
-      h1 { color: #606060 }
-      p { font-weight: bold }
+      h1, h3 { font-weight: normal; color: #606060 }
+      h2 { margin-top: 0.5em }
+      .pane { padding: 0em 1em; margin: 0.75em;
+              border: 0.5em solid #eee;
+              border-radius: 1em;
+              background-image: url('images/mkws-logo-48x48-light.png');
+              background-repeat: no-repeat;
+              background-position: right top;
+              background-color: #eee; 
+            }
+      .nologo { background-image: none }
+      pre { background: #ddd; padding: 0.5em; }
     </style>
   </head>
   <body>
+    <img src="images/mkws-logo-300px.png" alt="MKWS logo" =
+        style="float:right; margin: 1.5em"/>
     <h1>MKWS: the MasterKey Widget Set</h1>
-    <p>
-      This site contains tools, not content:
+
+    <div class="pane nologo">
+      <h2>Add metasearching to your web-site painlessly</h2>
+      <p>
+       The MasterKey Widget Set provides the easiest possible way to
+       enhance an existing web-site with customised searching across
+       multiple sources, ranking and merging the results.
+      </p>
+      <p>
+       All you need to do is pull in our JavaScript and optional
+       stylesheet, then add <tt>&lt;div&gt;</tt>s to your page that
+       have special <tt>id</tt> attributes. We do the rest.
+      </p>
+    </div>
+
+    <div class="pane">
+      <h2>A minimal example</h2>
+      <p>
+       Here is a completely functional (though ugly) MKWS-based
+       searching application:
+      </p>
+      <blockquote>
+       <pre>
+&lt;script type="text/javascript"
+        src="http://mkws.indexdata.com/mkws-complete.js">&lt;/script>
+&lt;div id="mkwsSearch">&lt;/div>
+&lt;div id="mkwsResults">&lt;/div></pre>
+      </blockquote>
+      <p>
+       That's it. A complete metasearching application. Everything
+       else is refinement.
+      </p>
+    </div>
+
+    <div class="pane">
+      <h2>Documentation</h2>
+      <ul>
+       <li>
+          The <a href="README.html">README</a> -- mostly technical details.
+       </li>
+       <li>
+          The <a href="mkws-manual.html">MKWS manual, including a
+          reference section.</a>
+         This is a much better introduction.
+       </li>
+      </ul>
+    </div>
+
+    <div class="pane">
+      <h2>Tools</h2>
+      <p>
+       Here are the files that this web-site provides:
+      </p>
+      <ul>
+       <li>
+          <a href="mkws.js">mkws.js</a>
+          --
+          JavaScript code that powers the MasterKey Widget Set
+       </li>
+       <li>
+          <a href="pazpar2/js/pz2.js">pazpar2/js/pz2.js</a>
+          --
+          Low-level JavaScript library for access to the MasterKey web
+          service.
+       </li>
+       <li>
+         <a href="handlebars-v1.1.2.js">handlebars-v1.1.2.js</a>
+         --
+         A local copy of
+         <a href="http://handlebarsjs.com/"
+            >the Handlebars templating library</a>,
+         since it doesn't like to be hotlinked.
+       </li>
+       <li>
+          <a href="mkws-complete.js"
+             >mkws-complete.js</a>
+          --
+          A single large JavaScript file containing everything needed for
+          MKWS to work: the widget-set itself, the API library, and
+          the prerequisites jQuery and Handlebars.
+       </li>
+       <li>
+          <a href="mkws.css">mkws.css</a>
+          --
+          A stylesheet which styles only MasterKey widgets, and does not
+          otherwise interfere with application-site's styles.
+       </li>
+      </ul>
+      <p>
+       Minified versions of the MKWS JavaScript files are also available:
+      <p>
+      <ul>
+       <li>
+          <a href="mkws.min.js">mkws.min.js</a>
+       </li>
+       <li>
+          <a href="mkws-complete.min.js">mkws-complete.min.js</a>
+       </li>
+      </ul>
+      <p>
+       (This domain also hosts two web-service endpoints that are used by
+       running MKWS-based applications:
+       <tt>/service-proxy-auth</tt>
+       is used to authenticate new sessions and
+       <code>/service-proxy/</code>
+       is the main endpoint for searching and retrieval. But there is
+       no need to use these directly: the widgets take care of that.)
+       </li>
+      </ul>
+    </div>
+
+    <div class="pane">
+      <h2>Versions</h2>
+      <p>
+       The links above to the various forms of the widget-set JavaScript
+        (<a href="mkws.js">mkws.js</a>,
+        <a href="mkws-complete.js">mkws-complete.js</a>,
+        <a href="mkws.min.js">mkws.min.js</a>
+       and
+        <a href="mkws-complete.min.js">mkws-complete.min.js</a>)
+       are always to the current versions of those
+       files. Applications that rely on a particular version can
+       instead use the specific numbered versions in
+       <a href="releases/">the releases area</a>,
+       for example
+       <a href="releases/mkws-0.9.1.js">releases/mkws-0.9.1.js</a>.
+      </p>
+      <p>
+       The current version number is always in
+       <a href="VERSION">the VERSION file</a>.
+      </p>
+      <p>
+       Version history is in
+       <a href="NEWS">the NEWS file</a>.
+      </p>
+    </div>
+
+    <div class="pane">
+      <h2>Examples using the widget-set</h2>
+      <p>
+        It's worth viewing the source of these to see how small they
+        are and how various things are done.
+      </p>
+      <h3>Simple examples</h3>
+      <ul>
+       <li>
+          A very simple application at
+          <a href="//example.indexdata.com/simple.html"
+             >//example.indexdata.com/simple.html</a>.
+       </li>
+       <li>
+          <a href="//example.indexdata.com/minimal.html"
+             >The absolutely minimal application</a>
+         listed above.
+       </li>
+       <li>
+          <a href="//example.indexdata.com/language.html"
+             >A more detailed version</a>
+         that contains a configuration structure instead of accepting
+          the defaults. Includes a custom translation option to present
+          the application in Arabic.
+       </li>
+       <li>
+          <a href="//example.indexdata.com/mobile.html"
+             >A version suitable for mobile devices</a>,
+         with a responsive design that moves components around
+          depending on the screen size.
+       </li>
+      </ul>
+
+      <h3>Advanced examples</h3>
+      <ul>
+       <li>
+         An application that
+         <a href="//example.indexdata.com/lowlevel.html"
+            >uses lower-level MKWS components</a>
+         rather than the all-in-one <tt>#mkwsResults</tt> division,
+         allowing it to use a rather different layout.
+       </li>
+       <li>
+         An application that specifies how to display brief and full records
+         <a href="//example.indexdata.com/templates.html"
+            >using Handlebar templates</a>.
+         (Read about
+         <a href="http://handlebarsjs.com/"
+            >the templating language</a>.)
+       </li>
+       <li>
+         An application that
+         <a href="http://example.indexdata.com/images.html?q=portrait"
+            >displays thumbnail images</a>.
+       </li>
+       <li>
+         <a href="//example.indexdata.com/localauth.html"
+            >An application that uses a local authentication regime</a>,
+         and the corresponding
+         <a href="//example.indexdata.com/apache-config.txt"
+            >Apache2 configuration stanza</a>.
+       </li>
+       <li>
+          <a href="//example.indexdata.com/popup.html"
+             >A version that uses a jQuery popup</a>.
+       </li>
+      </ul>
+
+      <h3>Non-standard interfaces</h3>
+      <ul>
+       <li>
+          <a href="//example.indexdata.com/dict.html"
+             >An application that uses MKWS to find dictionary
+            definitions of words when you highlight them</a>.
+       </li>
+       <li>
+          <a href="//example.indexdata.com/auto.html"
+             >An application that runs an automatic search on load</a>.
+       </li>
+       <li>
+          An existing web-site,
+          <a href="http://sagp.miketaylor.org.uk/"
+             >The Self-Appointed Grammar Police</a>,
+          which has been fitted with an MKWS searching widget.
+          (See also the MKWS-widget customisations in
+          <a href="http://sagp.miketaylor.org.uk/style.css"
+             >that site's stylesheet</a>.)
+       </li>
+<!--
+       <li>
+         Another existing web-site,
+          <a href="http://zthes.z3950.org/"
+             >The Zthes specifications</a>,
+         which has been fitted with a popup MKWS search-box.
+       </li>
+-->
+      </ul>
+    </div>
+
+    <div class="pane">
+      <h2>Target selection</h2>
+      <p>
+       MKWS comes pre-configured to search in a set of a dozen or so
+        open-access targets, as a proof of concept. But you'll want
+        to use it to search your own selection of targets -- some open
+       access, some subscription.
+      </p>
+      <p>
+       We can set that up for you: email us on
+       <a href="mailto:info@indexdata.com"
+                      >info@indexdata.com</a>.
+      </p>
+    </div>
+
+    <p style="text-align: right; font-size: small">
+      Copyright (&copy;) 2013-2014 IndexData ApS.
+      <a href="http://indexdata.com"><code>http://indexdata.com</code></a>
     </p>
-    <ul>
-      <li>
-        <a href="mkws.js">mkws.js</a>
-        --
-        JavaScript code that powers the MasterKey Widget Set
-      </li>
-      <li>
-        <a href="/libjs-pz2/pz2api.1.js">/libjs-pz2/pz2api.1.js</a>
-        --
-        Low-level JavaScript library for access to the MasterKey web
-        service.
-      </li>
-      <li>
-        <a href="mkws-complete.js"
-                >mkws-complete.js</a>
-        --
-        A single large JavaScript file containing everything needed for
-        MKWS to work: the widget-set itself, the API library, and any
-        additional prerequisites such as jQuery.
-      </li>
-      <li>
-        <a href="mkws.css">mkws.css</a>
-        --
-        A stylesheet which styles only MasterKey widgets, and does not
-        otherwise interfere with application-site's styles.
-    <!--
-        <p style="color:darkred">
-          Note. This is not yet quite true: the stylesheet needs tweaking
-          to make it more specific to only the MKWS components. At present
-          it spills over into styling parts of the containing site, too.
-        </p>
-    -->
-      </li>
-    </ul>
-    <p>
-      For examples of how to use the widget-set, see:
-    </p>
-    <ul>
-      <li>
-        A very simple application at
-        <a href="http://example.indexdata.com/"
-                >http://example.indexdata.com/</a>.
-        It's worth viewing the source to see how small it is.
-      </li>
-      <li>
-        <a href="http://example.indexdata.com/index-full.html"
-           >A more detailed version</a>
-       that contains a configuration structure instead of accepting
-        the defaults. Includes a custom translation option to present
-        the application in Arabic.
-      </li>
-      <li>
-        The
-        <a href="http://example.indexdata.com/index-jquery.html"
-           >jQuery plugin</a>
-        version, consisting of a single line of JavaScript code.
-      </li>
-      <li>
-       An application that
-       <a href="http://example.indexdata.com/index-lowlevel.html"
-          >uses lower-level MKWS components</a>
-       rather than the all-in-one <tt>#mkwsResults</tt> division,
-       allowing it to use a rather different layout.
-      </li>
-      <li>
-        <a href="http://example.indexdata.com/index-mobile.html"
-           >A version suitable for mobile devices</a>,
-       with a responsive design that moves components around
-        depending on the screen size.
-      </li>
-      <li>
-        <a href="http://example.indexdata.com/index-popup.html"
-           >A version that uses a jQuery popup</a>.
-      </li>
-      <li>
-        An existing web-site,
-        <a href="http://sagp.miketaylor.org.uk/"
-           >The Self-Appointed Grammar Police</a>,
-        which has been fitted with an MKWS searching widget.
-        (See also the MKWS-widget customisations in
-        <a href="http://sagp.miketaylor.org.uk/style.css"
-           >that site's stylesheet</a>.)
-      </li>
-      <li>
-       Another existing web-site,
-        <a href="http://zthes.z3950.org/"
-           >The Zthes specifications</a>,
-       which has been fitted with a popup MKWS search-box.
-      </li>
-    </ul>
-    <p>
-      The set of targets can be maintained:
-    </p>
-    <ul>
-      <li>
-       Use the main
-       <a href="http://mk2.indexdata.com/console/"
-          >MasterKey Admin Console</a>,
-       and act as the "MK Demo" library administrator.
-      </li>
-    </ul>
-    <p>
-      Documentation:
-    </p>
-    <ul>
-      <li>
-        The <a href="whitepaper.html">The whitepaper, including a reference section.</a>
-      </li>
-      <li>
-        The <a href="README.html">README.html</a>
-      </li>
-      <li>
-        The <a href="html-structure.txt"
-               >structure of the HTML generated by the MKWS widgets</a>,
-        which can be used to guide the customisation of its CSS styles.
-      </li>
-    </ul>
   </body>
 </html>