co-funded by the european union semantic cms community tutorial: knowledge interaction and...
TRANSCRIPT
Co-funded by the European Union
Semantic CMS Community
Tutorial:Knowledge Interaction and Presentation
Copyright IKS Consortium1
DFKI GmbH.
September, 2011
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
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
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
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
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.
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
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
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
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, ...)
www.iks-project.eu
Page:
VIE: Core
Javascript framework/library
is a
www.iks-project.eu
Page:
VIE: Core
Javascript framework/library
abstraction of
semantic entities and their relations
offerin
g
is a
www.iks-project.eu
Page:
VIE: Core
Javascript framework/library
abstraction of
semantic entities and their relations
offerin
g
is a
using
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
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.
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…
www.iks-project.eu
Page:
VIE: Service
needs three basic information
name
connector
Default properties
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
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);}}
});
};
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
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";
};
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
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())
}
];
},
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).
www.iks-project.eu
Page:
Interaction Patterns: IP
An IP consists of four parts:
www.iks-project.eu
Page:
Interaction Patterns: IP
An IP consists of four parts:
the problem
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)
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
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
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.
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
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.
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
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);
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'
});
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.”]
www.iks-project.eu
Page:
Upload to Apache Stanbol
v
.save(person)
.using('stanbol')
.execute()
.done(function () { alert("saved!"); })
.fail(function () { alert("not saved!"); });
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!"); });
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!"); });
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") });
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
www.iks-project.eu
Page:
ImageSearch: Incl. Dependencies
www.iks-project.eu
Page:
ImageSearch: Init. VIE Initialize a global VIE object And load the reference
Ontology
www.iks-project.eu
Page:
ImageSearch: Init. VIE Initialize a global VIE object And load the reference
Ontology
www.iks-project.eu
Page:
ImageSearch: Init. VIE Initialize a global VIE object And load the reference
Ontology
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
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
www.iks-project.eu
Page:
ImageSearch: Set-up VIEWidget
The html element
in which results will be presented calls the image search widget
www.iks-project.eu
Page:
ImageSearch: Set-up VIEWidget
The html element
in which results will be presented calls the image search widget
www.iks-project.eu
Page:
ImageSearch: Set-up VIEWidget
The html element
in which results will be presented calls the image search widget
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:
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
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
www.iks-project.eu
Page:
ImageSearch: Configure App. Configure your image search
application by registering
www.iks-project.eu
Page:
ImageSearch: Configure App. Configure your image search
application by registering
annotated elements
www.iks-project.eu
Page:
ImageSearch: Configure App. Configure your image search
application by registering
annotated elements
to an event handler
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
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
www.iks-project.eu
Page:
ImageSearch: Cusomise
CUSTOMISE PRODUCTS The image source widget
uses two alternative photo sharing services: Flickr Europeana
www.iks-project.eu
Page:
ImageSearch: Cusomise
CUSTOMISE PRODUCTS The image source widget
uses two alternative photo sharing services: Flickr Europeana
www.iks-project.eu
Page:
ImageSearch: Cusomise
CUSTOMISE PRODUCTS The image source widget
uses two alternative photo sharing services: Flickr Europeana
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.
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.
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.
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