forked from openannotation/annotatorjs.org
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·312 lines (288 loc) · 16.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home - Annotator - Annotating the Web</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=Arvo:regular,bold&subset=latin' rel='stylesheet' />
<link href='http://fonts.googleapis.com/css?family=Inconsolata&subset=latin' rel='stylesheet' />
<link href="http://assets.annotateit.org/annotator/v1.2.10/annotator.min.css" rel="stylesheet" />
<link rel="canonical" href="http://annotatorjs.org">
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>
<a href="/" title="The Annotator Homepage">Annotator</a>
</h1>
<nav>
<ul>
<li><a href="http://github.com/openannotation/annotator/" title="Check out the repository">Code</a></li>
<li><a href="http://docs.annotatorjs.org" title="Read the docs">Docs</a></li>
<li><a href="showcase.html" title="See who's using Annotator.">Showcase</a></li>
<li><a href="plugins/index.html">Plugins</a></li>
<li><a href="news/">News</a></li>
</ul>
</nav>
</div>
<article>
<div class="row">
<div class="col-lg-6">
<h2>The <span id="role">copy-editor</span> of the web</h2>
<p>Annotator is an open-source JavaScript library to easily add annotation functionality to any webpage. Annotations can have comments, tags, links, users, and more. Annotator is designed for <a href="http://docs.annotatorjs.org/en/latest/module-development.html">easy extensibility</a> so its a cinch to add a new feature or behaviour. Annotator also fosters an active developer community with contributors from four continents, building 3rd party plugins allowing the annotation of PDFs, EPUBs, videos, images, sound, and more.</p>
<p>
Download:
<a class="btn btn-success btn-lg" href="https://github.com/openannotation/annotator/releases/latest"><strong>1.2.x</strong> stable</a>
<a class="btn btn-warning btn-lg" href="https://github.com/openannotation/annotator/releases"><strong>2.x</strong> pre-release</a>
<a class="btn btn-default btn-lg" href="https://github.com/openannotation/annotator/">GitHub</a>
</p>
</div>
<div class="col-lg-6">
<img class="screenshot" src="./images/annotator.png" alt="The annotator" height="223" width="370" />
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="thumbnails">
<img src="./images/thumb-add.png" alt="Highlight text to annotate" />
</div>
</div>
<div class="col-sm-3">
<div class="thumbnails">
<img src="./images/thumb-viewer.png" alt="View annotations by moving your mouse over highlights" />
</div>
</div>
<div class="col-sm-3">
<div class="thumbnails">
<img src="./images/thumb-bookmarklet.png" alt="Add the annotator to any page with the bookmarklet" />
</div>
</div>
<div class="col-sm-3">
<div class="thumbnails">
<img src="./images/thumb-editor.png" alt="Save annotations to AnnotateIt" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<h2 id="develop">Using Annotator</h2>
<p>Simply select some text on this page and make a comment!<p>
<p>Adding annotation to any website is easy with Annotator. First, download the Annotator library, include it in your HTML.</p><!-- , or include include the following CDN:</p>
<pre><code>
<script src="http://assets.annotateit.org/annotator/v1.2.10/annotator-full.min.js"></script>
</code></pre> -->
<p>Then, add the following javascript to initialize the annotator:</p>
<pre><code>var ann = Annotator(document.body);</code></pre>
<p>Full instructions are in the <a
href="http://docs.annotatorjs.org/en/latest/usage.html">Usage</a>
section of the docs.</p>
<p>To setup the default suite of plugins include annotator.min.css and annotator-full.min.js and call the "setupPlugins" method via .annotator(). For example:</p>
<pre><code>var ann = Annotator(document.body);
ann.setupPlugins()</code></pre>
</div>
<div class="col-lg-6">
<h2 id="develop">Plugins</h2>
<p>Annotator has a simple but powerful plugin architecture. Plug-ins can also be included for adding functionality such as user <a href="http://docs.annotatorjs.org/en/latest/plugins/permissions.html">permissions</a>, <a href="http://docs.annotatorjs.org/en/latest/plugins/tags.html">tags</a>, <a href="http://docs.annotatorjs.org/en/latest/plugins/filter.html">filtering</a> and <a href="http://docs.annotatorjs.org/en/latest/plugins/markdown.html">formatting</a>.</p>
<p>The Annotator community has developed more than twenty plugins, such as:</p>
<ul>
<li><a href="http://annotorious.github.io/">Annotorious</a> - image annotation</li>
<li><a href="https://github.com/aron/annotator.touch.js">Touch Plugin</a> - support for touch devices (iOS, Android, etc.)</li>
<li><a href="https://github.com/aron/annotator.offline.js">Offline Plugin</a> - work on documents while offline, using localStorage</li>
<li><a href="https://github.com/danielcebrian/share-annotator">Share-annotator</a> - share text and video annotations using social networks or email</li>
<li><a href="https://github.com/danielcebrian/richText-annotator">richText-annotator</a> - rich media and rich text annotations using Tinymce</li>
</ul>
<p>For a full list of 3rd party Annotator plugins visit our <a href="plugins/index.html">plugin page</a>.</p>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<h2 class="develop">How do I help?</h2>
<p>We’re an open source project -- there are a number of ways to get involved. Here are a few:<p>
<ul>
<li><strong>Fix (or report) bugs:</strong> If you find an issue with The Annotator, have a look at our <a href="https://github.com/openannotation/annotator/issues">issue tracker</a>, and file a bug. If you’re a developer, feel free to fork the project and submit a pull request.</li>
<li><strong>Write documentation:</strong> If you find gaps in the <a href="http://docs.annotatorjs.org/">documentation</a>, you can pitch in there too. The process is similar: fork the project, edit the RST docs, and submit a pull request.</li>
<li><strong>Write a plugin:</strong> If you’ve written a plugin, chances are your code will be useful to others. Please add a link to the wiki so people can find your stuff.</li>
<!-- <li>If you want to learn more about developing your own plugin, please read our documentation about plugin development.</li> -->
</ul>
<p>If you’re interested in our community, or you’re having trouble with something, please <a href="https://lists.okfn.org/mailman/listinfo/annotator-dev">join our mailing list</a>.
<form action="http://search.gmane.org/" class="form-inline">
<input name="group" value="gmane.comp.web.annotator" type="hidden">
<div class="form-group">
<div class="input-group">
<label for="query" class="input-group-addon">Search (via <a href="http://dir.gmane.org/gmane.comp.web.annotator">gmane</a>):</label>
<input name="query" size="30" type="text" class="form-control" />
</div>
</div>
</form></p>
</div>
<div class="col-lg-6">
<h2 class="develop">Who is using it?</h2>
<p>More than a dozen projects rely on Annotator for their digital annotation needs and many are open source. A few noteables include <a href="https://hypothes.is/">Hypothes.is</a>, <a href="https://www.edx.org/">edX</a>, <a href="http://www.annotationstudio.org/">Annotation Studio</a>, and <a href="https://peerlibrary.org/">Peer Library</a>. Please checkout our <a href="showcase.html">showcase page</a> for a more complete list.</p>
<img class="logos" src="./images/hypothesis.png" alt="Save annotations to AnnotateIt" height="53px"/>
<img class="logos" src="./images/edX.jpg" alt="Save annotations to AnnotateIt" height="52px"/>
<img class="logos" src="./images/annotation_studio.jpg" alt="Save annotations to AnnotateIt" height="45px"/>
<img class="logos" src="./images/peerlibrary.png" alt="Save annotations to AnnotateIt" height="45px"/>
</div>
<!-- <p>Adding annotation to your webpage using the Annotator is easy.
Full instructions are in the <a
href="http://docs.annotatorjs.org/en/latest/getting-started.html">Getting
Started</a> section of the docs, but it is just two short steps. First, you
need to <a href="http://github.com/openannotation/annotator/downloads/">download the
Annotator library</a> (or link to the hosted version), include it on your page
along with <a href="http://jquery.com/">jQuery</a>. Then add the
following line to initialize the annotator.</p>
<pre><code>$('#content').annotator();</code></pre>
<p>Plug-ins can be included for adding functionality such as user
<a href="http://github.com/openannotation/annotator/wiki/User-Plugin">accounts</a>,
<a href="http://docs.annotatorjs.org/en/latest/plugins/tags.html">tags</a>,
<a href="http://docs.annotatorjs.org/en/latest/plugins/filter.html">filtering</a> and
<a href="http://github.com/openannotation/annotator/wiki/Markdown-Plugin">formatting</a>.</p>
</div>
<div class="col-lg-6">
<p>To setup the default suite of plugins include
<a href="http://assets.annotateit.org/annotator/v1.2.10/annotator.min.css">annotator.min.css</a> and
<a href="http://assets.annotateit.org/annotator/v1.2.10/annotator-full.min.js">annotator-full.min.js</a>
and call the <code>"setupPlugins"</code> method via
<code>.annotator()</code>.</p>
<p>For example:</p>
<pre><code>$('#content').annotator()
.annotator('setupPlugins');</code></pre> -->
<!-- </div> -->
</div>
<!-- <div class="row">
<div id="about">
<div id="annotator" class="col-lg-6">
<h2>Storage</h2>
<p>You'll need to store your data somewhere, luckily we've made
this very simple to do using
<a href="http://annotateit.org/">AnnotateIt</a>, a hosted
web service for storing annotations.</p>
<p>Alternatively if you'd like to integrate the annotator with your
own storage system check out the
<a href="http://docs.annotatorjs.org/">Docs</a> for more
information on the annotation format and store plugin.</p>
</div>
<div class="col-lg-6">
<h2>The Bookmarklet</h2>
<p>The bookmarklet is a simple tool that allows you to add the
annotator to any webpage and save your annotations to AnnotateIt.
Check it out at <a href="http://annotateit.org">http://annotateit.org/</a>.
</p>
</div>
</div>
</div> -->
</article>
<footer>
<p>Annotator is developed by a wide range of <a href="https://github.com/openannotation/annotator/graphs/contributors">contributors</a> and supported by a number of <a href="http://annotatorjs.org/showcase.html">organizations</a>. Previous financial support was provided by the <a href="http://www.shuttleworthfoundation.org/">Shuttleworth Foundation</a> and the <a href="http://okfn.org">Open Knowledge Foundation</a></p>
<!-- <p>Annotator was developed by the
<img src="http://assets.okfn.org/images/logo/okf_logo_white_and_green_tiny.png" id="footer-okf-logo" />
<a href="http://okfn.org">Open
Knowledge Foundation</a> with support from the <a
href="http://www.shuttleworthfoundation.org/">Shuttleworth
Foundation</a>.</p> -->
<!-- <div class="widget-area">
<ul class="xoxo">
<li class="widget-container widget_text">
<h3 class="widget-title"></h3>
<div class="text-widget">
<ul>
<li>
© <a href="http://www.okfn.org/">Open Knowledge Foundation</a>
</li>
<li>
<a href="http://opendefinition.org/okd/" class="img">
<img alt="This Content and Data is Open" src="http://assets.okfn.org/images/ok_buttons/oc_80x15_blue.png" class="button" />
</a>
</li>
</ul>
</div>
</li>
</ul>
<ul class="xoxo">
<li class="widget-container widget_text">
<h3 class="widget-title"></h3>
<div class="textwidget">
<ul>
<li>
<a href="http://okfn.org/projects/annotator/">Project Home Page</a>
</li>
<li>
<a href="http://lists.okfn.org/mailman/listinfo/annotator-dev">Mailing List</a>
</li>
</ul>
</div>
</li>
</ul>
</div> -->
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://assets.annotateit.org/annotator/v1.2.10/annotator-full.min.js"></script>
<script src="js/main.js"></script>
<script src="js/jwt.js"></script>
<script>
if (!Date.prototype.toISOString) {
Date.prototype.toISOString = function() {
function pad(n) { return n < 10 ? '0' + n : n; }
return this.getUTCFullYear() + '-'
+ pad(this.getUTCMonth() + 1) + '-'
+ pad(this.getUTCDate()) + 'T'
+ pad(this.getUTCHours()) + ':'
+ pad(this.getUTCMinutes()) + ':'
+ pad(this.getUTCSeconds()) + 'Z';
};
}
// Please note that you would *never* expose the consumer secret in this way
// for an ordinary application. For the purposes of convenience for this demo, we do.
var demoConsumerKey = 'd4c108122b51434aab1d27ad4ebd2b02';
var demoConsumerSecret = '36977e7b-be7f-4b57-a9eb-9617e4740b6a';
function getAuthToken(consumerKey, consumerSecret, userId) {
"use strict";
var date = new Date(new Date() - 1 * 60 * 60 * 1000), // 1 hour ago
alg = { typ:'JWT', alg:'HS256' },
payload = {
consumerKey: consumerKey,
userId: userId,
issuedAt: date.toISOString(),
ttl: 86400
},
token;
alg = JSON.stringify(alg);
payload = JSON.stringify(payload);
token = new jwt.WebToken(payload, alg);
return token.serialize(consumerSecret);
}
function initAnnotator(json) {
"use strict";
$('article').annotator().annotator('setupPlugins', null, {
Auth: {
token: getAuthToken(demoConsumerKey, demoConsumerSecret, json.ip)
},
Permissions: false,
AnnotateItPermissions: {}
});
}
</script>
<script type="application/javascript" src="http://jsonip.com/initAnnotator"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-8271754-31']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>