-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
303 lines (299 loc) · 18.3 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
<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ETT workshop</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="ETT workshop website" />
<meta name="author" content="Pietro Liuzzo" />
<link rel="stylesheet" type="text/css" href="template/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="template/css/scrolling-nav.css" />
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.12.0/vis.min.css" />
<script type="text/javascript" src="template/js/jquery.js"></script>
<script src="template/js/bootstrap.min.js"></script>
<script src="template/js/scrolling-nav.js"></script>
<script src="jOWLBrowser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.6.0/clipboard.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.12.0/vis.min.js"></script>
<style type="text/css">
#mynetwork{
width: 100%;
height: 600px;
border: 1px solid lightgray;
}</style>
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top">ETT Workshop</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#examples">Translations</a>
</li>
<li>
<a class="page-scroll" href="#examples">Graph</a>
</li>
<li>
<a class="page-scroll" href="#ontology">Ontology</a>
</li>
<li>
<a class="page-scroll" href="#guidelines">guidelines</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Section -->
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>Intro</h1>
<p class="lead">This is a page to display contents and output of the
workshop in Odense University 16-18 February 2017 for the project <a
href="http://emotions.shca.ed.ac.uk/">Emotions Through Time: From
Antiquity to Byzantium</a>.</p>
<div class="container">
<h2>Programm</h2>
<h3>Giovedì 16 febbraio 2017</h3>
<ul>
<li>10.00-11.00 Presentazione di hypothes.is ai colleghi</li>
<li> 11.30-12.00 Q/A session da parte dei colleghi</li>
<li>Pausa pranzo</li>
<li> 14.00-15.30 Esercizio pratico di annotazione </li>
</ul>
<h3>Venerdì 17 Febbraio 2017</h3>
<ul>
<li>10.00-11.00 Aglae presenta il progetto ETT, i materiali che
abbiamo in mano al momento e un'ipotesi di ontologia </li>
<li>11.00-11.30 Feedback di Pietro sulla fattibilità, specialmente
pensando all'app </li>
<li>11.30-12.00 Pausa </li>
<li>12.00-13.00 Brainstorming con i colleghi sulle categorie
proposte per l'ontologia </li>
<li>13.00-14.30 Pausa pranzo </li>
<li>14.30-16.15 Cominciamo a lavorare praticamente sui nostri testi
</li>
</ul>
<h3>Sabato 18 Febbraio 2017</h3>
<p>Sabato mattina continuiamo il lavoro di annotazione</p>
</div>
<a class="btn btn-default page-scroll" href="#about">Click Me to Scroll
Down!</a>
<a class="btn btn btn-success" href="https://hypothes.is/search?q=tag%3AETT">Browse all annotations in Hypothes.is</a>
</div>
<div class="col-md-4">
<h1>Examples</h1>
<p class="lead">A simple feed of all annotation with the tag ETT.</p>
<!-- start feedwind code -->
<script type="text/javascript" src="https://feed.mikle.com/js/fw-loader.js" data-fw-param="9791/"></script>
<!-- end feedwind code -->
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="about-section">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>About</h1>
<p>This page displays:</p>
<ul>
<li>with Feedwind a RSS feed from Hypothes.is annotations</li>
<li>a timeline showing the same data from a public google
spreadsheet.</li>
<li>two ways to exploit data from the Hypothes.is api for basic
visualization, a selector and a graph</li>
<li>simple guidelines to annotate</li>
<li>a draft reference ontology to organize the annotation and reuse them
meaningfully.</li>
</ul>
<p>This should demonstrate how powerfull is the potential of using this very
intuitive tool to annotate online data.</p>
<p>The annotations can be downloaded and used to populate a database with
existing tools as this <a href="http://jonudell.net/h/facet.html"
>http://jonudell.net/h/facet.html</a> although the open access
annotations in hypothes.is are already much more reusable via api, rss,
and other services they provide.</p>
<p>These are simply examples of simple workflow results/visualizations of
annotations on online data with Hypothesis.<a
class="btn btn-default page-scroll" href="#examples">Go to the
examples.</a></p>
<p>The annotations should follow a meaningfull structure for display and
analysis of the data produced.<a class="btn btn-default page-scroll"
href="#ontology">Go to the ontology.</a></p>
</div>
</div>
</div>
</section>
<!--
<section id="examples" class="examples-section">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Timeline</h1>
<p class="lead">This timeline from Knight Lab TimelineJS uses data entered in <a href="https://docs.google.com/spreadsheets/d/1NKzbo2nC3RybAVVNTpBQIOGZYJYZBs0TzUX5MIQIYpw/edit#gid=0">this public google spreadsheet.</a> The same visualization tool <a href="https://timeline.knightlab.com/docs/json-format.html">can also be fed dynamically generated data.</a></p>
<div class="container"><iframe src='https://cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1NKzbo2nC3RybAVVNTpBQIOGZYJYZBs0TzUX5MIQIYpw&font=Default&lang=en&initial_zoom=2&height=650' width='100%' height='650' webkitallowfullscreen mozallowfullscreen allowfullscreen frameborder='0'></iframe>
</div>
<a class="btn btn-default page-scroll" href="#ontology">Click Me to Scroll Down!</a>
</div>
</div>
</div>
</section>-->
<!-- <section id="examples" class="examples-section">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Filter annotation from api</h1>
<p class="lead">Select a class from the menu below to see some live information from the hypothesis api</p>
<form id="form">
<select name="enter" id="input">
<option value="ETT">ETT</option>
<option value="ETT:WrittenSource">ETT:WrittenSource</option>
<option value="ETT:VisualSource">ETT:VisualSource</option>
<option value="ETT:EmotionName">ETT:EmotionName</option>
<option value="ETT:hasIntensity">ETT:hasIntensity</option>
<option value="ETT:isRelatedTo">ETT:isRelatedTo</option>
<option value="ETT:hasPlace">ETT:hasPlace</option>
<option value="ETT:Strong">ETT:Strong</option>
<option value="ETT:ManifestSymptoms">ETT:ManifestSymptoms</option>
<option value="ETT:ManifestSymptoms">ETT:ManifestSymptoms</option>
<option value="ETT:Divine">ETT:Divine</option>
<option value="ETT:Fear">ETT:Fear</option>
</select>
</form>
</div>
<divclass="card"><div class="col-md-3"><p>text selected </p></div><div class="col-md-3"><p>title of page</p></div><div class="col-md-3"><p>text of the annotation</p></div><div class="col-md-3"><p>url of annotation page</p></div></div>
<div id="JSON"></div>
<script type="application/javascript" xml:space="preserve" src="getJSONdata.js"></script>
</div>
</div>
</div>
</div>
</section>-->
<section id="translations" class="intro-section">
<div class="container">
<div class="row"><div class="col-md-12">
<h1>Texts and Translations</h1>
<div id="translationID"></div>
<script type="application/javascript" xml:space="preserve" src="getTranslationsFromGSheet.js"></script>
</div></div>
</div> </section>
<section id="graph" class="about-section"> <div class="container">
<div class="row"><div class="col-md-12">
<h1>Vis Graph of annotation from api</h1>
<p class="lead">The annotations available through the api can be used to
produce graphs, timelines, etc.</p>
<div id="mynetwork"></div>
<script type="application/javascript" xml:space="preserve" src="makegraph.js"></script>
</div></div></div>
</section>
<section id="guidelines" class="intro-section">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Guidelines</h1>
<div class="container">
<p class="lead"> You can annotate any online resource you want. </p>
<p class="lead">To set you up and start annotate.</p>
<ol>
<li>Install <a href="https://hypothes.is/">hypothes.is</a></li>
<li>Create an account on hypothes.is</li>
<li>login and get familiar with hypothes.is sidebar</li>
</ol>
<p class="lead">While annotating, follow these simple guidelines</p>
<ul>
<li>All Annotation must contain the ETT tag.</li>
<li>All Annotation must contain a tag identifying the canonical id
of source. tlg.02770.tlg0001 for a greek text or for images
ettimage:{theidoftheimage}</li>
<li>Annotate the page with a note to say that this is a written
source (ETT:WrittenSource) and add in the text the perseus
catalogue urn <a
href="https://hypothes.is/a/inTuUvUFEeanMLN7KoH_gQ"
>Example</a></li>
<li>You can add a date in an annotation with a tag ETT:hasDate <a
href="https://hypothes.is/a/TYNwCvUEEeaSVrOAOIsy1w"
>Example</a></li>
<li>You can assign the name of the emotion with ETT:isNameOf <a
href="https://hypothes.is/a/UM14zPUAEea2-g8iIOisAg">like
this</a></li>
<li>You can assign a text to an emotion with ETT:isManifestationOf
like <a href="https://hypothes.is/a/xu5UAPUJEeaEevu4dQD51w">like
this</a>
</li>
<li>You can use in the same way any of the properties in the ontology.</li>
<li>Make sue you always mark your project annotation with the ETT
tag. There is however no guarantee that somebody will not use
this tag for something else, but the information can be
otherways filtered to get the correct data.</li>
<li>To annotate a text string, image, page with a class add a tag
with the class name. This will mean that this selection is part
of this class. <a href="https://hypothes.is/a/2VhPnvLNEeaQ5MO8vVcctA"
>EXAMPLE</a></li>
<li>To annotate a text string, image, page with a property add a tag
with the property name and enter as the text of the annotation
the value to be related. This will mean that this selection is
related by this property to whatever is in the text of the
annotation. <a href="https://hypothes.is/a/6JAijvLSEeawGMdKqCsYFQ"
>EXAMPLE</a></li>
<li>To add a translation follow the same rules and enter a link to the translation or the text of your translation in the note as <a href="https://hypothes.is/a/n6wRcPXCEeas">in here</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="ontology" class="about-section">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Ontology</h1>
<h2>Main Terms</h2>
<p class="lead">MEMENTO: The ontology is a reflection of the real world, and
if no categorization exists in the real world, then the ontology should
reflect that.</p>
<p><a
href="http://www.essepuntato.it/lode/https://raw.githubusercontent.com/EMOTIONSTHROUGHTIME/emotions/master/ETT.owl"
>LODE documentation</a></p>
<!-- <img width="100%" src="ontograph.png"></img>-->
<a class="btn btn-default page-scroll" href="#intro">Click Me to return to
the top!</a>
</div>
</div>
</div>
</section>
<!-- jQuery -->
<script src="template/js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="template/js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="template/js/jquery.easing.min.js"></script>
<script src="template/js/scrolling-nav.js"></script>
</body>
</html>