-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
366 lines (344 loc) · 12.9 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
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Applications make the Semantic Web happen</title>
<meta name="viewport" content="width=1024, user-scalable=no">
<link rel="stylesheet" href="deck.js/core/deck.core.css">
<link rel="stylesheet" href="deck.js/extensions/goto/deck.goto.css">
<link rel="stylesheet" href="deck.js/extensions/menu/deck.menu.css">
<link rel="stylesheet" href="deck.js/extensions/navigation/deck.navigation.css">
<link rel="stylesheet" href="deck.js/extensions/status/deck.status.css">
<link rel="stylesheet" href="deck.js/extensions/hash/deck.hash.css">
<link rel="stylesheet" href="deckjs-mmlab.css">
<link rel="stylesheet" href="deck.js/themes/transition/horizontal-slide.css">
<script src="deck.js/modernizr.custom.js"></script>
</head>
<body class="deck-container">
<section class="slide" id="title">
<h1>Applications make the Semantic Web happen</h1>
<img src="figures/semantic-web-logo.svg" width="250" height="250" alt="[Semantic Web logo]">
<p class="authors">
<a href="mailto:[email protected]">Ruben Verborgh</a>,
<a href="mailto:[email protected]">Davy Van Deursen</a>,
<a href="mailto:[email protected]">Peter Lambert</a>
</p>
<p class="affiliation"><a href="http://multimedialab.elis.ugent.be/" target="_blank">Multimedia Lab – IBBT / ELIS, Ghent University</a></p>
<p class="tiny right">
<a href="http://mmlab.github.com/Slides-Semantic-Web-Applications/" target="_blank">Watch on GitHub pages</a>.
<br>
<a href="https://github.com/mmlab/Slides-Semantic-Web-Applications" target="_blank">Fork on GitHub</a>.
</p>
</section>
<section class="slide" id="overview">
<h2>Semantic Web application domains</h2>
<ul>
<li>
<h3><a href="#mashups">Mashups</a></h3>
<p>Use Linked Data sets.</p>
</li>
<li>
<h3><a href="#smart-queries">Smart queries</a></h3>
<p>Semantic sources can outsmart Google.</p>
</li>
<li>
<h3><a href="#big-players">The big players</a></h3>
<p>Google and Facebook use semantics, too.</p>
</li>
</ul>
<img src="figures/semantic-web-logo.svg" width="200" height="200" alt="[Semantic Web logo]" class="background">
</section>
<section class="slide" id="mashups">
<h2>Mashups</h2>
<p>Integrating and visualizing different data sets</p>
<ul>
<li><h3><a href="#government">Opening up machine-readable government data</a></h3></li>
<li><h3><a href="#classic-mashups">Classic mashups driven by Semantic Web technologies</a></h3></li>
</ul>
<img src="figures/mashups.jpg" alt="" class="background" />
</section>
<section class="slide" id="government">
<h2>Opening up machine-readable government data</h2>
<ul>
<li>
<h3>open</h3>
<p>free for anyone to use, re-use and re-distribute</p>
</li>
<li>
<h3>government</h3>
<p>commissioned or produced by a government</p>
</li>
<li>
<h3>machine-readable</h3>
<p>data can be interpreted by machines</p>
</li>
</ul>
</section>
<section class="slide" id="government-examples">
<h2>Government data applications</h2>
<figure class="right">
<a href="http://data.gov.uk/apps/crime-finder"><img src="figures/crimefinder.jpg" width="360" alt="[Crime Finder]"/></a>
</figure>
<ul>
<li>
<h3><a href="http://data.gov.uk/apps/crime-finder" target="_blank">Crime Finder</a></h3>
</li>
<li>
<h3><a href="http://achievedc.mapkist.com/" target="_blank">Achieve DC</a></h3>
</li>
<li>
<h3><a href="http://wheredoesmymoneygo.org/" target="_blank">Where does my money go?</a></h3>
</li>
</ul>
</section>
<section class="slide" id="classic-mashups">
<h2>Classic mashups driven by Semantic Web technologies</h2>
<ul>
<li>
<figure class="right">
<a href="http://www.bbc.co.uk/music/artists/79239441-bfd5-4981-a70c-55c3f15c1287" target="_blank"><img src="figures/madonna.jpg" width="330" alt="Madonna"/></a>
</figure>
<h3><a href="http://www.bbc.co.uk/music" target="_blank">BBC Music</a> combines</h3>
<ul>
<li>radio program playlists <em>(BBC Radio data)</em></li>
<li>music metadata: related artists and reviews <em>(MusicBrainz)</em></li>
<li>introductory text for artists' biographies <em>(DBPedia)</em></li>
</ul>
</li>
</ul>
</section>
<section class="slide" id="sig.ma">
<h2>Classic mashups driven by Semantic Web technologies</h2>
<ul>
<li>
<img src="figures/sigma-logo.png" width="360" alt="[Sig.ma logo]" class="right" />
<h3><a href="http://sig.ma" target="_blank">Sig.ma</a></h3>
<ul>
<li>on the fly, interactive information visualization</li>
<li>up to hundreds of sources at the same time</li>
<li>powered by <a href="http://sindice.com" target="_blank">Sindice</a>, the Semantic Web index</li>
</ul>
</li>
</ul>
</section>
<section class="slide" id="smart-queries">
<h2>Smart queries</h2>
<ul>
<li>
<h3>How would you ask Google…</h3>
<ul>
<li>
<a href="https://www.google.com/search?q=movies%20by%20Peter%20Jackson" target="_blank">
…movies by Peter Jackson?
</a>
</li>
<li>
<a href="https://www.google.com/search?q=movies%20by%20Peter%20Jackson%20featuring%20Orlando%20Bloom" target="_blank">
…featuring Orlando Bloom?
</a>
</li>
<li>
<a href="https://www.google.com/search?q=movies%20by%20Peter%20Jackson%20featuring%20Orlando%20Bloom%20with%20release%20date" target="_blank">
…with release date?
</a>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<h3>How can we ask Freebase…</h3>
<ul>
<li>
<a href="http://www.freebase.com/queryeditor/?q=%5B%7B%22id%22%3Anull%2C%22name%22%3Anull%2C%22%2Ffilm%2Ffilm%2Fdirected_by%22%3A%7B%22name%22%3A%22Peter%20Jackson%22%7D%7D%5D&autorun=1" target="_blank">
…movies by Peter Jackson?
</a>
</li>
<li>
<a href="http://www.freebase.com/queryeditor/?q=%5B%7B%22id%22%3Anull%2C%22name%22%3Anull%2C%22%2Ffilm%2Ffilm%2Fdirected_by%22%3A%7B%22name%22%3A%22Peter%20Jackson%22%7D%2C%22%2Ffilm%2Ffilm%2Fstarring%22%3A%5B%7B%22actor%22%3A%5B%7B%22name%22%3A%22Orlando%20Bloom%22%7D%5D%7D%5D%7D%5D&autorun=1" target="_blank">
…featuring Orlando Bloom?
</a>
</li>
<li>
<a href="http://www.freebase.com/queryeditor/?q=%5B%7B%22id%22%3Anull%2C%22name%22%3Anull%2C%22%2Ffilm%2Ffilm%2Finitial_release_date%22%3Anull%2C%22%2Ffilm%2Ffilm%2Fdirected_by%22%3A%7B%22name%22%3A%22Peter%20Jackson%22%7D%2C%22%2Ffilm%2Ffilm%2Fstarring%22%3A%5B%7B%22actor%22%3A%5B%7B%22name%22%3A%22Orlando%20Bloom%22%7D%5D%7D%5D%7D%5D&autorun=1" target="_blank">
…with release date?
</a>
</li>
</ul>
</li>
</ul>
<img src="figures/peter-jackson.jpg" width="250" class="background" alt="" />
</section>
<section class="slide" id="linked-data">
<h2>Smart queries work with Linked Data</h2>
<ul>
<li>
<h3>All data items consist of 3 parts</h3>
<ul>
<li>subject</li>
<li>predicate <em>(verb)</em></li>
<li>object</li>
</ul>
</li>
<li>
<h3>Every part has a URI</h3>
<ul>
<li><code class="small">http://rdf.freebase.com/ns/en.orlando_bloom</code></li>
</ul>
</li>
<li>
<h3>Every URI can have links</h3>
<ul>
<li>they are <em>typed</em> links: <code class="small">http://rdf.freebase.com/ns/film.film.starring</code></li>
</ul>
</li>
</ul>
</section>
<section class="slide" id="big-players">
<h2>The big players</h2>
<ul>
<li><h3><a href="#schema.org">Search engines</a></h3></li>
<li><h3><a href="#social-networks">Social networks</a></h3></li>
</ul>
<img src="figures/search-engines.jpg" class="background" alt="" />
</section>
<section class="slide" id="schema.org">
<h2>Search engines launch <a href="http://schema.org/" target="_blank">schema.org</a></h2>
<ul>
<li>
<h3>Who?</h3>
<p>A joint effort by Google, Bing, and Yahoo!</p>
</li>
<li>
<h3>What?</h3>
<p>A schema describing what webpages are about</p>
</li>
<li>
<h3>Why?</h3>
<p>To express the <em>meaning</em> of your content</p>
</li>
<li>
<h3>How?</h3>
<p>Using <a href="http://schema.org/docs/gs.html#microdata_why" target="_blank"><abbr>HTML</abbr> microdata</a>.</p>
</li>
</ul>
</section>
<section class="slide" id="schema.org-search-results">
<h2>Schema.org enhances search results</h2>
<p class="clear"><em>with varying degrees of intelligence</em></p>
<ul>
<li><h3><a href="http://developer.yahoo.com/searchmonkey/siteowner.html" target="_blank">Yahoo! SearchMonkey</a></h3></li>
<li><h3><a href="http://support.google.com/webmasters/bin/answer.py?hl=en&answer=99170" target="_blank">Google Rich Snippets</a></h3></li>
<li><h3><a href="http://searchenginewatch.com/article/2049973/Bing-Adds-Tiles-to-Search-Results" target="_blank">Bing Tiles</a></h3></li>
</ul>
<img src="figures/snippets1.png" width="400" alt="Google Rich Snippets example" class="background" />
</section>
<section class="slide" id="schema.org-domain-specific">
<h2>Schema.org powers search engines</h2>
<p class="clear"><em>currently mostly domain-specific</em></p>
<figure class="right">
<a href="https://www.google.com/#q=macaroni&tbm=rcp" target="_blank">
<img src="figures/google-recipes.png" width="600" alt="Google Recipes example"/>
</a>
</figure>
<ul>
<li><h3><a href="http://www.google.com/landing/recipes/" target="_blank">recipes</a></h3></li>
<li><h3><a href="http://www.google.com/shopping" target="_blank">products</a></h3></li>
<li><h3><a href="http://video.search.yahoo.com/" target="_blank">video</a></h3></li>
</ul>
</section>
<section class="slide" id="google-knowledge-graph">
<h2>Google's Knowledge Graph</h2>
<ul>
<li>
<h3>“<a href="http://www.google.com/insidesearch/features/search/knowledge.html" target="_blank">Google gives search a refresh</a>”</h3>
<ul>
<li>
<h4>queries will match <strong>entities</strong></h4>
<ul class="inline">
<li><em>people</em></li>
<li><em>places</em></li>
<li><em>things</em></li>
<li><em>…</em></li>
</ul>
</li>
<li>
<h4>response contains <strong>attributes</strong></h4>
<ul class="inline">
<li><em>birthdate</em></li>
<li><em>location</em></li>
<li><em>altitude</em></li>
<li><em>…</em></li>
</ul>
</li>
<li><h4>provides <strong>answers</strong> and pages</h4></li>
</ul>
</li>
<li>
Example: search for <a href="https://www.google.be/search?q=taj+mahal" target="_blank">Taj Mahal</a>
</li>
</ul>
</section>
<section class="slide" id="google-knowledge-graph2">
<h2>Google's Knowledge Graph (cont.)</h2>
<ul>
<li>
<h3>Sources</h3>
<ul>
<li>
<h4>own datasets</h4>
<ul>
<li>Freebase</li>
<li>Google Maps</li>
<li>Google Books</li>
</ul>
</li>
<li>
<h4>freely available datasets</h4>
<ul>
<li>Wikipedia</li>
<li>World CIA Factbook</li>
<li>online event listings</li>
<li>...</li>
</ul>
</li>
<h4>commercial datasets</h4>
</li>
</ul>
</li>
</ul>
</section>
<section class="slide" id="build-your-own">
<h2>Build your Semantic Web app today</h2>
<ul>
<li>
<h3>Start with mashups</h3>
<ul>
<li><a href="http://www.freebase.com/apps/" target="_blank">Freebase apps</a></li>
</ul>
</li>
<li>
<h3>Create real-world apps</h3>
<ul>
<li><a href="https://github.com/antoniogarrote/rdfstore-js" target="_blank">JavaScript</a> (browser <em>and</em> node.js)</li>
<li><a href="http://incubator.apache.org/jena/tutorials/rdf_api.html" target="_blank">Java</a></li>
<li><a href="http://semanticweb.org/wiki/Getting_data_from_the_Semantic_Web_(Ruby)" target="_blank">Ruby</a></li>
</ul>
</li>
</ul>
<img class="background" src="figures/apps.jpg" width="400" alt="">
</section>
<a href="#" class="deck-prev-link" title="Previous">←</a>
<a href="#" class="deck-next-link" title="Next">→</a>
<a href="." title="Permalink to this slide" class="deck-permalink">#</a>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js"></script>
<script>window.jQuery || document.write('<script src="deck.js/jquery-1.7.min.js"><\/script>')</script>
<script src="deck.js/core/deck.core.js"></script>
<script src="deck.js/extensions/hash/deck.hash.js"></script>
<script src="deck.js/extensions/navigation/deck.navigation.js"></script>
<script>$(function(){$.deck($('.slide').wrapInner('<div class="outer"><div class="inner">'));});</script>
</body>
</html>