• Page
• Discussion
• View source
• History

Short Description The objective of the VIE Project is to ease the development of semantic web applications on the user interaction level. The project started in February 2011 during the IKS Semantic Interaction Framework Workshop in Vienna and meanwhile comprises several sub-projects: the core VIE library, a number of semantic user interface widgets and a set of applications that build upon these technologies.

Vienna IKS Editables is hosted at  viejs.org

Software Licensing: MIT Licensing

VIE

The development of web-applications for the semantic web is a hard process that usually involves several experts to work together. Especially when the benefits of the various semantic data needs to be visible to the user. However, when looking at such applications, we can easily identify different classes of semantic interaction patterns that are re-used in one way or another throughout the applications (e.g., "querying a database", "accessing a semantic service", …). We analyzed these patterns and collaborated closely with partners from the CMS world to support web-applications when relying on such patterns. The outcome of this work is an open-source, MIT-licensed JavaScript library called VIE (Vienna IKS Editables).

VIE in the version 1.0 concentrated on the development of decoupled Content Management Systems based on semantic annotations on a web-page. This new concept to detach the front-end editing framework from the content repository has been embraced by several CMS providers and working implementations within big CMS systems could be developed quickly (e.g., Midgard Create, WordPress, TYPO3, KaraCos, Drupal). The underlying principle is to encoding knowledge about the content directly in the content to allow the user interface to know how to deal with different parts of the content. As a side effect, this gives search engines a deeper understanding about the pages which is a direct benefit for the SEO effect.

Decoupled CMS Communication

Here is an example:

  <div typeof="sioc:Post" about="example.net/blog/news_item/42">
    <h1 property="dcterms:title">News item title</h1>
    <div property="sioc:content">News item contents</div>
  </div> 

With version 2.0 of the VIE library, we extended its capabilities to ease the development of semantic interaction. The API now offers a DSL to handle different namespaces seamlessly, to maintain ontological hierarchies (including full-typed, multiple inheritances) and to access semantic backend services:

• VIE.analyze()
  • Analyzes the given DOM element depending on the registered engines (e.g., RDFa-parsing, Apache Stanbol Enhancer, Zemanta) and returns an array of found entities.
• VIE.load()
  • Loads all properties for the given entity from external services (e.g., Apache Stanbol Entityhub, DBPedia) into VIE.
• VIE.save()
  • Saves knowledge about an entity to a service. This service can be the entityhub of Apache Stanbol but also simply the local storage of the browser, using the JSON-LD representation of the model.
• VIE.find()
  • Queries semantic services for, e.g., „all Persons whose names start with ‚Bar‘".

Subject-oriented Semantics

The most frequent answer that developers return when asked for their first association with the term "semantic web" is "triples". However, at the same time, this object-centric representation on entities is accepted rather poorly and often confuses developers. To face this issue, VIE contains a subject-centric representation on entities using Backbone.js models. Here is an example:

Triples (object-centric):

  <#Barack_Obama> rdf:type dbpedia:Person .
  <#Barack_Obama> dbpedia:label "Barack Hussein Obama" .
  <#Barack_Obama> dbpedia:birthDate "\"1961-08-04\"^^xsd:date" .

VIE-Model (subject-centric):

  var Person = vie.types.get("Person");
  var BarackObama = Person.instance({
    "@subject"          : "<#Barack_Obama>",
    "name"              : "Barack Hussein Obama",
    "dbpedia:birthDate" : "\"1961-08-04\"^^xsd:date"
  });

What first looks like more lines of code actually comes with a clean API to get(), set() and maintain attributes of entities.

By default, we ship VIE with the ontology provided by schema.org. However, VIE is ontology-agnostic and allows to easily extend, remove or change the ontology.

Dependencies

VIE is built upon other web-libraries. Though we intended to keep the footprint of VIE as small as possible, certain dependencies could not be avoided. We list here the currently used libraries, their minimal versions and what they are used for:

Availability

Official Webspace

In order to offer one centralized address where developers can learn more about the VIE project and have access to the variety of sources, we've created an official web-page: viejs.org. This page contains all the documentation about VIE, links to resources like widgets and applications that rely on VIE and provides an easy way to play with code examples to experience how VIE works and what VIE has to offer.

