tools/htdocs/index.html

   1 <html>
   2   <head>
   3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4     <title>MKWS: the MasterKey Widget Set</title>
   5     <style type="text/css">
   6       body {
   7       font-family: Gill Sans, "Gillius ADF", Gillius, GilliusADF, Sans-Serif;
   8       }
   9       h1, h3 { font-weight: normal; color: #606060 }
  10       h2 { margin-top: 0.5em }
  11       .pane { padding: 0em 1em; margin: 0.75em;
  12               border: 0.5em solid #eee;
  13               border-radius: 1em;
  14               background-image: url('images/mkws-logo-48x48-light.png');
  15               background-repeat: no-repeat;
  16               background-position: right top;
  17               background-color: #eee;
  18             }
  19       .nologo { background-image: none }
  20       pre { background: #ddd; padding: 0.5em; }
  21     </style>
  22   </head>
  23   <body>
  24     <img src="images/mkws-logo-300px.png" alt="MKWS logo" =
  25          style="float:right; margin: 1.5em"/>
  26     <h1>MKWS: the MasterKey Widget Set</h1>
  27
  28     <div class="pane nologo">
  29       <h2>Add metasearching to your web-site painlessly</h2>
  30       <p>
  31         The MasterKey Widget Set provides the easiest possible way to
  32         enhance an existing web-site with customised searching across
  33         multiple sources, ranking and merging the results.
  34       </p>
  35       <p>
  36         All you need to do is pull in our JavaScript and optional
  37         stylesheet, then add <tt>&lt;div&gt;</tt>s to your page that
  38         have special <tt>id</tt> attributes. We do the rest.
  39       </p>
  40     </div>
  41
  42     <div class="pane">
  43       <h2>A minimal example</h2>
  44       <p>
  45         Here is a completely functional (though ugly) MKWS-based
  46         searching application:
  47       </p>
  48       <blockquote>
  49         <pre>
  50 &lt;script type="text/javascript"
  51         src="http://mkws.indexdata.com/mkws-complete.js">&lt;/script>
  52 &lt;div id="mkwsSearch">&lt;/div>
  53 &lt;div id="mkwsResults">&lt;/div></pre>
  54       </blockquote>
  55       <p>
  56         That's it. A complete metasearching application. Everything
  57         else is refinement.
  58       </p>
  59     </div>
  60
  61     <div class="pane">
  62       <h2>Documentation</h2>
  63       <ul>
  64         <li>
  65           The <a href="README.html">README</a> -- mostly technical details.
  66         </li>
  67         <li>
  68           The <a href="mkws-manual.html">MKWS manual, including a
  69           reference section.</a>
  70           This is a much better introduction.
  71         </li>
  72       </ul>
  73     </div>
  74
  75     <div class="pane">
  76       <h2>Tools</h2>
  77       <p>
  78         Here are the files that this web-site provides:
  79       </p>
  80       <ul>
  81         <li>
  82           <a href="mkws.js">mkws.js</a>
  83           --
  84           JavaScript code that powers the MasterKey Widget Set
  85         </li>
  86         <li>
  87           <a href="pazpar2/js/pz2.js">pazpar2/js/pz2.js</a>
  88           --
  89           Low-level JavaScript library for access to the MasterKey web
  90           service.
  91         </li>
  92         <li>
  93           <a href="handlebars-v1.1.2.js">handlebars-v1.1.2.js</a>
  94           --
  95           A local copy of
  96           <a href="http://handlebarsjs.com/"
  97              >the Handlebars templating library</a>,
  98           since it doesn't like to be hotlinked.
  99         </li>
 100         <li>
 101           <a href="mkws-complete.js"
 102              >mkws-complete.js</a>
 103           --
 104           A single large JavaScript file containing everything needed for
 105           MKWS to work: the widget-set itself, the API library, and
 106           the prerequisites jQuery and Handlebars.
 107         </li>
 108         <li>
 109           <a href="mkws.css">mkws.css</a>
 110           --
 111           A stylesheet which styles only MasterKey widgets, and does not
 112           otherwise interfere with application-site's styles.
 113         </li>
 114       </ul>
 115       <p>
 116         Minified versions of the MKWS JavaScript files are also available:
 117       <p>
 118       <ul>
 119         <li>
 120           <a href="mkws.min.js">mkws.min.js</a>
 121         </li>
 122         <li>
 123           <a href="mkws-complete.min.js">mkws-complete.min.js</a>
 124         </li>
 125       </ul>
 126       <p>
 127         (This domain also hosts two web-service endpoints that are used by
 128         running MKWS-based applications:
 129         <tt>/service-proxy-auth</tt>
 130         is used to authenticate new sessions and
 131         <code>/service-proxy/</code>
 132         is the main endpoint for searching and retrieval. But there is
 133         no need to use these directly: the widgets take care of that.)
 134         </li>
 135       </ul>
 136     </div>
 137
 138     <div class="pane">
 139       <h2>Versions</h2>
 140       <p>
 141         The links above to the various forms of the widget-set JavaScript
 142         (<a href="mkws.js">mkws.js</a>,
 143         <a href="mkws-complete.js">mkws-complete.js</a>,
 144         <a href="mkws.min.js">mkws.min.js</a>
 145         and
 146         <a href="mkws-complete.min.js">mkws-complete.min.js</a>)
 147         are always to the current versions of those
 148         files. Applications that rely on a particular version can
 149         instead use the specific numbered versions in
 150         <a href="releases/">the releases area</a>,
 151         for example
 152         <a href="releases/mkws-0.9.1.js">releases/mkws-0.9.1.js</a>.
 153       </p>
 154       <p>
 155         The current version number is always in
 156         <a href="VERSION">the VERSION file</a>.
 157       </p>
 158       <p>
 159         Version history is in
 160         <a href="NEWS">the NEWS file</a>.
 161       </p>
 162     </div>
 163
 164     <div class="pane">
 165       <h2>Examples using the widget-set</h2>
 166       <p>
 167         It's worth viewing the source of these to see how small they
 168         are and how various things are done.
 169       </p>
 170       <h3>Simple examples</h3>
 171       <ul>
 172         <li>
 173           A very simple application at
 174           <a href="//example.indexdata.com/simple.html"
 175              >//example.indexdata.com/simple.html</a>.
 176         </li>
 177         <li>
 178           <a href="//example.indexdata.com/minimal.html"
 179              >The absolutely minimal application</a>
 180           listed above.
 181         </li>
 182         <li>
 183           <a href="//example.indexdata.com/language.html"
 184              >A more detailed version</a>
 185           that contains a configuration structure instead of accepting
 186           the defaults. Includes a custom translation option to present
 187           the application in Arabic.
 188         </li>
 189         <li>
 190           <a href="//example.indexdata.com/mobile.html"
 191              >A version suitable for mobile devices</a>,
 192           with a responsive design that moves components around
 193           depending on the screen size.
 194         </li>
 195       </ul>
 196
 197       <h3>Advanced examples</h3>
 198       <ul>
 199         <li>
 200           An application that
 201           <a href="//example.indexdata.com/lowlevel.html"
 202              >uses lower-level MKWS components</a>
 203           rather than the all-in-one <tt>#mkwsResults</tt> division,
 204           allowing it to use a rather different layout.
 205         </li>
 206         <li>
 207           An application that specifies how to display brief and full records
 208           <a href="//example.indexdata.com/templates.html"
 209              >using Handlebar templates</a>.
 210           (Read about
 211           <a href="http://handlebarsjs.com/"
 212              >the templating language</a>.)
 213         </li>
 214         <li>
 215           An application that
 216           <a href="http://example.indexdata.com/images.html?q=portrait"
 217              >displays thumbnail images</a>.
 218         </li>
 219         <li>
 220           <a href="//example.indexdata.com/localauth.html"
 221              >An application that uses a local authentication regime</a>,
 222           and the corresponding
 223           <a href="//example.indexdata.com/apache-config.txt"
 224              >Apache2 configuration stanza</a>.
 225         </li>
 226         <li>
 227           <a href="//example.indexdata.com/popup.html"
 228              >A version that uses a jQuery popup</a>.
 229         </li>
 230       </ul>
 231
 232       <h3>Non-standard interfaces</h3>
 233       <ul>
 234         <li>
 235           <a href="//example.indexdata.com/dict.html"
 236              >An application that uses MKWS to find dictionary
 237             definitions of words when you highlight them</a>.
 238         </li>
 239         <li>
 240           <a href="//example.indexdata.com/auto.html"
 241              >An application that runs an automatic search on load</a>.
 242         </li>
 243         <li>
 244           An existing web-site,
 245           <a href="http://sagp.miketaylor.org.uk/"
 246              >The Self-Appointed Grammar Police</a>,
 247           which has been fitted with an MKWS searching widget.
 248           (See also the MKWS-widget customisations in
 249           <a href="http://sagp.miketaylor.org.uk/style.css"
 250              >that site's stylesheet</a>.)
 251         </li>
 252 <!--
 253         <li>
 254           Another existing web-site,
 255           <a href="http://zthes.z3950.org/"
 256              >The Zthes specifications</a>,
 257           which has been fitted with a popup MKWS search-box.
 258         </li>
 259 -->
 260       </ul>
 261     </div>
 262
 263     <div class="pane">
 264       <h2>Target selection</h2>
 265       <p>
 266         MKWS comes pre-configured to search in a set of a dozen or so
 267         open-access targets, as a proof of concept. But you'll want
 268         to use it to search your own selection of targets -- some open
 269         access, some subscription.
 270       </p>
 271       <p>
 272         We can set that up for you: email us on
 273         <a href="mailto:info@indexdata.com"
 274                        >info@indexdata.com</a>.
 275       </p>
 276     </div>
 277
 278     <p style="text-align: right; font-size: small">
 279       Copyright (&copy;) 2013-2014 IndexData ApS.
 280       <a href="http://indexdata.com"><code>http://indexdata.com</code></a>
 281     </p>
 282   </body>
 283 </html>