1. Co-funded by the European Union Semantic CMS Community Tutorial: Knowledge Interaction and Presentation Copyright IKS Consortium 1 DFKI GmbH. September, 2011

2. 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

3. 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

4. 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

5. 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"> 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

6. 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.

7. 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

8. 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

9. 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/VIEhttp://wiki.iks-project.eu/index.php/VIE  Development: http://github.com/IKS/VIEhttp://github.com/IKS/VIE

10. www.iks-project.eu 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,...)

11. www.iks-project.eu Page: VIE: Core Javascript framework/library is a

12. www.iks-project.eu Page: VIE: Core Javascript framework/library abstraction of semantic entities and their relations offering is a

13. www.iks-project.eu Page: VIE: Core Javascript framework/library abstraction of semantic entities and their relations offering is a using

14. www.iks-project.eu 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

15. 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. http://schema.org

16. 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…

17. www.iks-project.eu Page: VIE: Service  needs three basic information  name  connector  Default properties

18. 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

19. 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);}} }); };

20. 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

21. 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"; };

22. 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

23. www.iks-project.eu 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()) } ]; },

24. 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).

25. www.iks-project.eu Page: Interaction Patterns: IP An IP consists of four parts:

26. www.iks-project.eu Page: Interaction Patterns: IP An IP consists of four parts:  the problem

27. 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)

28. 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

29. 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

30. 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.

31. 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

32. 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.

33. 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

34. www.iks-project.eu Page: Load the Lib var v = new VIE(); v.namespsaces.base(http://foaf.com/);http://foaf.com/ var stanbol = new v.StanbolService({url : "http://dev.iks- project.eu:8081"}) v.use(stanbol);

35. 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' });

36. 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.”]

37. www.iks-project.eu Page: Upload to Apache Stanbol v.save(person).using('stanbol').execute().done(function () { alert("saved!"); }).fail(function () { alert("not saved!"); });

38. www.iks-project.eu 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!"); });

39. 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!"); });

40. www.iks-project.eu 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") });

41. 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 ) 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

42. www.iks-project.eu Page: ImageSearch: Incl. Dependencies

43. www.iks-project.eu Page: ImageSearch: Init. VIE  Initialize a global VIE object  And load the reference Ontology

44. www.iks-project.eu Page: ImageSearch: Init. VIE  Initialize a global VIE object  And load the reference Ontology

45. www.iks-project.eu Page: ImageSearch: Init. VIE  Initialize a global VIE object  And load the reference Ontology

46. 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

47. 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

48. www.iks-project.eu Page: ImageSearch: Set-up VIEWidget  The html element in which results will be presented calls the image search widget

49. www.iks-project.eu Page: ImageSearch: Set-up VIEWidget  The html element in which results will be presented calls the image search widget

50. www.iks-project.eu Page: ImageSearch: Set-up VIEWidget  The html element in which results will be presented calls the image search widget

51. 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:

52. 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

53. 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

54. www.iks-project.eu Page: ImageSearch: Configure App.  Configure your image search application by registering

55. www.iks-project.eu Page: ImageSearch: Configure App.  Configure your image search application by registering  annotated elements

56. www.iks-project.eu Page: ImageSearch: Configure App.  Configure your image search application by registering  annotated elements  to an event handler

57. 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

58. 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

59. www.iks-project.eu Page: ImageSearch: Cusomise CUSTOMISE PRODUCTS  The image source widget uses two alternative photo sharing services:  Flickr  Europeana

60. www.iks-project.eu Page: ImageSearch: Cusomise CUSTOMISE PRODUCTS  The image source widget uses two alternative photo sharing services:  Flickr  Europeana

61. www.iks-project.eu Page: ImageSearch: Cusomise CUSTOMISE PRODUCTS  The image source widget uses two alternative photo sharing services:  Flickr  Europeana

62. 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.

63. 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.

64. 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.

65. www.iks-project.eu Page: References  http://linkeddata-specs.info/ http://linkeddata-specs.info/  http://www.w3.org/wiki/SweoIG/TaskForces/CommunityProjects/LinkingOpenData http://www.w3.org/wiki/SweoIG/TaskForces/CommunityProjects/LinkingOpenData  http://www.bioontology.org/wiki/images/6/6a/Triple_Stores.pdf http://www.bioontology.org/wiki/images/6/6a/Triple_Stores.pdf  https://github.com/IKS https://github.com/IKS  https://github.com/IKS/VIE https://github.com/IKS/VIE  https://github.com/neogermi/VIEwidgets https://github.com/neogermi/VIEwidgets  http://schema.org http://schema.org  http://wiki.iks-project.eu/index.php/Semantic_Editor http://wiki.iks-project.eu/index.php/Semantic_Editor  http://www.w3.org/TR/xhtml-rdfa-primer/ http://www.w3.org/TR/xhtml-rdfa-primer/  http://www.w3.org/2006/07/SWD/ http://www.w3.org/2006/07/SWD/  http://www.w3.org/TR/rdfa-syntax/ http://www.w3.org/TR/rdfa-syntax/  http://www.w3.org/TR/xhtml-rdfa-primer/ http://www.w3.org/TR/xhtml-rdfa-primer/  http://www.w3.org/2010/02/rdfa/ http://www.w3.org/2010/02/rdfa/  http://www.w3.org/TR/2011/WD-rdfa-api-20110419/ http://www.w3.org/TR/2011/WD-rdfa-api-20110419/  http://documentcloud.github.com/backbone/ http://documentcloud.github.com/backbone/  http://www.w3.org/2001/11/13-RDF-Query-Rules/ http://www.w3.org/2001/11/13-RDF-Query-Rules/  http://json-ld.org http://json-ld.org