co-funded by the european union semantic cms community tutorial: knowledge interaction and...
TRANSCRIPT
![Page 1: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/1.jpg)
Co-funded by the European Union
Semantic CMS Community
Tutorial:Knowledge Interaction and Presentation
Copyright IKS Consortium1
DFKI GmbH.
September, 2011
![Page 2: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/2.jpg)
www.iks-project.eu
Page:
Overview Introduction
Interaction with Content in IKS Components
The Stack: Interaction & Presentation VIE Interaction Patterns & Widgets
Examples Basic Operations Building an Application
![Page 3: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/3.jpg)
www.iks-project.eu
Page:
Overview Introduction
Interaction with Content in IKS Components
The Stack: Interaction & Presentation VIE Interaction Patterns & Widgets
Examples Basic Operations Building an Application
![Page 4: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/4.jpg)
www.iks-project.eu
Page:
Interaction with Content in IKS Common representation of content on HTML level
Web editing tools has to understand the contents of a web page, i.e.: what parts of the page should be editable how they connect together.
For this purpose you add some semantic annotations to the HTML pages, handled via e.g., Microformats, HTML5 microdata, or RDFa
![Page 5: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/5.jpg)
www.iks-project.eu
Page:
Interaction with Content in IKS RDFa is a way to describe the meaning of particular HTML elements using simple
attributes. For example:
<div id="myarticle" typeof="http://rdfs.org/sioc/ns#Post"
about="http://example.net/blog/news_item"> <h1 property="dcterms:title">News item title</h1> <div property="sioc:content">News item contents</div>
</div>
Here we get all the necessary information for making a blog entry editable: typeof tells us the type of the editable object. On typical CMSs this would
map to a content model or a database table about gives us the identifier of a particular object. On typical CMSs this
would be the object identifier or database row primary key property ties a particular HTML element to a property of the content object.
On a CMS this could be a database column
![Page 6: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/6.jpg)
www.iks-project.eu
Page:
Interaction with Content in IKS
Common representation of content on JavaScript level If Content expressed with RDFa the content model can be easily
extracted into JavaScript. Using Backbone.js: supplies structure to JavaScript-heavy applications by
providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling,
connects it all to existing applications over a RESTful JSON interface.
With Backbone, the content extracted from the RDFa-annotated HTML page is easily manageable via JavaScript.
![Page 7: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/7.jpg)
www.iks-project.eu
Page:
Components
VIE is the access point to editable content on your pages. parses RDFa annotations on a page makes annotation accessible as JavaScript objects
backed by Backbone models, views and collections
RdfQuery provides RDF querying layer to your editable and enriched conten
![Page 8: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/8.jpg)
www.iks-project.eu
Page:
Overview Introduction
Interaction with Content in IKS Components
The Stack: Interaction & Presentation VIE Interaction Patterns & Widgets
Examples Basic Operations Building an Application
![Page 9: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/9.jpg)
www.iks-project.eu
Page:
VIE Pedigree:
Name: Vienna IKS Editable Functionality: makes the content of web pages editable through
annotations. Supports semantic-web developers in Retrieval of semantic data Storing semantic data Accessing semantic web services (e.g., Apache Stanbol
Enhancer) Semantic markup (e.g., RDFa or Microdata)
Coordinates: Basic concepts: http://wiki.iks-project.eu/index.php/VIE Development: http://github.com/IKS/VIE
![Page 10: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/10.jpg)
www.iks-project.eu
Page:
VIE It‘s about abstraction
VIE - UI Widgets VIE - UI Widgets „„VIE-WVIE-W““
VIE - UI Widgets VIE - UI Widgets „„VIE-WVIE-W““
VIEVIE„„Edit your content w. SemanticsEdit your content w. Semantics“ & „“ & „Edit your Edit your
content w. Semanticscontent w. Semantics““
VIEVIE„„Edit your content w. SemanticsEdit your content w. Semantics“ & „“ & „Edit your Edit your
content w. Semanticscontent w. Semantics““
(Semantic) Services(Semantic) Services(e.g., Stanbol Enhancer, - EntityHub, Zemanta, ...)(e.g., Stanbol Enhancer, - EntityHub, Zemanta, ...)
(Semantic) Services(Semantic) Services(e.g., Stanbol Enhancer, - EntityHub, Zemanta, ...)(e.g., Stanbol Enhancer, - EntityHub, Zemanta, ...)
(Semantic) Databases(Semantic) Databases(e.g., DBPedia, Geonames, ...)(e.g., DBPedia, Geonames, ...)
(Semantic) Databases(Semantic) Databases(e.g., DBPedia, Geonames, ...)(e.g., DBPedia, Geonames, ...)
![Page 11: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/11.jpg)
www.iks-project.eu
Page:
VIE: Core
Javascript framework/library
is a
![Page 12: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/12.jpg)
www.iks-project.eu
Page:
VIE: Core
Javascript framework/library
abstraction of
semantic entities and their relations
offerin
g
is a
![Page 13: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/13.jpg)
www.iks-project.eu
Page:
VIE: Core
Javascript framework/library
abstraction of
semantic entities and their relations
offerin
g
is a
using
![Page 14: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/14.jpg)
www.iks-project.eu
Page:
VIE: Core
Javascript framework/library
abstraction of
semantic entities and their relations
offerin
g
is a
addressing
using
Web Developers bringing semantics into webpage without caring too much about
triples/triplestores and so on
![Page 15: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/15.jpg)
www.iks-project.eu
Page:
VIE: Core VIE offers an API to: -
create entities with properties link entities serialize entities (either into the HTML using RDFa or to a
server) access semantic lifting services (e.g., Zemanta,
OpenCalais, Apache Stanbol, …) query databases to fill
The default "ontology" that VIE is delivered with, is http://schema.org, which can be easily switched or extended.
![Page 16: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/16.jpg)
www.iks-project.eu
Page:
VIE: Service
A service serves three main functionalities:
Querying for semantic properties Semantic lifting of an HTML element Content Serialization of semantic information
e.g. DBPediaService, StanbolService, RdfaService…
![Page 17: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/17.jpg)
www.iks-project.eu
Page:
VIE: Service
needs three basic information
name
connector
Default properties
![Page 18: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/18.jpg)
www.iks-project.eu
Page:
VIE: Service
A service defines:
Connector Query for values of specific properties of a given entity into a
database e.g . Stanbol, DBPedia
Rule to map Entities Store semantic information
![Page 19: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/19.jpg)
www.iks-project.eu
Page:
VIE: Service VIE.prototype.DBPediaService = function(options) {
var defaults = {
name : 'dbpedia',
namespaces : {
owl : "http://www.w3.org/2002/07/owl#",
yago : "http://dbpedia.org/class/yago/",
dbonto : 'http://dbpedia.org/ontology/'
}
};
this.options = jQuery.extend(defaults, options ? options : {});
this.vie = null; // will be set via VIE.use();
this.name = this.options.name;
this.connector = new DBPediaConnector(this.options);
jQuery.ajaxSetup({
converters: {"text application/rdf+json": function(s){return JSON.parse(s);}}
});
};
![Page 20: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/20.jpg)
www.iks-project.eu
Page:
VIE: Service/Connectors
connect Backend service/implemenation with the Core
Overwrite at least one of the functions Load Analyze Find
![Page 21: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/21.jpg)
www.iks-project.eu
Page:
VIE: Service/Connectors
var StanbolConnector = function(options){
this.options = options;
this.baseUrl = options.url.replace(/\/$/, '');
this.enhancerUrlPrefix = "/engines";
this.entityhubUrlPrefix = "/entityhub";
};
![Page 22: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/22.jpg)
www.iks-project.eu
Page:
VIE: Service/Rules
provide a projection from the ontological instances of entities to backbone models and collections.
Transform an entity of a specific type to VIE entity e.g. a stanbol person into a VIE person
a collection is created for every type found entities are automatically added to corresponding
collection triples are generated for manually added entities
![Page 23: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/23.jpg)
www.iks-project.eu
Page:
VIE: Service/Rules
this.rules = [
//rule to transform a DBPedia person into a VIE person
{
'left' : [
'?subject a <http://dbpedia.org/ontology/Person>',
],
'right': function(ns){
return function(){
return jQuery.rdf.triple(this.subject.toString() +
' a <http://schema.org/Person>', {
namespaces: ns
});
};
}(this.namespaces.toObj())
}
];
},
![Page 24: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/24.jpg)
www.iks-project.eu
Page:
Interaction Patterns
Interaction Pattern: describes recurring actions a user performs when interacting with a computer to achieve a certain goal of a task.
Actions are Implicit: arise from the discourse context (e.g., the
previous actions of the user) Explicit: triggered by the user (e.g., pushing a button).
![Page 25: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/25.jpg)
www.iks-project.eu
Page:
Interaction Patterns: IP
An IP consists of four parts:
![Page 26: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/26.jpg)
www.iks-project.eu
Page:
Interaction Patterns: IP
An IP consists of four parts:
the problem
![Page 27: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/27.jpg)
www.iks-project.eu
Page:
Interaction Patterns: IP
An IP consists of four parts:
the problem
the pattern (i.e., the
solution of the problem)
![Page 28: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/28.jpg)
www.iks-project.eu
Page:
Interaction Patterns: IP
An IP consists of four parts:
the problem
the pattern (i.e., the
solution of the problem)
use cases for the pattern
![Page 29: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/29.jpg)
www.iks-project.eu
Page:
Interaction Patterns: IP
An IP consists of four parts:
the problem
the pattern (i.e., the
solution of the problem)
use cases for the pattern
how the pattern applies for the use cases
![Page 30: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/30.jpg)
www.iks-project.eu
Page:
VIE: UI Widgets
UI Widgets
On top of VIE we gathered a bunch of UI widgets in a library that help to simplifying embedding VIEs power into a webpage more directly.
![Page 31: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/31.jpg)
www.iks-project.eu
Page:
VIE Widgets
VIE-Widgets are a sort of jQuery UI Widgets in order to: achive maximum portability accelerating lerning curve
WidgetsWidgets
![Page 32: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/32.jpg)
www.iks-project.eu
Page:
UI Widget ExampleDescription:
The VIE Image Search widget search for images using semantic annotated content as parameter for the search. Once included in an HTML page, the developer can easily query and retrieve images from the photo service Flickr, based on the type-specific properties of the current entity in focus, e.g., if the current entity is a city it makes sense to start a geographic query, whereas, for persons, it would make sense to query for the name of that person.
![Page 33: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/33.jpg)
www.iks-project.eu
Page:
Overview Introduction
Interaction with Content in IKS Components
The Stack: Interaction & Presentation VIE Interaction Patterns & Widgets
Examples Basic Operations Building an Application
![Page 34: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/34.jpg)
www.iks-project.eu
Page:
Load the Lib
var v = new VIE();
v.namespsaces.base(http://foaf.com/);
var stanbol = new v.StanbolService({url : "http://dev.iks-project.eu:8081"})
v.use(stanbol);
![Page 35: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/35.jpg)
www.iks-project.eu
Page:
Create a New Person
var person = v.entities.add({
'@subject' : 'http://example.net/foo#Person1',
'@type' : 'Person',
'foaf:name': 'Barack Obama'
});
![Page 36: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/36.jpg)
www.iks-project.eu
Page:
Entity Access
person.get(“name”) e.g., “Barack Obama” person.get(“foaf:name”) person.get(“<http://foaf.com/name>”); person.set({“name” : “B. Obama”}); person.setOrAdd({“name” : “Barack O.”});
person.get(“name”); [“B. Obama”, “Barack O.”]
![Page 37: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/37.jpg)
www.iks-project.eu
Page:
Upload to Apache Stanbol
v
.save(person)
.using('stanbol')
.execute()
.done(function () { alert("saved!"); })
.fail(function () { alert("not saved!"); });
![Page 38: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/38.jpg)
www.iks-project.eu
Page:
Load from Apache Stanbol
v
.load({entity : '<http://example.net/foo#Person1>'})
.using('stanbol')
.execute()
.done(function (person) { alert(person.get('name') + " loaded!"); })
.fail(function () { alert("somethin went wrong!"); });
![Page 39: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/39.jpg)
www.iks-project.eu
Page:
Find in Apache Stanbol
v
.find({term: "Barack Obama", limit: 10, offset: 0})
.using('stanbol')
.execute()
.done(function () { alert("found!"); })
.fail(function () { alert("not found!"); });
![Page 40: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/40.jpg)
www.iks-project.eu
Page:
Analyze with Apache Stanbol
var elem = $('<p>This is a small test, where Steve Jobs sings a song.</p>');
v
.analyze({element: elem})
.using('stanbol')
.execute()
.done(function(entities) { alert ("found: " + entities.length + " entities!"})
.fail(function(f) { alert("something went wrong") });
![Page 41: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/41.jpg)
www.iks-project.eu
Page:
Building an Application
Define an application using the ImageSearch-VIEWidget: Flicker-Search (http://neogermi.github.com/VIEwidgets/widgets/image_search/index.html )
Include dependencies Init VIE Read embedded annotation Set-up the ImageSearch-VIEWidget Configure application for: Customise
![Page 42: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/42.jpg)
www.iks-project.eu
Page:
ImageSearch: Incl. Dependencies
![Page 43: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/43.jpg)
www.iks-project.eu
Page:
ImageSearch: Init. VIE Initialize a global VIE object And load the reference
Ontology
![Page 44: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/44.jpg)
www.iks-project.eu
Page:
ImageSearch: Init. VIE Initialize a global VIE object And load the reference
Ontology
![Page 45: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/45.jpg)
www.iks-project.eu
Page:
ImageSearch: Init. VIE Initialize a global VIE object And load the reference
Ontology
![Page 46: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/46.jpg)
www.iks-project.eu
Page:
ImageSearch: Read Emb. RDFa
Initialize a global VIE object And load the reference
Ontology
Configure VIE with the service fitting the annotation language used in the webpage (in this case RDFa)
Finally load the elements pointing to annotations
![Page 47: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/47.jpg)
www.iks-project.eu
Page:
ImageSearch: Read Emb. RDFa
Initialize a global VIE object And load the reference
Ontology
Configure VIE with the service fitting the annotation language used in the webpage (in this case RDFa)
Finally load the elements pointing to annotations
![Page 48: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/48.jpg)
www.iks-project.eu
Page:
ImageSearch: Set-up VIEWidget
The html element
in which results will be presented calls the image search widget
![Page 49: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/49.jpg)
www.iks-project.eu
Page:
ImageSearch: Set-up VIEWidget
The html element
in which results will be presented calls the image search widget
![Page 50: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/50.jpg)
www.iks-project.eu
Page:
ImageSearch: Set-up VIEWidget
The html element
in which results will be presented calls the image search widget
![Page 51: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/51.jpg)
www.iks-project.eu
Page:
ImageSearch: Set-up VIEWidget
The html element
in which results will be presented calls the image search widget
The widget specifies two photo management services:
![Page 52: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/52.jpg)
www.iks-project.eu
Page:
ImageSearch: Set-up VIEWidget
The html element
in which results will be presented calls the image search widget
The widget specifies two photo management services:
Flickr
Europeana
![Page 53: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/53.jpg)
www.iks-project.eu
Page:
ImageSearch: Set-up VIEWidget
The html element
in which results will be presented calls the image search widget
The widget specifies two photo management services:
Flickr
Europeana
The Flicker service needs to be passed your Flicker API KEY
![Page 54: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/54.jpg)
www.iks-project.eu
Page:
ImageSearch: Configure App. Configure your image search
application by registering
![Page 55: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/55.jpg)
www.iks-project.eu
Page:
ImageSearch: Configure App. Configure your image search
application by registering
annotated elements
![Page 56: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/56.jpg)
www.iks-project.eu
Page:
ImageSearch: Configure App. Configure your image search
application by registering
annotated elements
to an event handler
![Page 57: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/57.jpg)
www.iks-project.eu
Page:
ImageSearch: Configure App. Configure your image search
application by registering
annotated elements
to an event handler
to trigger semantic image search
![Page 58: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/58.jpg)
www.iks-project.eu
Page:
ImageSearch: Configure App. Configure your image search
application by registering
annotated elements
to an event handler
to trigger semantic image search
resulting in a given element
![Page 59: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/59.jpg)
www.iks-project.eu
Page:
ImageSearch: Cusomise
CUSTOMISE PRODUCTS The image source widget
uses two alternative photo sharing services: Flickr Europeana
![Page 60: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/60.jpg)
www.iks-project.eu
Page:
ImageSearch: Cusomise
CUSTOMISE PRODUCTS The image source widget
uses two alternative photo sharing services: Flickr Europeana
![Page 61: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/61.jpg)
www.iks-project.eu
Page:
ImageSearch: Cusomise
CUSTOMISE PRODUCTS The image source widget
uses two alternative photo sharing services: Flickr Europeana
![Page 62: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/62.jpg)
www.iks-project.eu
Page:
ImageSearch: Cusomise
CUSTOMISE PRODUCTS The image source widget
uses two alternative photo sharing services: Flickr Europeana
Since we are using Flickr, we have to define a related type for the references to products
in this service.
![Page 63: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/63.jpg)
www.iks-project.eu
Page:
ImageSearch: Cusomise
CUSTOMISE PRODUCTS The image source widget
uses two alternative photo sharing services: Flickr Europeana
Since we are using Flickr, we have to define a related type for the references to products
in this service.
![Page 64: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/64.jpg)
www.iks-project.eu
Page:
ImageSearch: Cusomise
CUSTOMISE PRODUCTS The image source widget
uses two alternative photo sharing services: Flickr Europeana
Since we are using Flickr, we have to define a related type for the references to products
in this service.
![Page 65: Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September,](https://reader035.vdocuments.net/reader035/viewer/2022081519/56649e205503460f94b0b13f/html5/thumbnails/65.jpg)
www.iks-project.eu
Page:
References http://linkeddata-specs.info/ http://www.w3.org/wiki/SweoIG/TaskForces/CommunityProjects/LinkingOpenData http://www.bioontology.org/wiki/images/6/6a/Triple_Stores.pdf https://github.com/IKS https://github.com/IKS/VIE https://github.com/neogermi/VIEwidgets http://schema.org http://wiki.iks-project.eu/index.php/Semantic_Editor http://www.w3.org/TR/xhtml-rdfa-primer/ http://www.w3.org/2006/07/SWD/ http://www.w3.org/TR/rdfa-syntax/ http://www.w3.org/TR/xhtml-rdfa-primer/ http://www.w3.org/2010/02/rdfa/ http://www.w3.org/TR/2011/WD-rdfa-api-20110419/ http://documentcloud.github.com/backbone/ http://www.w3.org/2001/11/13-RDF-Query-Rules/ http://json-ld.org