Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September, 2011
Page: Overview Introduction Interaction with Content in IKS Components The Stack: Interaction & Presentation VIE Interaction Patterns & Widgets Examples Basic Operations Building an Application
Page: Overview Introduction Interaction with Content in IKS Components The Stack: Interaction & Presentation VIE Interaction Patterns & Widgets Examples Basic Operations Building an Application
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: 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=" about=" News item title News item contents 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: 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: 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: Overview Introduction Interaction with Content in IKS Components The Stack: Interaction & Presentation VIE Interaction Patterns & Widgets Examples Basic Operations Building an Application
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: Development:
Page: VIE It‘s about abstraction VIE - UI Widgets „VIE-W“ VIE - UI Widgets „VIE-W“ VIE „Edit your content w. Semantics“ & „Edit your content w. Semantics“ VIE (Semantic) Services (e.g., Stanbol Enhancer, - EntityHub, Zemanta,...) (Semantic) Services (e.g., Stanbol Enhancer, - EntityHub, Zemanta,...) (Semantic) Databases (e.g., DBPedia, Geonames,...) (Semantic) Databases (e.g., DBPedia, Geonames,...)
Page: VIE: Core Javascript framework/library is a
Page: VIE: Core Javascript framework/library abstraction of semantic entities and their relations offering is a
Page: VIE: Core Javascript framework/library abstraction of semantic entities and their relations offering is a using
Page: VIE: Core Javascript framework/library abstraction of semantic entities and their relations offering is a addressing using Web Developers bringing semantics into webpage without caring too much about triples/triplestores and so on
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 which can be easily switched or extended.
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: VIE: Service needs three basic information name connector Default properties
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: VIE: Service VIE.prototype.DBPediaService = function(options) { var defaults = { name : 'dbpedia', namespaces : { owl : " yago : " dbonto : ' } }; 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: VIE: Service/Connectors connect Backend service/implemenation with the Core Overwrite at least one of the functions Load Analyze Find
Page: VIE: Service/Connectors var StanbolConnector = function(options){ this.options = options; this.baseUrl = options.url.replace(/\/$/, ''); this.enhancerUrlPrefix = "/engines"; this.entityhubUrlPrefix = "/entityhub"; };
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: VIE: Service/Rules this.rules = [ //rule to transform a DBPedia person into a VIE person { 'left' : [ '?subject a ', ], 'right': function(ns){ return function(){ return jQuery.rdf.triple(this.subject.toString() + ' a ', { namespaces: ns }); }; }(this.namespaces.toObj()) } ]; },
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: Interaction Patterns: IP An IP consists of four parts:
Page: Interaction Patterns: IP An IP consists of four parts: the problem
Page: Interaction Patterns: IP An IP consists of four parts: the problem the pattern (i.e., the solution of the problem)
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: 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: 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: VIE Widgets VIE-Widgets are a sort of jQuery UI Widgets in order to: achive maximum portability accelerating lerning curve Widgets
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.
Page: Overview Introduction Interaction with Content in IKS Components The Stack: Interaction & Presentation VIE Interaction Patterns & Widgets Examples Basic Operations Building an Application
Page: Load the Lib var v = new VIE(); v.namespsaces.base( var stanbol = new v.StanbolService({url : " project.eu:8081"}) v.use(stanbol);
Page: Create a New Person var person = v.entities.add({ : ' : 'Person', 'foaf:name': 'Barack Obama' });
Page: Entity Access person.get(“name”) e.g., “Barack Obama” person.get(“foaf:name”) person.get(“ ”); person.set({“name” : “B. Obama”}); person.setOrAdd({“name” : “Barack O.”}); person.get(“name”); [“B. Obama”, “Barack O.”]
Page: Upload to Apache Stanbol v.save(person).using('stanbol').execute().done(function () { alert("saved!"); }).fail(function () { alert("not saved!"); });
Page: Load from Apache Stanbol v.load({entity : ' '}).using('stanbol').execute().done(function (person) { alert(person.get('name') + " loaded!"); }).fail(function () { alert("somethin went wrong!"); });
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: Analyze with Apache Stanbol var elem = $(' This is a small test, where Steve Jobs sings a song. '); v.analyze({element: elem}).using('stanbol').execute().done(function(entities) { alert ("found: " + entities.length + " entities!"}).fail(function(f) { alert("something went wrong") });
Page: Building an Application Define an application using the ImageSearch-VIEWidget: Flicker-Search ( ) Include dependencies Init VIE Read embedded annotation Set-up the ImageSearch-VIEWidget Configure application for: Customise
Page: ImageSearch: Incl. Dependencies
Page: ImageSearch: Init. VIE Initialize a global VIE object And load the reference Ontology
Page: ImageSearch: Init. VIE Initialize a global VIE object And load the reference Ontology
Page: ImageSearch: Init. VIE Initialize a global VIE object And load the reference Ontology
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: 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: ImageSearch: Set-up VIEWidget The html element in which results will be presented calls the image search widget
Page: ImageSearch: Set-up VIEWidget The html element in which results will be presented calls the image search widget
Page: ImageSearch: Set-up VIEWidget The html element in which results will be presented calls the image search widget
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: 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: 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: ImageSearch: Configure App. Configure your image search application by registering
Page: ImageSearch: Configure App. Configure your image search application by registering annotated elements
Page: ImageSearch: Configure App. Configure your image search application by registering annotated elements to an event handler
Page: ImageSearch: Configure App. Configure your image search application by registering annotated elements to an event handler to trigger semantic image search
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: ImageSearch: Cusomise CUSTOMISE PRODUCTS The image source widget uses two alternative photo sharing services: Flickr Europeana
Page: ImageSearch: Cusomise CUSTOMISE PRODUCTS The image source widget uses two alternative photo sharing services: Flickr Europeana
Page: ImageSearch: Cusomise CUSTOMISE PRODUCTS The image source widget uses two alternative photo sharing services: Flickr Europeana
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: 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: 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: References