Manhy more tweaks.
[mkws-moved-to-github.git] / 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 { font-weight: normal; color: #606060 }
10       h2 { font-size: 100% }
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>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="whitepaper.html">whitepaper, 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         (This domain also hosts two web-service endpoints that are used by
117         running MKWS-based applications:
118         <tt>/service-proxy-auth</tt>
119         is used to authenticate new sessions and
120         <code>/service-proxy/</code>
121         is the main endpoint for searching and retrieval. But there is
122         no need to use these directly: the widgets take care of that.)
123         </li>
124       </ul>
125     </div>
126
127     <div class="pane">
128       <h2>Examples using the widget-set</h2>
129       <p>
130         It's worth viewing the source of these to see how small they
131         are and how various things are done.
132       </p>
133       <ul>
134         <li>
135           A very simple application at
136           <a href="http://example.indexdata.com/"
137              >http://example.indexdata.com/</a>.
138         </li>
139         <li>
140           <a href="http://example.indexdata.com/minimal.html"
141              >The absolutely minimal application</a>
142           listed above.
143         </li>
144         <li>
145           <a href="http://example.indexdata.com/language.html"
146              >A more detailed version</a>
147           that contains a configuration structure instead of accepting
148           the defaults. Includes a custom translation option to present
149           the application in Arabic.
150         </li>
151         <li>
152           The
153           <a href="http://example.indexdata.com/jquery.html"
154              >jQuery plugin</a>
155           version, consisting of a single JavaScript statement.
156         </li>
157         <li>
158           An application that
159           <a href="http://example.indexdata.com/lowlevel.html"
160              >uses lower-level MKWS components</a>
161           rather than the all-in-one <tt>#mkwsResults</tt> division,
162           allowing it to use a rather different layout.
163         </li>
164         <li>
165           An application that specifies how to display brief and full records
166           <a href="http://example.indexdata.com/templates.html"
167              >using Handlebar templates</a>.
168           (Read about
169           <a href="http://handlebarsjs.com/"
170              >the templating language</a>.)
171         </li>
172         <li>
173           <a href="http://example.indexdata.com/mobile.html"
174              >A version suitable for mobile devices</a>,
175           with a responsive design that moves components around
176           depending on the screen size.
177         </li>
178         <li>
179           <a href="http://example.indexdata.com/popup.html"
180              >A version that uses a jQuery popup</a>.
181         </li>
182         <li>
183           <a href="http://example.indexdata.com/dict.html"
184              >An application that uses MKWS to find dictionary
185             definitions of words when you highlight them</a>.
186         </li>
187         <li>
188           <a href="http://example.indexdata.com/auto.html"
189              >An application that runs an automatic search on load</a>.
190         </li>
191         <li>
192           <a href="http://example.indexdata.com/localauth.html"
193              >An application that uses a local authentication regime</a>,
194           and the corresponding
195           <a href="http://example.indexdata.com/apache-config.txt"
196              >Apache2 configuration stanza</a>.
197         </li>
198         <li>
199           An existing web-site,
200           <a href="http://sagp.miketaylor.org.uk/"
201              >The Self-Appointed Grammar Police</a>,
202           which has been fitted with an MKWS searching widget.
203           (See also the MKWS-widget customisations in
204           <a href="http://sagp.miketaylor.org.uk/style.css"
205              >that site's stylesheet</a>.)
206         </li>
207         <li>
208           Another existing web-site,
209           <a href="http://zthes.z3950.org/"
210              >The Zthes specifications</a>,
211           which has been fitted with a popup MKWS search-box.
212         </li>
213       </ul>
214     </div>
215
216     <div class="pane">
217       <h2>Target maintainance</h2>
218       <p>
219         The set of targets provided by MKWS by default can be
220         maintained using
221         <a href="http://www.indexdata.com/mkadmin">MKAdmin</a>
222         by users with appropriate credentials.
223         Go to
224         <a href="http://mk2.indexdata.com/console/"
225            >the main console</a>
226         and act as the "MK Demo" library administrator.
227       </p>
228     </div>
229
230     <p style="text-align: right; font-size: small">
231       Copyright © 2013 IndexData ApS.
232       <a href="http://indexdata.com"><code>http://indexdata.com</code></a>
233     </p>
234   </body>
235 </html>