co-funded by the european union semantic cms community tutorial: knowledge interaction and...

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