app_en.html 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml" version="XHTML+RDFa 1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.w3.org/1999/xhtml http://www.w3.org/MarkUp/SCHEMA/xhtml-rdfa-2.xsd" lang="it" xmlns="http://www.w3.org/1999/xhtml" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#" xmlns:xsd="http://www.w3.org/2001/XMLSchema#" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:foaf="http://xmlns.com/foaf/0.1/">
  3. <head profile="http://www.w3.org/1999/xhtml/vocab">
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1" />
  6. <title property="dc:title">LodLive - browsing the Web of Data</title>
  7. <link rel="shortcut icon" href="favicon.png" />
  8. <link rel="icon" type="image/png" href="favicon.png" />
  9. <link rel="image_src" href="http://lodlive.it/img/logoLodLive.jpg" />
  10. <meta property="og:image" content="http://lodlive.it/img/logoLodLive.jpg" />
  11. <link property="dc:creator" href="http://purl.org/net/foaf:Person/diego-valerio-camarda" />
  12. <link property="dc:creator" href="http://purl.org/net/foaf:Person/silvia-mazzini" />
  13. <link property="dc:creator" href="http://purl.org/net/foaf:Person/alessandro-antonuccio" />
  14. <link property="dc:subject" href="http://dbpedia.org/resource/Semantic_Web" />
  15. <link property="dc:subject" href="http://dbpedia.org/page/Linked_Data" />
  16. <link property="dc:subject" href="http://dbpedia.org/resource/SPARQL" />
  17. <link property="cc:licence" href="http://www.opensource.org/licenses/mit-license.php" />
  18. <meta property="og:title" content="LodLive - browsing the Web of Data" />
  19. <meta property="og:description" content="LodLive &egrave; un progetto sperimentale nato per divulgare la filosofia dei linked open data e per creare uno strumento in grado di associare le potenzialità di un browser RDF all'efficacia della rappresentazione a grafo proponendosi come primo navigatore di risorse RDF basato unicamente su endpoint SPARQL." />
  20. <meta property="dcterms:created" content="2012-04-25T13:00:00" />
  21. <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
  22. <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  23. <script>
  24. window.jQuery || document.write('<script src="js/jquery-2.0.3.min.js"><\/script>')
  25. </script>
  26. <script type="text/javascript">
  27. var _gaq = _gaq || [];
  28. _gaq.push(['_setAccount', 'UA-1940652-20']);
  29. _gaq.push(['_setDomainName', 'lodlive.it']);
  30. _gaq.push(['_trackPageview']);
  31. (function() {
  32. var ga = document.createElement('script');
  33. ga.type = 'text/javascript';
  34. ga.async = true;
  35. ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  36. var s = document.getElementsByTagName('script')[0];
  37. s.parentNode.insertBefore(ga, s);
  38. })();
  39. </script>
  40. <script type="text/javascript">
  41. WebFontConfig = {
  42. google : {
  43. families : ['Open+Sans:400italic,700italic,800italic,300italic,600italic,400,300,600,800,700:latin']
  44. }
  45. };
  46. (function() {
  47. var wf = document.createElement('script');
  48. wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  49. wf.type = 'text/javascript';
  50. wf.async = 'true';
  51. var s = document.getElementsByTagName('script')[0];
  52. s.parentNode.insertBefore(wf, s);
  53. })();
  54. </script>
  55. <script type="text/javascript" src="js/jquery-ui-1.9.2.min.js"></script>
  56. <link rel="stylesheet" href="js/jquery.fancybox/jquery.fancybox.css" type="text/css" media="all" />
  57. <link rel="stylesheet" href="css/lodlive.core.css?01" type="text/css" media="all" />
  58. <link rel="stylesheet" href="css/lodlive.profile.css?01" type="text/css" media="all" />
  59. <link rel="stylesheet" href="css/lodlive.app.css?01" type="text/css" media="all" />
  60. <script type="text/javascript" src="js/jquery.fancybox/jquery.fancybox.pack.js"></script>
  61. <script type="text/javascript" src="js/jquery.slimScroll.min.js"></script>
  62. <script type="text/javascript" src="js/jquery.json-2.3.min.js"></script>
  63. <script type="text/javascript" src="js/jquery.jsonp-2.4.0.min.js"></script>
  64. <script type="text/javascript" src="js/jquery.jstorage.js"></script>
  65. <script type="text/javascript" src="js/jquery.jcanvas.js"></script>
  66. <script type="text/javascript" src="js/jquery.doTimeout.js"></script>
  67. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  68. <script type="text/javascript" src="js/jquery.gmap3.js"></script>
  69. <script type="text/javascript" src="js/jquery.ThreeDots.min.js"></script>
  70. <script type="text/javascript" src="js/lodlive.profile.js?01"></script>
  71. <script type="text/javascript" src="js/lodlive.core.js?01"></script>
  72. <script type="text/javascript" src="js/lodlive.lang.js?01"></script>
  73. <script type="text/javascript" src="js/lodlive.utils.js?01"></script>
  74. <script type="text/javascript" src="js/lodlive.custom-lines.js?01"></script>
  75. <script type="text/javascript" src="js/lodlive.app.js?01"></script>
  76. <script type="text/javascript">
  77. $.jStorage.set('selectedLanguage', 'en')
  78. </script>
  79. </head>
  80. <body>
  81. <div id="lang-en">
  82. <div id="lang">
  83. <a href="http://lodlive.it" title="versione italiana">IT</a> / <a href="http://en.lodlive.it" title="english version">EN</a> / <a href="http://fr.lodlive.it" title="version française">FR</a> / <a href="http://gl.lodlive.it" title="versión en galego">GL</a>
  84. </div>
  85. <div id="nextPage" class="spriteHome paginator"></div>
  86. <div id="prevPage" class="spriteHome paginator"></div>
  87. <div id="startPanel">
  88. <div id="logo" class="sprite"></div>
  89. <div id="boxes">
  90. <div id="firstLineBoxes"></div>
  91. <div id="boxesCont"></div>
  92. </div>
  93. <div class="startBoxMainText">
  94. <div>
  95. <p>
  96. LodLive project provides a demonstration of the use of Linked Data standards (RDF, SPARQL) to browse RDF resources. The application aims to spread linked data principles using a simple and friendly interface with reusable techniques.
  97. </p>
  98. </div>
  99. <p>
  100. <a href="https://github.com/dvcama/LodLive" target="_blank">DOWNLOAD LodLive</a>
  101. </p>
  102. </div>
  103. <div class="startBoxMainTextPlain">
  104. <div>
  105. <p>
  106. The basic principle underlying LodLive is to prove that resources published according to the W3C SPARQL standard are easy to reach and understand, with hopes that the LodLive approach can stimulate Public Administrations and large-scale data owners to add their resources to the LOD and share them. You can start browsing by querying the endpoint for a specific resource, or start from one of the provided URI examples.
  107. </p>
  108. </div>
  109. <p>
  110. LodLive is composed of a jQuery plug-in (lodlive-core.js), a JSON configuration map (lodlive-profile.js), an HTML page, a few images (sprites), and some other jQuery public plug-ins. It is as simple as that.
  111. </p>
  112. </div>
  113. </div>
  114. <div id="footer">
  115. <div id="footerContainer">
  116. <div class="footerBox segnala">
  117. <h2>share</h2>
  118. <a class="tw spriteHomeEn" href="http://twitter.com/home?status=via+%40LodLive+-+%23lodlive+-+browsing+the+web+of+data" target="_blank" title="condividi su Twitter"></a><a class="fb spriteHomeEn" href="http://www.facebook.com/sharer.php?s=100&amp;p[title]=LodLive+-+browsing+the+web+of+data&amp;p[summary]=LodLive+%C3%A8+un+progetto+sperimentale+nato+per+divulgare+la+filosofia+dei+linked+open+data+e+per+creare+uno+strumento+in+grado+di+associare+le+potenzialità+di+un+browser+RDF+all'efficacia+della+rappresentazione+a+grafo.&amp;p[url]=http://lodlive.it&amp;&amp;p[images][0]=http://lodlive.it/img/logoLodLive.jpg" target="_blank" title="condividi su FaceBook"></a>
  119. <br />
  120. <br />
  121. <h2>follow</h2>
  122. <a class="tw spriteHomeEn" href="https://twitter.com/#!/LodLive" target="_blank" title="segui su Twitter"></a><a class="fb spriteHomeEn" href="https://www.facebook.com/lodlive.browser" target="_blank" title="segui su FaceBook"></a>
  123. </div>
  124. <div class="footerBox" id="menu">
  125. <h2>menu</h2>
  126. <ul>
  127. <li>
  128. <a href="#what">What is LodLive?</a>
  129. </li>
  130. <li>
  131. <a href="http://blog.lodlive.it">Blog/documentation</a>
  132. </li>
  133. <li>
  134. <a href="#faq">FAQ</a>
  135. </li>
  136. <li>
  137. <a href="#send">Signal an endpoint</a>
  138. </li>
  139. <li>
  140. <a href="#links">Useful Links</a>
  141. </li>
  142. <li>
  143. <a href="#get">Download</a>
  144. </li>
  145. <li>
  146. <a href="#credits">Credits and contacts</a>
  147. </li>
  148. </ul>
  149. </div>
  150. <div class="footerBox">
  151. <h2>best experienced with</h2>
  152. LodLive does not make use of any server component.
  153. <br />
  154. For a proper function of the application, we recommend using the latest up-dated browsers. <div class="spriteHomeEn browsers" title="FireFox - Chrome - Safari - Opera"></div>
  155. </div>
  156. <div class="best">
  157. 2012, lodlive.it <a href="http://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC BY-SA</a>, lodlive.js <a href="http://www.opensource.org/licenses/mit-license.php" target="_blank">MIT License</a>
  158. <div class="license spriteHomeEn"></div>
  159. </div>
  160. </div>
  161. </div>
  162. <div id="faq" class="hd">
  163. <p>
  164. <strong>When navigating the data graph, how will I know which endpoint I'm at?</strong>
  165. <br />
  166. By going over the resource with your mouse, a box will appear in the lower left-hand corner in which certain features will be indicated, including the resource's endpoint.
  167. <br />
  168. <br />
  169. <strong>The system seems to freeze when I open certain resources, and with IE it does not seem to work.</strong>
  170. <br />
  171. LodLife makes full use of the computer's power that it is accessing, and this has allowed us to develop an application that does not require any server component. The application can therefore be used immediately once it is downloaded.
  172. <br />
  173. We recommend using a recently up-dated browser, particularly Opera,
  174. Safari or Google Chrome; FireFox will work but with a slower navigation function; Internet Explorer does not currently work with the application because it is not capable of managing certain LodLive features and functions.
  175. </p>
  176. </div>
  177. <div id="links" class="hd">
  178. <p>
  179. <strong>Regarding SPARQL</strong>
  180. <br />
  181. <a href="http://www.w3.org/TR/rdf-sparql-query/" target="_blank">www.w3.org/TR/rdf-sparql-query</a>
  182. <br />
  183. <br />
  184. <strong>Regarding standards and the semantic web</strong>
  185. <br />
  186. <a href="http://www.w3.org/RDF/" target="_blank">www.w3.org/RDF</a>
  187. <br />
  188. <a href="http://www.w3.org/standards/semanticweb/" target="_blank">www.w3.org/standards/semanticweb</a>
  189. <br />
  190. <a href="http://www.w3.org/DesignIssues/LinkedData.html" target="_blank">www.w3.org/DesignIssues/LinkedData.html</a>
  191. <br />
  192. <br />
  193. <strong>A sparql tutorial for the w3c working group can be found at</strong>
  194. <br />
  195. <a href="http://www.cambridgesemantics.com/it/semantic-university/sparql-by-example"
  196. target="_blank">www.cambridgesemantics.com/it/semantic-university/sparql-by-example</a>
  197. <br />
  198. <br />
  199. </p>
  200. </div>
  201. <div id="get" class="hd">
  202. <p>
  203. LodLive is available on GitHub <a href="https://github.com/dvcama/LodLive" target="_blank">https://github.com/dvcama/LodLive</a>
  204. </p>
  205. </div>
  206. <div id="credits" class="hd">
  207. <p>
  208. <strong>Direct project participants</strong>
  209. <br />
  210. <span itemscope itemtype="http://data-vocabulary.org/Person"><span itemprop="name">Diego Valerio Camarda</span> (diego@lodlive.it), <span itemprop="name">Silvia Mazzini</span> (silvia@lodlive.it) e <span itemprop="name">Alessandro Antonuccio</span> (ale@lodlive.it)</span>
  211. <br />
  212. <br />
  213. Diego is responsible for the app development, Silvia established the criteria basis, and Alessandro developed the interface design. The group has worked together day after day, and the tasks at hand have often blended through their collaboration.
  214. <br />
  215. <br />
  216. For further information and contacts: info@lodlive.it.
  217. </p>
  218. </div>
  219. <div id="send" class="hd">
  220. <p>
  221. It is possible to signal an endpoint at info@lodlive.it so that it can be inserted in the application and made available at lodlive.it. Generally the best results are obtained with datasets having owl:sameAs properties towards other resources available on SPARQL endpoints.
  222. <br />
  223. It is important to provide as much information as possible on the resources existing in the endpoint and on the specificities of the dataset. LodLive can be specifically configured to best represent the contents that it navigates.
  224. </p>
  225. </div>
  226. <div id="what" class="hd">
  227. <p>
  228. LodLive is an experimental project that was set-up to spread and promote the linked-open-data philosophy and to create a tool that can be used for connecting RDF browser capabilities with the effectiveness of data graph representation.
  229. <br />
  230. <br />
  231. LodLive is the first navigator to use RDF resources based solely on SPARQL endpoints.
  232. <br />
  233. <br />
  234. LodLive aims to demonstrate how resources published by W3C standards for the semantic web can be made easily accessible and legible with a few viable tools.
  235. <br />
  236. <br />
  237. LodLive is capable of connecting the resources existing in its configured endpoints, allowing the user to pass from one endpoint to another by making use of LOD interconnection capacities.
  238. </p>
  239. </div>
  240. <div class="help hd">
  241. <div>
  242. <h2>HELP</h2>
  243. <p>
  244. <a href="http://www.youtube.com/embed/BQ9Ckh2ov-c?rel=0" class="sprite videoHelp"></a>
  245. </p>
  246. <p>
  247. Here you can follow the direct and inverse connections provided by the resource by moving freely from one "circle" to the others.
  248. </p>
  249. <p>
  250. Every new pop-open resource will guide the user to those relating to it, automatically connecting the new "circle" to the ones they have already opened.
  251. </p>
  252. <p>
  253. Every time an owl:sameAs property is reached throughout the course of navigation, LodLive will connect to the related endpoint, enabling the user to move to the new available resources within the same navigation environment.
  254. </p>
  255. </div>
  256. </div>
  257. <div class="legenda hd">
  258. <div>
  259. <h2>SYMBOL LEGEND</h2>
  260. <ul class="optionsList legend">
  261. <li>
  262. <span class="spriteLegenda"></span>tools
  263. </li>
  264. <li>
  265. <span class="spriteLegenda"></span>view additional information
  266. </li>
  267. <li>
  268. <span class="spriteLegenda"></span>close circle
  269. </li>
  270. <li>
  271. <span class="spriteLegenda"></span>focus on circle
  272. </li>
  273. <li>
  274. <span class="spriteLegenda"></span>open resource URI
  275. </li>
  276. <li>
  277. <span class="spriteLegenda"></span>expand all visible relations
  278. </li>
  279. <li>
  280. <span class="spriteLegenda"></span>direct relation
  281. </li>
  282. <li>
  283. <span class="spriteLegenda"></span>group of direct relations
  284. </li>
  285. <li>
  286. <span class="spriteLegenda"></span>inverse relation
  287. </li>
  288. <li>
  289. <span class="spriteLegenda"></span>group of inverse relations
  290. </li>
  291. <li>
  292. <span class="spriteLegenda"></span>owl:sameAs relation
  293. </li>
  294. </ul>
  295. </div>
  296. </div>
  297. </div>
  298. </body>
  299. </html>