=Paper= {{Paper |id=Vol-443/paper-4 |storemode=property |title=Configuring Semantic Web Interfaces by Data Mapping |pdfUrl=https://ceur-ws.org/Vol-443/paper4.pdf |volume=Vol-443 }} ==Configuring Semantic Web Interfaces by Data Mapping== https://ceur-ws.org/Vol-443/paper4.pdf

Configuring Semantic Web Interfaces
by Data Mapping
Michiel Hildebrand Jacco van Ossenbruggen
CWI Amsterdam CWI/VU University Amsterdam
Michiel.Hildebrand@cwi.nl Jacco.van.Ossenbruggen@cwi.nl

ABSTRACT RDFS or OWL. By building standard interface components
We demonstrate how to develop Web-based user interfaces on top of this model, building an initial interface can be as
for Semantic Web applications using commonly available, easy as mapping the application’s data model to this inter-
off-the-shelf Web widget libraries. By formally defining the face model.
underlying data model that is assumed by these widgets, Se-
mantic Web application developers can use familiar RDF This approach has the advantage that it leverages the sig-
constructs to map their own data to the model implemented nificant amount of design, implementation and testing effort
by the Widgets. As an example, we briefly describe the in- already invested in today’s Web UI toolkits, and we believe
terface model underlying our own framework, and provide that reuse of these commonly available toolkits will, in gen-
concrete examples showing how it has been used to create eral, lead to better interfaces than interfaces that are designed
Semantic Web applications in two different domains. We and implemented from scratch by a (small) Semantic Web
conclude by discussing the advantages and limitations of our research team.
approach.
In addition, it replaces the traditional configuration and tai-
Author Keywords loring that is needed to adapt a generic interface to a lo-
Interface design, heterogeneous data, ClioPatria, YUI cal dataset by a straight forward RDF data mapping task,
a skill most Semantic Web developers will have. By pro-
viding default mappings, it is even possible to provide a no-
ACM Classification Keywords
configuration, first crude version of a user interface, very
H.5.2 Information Interfaces and Presentation: Miscellaneous
early in the application development life cycle. This will
give RDF data developers the “instant gratification” that has
INTRODUCTION made many Web 1.0 and 2.0 applications so popular. It also
Semantic Web data is typically rich in interconnections and encourages them to, during their data modeling and data de-
highly heterogeneous. Designing user interfaces for applica- velopment tasks, think about how their data will be used in
tions that use this type of data is intrinsically hard. Design- the end-user applications, and how their modeling decisions
ing interfaces for highly diverse data tends to lead to overly may impact the interface.
generic interfaces that do not communicate the richness of
the data to the end user. On the other hand, interfaces that Finally, while our approach provides pre-packaged solutions
communicate this richness effectively tend to work well for for common tasks, it does not prohibit application develop-
only a set of fixed schemas and not for the entire dataset. ers to go beyond those solutions in order to add more ad-
Finding a sweet spot that balances these two forces is not vanced or more application specific interface components. It
trivial, especially if one takes into account that most Seman- is built to be extended or to build other layers on top of it.
tic Web developers are not UI specialists, and often have
even little affinity with UI design. The problem is even deep- This paper is structured as follows. In the next section, we
ened because many Semantic Web developers tend to build discuss related work and compare it to the approach pro-
UIs from scratch, as the fixed data model that is assumed posed in this paper. As an example user interface model
by many off-the-shelf UI toolkits seems to conflict with the and its binding to a Web UI toolkit, we discuss the interface
heterogeneity of their data. model upon which the ClioPatria [12] interface components
are built, and how these components are implemented on top
In this paper, we argue that for a wide range of applications, of the Yahoo! User Interface (YUI) library. We show how
such a sweetspot can be identified and formally modeled in this model can be used to easily create two interfaces, one
in the cultural heritage domain and one in the news domain.
We provide some details of the current implementation and
in the last section, we discuss the pros and cons of our ap-
proach.

RELATED WORK
Workshop on Visual Interfaces to the Social and the Semantic Web
Modeling part of the user interface in RDF is in itself not
(VISSW2009), IUI2009, Feb 8 2009, Sanibel Island, Florida, USA. Copy- new. Fresnel [7] is a good example of an RDF vocabulary
right is held by the author/owner(s)

1
that can be used to specify the presentation details of RDF
data. Fresnel provides vocabularies for the selection and for-
matting of the data. A Fresnel engine generates a tree struc-
ture with selected resources and formatting information. The
actual visualization of this tree is left to the application or
widget. Our interface widgets depend on configurable search
functionality on the server, for example, vocabulary-based
prefix search for autocompletion, faceted queries and graph
search. This functionality goes beyond Fresnel’s selection Figure 1. Autocompletion suggestions of historical persons. Under-
vocabulary. Our approach targets the configuration of the neath the name a short biography is displayed. This contains the na-
server-side search algorithms instead of providing a vocabu- tionality, role/profession and birth/death date. Note that for the first
lary for selection. Furthermore, the visualized data often be- person listed, only the profession is available in the data. The abbrevi-
ation RMA, shown to the right, indicates the thesaurus source.
comes part of the widget’s interactive behavior, for example,
extra information for a result needs to be shown in a popup,
trees need to be dynamically extended and facets may be and location. In a figurative art it may also be important
interactively removed or added. Fresnel’s formatting vocab- to know which persons, times and locations are depicted.
ulary is not suited for describing this type of interaction. We News images are also made on a specific time and place by
propose a method that takes the widget’s functionality as the a specific photographer and depict an event often involving
starting point and provides a means to configure the widget’s persons, times and locations. Persons, locations and times
selection, organization and visualization methods. An inter- are thus good candidates for a central model which is suffi-
face model captures these configuration dimensions and by ciently generic, while sufficiently specific to answer the clas-
providing mappings to domain specific data a developer can sic who, where and when questions to the end user. Man-
fully exploit the widget’s behavior for a specific task. made artifacts also play a central role in many domains and
their specific properties can often be abstracted from by us-
Simile’s faceted browser Longwell supports Fresnel for the ing, for example, a general vocabulary such as Dublin Core.
visualization of the results [9]. In addition, the set of facets In addition, different domains often deploy their own set of
displayed in the interface can be defined in a configuration specific thesaurus concepts that describe the properties of
file in RDF. The individual facets are, however, not config- events. We found that SKOS provides a sufficiently rich and
urable. Simile’s Exhibit [3] provides a more extended vo- abstract model to describe these concepts and their relations.
cabulary to define the visualization and organization of the
facet values. The content of a facet in Exhibit is defined Within the semantic search and annotation framework ClioPa-
by a property that refers to a key in the native JSON for- tria [12] we have developed several interface widgets. When
mat. This prevents the use of RDFS reasoning facilities, such deploying ClioPatria in a specific application domain we use
as rdfs:subPropertyOf. Our approach combines the reason- persons, locations, times, artifacts and thesaurus concepts as
ing facilities of a server-side triple store with a lightweight an intermediate model between the interface model and the
client-side widget. domain specific details of the underlaying RDF data. In the
following paragraphs we explain the configuration dimen-
Web interface widgets have become a standard in web devel- sions of two interface widgets, autocompletion and faceted
opment. The choice among JavaScript libraries is numerous navigation, and show how this can be captured in an RDF
and all provide a convenient abstraction of low-level issues, interface model. In the next section we show how the in-
such as cross-browser support. Interface widgets for seman- termediate model sketched above can be mapped to these
tic content are also available. Eetu Mäkelä et. al. provide widget’s interface models.
several interface widgets that work on top of their ontology
service infrastructure ONKI [5]. Example widgets are au-
Example 1: Autocompletion
tocompletion and faceted navigation. They also so seem to
Autocompletion is an interface feature that allows users to
strive for easy configuration of the widgets, but have not pre-
type only a few characters instead of a full word or phrase.
sented a clear model for this.
After the user has entered the first characters, the system re-
The approach of semantic widgets is also used by the Se- sponds by completing the word or phrase. If the characters
mantic Web company Mondeca 1 . typed in so far can be completed in more than one way, most
interfaces present a list of multiple options. The user can
than either select one of the options from the list, or con-
COMBINING THE YAHOO! USER INTERFACE LIBRARY tinue typing to narrow down the number of options.
WITH THE CLIOPATRIA INTERFACE MODEL
In many domains there is a central role for persons, loca- In context of the Semantic Web autocompletion is useful to
tions, times and artifacts. Sometimes these are modeled to- quickly find a resource by one of its labels2 . In previous
gether as an event. For example, in the cultural heritage do- work we argued that for different tasks and data sets au-
main works of art are created by persons at a specific time tocompletion widgets require a different configuration [1].
1 The screenshots in Fig. 1 and Fig. 2 show autocompletion
http://www.mondeca.com/index.php/en/
2
intelligent topic manager/applications/ For sake of simplicity we do not consider finding resources by a
semantic portal semantic widgets label of a related resource.

2
:AutocompletionWidget

:selection :organization :visualization

:target rdfs:Class :sort (exact || inlink :primaryDisplay
:match (rdf:Property) || rdf:Property)
:group (rdf:Property) :preLabel (rdf:Property)
:smush true || false :altLabel (rdf:Property)
:max integer :subLabel (rdf:Property)
:postLabel (rdf:Property)

:secondaryDisplay

:image rdf:Property
:description rdf:Property
:tree rdf:Property

Figure 3. Interface model for ClioPatria’s thesaurus concept autocom-
pletion widget. All organization and visualization properties are op-
Figure 2. Autocompletion suggestions of thesauri concepts. Results tional.
from both IconClass and WordNet are shown, each presented in
a separate group. A secondary panel shows more information for the
highlighted term (“[45K] siege, position war”), including the hierarchi-
cal structure the term is part of. The hierarchy contains the term itself of the server side search algorithm.
in bold, its ancestors and the direct children.
An interface model for the RDF concept autocompletion wid-
get is shown in Fig. 3. The widget contains three main con-
suggestions of historical persons and thesauri concepts. In figuration properties that correspond with the three phases of
the next section we discuss the configurations of these two the search process: selection, organization and visualization.
widgets, here, we focus on the main differences between For the selection of the appropriate resource it should be
these two widgets. First, the widgets suggest a different type known what type of resources should be selected and which
of resource (e.g. persons and concepts), thus, requiring a literals should be used to find these resource? The first is
different selection of the right RDF resources. Second, the configured by providing an rdfs:Class for :target3 . The
persons are organized in an alphabetically ordered list, while second requires the definition of a collection of RDF label
the concepts are grouped by different thesauri and ranked ac- properties for :match. The order of the properties indi-
cording to popularity. Finally, the individual suggestions are cates which property has preferences in case the same re-
visualized differently in each widget. The suggested persons source is found by multiple labels. The selected resources
are shown with extra biographical information, whereas, the can then be organized in a list or in groups of different lists.
concepts are shown within their hierarchy. The grouping is performed on the values of the RDF prop-
erties provided for :group. The resources in the list can
The two examples are built on top of the YUI autocomple- be ordered according to several criteria and are defined in a
tion widget. The YUI widget contains several client side collection as a value of :sort. The built in constant, ex-
configuration parameters, it supports custom functions for act puts all resources with an exact matching label before
result formatting, construction of remote data requests and resources with partial matching labels. Another built in con-
it provides many event handlers. Although this is sufficient stant is inlink that sorts the resources by the number of in-
to configure the widget for an RDF data source, we experi- coming links they have in the graph. Further sorting criteria
enced that it required extensive JavaScript programming to are the display labels (explained in the next paragraph) or
obtain the appropriate configurations. For example, visualiz- any rdf:Property. The number of results that are returned can
ing different types of information requires the configuration be limited by defining :max. In a grouped organization the
of the server request as well as the client side JavaScript for- maximum applies to the number of items within a group. Fi-
matting functions. nally, resources that are defined as equivalent (owl:sameAs
or skos:exactMatch) are shown as a single suggestion when
An interface model for an autocompletion widget provides a :smush is set to true.
single focal point for the configuration of a widget and only
requires Semantic Web modeling skills. Note, we do not The results are visualized in a primary and secondary display
claim that this is a complete model for autocompletion, we panel. The primary display contains all suggestions, while
merely want to illustrate that it is possible to define an inter- the secondary display is shown when the user hovers over
face model for an autocompletion widget in RDF. The model one of these. The default display format of these panels,
we present is for an extended version of the YUI autocom- as shown in Fig. 4, is fixed. The primary display contains
pletion widget. We added support for clustered presentation 3
The properties and classes used in the interface models
of search results, a secondary display that is shown when are contained in our own namespace http://e-culture.
the user hovers over a suggestion, a single configurable re- multimedian.nl/ns/interface/. In this paper we omit
sult formatting function and support for easy configuration this namespace and simply write a colon.

3
:FacetNavigation
preLabel Label (altLabel) postLabel
subLabel
description
image :FacetView :FacetView

tree :target :facets

node
node rdfs:Class
:Facet :Facet :Facet

:selection :organization :visualization
Figure 4. Layout of an autocompletion result. Primary display with
a preLabel, the label itself, an alternative label between brackets, a
postLabel aligned on the right side and a subLabel on a second line. :target (rdfs:Class) :sort (exact || rdf:Property) :preLabel (rdf:Property)
:property rdf:Property :group (rdf:Property) :altLabel (rdf:Property)
The secondary panel provides additional space for larger content, such :smush true || false :subLabel (rdf:Property)
as images, descriptions and trees. :max integer :postLabel (rdf:Property)
:hierarchy
:relation rdf:Property
place markers for four labels besides the matching label it- :root (rdfs:Resource)

self. The developer defines which labels are shown by map-
ping domain specific properties to the properties of the in-
terface model (e.g. mapping skos:broader to :subLabel). Figure 5. Interface model for ClioPatria’s faceted navigation widget.
If the default display format is not sufficient a new format-
ting function can be created in the JavaScript widget, which
might also require updates to the interface model. as the autocompletion suggestions, different types of facet
values require different methods of organization. The cre-
ators might be best organized in an alphabetically ordered
Example 2: Faceted browsing list, while the hierarchical structure is important for the sub-
Facet browser interfaces provide a convenient way to nav- ject categories. Also the visualization of facet values shows
igate through a wide range of data collections. Originally similarities with the autocompletion widget. Adding extra
demonstrated in the Flamenco system [13], facet browsing information in the display may help to disambiguate similar
has also become popular in the Semantic Web community values. In addition, specific types of values (e.g. geograph-
thanks to M USEUM F INLAND [4] and other systems [3, 6, ical locations and dates) are suited for alternative visualiza-
9]. An individual facet highlights one dimension of the un- tion (geographical map and timeline).
derlying data. Often, the values of this dimension are hi-
erarchically structured. By visualizing and navigating this When the number of defined facets is too large to be shown
hierarchy in the user interface, the user is able to specify in the interface, it has to be defined which facets are shown.
constraints on the items selected from the repository. In Longwell a facet view can be defined as a collection of
facets for a particular target. The facets defined in this view
The facet browser we developed within ClioPatria, /facet, are shown, while all other facets are collapsed and available
could be applied to any RDF dataset [2]. By considering the on requested. An alternative method is to allow multiple
Class and Property hierarchy as special facets the user could views and allow the user to select the most appropriate view.
configure the interface to her needs. In the Class facet the For example, the creation view contains all facets that cover
user selects the target resources (e.g. documents or persons) the creation of a document, whereas, the content view con-
and from the Property facet she selects the facets she wants tains the facets about the topic. In either solution, a view
to navigate (e.g. creator and subject for documents or birth- defines which facets are selected for display.
place and birthdate for persons). This approach provides an
instant interface for Semantic Web engineers. Presenting the As an example we describe a possible model for a faceted
raw data is, however, not suited for end user applications. In navigation widget. A screenshot of this widget, used for a
the project HealthFinland it was demonstrated that through collection of news items, is shown in Fig. 6. The widget dis-
careful user studies a more user-friendly configuration of the plays multiple facets that are defined in a facet view and al-
facets can be achieved [10]. lows the selection of alternative views. The individual facets
are built on top of the autocompletion widget, which allows
Consider a faceted interface on a collection of documents. re-use of its organization and visualization methods. In ad-
Each individual facet contains the values within one dimen- dition, it allows autocompletion within each facet. Again,
sion. For example, one facet might display all the creators, we make the disclaimer that our purpose is not to provide
whereas, another might display the subject categories. On an a complete model for faceted navigation, but merely to il-
RDF data source this type of value selection corresponds to lustrate that it is possible to define an interface model for a
the values of a particular RDF property (e.g. dc:creator and faceted navigation widget in RDF.
dc:subject). Other selection criteria are also possible, such
as all instances of a particular Class. In a similar fashion An interface model for a faceted navigation widget is shown

4
Figure 6. Faceted interface of the NewsML demonstrator. Four facets are active: document type, creation site, event and person. The
value “photo” is selected from the document type facet. The full query also contains the keyword “Zidane”, as is visible in the header above the
results.

in Fig. 5. The widget can contain multiple facet views, that ularies. Finding the right term is complicated because the
each apply to the resources of a particular Class. Each facet vocabularies used are large, very detailed, contain similar
view contains an RDF list of facets. A facet is configurable terms (or even duplicates) and often the annotator does not
in the selection of facet values, the organization and visual- know exactly how to spell a term. We experienced that au-
ization of these values. At the moment our widget only sup- tocompletion helps professional annotators to find the right
ports the selection of facet values from an rdf:Property. The terms, but only when the widget is properly configured.
configuration of the organization and visualization is similar
to that of the autocompletion widget. In addition, the facet In an extensive study with these professionals we gathered
values can be organized hierarchically, meaning that initially the requirements for term search from multiple thesauri. Dur-
only the root values of the hierarchy are shown and after se- ing an iterative process of prototyping and discussion we
lection of one of these its children become available. tested several configurations of autocompletion widgets. A
screenshot of the interface of the final prototype is shown in
CONFIGURING INTERFACE WIDGETS: A MAPPING TASK Fig. 7. On the right side the interface contains three auto-
Given an interface model the configuration of a Semantic completion fields to lookup terms from thesauri and a free
Web application becomes a task of mapping the right prop- text field to input dates. One of the results of the study is
erties and classes to this model. In practice, this often means that the three autocompletion fields all required a different
first finding a suited intermediate model for the domain. For configuration.
example, in terms of persons, locations and times. Second
mapping this intermediate model to the widget’s interface The interface model for the autocompletion widget, as de-
model. We illustrate the mapping task with two use cases: scribed in the previous section, is based on our findings at the
configuring autocompletion components for a cultural her- Rijksmuseum. We acknowledge that a single study might
itage annotation application and configuring faceted naviga- not be sufficient to determine a complete interface model
tion for a news application. that applies to other domains. On the other hand, all three
autocompletion fields required different features and config-
urations. Furthermore, the three fields cover generic types
Use case 1: Rijksmuseum annotation user experiment of resources (persons, thesaurus concepts and locations) that
Within the MultimediaN E-Culture project [8] we developed are very likely to be used in other domains as well.
a prototype interface for the subject annotation performed at
the Rijksmuseum in Amsterdam, the Netherlands. The pro- We first introduce the vocabularies used in the annotation in-
fessional annotators of the Rijksmuseum describe thousands terface, before describing the configuration of the person and
of artworks a year by assigning terms from controlled vocab-

5
Figure 7. Interface of the Rijksmuseum subject annotation interface. The four annotation fields in the right column are configured to support effective
search in different thesauri.

concept autocompletion fields. We used three thesauri with as this is first in the list. The results are organized alphabeti-
persons: Getty’s United List of Artist Names4 (ULAN), DB- cally on the label and first showing all resources with an ex-
Pedia’s RDF version of person data5 from Wikipedia (WP) actly matching label. The professionals at the Rijksmuseum
and the Rijkmuseum’s own people thesaurus. All three the- explicitly indicated that they expect alphabetical ordering for
sauri were mapped to the generic “Person” scheme of ULAN. a list of person names. As the autocompletion field gives ac-
For places we also used, Getty’s Thesaurus of Geographic cess to the resources from different overlapping vocabularies
Names6 (TGN) and aligned it with the Rijksmuseum’s place it turned out essential to smush equivalent results to a single
thesaurus. We used SKOS for the geographical contain- suggestion.
ment relations in combination with location-specific proper-
ties from TGN. The concepts used in this domain were also The primary display contains three labels in addition to the
modeled or mapped to SKOS. In addition to the Rijksmu- matching label. The :altLabel is only shown in case the
seum’s events thesaurus we added the RKD IconClass7 match was not found an a skos:prefLabel. Thus, when a hit
thesaurus and, as a source for more general terms, W3C’s is found by a skos:altLabel it’s skos:prefLabel is also shown.
RDF version of Princeton’s WordNet8 . The :endLabel contains the value of the skos:inScheme
property. Thus indicating the thesaurus the term comes from.
The professional annotators requested this information as
Autocompletion on persons terms are suggested from their own as well as other the-
Listing 1 shows the configuration of the autocompletion wid- sauri. The :subLabel shown beneath the main label is
get in the Who field. The selection is restricted to resources composed out of the values of four properties. Together
of type ulan:Person. Note, the class of persons in the Ri- these compose a short biography of the person. The anno-
jkmuseum thesaurus and DBPedia people are subclasses of tators use this information to disambiguate similar persons
ulan:Person. We only consider literal values of skos:prefLabel from one another. The secondary display contains an image
and rdfs:label, where preference is given to the skos:prefLabel depicting the person and a longer biography.
4
http://www.getty.edu/research/conducting
research/thesauri/ulan/
5
http://dbpedia.org/
6
http://www.getty.edu/research/conducting
research/thesauri/tgn/
7
http://www.iconclass.nl/
8
http://www.w3.org/2006/03/wn/wn20/

6
: PersonAutocomplete that are different from the Who field. The target is defined as
a : Autocomplete ; an owl:union of three classes, iconclass and wordnet terms
: l a b e l ” s e a r c h p e r s o n ”@en ; and the events from the Rijksmuseum thesaurus. The re-
: l a b e l ” z o e k p e r s o o n ” @nl ;
: selection [ sources from the three thesauri are each shown in a separate
: t a r g e t ulan : Person ; group. The Rijksmuseum wanted to give preference to terms
: match ( s k o s : p r e f L a b e l r d f s : l a b e l ) from IconClass and only use WordNet as a backup. Organiz-
] ; ing the results in different groups allowed the annotators to
: organization [
: sort ( ” exact ” ” label ” ) ;
easily compare terms from the different thesauri to one and
: smushing ” t r u e ” other. Within each group the results are ordered by the num-
] ; ber of links that are pointing to the resource. Intuitively, this
: primaryDisplay [ means that the popular resources are shown first.
: subLabel (
ulan : role
ulan : n a t i o n a l i t y Use case 2: K-Space Semantic News Browser
ulan : birthDate ClioPatria is used to support search and browsing of news
ulan : deathDate items [11]. These news items are described with multime-
) ;
: a l t L a b e l skos : prefLabel ; dia standards, news codes from the IPTC standard and ad-
: p o s t L a b e l s k o s : inScheme ditional metadata from various thesauri modeled (mapped)
] ; to SKOS. The additional metadata is acquired through ex-
: secondaryDisplay [ traction of named entities such as persons, organizations and
: d e s c r i p t i o n ulan : biography ;
: image v r a : s u b j e c t
locations, from the textual stories. The extracted named en-
] . tities are mapped to existing resources available on the Web,
such as locations from Geonames, and persons from DBPe-
Listing 1. Person autocompletion allows autocompletion on instances dia. The data set in this use case consists of news items from
of ulan:Person. The results are sorted first on exact matches and then 2006, including the World Cup football.
alphabetically on the matching label. Results that are defined as equiv-
alent (skos:exactMatch or owl:sameAs) are smushed. Each result is
displayed with extra information. The primary display contains a short
A screenshot of the faceted interface from ClioPatria is shown
biography composed out of the values different properties and it con- in Fig. 6. The top part contains four facets: document
tains the thesaurus source. The secondary display contains a full de- type, creation site, event and person. The re-
scription and an artwork that depicts the person. sult viewer, visible below the facets, contains news items
related to the keyword “zidane”. The current query is shown
: ConceptAutocomplete in the header of the result viewer. The user can extend the
a : Autocomplete ;
query by selecting values from the facets. In this case the
: l a b e l ” s e a r c h c o n c e p t ”@en ;
: l a b e l ” z o e k c o n c e p t ” @nl ; value “photo” is selected from the document type facet.
: selection [ The other facets only contain values that correspond with
: target [ the current result set. Note, this prevents the user from con-
owl : u n i o n O f ( structing queries that lead to an empty result set.
i c : Concept ;
wn : S y n s e t ; : CreationSite
rma : E v e n t a : Facet ;
) : l a b e l ” c r e a t i o n s i t e ”@en ;
] ; : t a r g e t ( newsml : n e w s I t e m ) ;
: matchLabel ( skos : p r e f L a b e l r d f s : l a b e l ) ; : p r o p e r t y newsml : l o c C r e a t e d ;
] ; : hierarchy [
: organization [ a : Hierarchy ;
: sort ( ” exact ” ” inlink ” ) ; : l a b e l ” Geonames l o c a t i o n h i e r a r c h y ”@en ;
: g r o u p s k o s : inScheme : r e l a t i o n geo : p a r e n t F e a t u r e ;
] ; : r o o t geo : World
: primaryDisplay [ ].
: subLabel skos : broader : DepictedPerson
] ; a : Facet ;
: secondaryDisplay [ ...
: d e s c r i p t i o n skos : note ;
: image v r a : s u b j e c t : ContentView
] . a : FacetView ;
: l a b e l ” c o n t e n t ”@en ;
Listing 2. Concept autocompletion allows autocompletion on instances : l a b e l ” c o n t e n t ” @nl ;
of skos:Concept. The results are sorted first on exact matches and then : t a r g e t ( newsml : n e w s I t e m ;
on the number of inlinks. The suggestions from the same thesaurus are : facets
grouped together. In the secondary display a tree is shown with the all ( : DocumentType
ancestors and direct children of the result. : DepictedEvent
: DepictedPerson
: CreationSite
) .
Autocompletion on thesaurus concepts
Listing 2 shows the configuration of the autocompletion wid- Listing 3. Excerpt of the facet and facet view configuration for a news
get in the What field. We only describe the configurations demonstrator

7
Server Client

The widgets populate themselves by requesting JSON data
from the server through one of the HTTP APIs. The con-
Listing 3 shows an excerpt of the facet and facet view con- figuration of the widget determines what information is re-
figuration for a news demonstrator. The creationSite facet quested. Widgets within a single web application commu-
applies to instances of the class NewsItem, as indicated by nicate with each other through a controller, which is itself
the value of the :facetTarget property. This facet will a JavaScript component. For example, selecting a value in
display values from the property newsml property locCre- one facet sends an update message to the controller that up-
ated. As the values are part of a geographical containment dates the internal state and tells the registered components to
hierarchy, this is used for the organization. In the screenshot update themselves. A client-side widget can also be used in-
of Fig. 6 the creationSite facet it is visible that initially only dependent of ClioPatria’s web application generator and the
the children of the hierarchy root (e.g. World) are shown RDF interface model by manually defining the JavaScript
(e.g. Europe, Africa and Asia). When one of these values function in a static HTML page.
is selected, the children available through the hierarchyRe-
lation, geo:parentFeature, become available. Four facets are
grouped into a facet view that covers the content of news CONCLUSION AND FUTURE WORK
items. In a similar fashion other facets can be grouped into We have shown how we can use RDF to model the interface
views on the production and document characteristics. The widgets of a specific Web application, an abstract intermedi-
facet view menu shown in the screenshot on the top left al- ate data model, and the mapping between these two models.
lows the user to select one of these facet views. We argue that this approach can provide developers with an
interface early in the development cycle of a Semantic Web
application. As long as the chosen widgets, associated inter-
face model and intermediate model prove to be sufficiently
IMPLEMENTATION rich, all the developer needs to do is to provide the mappings
The interface models have been implemented within the open (in RDF) between his own data model and the intermedi-
source semantic search and annotation ClioPatria framework 9 . ate model, using skills that Semantic Web developers can be
The overall architecture of ClioPatria is described in [12], safely assumed to possess. This approach also allows Se-
here we focus on the parts that are relevant for the inter- mantic Web UIs to be built on top of existing Web tool kits,
face model. Figure 8 shows a simplified overview of the without sacrificing the heterogeneity and semantic richness
ClioPatria architecture. Server-side the system has a single of the underlying data.
triple store that contains all RDF data including the interface
models and the mappings between the domain specific data A first drawback of our approach is that our interface models
and these models. In response to a request from the user the are typically specific for a given interface widget or toolkit.
server generates an HTML page with static HTML and pa- If the same RDF data needs to be displayed the same way
rameterized JavaScript widgets. ClioPatria uses the interface in multiple interfaces, a vocabulary such as Fresnel, that ab-
mappings to generate the appropriate parameter settings for stracts from the interface technology used, might be a bet-
the widgets. For example, the JavaScript initialization func- ter alternative. In our applications, we have aimed to fully
tion of the Who field in the annotation application would be exploit the functionality of the interface widgets, and have
generated as: traded the advantages of extra functionality against general-
ity. Other developers might make a different trade off.
9
http://e-culture.multimedian.nl/software/ A second drawback surfaces when a given set of widgets and
ClioPatria the associated interface model provides insufficient function-

8
ality. Then, extensions will require traditional Web scripting 6. m.c. schraefel, D. A. Smith, A. Owens, A. Russell,
skills to develop extensions to widget set, typically involv- C. Harris, and M. L. Wilson. The evolving mSpace
ing a mix of HTML, CSS and JavaScript. But it also requires platform: leveraging the Semantic Web on the Trail of
skills to be able to model these extensions in RDF or OWL, the Memex. In Proceedings of Hypertext 2005, pages
and this combination of skills might be hard to find. 174–183, Salzburg, 2005.

For future work, we would improve upon our current inter- 7. E. Pietriga, C. Bizer, D. R. Karger, and R. Lee. Fresnel:
face model and its implementation. The current implemen- A browser-independent presentation vocabulary for rdf.
tation is realized as an integral part of the ClioPatria server In I. F. Cruz, S. Decker, D. Allemang, C. Preist,
framework, and we are investing ways to be able to apply D. Schwabe, P. Mika, M. Uschold, and L. Aroyo,
the same approach to create interfaces on top of arbitrary editors, International Semantic Web Conference,
SPARQL endpoints. volume 4273 of Lecture Notes in Computer Science,
pages 158–171. Springer, 2006.
ACKNOWLEDGEMENTS 8. G. Schreiber, A. Amin, L. Aroyo, M. van Assem,
The dataset used in the NewsML demonstrator has been kindly V. de Boer, L. Hardman, M. Hildebrand,
provided by AFP. We like to thank all members of the Mul- B. Omelayenko, J. van Ossenbruggen, A. Tordai,
timediaN E-Culture Project for creating an environment that J. Wielemaker, and B. J. Wielinga. Semantic annotation
allows experimenting with Semantic Web technologies in a and search of cultural-heritage collections: The
real life setting. In particular, we like to thank Jan Wiele- multimedian e-culture demonstrator. J. Web Sem.,
maker for the cooperative development on ClioPatria and 6(4):243–249, 2008.
the inspiring feedback. We also like to thank our colleagues
9. SIMILE. Longwell RDF Browser.
Raphaël Troncy and Michiel Kauw-A-Tjoe for the contribu-
http://simile.mit.edu/longwell/, 2003-2005.
tions to ClioPatria and setting up the news demonstrator.
10. O. Suominen, K. Viljanen, and E. Hyvönen.
This research was supported by the MultimediaN project User-centric faceted search for semantic portals. In
funded through the BSIK programme of the Dutch Govern- Proceedings of the European Semantic Web Conference
ment and by the European Commission under contract FP6- ESWC 2007, Innsbruck, Austria. Springer, June 4-5
027026, Knowledge Space of semantic inference for auto- 2007.
matic annotation and retrieval of multimedia content — K-
Space. 11. R. Troncy. Bringing the iptc news architecture into the
semantic web. In A. P. Sheth, S. Staab, M. Dean,
M. Paolucci, D. Maynard, T. W. Finin, and
REFERENCES K. Thirunarayan, editors, International Semantic Web
1. M. Hildebrand, J. van Ossenbruggen, A. Amin, Conference, volume 5318 of Lecture Notes in
L. Aroyo, J. Wielemaker, and L. Hardman. The design Computer Science, pages 483–498, Berlin Heidelberg,
space of a configurable autocompletion component. November 2008. Springer.
Technical Report INS-E0708, CWI, November 2007.
12. J. Wielemaker, M. Hildebrand, J. van Ossenbruggen,
2. M. Hildebrand, J. van Ossenbruggen, and L. Hardman. and G. Schreiber. Thesaurus-based search in large
/facet: A Browser for Heterogeneous Semantic Web heterogeneous collections. In A. P. Sheth, S. Staab,
Repositories. In The Semantic Web - ISWC 2006, pages M. Dean, M. Paolucci, D. Maynard, T. W. Finin, and
272–285, November 2006. K. Thirunarayan, editors, International Semantic Web
Conference, volume 5318 of Lecture Notes in
3. D. Huynh, D. Karger, and R. Miller. Exhibit: Computer Science, pages 695–708, Berlin Heidelberg,
Lightweight structured data publishing. In 16th November 2008. Springer.
International World Wide Web Conference, Banff,
Alberta, Canada, 2007. ACM. 13. K.-P. Yee, K. Swearingen, K. Li, and M. Hearst.
Faceted Metadata for Image Search and Browsing. In
4. E. Hyvönen, M. Junnila, S. Kettula, E. Mäkelä, CHI ’03: Proceedings of the SIGCHI conference on
S. Saarela, M. Salminen, A. Syreeni, A. Valo, and Human factors in computing systems, pages 401–408,
K. Viljanen. MuseumFinland — Finnish museums on Ft. Lauderdale, Florida, USA, 2003. ACM Press.
the semantic web. Journal of Web Semantics,
3(2-3):224–241, October 2005.

5. E. Mäkelä, K. Viljanen, O. Alm, J. Tuominen,
O. Valkeapää, T. Kauppinen, J. Kurki, R. Sinkkilä,
T. Känsälä, R. Lindroos, O. Suominen, T. Ruotsalo, and
E. Hyvönen. Enabling the semantic web with
ready-to-use web widgets. In Proceedings of the First
Industrial Results of Semantic Technologies Workshop,
ISWC2007, November 11 2007.