Create Rich User Experiences with VIE widgets

Many of today’s web applications and most content management systems mesh their UI front-end deeply with their repositories. As Henri Bergius from Nemein pointed out in a recent blog – “Just to make your website editable you need to accept the web framework imposed by the system, the templating engine used by the system, and the editing tools used by the system. Want to have a better user interface?” The first step is to decouple the front-end from the database in a way, so that the Web Editing Tools “understand” what parts of a page should be editable and what they are about.

This way, one can concentrate on content authoring, annotation and above all delivering a richer interaction experience for end users, without the need to worry about back-end and repository configurations. IKS VIE does just that and more.

Using Vienna IKS Editables (VIE)

VIE makes RDF annotated parts of your page immediately editable and lets you work with data directly in the client browser.

VIE is a Javascript library which can be easily integrated in your system. You just need to markup your pages with RDFa (and microdata in the future) include the vie.js in the pages and implement Backbone.sync. Backbone.js helps in managing the neccessary synchronisation with your back-end system.

With additonal connectors to Apache Stanbol, you can also retrieve suggestions for annotations or create new annotations with or your own ontology. VIE also supports basic managing of ontologies such as extending them with subclasses and working with concrete entities (now mostly in VIE^2).  The main functionalities of VIE and VIE^2 are right now being merged into one library for easier use. Stay tuned for a new blog announcing the results.

An architecture for Semantic UI Widgets

The widgets follow the jQuery UI desgin to be easily integrated into existing content management systems.

Several widgets at your disposal

Hallo makes content editable with jQuery UI. It is a HTML editor, which can be easily plugged into existing content management systems.  It uses VIE to synchronize with your back-end system. Hallo will come with several widget plugins to support the seamless interaction with content and knowledge. These interactions include selection of annotation suggestions, serializing annotations into HTML with RDFa and micro-data, searching and creating new annotations based on your own schemas. Some of the widgets provide general purpose functionality e.g. advanced autocomplete with semantic support.

VIE in Action

The Midgard CMS already uses VIE to create the user interface for authoring the content. The RDFa annotation together with the Aloha Editor provides immediate editing support for end users.

ViePalsu is an online collaborative meeting tool. Instead of each participant keeping their own meeting notes, we transform the meeting into a conversation whereby everybody can share their notes in real-time. Meeting notes can be used to add tasks and mention people related to the meeting.

RDF is used here not just to annotate entities but also the content – with an RDFa Triples Lister (for Chrome browsers) you can check, which knowledge is encoded. An RDF store is then also used to feed different views e.g. tasks described during the chat meeting. See the demo with login via your twitter account, the code at github, or watch the screencasts.

Annotate.js is a web user interface for Apache Stanbol that lets you interact with suggested annotations provided by the semantic engine.

Interacting with enhancement suggestions from Apache Stanbol

Another demo shows, how we support direct interaction with entities, by creating them from scratch and manually editing properties or by dragging them into other widgets, which provide further information for these entities, e.g. search in the flickr image repository.

Demo of semantic interactions with Named Entities

Watch the according screencasts about entity-interaction and knowledge annotation!

Now, Try it yourself!

Feel free to pick an IKS user story and use our technology to create cool applications, or work on your own ideas. For European SME CMS providers or integrators we provide the opportunity to evaluate IKS technology within the IKS Early Adopters scheme, we provide a sweetener of approx. €6.000.- to ease the pain of adoption . You’ll test and integrate our technology within your system,  get insight on development, meet the developers, and raise feature issues along your way to creating compelling demos for your customers. If you are interested especially in compelling user interfaces and interaction, then participate in the IKS UI/UX contest. Deadline is October 14th, 2011.

Author: Wernher

Wernher Behrendt is senior researcher at Salzburg Research and the coordinator of the IKS project

Comments are closed.