Discussions

We have set up a discussion group at Google to discuss new features, issues and other things concerning VIE. Please feel free to join us and participate the discussion.

Repository

VIE is developed collaboratively. The source files are freely available from the repository which is stored on Github. We have to distinguish between the blessed repository and the development repository. If you are looking for stable releases, the blessed repository is the right place to go.

VIE widgets – The view on your VIE models

Like jQuery does for the normal web developer, VIE aims to reduce the lines of code for the day-to-day recurring tasks of a semantic web developer. However, there are higher-level user interactions that go beyond the scope of VIE. These "semantic interaction patterns" also need support to allow an easier adoption and development. We started to implement VIE widgets that implement these interaction patterns on a broad scale but with a flexible and extendible user interface for application-specific usage. In the following, we list the currently available VIE widgets and applications where we combined such widgets.

Autotagger

This widget displays a list of found entities in a tag-cloud to be processed further.

Sources | Tutorial/HowTo | Online Demo | Screencast

Related Content

Displaying related content of the entity-in-focus. The challenge here is to transform the knowledge about the entity-type into entity-specific queries, e.g., photos of persons should usually contain a face, whereas images of a place will rather show a landscape.

Sources | Tutorial/HowTo | Online Demo | Screencast

Annotate.js

Semiautomatic annotation editor for rich html editors.

Sources | Tutorial/HowTo | Online Demo

VIE.autocomplete

VIE.autocomplete uses the VIE.find() service method to make autocomplete suggestions. The VIE.find method can query different backend or frontend data sources.

Sources | Tutorial/HowTo | Online Demo

Larger implementations and demos that use VIE

terkait

terkait analyses semantic objects that are either annotated directly in the content or retrieved by external services. The extracted entities are then preprocessed, filtered and finally presented to the user in a non-obtrusive user interface. The user can then choose to learn more about certain knowledge objects by browsing through the related content that is presented alongside the particular entity. The architecture is implemented with clean APIs to allow different services to be used for both, the analyzing part as well as the querying for related content.

Sources | Tutorial/HowTo

CreateJS

Create is a comprehensive web editing interface for Content Management Systems. It is designed to provide a modern, fully browser-based HTML5 environment for managing content. Create can be adapted to work on almost any content management backend. The user interface philosophy behind Create is simple: all content that you are allowed to change becomes editable, right there on the page you're reading. Any modifications you make are retained in your browser and can be sent back to the CMS with a push of a button. With Create, it is time to stop filling forms and to start communicating with your web audience.

Sources | Tutorial/HowTo | Online Demo

blogsiple

blogsiple is a testbed for JugglingDB, express-resource and CreateJS interplay.

Sources | Tutorial/HowTo | Online Demo

Proggis

Proggis - a project reporting system for IKS - aims to bring clarity into collaborative projects between many companies. It imports project information from multiple sources, merges it, and then provides clear interfaces for analysing the state of the project.

Sources | Tutorial/HowTo

Annotate.js Bookmarklet

VIE-based, stanbol-connected enhancer bookmarklet based on annotate.js.

Sources | Tutorial/HowTo | Online Demo

Links:

• IKS Semantic Interaction Framework Workshop
• Henri Bergius' Blog
  • CreateJS is moving forward
  • Business Analytics With CouchDB And NoFlo
  • VIE 2.0 Is Starting To Emerge
  • Decoupling Content Management
• IKS Blog
  • VIE towards v2.0 (update)
  • Semantic UI Development with VIE
  • Google Web Toolkit VIE Wrapper
  • VIE/GWT-Hackathon at Alkacon
  • What Liip did after winning the IKS semantics UX contest
  • Palsu – Interactive Meeting Tool using VIE and Apache Stanbol
  • Create Rich User Experiences with VIE widgets
• Alkacon VIE GWT Wrapper
• Alkacon VIE Acasia Editor
• Alkacon TinyMCE Editor using VIE
• VIE Palsu
• Liip - Integration of CreateJS