-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
93 lines (88 loc) · 4.32 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
<!DOCTYPE html>
<html>
<head>
<title>turtled</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Metrophobic" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="info">
Contact: <a href="http://github.com/mhausenblas/">Michael Hausenblas</a> |
Last update: 2012-08-02 |
Source: <a href="http://github.com/mhausenblas/turtled">GitHub repo</a> |
v0.1
</div>
<div id="top">
<h1>turtled</h1>
<p>
A simple online <a href="http://www.w3.org/TR/turtle/" target="_new" title="Turtle - Terse RDF Triple Language">RDF Turtle</a> editor that allows you to render an RDF graph visually, restrict to sub-graphs via SPARQL and to export the visualisation as SVG. Check out the <a href="http://www.youtube.com/watch?v=LRtJAUdASsE" title="Introducing Turtled - YouTube" target="_new">5min screen cast</a> to get started ...
</p>
</div>
<div id="main">
<div id="in">
<div id="in-support">
<span class="ctrl-item" id="examples" title="click to show/hide"><img src="img/examples.png" alt="Examples" id="img-examples" /> Examples ...</span>
<span class="ctrl-item"><a href="http://groups.csail.mit.edu/haystack/blog/2008/11/06/a-quick-tutorial-on-the-tutrle-rdf-serialization/" target="_new" title="A Quick Tutorial on the Turtle RDF Serialization">Turtle tutorial ...</a></span>
<span class="ctrl-item"><a href="http://prefix.cc/" target="_new" title="namespace lookup for RDF developers">Prefixes ...</a></span>
</div>
<div id="examples-sel">
<span id="ex1" title="Two people with foaf:knows ...">Mini social network (FOAF) </span> -
<span id="ex2" title="A person who is the dc:author of an article ...">Authorship (Dublin Core) </span> -
<span id="ex3" title="A person's location ...">Location (Geo) </span>
</div>
<div id="currententry"></div>
<textarea id="tinput" rows="15" cols="70" title="Enter some valid RDF Turtle here and hit the 'Visualise!' button below ...">
@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> .
@prefix dc: <http://purl.org/dc/elements/1.1/> .
@prefix foaf: <http://xmlns.com/foaf/0.1/> .
@prefix schema: <http://schema.org/> .
@prefix : <http://example.org/#> .
:x a schema:Thing ;
rdfs:label "a thing" ;
.
</textarea>
<div id="status">Status: waiting for user input</div>
<div id="in-ctrl">
<button id="vis">Visualise!</button>
<button id="save">Save ...</button><span id="entries"></span>
<div id="restrict" title="click to show/hide"><img src="img/restrict.png" alt="Restrict" id="img-restrict" />Restrict ...</div>
<div id="restrictions">
<p>
The SPARQL CONSTRUCT below, is applied to the RDF Turtle input before rendering.
If you're unfamiliar with SPARQL CONSTRUCT queries, have a look at Olaf Hartig's <a href="http://www2.informatik.hu-berlin.de/~hartig/tmp/HartigTutorialICWE12_2.pdf" target="_new" title="An Introduction to SPARQL and Queries over Linked Data">tutorial</a>.
</p>
<textarea id="sinput" rows="8" cols="70" title="Enter a valid SPARQL CONSTRUCT query here that will be applied to the input ...">
PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
CONSTRUCT {
<http://example.org/#x> rdf:type ?o .
}
WHERE {
<http://example.org/#x> rdf:type ?o .
}
</textarea>
</div>
</div>
</div>
</div>
<div id="out-support">
<button id="svgexport">Export SVG ...</button>
<span id="stats" title="Overall RDF Turtle statistics"></span>
<strong>Labels:</strong><span id="prefixes"><input id="useprefixes" type="checkbox" checked="checked" /> use prefixes</span>
<strong>Rendering:</strong> <span class="ctrl-item" id="labels" title="click to switch rendering">full</span>
</div>
<div id="out"></div>
<div id="prefixesused"></div>
<div id="ack">
<a href="http://deri.ie/" title="Digital Enterprise Research Institute (DERI)"><img src="img/deri-logo.png" alt="DERI" /></a>
<a href="http://latc-project.eu/" title="EC FP7 Linked Open Data (LOD) Around-The-Clock Support Action"><img src="img/latc-logo.png" alt="LATC" /></a>
</div>
<script src="jquery-1.7.2.min.js"></script>
<script src="vivagraph.min.js"></script>
<script src="rdf_store_min.js"></script>
<script src="json2.js"></script>
<script src="examples.js"></script>
<script src="prefixes.js"></script>
<script src="turtled.js"></script>
</body>
</html>