Visual vocabulary suite A vocabulary editor and content tagging extension

This document provides both a general system guide and a comprehensive technical description of two software tools designed to allow the development of controlled vocabularies and their use in tagging content.

The document is aimed at several audiences. The general overview guide is suitable for management and other general staff who wish to assess the potential for creating and managing controlled vocabularies and for using vocabulary-based categorisation in content-focused websites. The more technical sections are aimed at taxonomists, information architects and developers who want to understand the implications of using the tools within their environments.

Background to the development of the suite

These tools were developed to address two needs:

  1. A general purpose, usable, web-based system allowing the development of skos-based controlled vocabularies

  2. An extension tool allowing editors of the content management system to easily tag content against a collection of vocabularies

Vocabulary editor, system description

The vocabulary editor is a web-based editor that allows the user to construct a controlled vocabulary as a visually-attractive hierarchical tree structure. It also provides a repository with sophisticated tools for management of the vocabularies, including the capability to import existing structures from Excel (.xls) or SKOS (.xml) files and to export SKOS. A quick search is also provided, allowing quick identification of concepts from vocabularies and allowing the user to locate the concepts visually within the vocabulary hierarchy.

Features in more depth

The visual editor is accessed by a suitable URL: for example
This leads to the home page for the editor (see Figure 1).

Figure 1. The visual vocabulary editor home page

This shows a list of all of the vocabularies currently loaded into the repository. It also allows the user to create or upload another vocabulary or to use the search box to search concepts.

Viewing and editing vocabularies

To view or edit a vocabulary, the user clicks on a vocabulary name. This will give a new display showing that vocabulary with a subset of its hierarchical structure. For example, here is the Educational topic vocabulary:

Figure 2. The visual vocabulary view of the Educational topic vocabulary

The Vocabulary title is at the centre of the view, with a set of branches and nodes representing the child and grand-child concepts. In the interests of clarity only a selection of descendant concepts are shown, and only the first two levels of these are labelled. Selecting a node will cause that node to move to the centre and show its child concepts:

Figure 3. Selecting a child term from the Educational topic vocabulary

In Figure 3, the user has selected Teaching and learning. This concept is now centered in the display and its child, grand-child (and so on) concepts are shown. The route back to its parent is also shown, together with the other child concepts of the parent. This overall tree structure is called a hypertree. Note also that the hierarchical structure is shown in the panel to the right. The user can choose concepts from here to focus upon as an alternative to the tree structure.

It is worth noting that each vocabulary and each node has its own permalink. So it is possible for a user to bookmark, say, Educational topic > Teaching and learning > Teaching as

The user can also log in to make changes to the vocabulary.

Figure 4. The login / register screen

Once logged in, the view changes to show additional information about the current concept. Figure 5 shows the Teaching concept (Educational topic > Teaching and learning > Teaching):

Figure 5. Concept editing display once logged in

This shows a set of additional fields allowing the authenticated user to add a description and to add relationships (e.g. RT, UF and USE relationships) with terms elsewhere in this vocabulary and in other vocabularies.

Editor also implements assistance with navigational queries for navigation specific vocabularies.

Content tagging plugin, system description

Having a repository of well-designed controlled vocabularies is important, but equally important is providing a content management system with an effective mechanism for making use of those vocabularies.

The web-based tagging editor is designed as a small efficient extension to Chrome web browser. The sequence of screenshots below outlines the process (note: this is in active development and the appearance will change substantially, but this is a reasonable guide to the way the tool will work).

Figure 10. New tagging editor interface (mock-up)

Figure 11. Finding and adding tags to content

Technical components of the visual vocabulary editor

Hosting and system requirements

Ubuntu Linux server, 256MB memory. Debian also works. All code is generally platform independent.


To instal the dependencies on a fresh Ubuntu server:

sudo apt-get install gunicorn mysql-server python-django python-mysqldb python-xlrd python-docutils postfix nginx

Server configuration files are included.

Our server runs on Linode.

Technical description

Web based SKOS editor.

List of code modules

Technical components of the content tagging plugin

Chrome extension is written in JavaScript ( plain native code, DOM localStorage ), CSS and HTML5. Tagging interfaces are loaded for each content node using AJAX. Tagging interface iteself uses jQuery. Frontend uses AJAX to talk to backend WSGI application, which communicates to underlying CMS. SRU is used to retrieve data from the CMS. SWORD is used to post amended data back.

System requirements

Chrome or Chromium web browser.

Technical description

Tagging plug-in is implemented as a browser extension for Google Chrome and Chromium browsers.

It is CMS independent interface that uses integration with the content management system to be tagged.

This can be achieved by hooking into existing APIs of the client as in the following example.

Tagging integration dependencies for Drupal CMS, legacy of The National Strategies

Modules: SRU, SWORD, CQL, W3C standard SKOS export/import for Drupal.