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