VIE - IKS Project

disgustedtukwilaInternet και Εφαρμογές Web

14 Δεκ 2013 (πριν από 3 χρόνια και 9 μήνες)

148 εμφανίσεις

Co
-
funded by the
European Union

Semantic CMS Community

Tutorial:

Knowledge
Interaction

and
Presentation

Copyright IKS Consortium

1

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. S
upports 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
-
W


VIE


Edit your content w. Semantics
“ & „
Edit your content w.
Semantics


(Semantic) Services

(e.g., Stanbol Enhancer,
-

EntityHub, Zemanta, ...)

(Semantic) Databases

(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

is a

www.iks
-
project.eu

Page:

VIE: Core

Javascript

framework/library

abstraction


of

semantic
entities

and their
relations

is a

www.iks
-
project.eu

Page:

VIE: Core

Javascript

framework/library

abstraction


of

semantic
entities

and their
relations

is a

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


I
nteraction

P
attern:


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



Widgets



Widgets

www.iks
-
project.eu

Page:

UI Widget Example

Description:


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