We present our experience on the provision and use of macros for the management of semantic data in semantically-enabled web applications. Macros can be considered as a lightweight version of scripting languages, mostly oriented to end users instead of to developers. We have enabled the use of macros in a wiki-based application named VPOET, oriented to web designers, and have confirmed through evaluations that macros satisfy a wide audience.
1 Introduction http://ishtar.ii.uam.es/fortunata/servlet/VPoetRequestServlet? action=renderOutput& designID=FOAFOutputConditionalGraphics& provider=mra68& source=http:/www.w3.org/People/Berners-Lee/card& indvID=http://www.w3.org/People/Berners-Lee/card#i
Unlike other templates systems based on scripting languages (shown in next
section), VPOET provides web designers with simple macros to embed in the template
source code. A 20 min. tutorial 4 is enough to start creating templates. The
experimental evaluation [
Scripting Templates. A Comparative Use Case This section describes briefly some representative semantic web applications that handle templates to present semantic data, such as semantic wikis, semantic browsers, and semantic portals. We have selected one representative application or infrastructure from each group: Semantic Media Wiki, Fresnel (used by the Longwell browser), and Rhizomer (used by the Rhizomik portal) respectively.
Semantic Media Wiki allows users create templates employing an ad hoc syntax with parsing functions 5. The left part of table 2 shows the source code of a template 6, and the right part of the figure shows the renderization of semantic data by using this template. The creator of a template must know the wiki syntax, basics of programming, and basics of ontology components.
Fresnel [
Rhizomer [
Table 1 summarizes the features of these templates and the competencies required to the creators of templates for the semantic applications considered. The current state of the art is oriented to developers with competencies in both Semantic Web Technologies and Web Client technologies. Therefore, it does not provide web designers with authoring tools to create attractive an reusable templates for semantic data. There must be a balance between expressiveness, to address RDF features (e.g. multi-valued properties, or properties with no value) and complexity, in order to reduce the required level of competencies.
4See http://ishtar.ii.uam.es/fortunata/Wiki.jsp?page=VPOETTutorial 5A template source code and usage example can be found at http://en.wikipedia. org/wiki/Template:Infobox_Settlement
6Edit page http://semanticweb.org/wiki/Template:Person to see the template source code between <includeonly> and </includeonly>. Note: the code previous to this block shows an usage example.
7See http://www.w3.org/2005/04/fresnel-info/manual/ guage
No No
Low Low
quirements
No No CSS
OWL/XML Yes Yes Yes Yes
Yes Yes Low
re- Pure OWL
tion ments prone Too complex for Too complex for a web designer a web designer {| cellspacing="0" cellpadding="5" style="position:relative; margin: 0 0 0.5em 1em; border-collapse: collapse; border: 1px solid #aaa; background: #fff; float: right; clear: right; width: 20em" ! colspan="2" style="background: #86ba0c; color: white" |<span style="font-size: 80%; float: right; ">{{#ask: [[{{FULLPAGENAME}}]]
| format=vcard | ?Name | ?Affiliation=organization | ?Email | ?Foaf:phone=workphone | ?Homepage | searchlabel=vCard }}</span> [[Name::{{{Name|{{PAGENAME}}}}}]] |{{#ifeq:{{{Picture|}}}|||{{Tablelongrow|Value=[[Image:{{{Picture
}}}|150px|{{{Name|{{PAGENAME}}}}}]]|Color=white}}}} |{{#ifeq:{{{Email|}}}|||{{Tablelongrow|Value={{Mailbox|{{{Email
}}}}}|Color=#e4f8b6}}}} |{{#ifeq:{{{Affiliation|}}}|||{{Tablerow|Label=Affiliation:|
Value=[[member of::affiliation::{{{Affiliation}}}]]}}}} |{{#ifeq:{{{Homepage|}}}|||{{Tablerow|Label=Homepage:|
Value=[[homepage::http://{{{Homepage}}}|{{{Homepage label| {{{Homepage}}}}}}]]}}}} |{{#ifeq:{{{Phone|}}}|||{{Tablerow|Label=Phone:
|Value=[[foaf:phone::{{{Phone}}}]]}}}} |<!-- *** Events *** --> {{Tablelongrow|Align=Left|Font size=80%|
Value={{#ask:[[has PC member::{{PAGENAME}}]] | format=list | sort=start date | order=desc | sep=,_ | intro=PC member of:_ }}|Color=#e4f8b6}} |{{Tablelongrow|Align=Left|Font size=80%|
Value={{#ask:[[has OC member::{{PAGENAME}}]] | format=list | sort=start date | order=desc | sep=,_ | intro=OC member of:_ }}|Color=#e4f8b6}} |{{#ifeq:{{{FOAF|}}}|||{{Tablerow|Label=See also:| Value=[[see also::{{{FOAF}}}|FOAF]]}}|Color=white}} |}[[Category:Person]] dering an example. :foafGroup rdf:type fresnel:Group ; fresnel:stylesheetLink <http://www.example.org/example.css> ; fresnel:containerStyle "background-color: white;"
^^fresnel:stylingInstructions ; :foafPersonFormat rdf:type fresnel:Format ; fresnel:classFormatDomain foaf:Person ; fresnel:resourceStyle "background-color: gray;"
^^fresnel:stylingInstructions ; fresnel:group :foafGroup . :nameFormat rdf:type fresnel:Format ; fresnel:propertyFormatDomain foaf:name ; fresnel:propertyStyle "border-top: solid black;"
^^fresnel:stylingInstructions ; fresnel:labelStyle "font-weight: bold;"
^^fresnel:stylingInstructions ; fresnel:group :foafGroup . :urlFormat rdf:type fresnel:Format ; fresnel:propertyFormatDomain foaf:homepage ; fresnel:propertyFormatDomain foaf:mbox ; fresnel:value fresnel:externalLink ; fresnel:propertyStyle "border-top: solid black;"
^^fresnel:stylingInstructions ; fresnel:labelStyle "font-weight: bold;"
^^fresnel:stylingInstructions ; fresnel:group :foafGroup . :depictFormat rdf:type fresnel:Format ; fresnel:propertyFormatDomain foaf:depiction ; fresnel:label fresnel:none ; fresnel:value fresnel:image ; fresnel:propertyStyle "border-top: solid black;"
^^fresnel:stylingInstructions ; fresnel:group :foafGroup . <table border="0" cellpadding="0" cellspacing="0"> <tr> <td><img src="OmemoBaseURL/attach/Mra68Graphics/xample_body_esi.gif"></td> <td background="OmemoBaseURL/attach/Mra68Graphics/xample_body_upper_pat.gif"></td> <td><img src="OmemoBaseURL/attach/Mra68Graphics/xample_body_esd.gif"> </td> </tr> <tr> <td background="OmemoBaseURL/attach/Mra68Graphics/
xample_body_left_patt.gif"></td> <td> <table border="0" cellpadding="0" cellspacing="0"> <tr><td colspan=2>OmemoConditionalVizFor(title, mra68,
SimpleFOAFOutput.title)OmemoConditionalVizFor(name, mra68,
SimpleFOAFOutput.name)</td></tr> <tr><td colspan=2>OmemoConditionalVizFor(givenname, mra68,
SimpleFOAFOutput.givenname)</td></tr> <tr><td colspan=2>OmemoConditionalVizFor(family_name, mra68,
SimpleFOAFOutput.family_name)</td></tr> <tr><td colspan=2>OmemoConditionalVizFor(homepage, mra68,
SimpleFOAFOutput.homepage)</td></tr> <tr><td colspan=2>OmemoConditionalVizFor(depiction, mra68,
SimpleFOAFOutput.depiction)</td></tr> <tr><td colspan=2>OmemoConditionalVizFor(knows, mra68,
SimpleFOAFOutput.knows)</td></tr> </table> </td> <td background="OmemoBaseURL/attach/Mra68Graphics/
xample_body_right_patt.gif"></td> </tr> <tr> <td width="17" style="font-size: 2px"><img src="OmemoBaseURL/
attach/Mra68Graphics/xample_body_eii.gif"> </td> <td background="OmemoBaseURL/attach/Mra68Graphics/
xample_body_bottom_pat.gif"></td> <td width="17" style="font-size: 2px"><img src="OmemoBaseURL/
attach/Mra68Graphics/xample_body_eid.gif"> </td> </tr> </table> (bottom).
VPOET reduces the requirements needed to create templates, lowering the adoption barrier for web designers. VPOET “speaks”the web designers language, i.e. client side languages such as HTML, CSS and javascript, not requiring competencies in semantic web technologies or additional programming languages. Web designers use simple macros (see table 4) embedded in the source code, with the additional benefit of being capable of detecting errors in the macros in “development time”(checks in every modification of the template) and in “runtime”(checks in every template usage). The information about the structural components of a given ontology component are provided to web designers by OMEMO8, another application that generates simplified versions of a given ontology, specifically oriented to web designers. By reading the information provided by OMEMO, web designers can know the sub-components of a given ontology component, requiring only basics of semantic web technologies such as class, property, value or relation.
Table 3 (bottom) shows an example of VPOET template source code (left part), and the rendering of that code inside a Google Page by using VPOET templates in a Google Gadget named GG-VPOET 9. In this example one can see the macro OmemoConditionalVizFor, which renders a given property only if the property has a value. The rendering is transfered to a specified template, which uses the macro OmemoGetP to render the property value. As properties use to be multi-valuated, a mechanism based in PPS (pre-condition, post-condition, and sep-arator) has been added to the macro OmemoGetP. For example, let us assume a semantic data source with individuals having the property FOAF:depiction with values {url1, url2,..., urlN }. If a web designer wants to create a VPOET template, like the one shown in bottom of table 3, which renders multiple values of this property with HTMLcode like this: <img src=”url1”><BR> .... <img src=”urlN ”> she can use the conditional rendering provided by OmemoConditionalVizFor typing: OmemoConditionalVizFor(urlprop, mra68, SimpleFOAFOutput.depiction) 8See http://ishtar.ii.uam.es/fortunata/Wiki.jsp?page=OMEMO 9See http://ishtar.ii.uam.es/fortunata/Wiki.jsp?page=VPOETGoogleGadget which renders the property by means of the template SimpleFOAFOutput.depiction (created by designer mra68). The code of the template uses OmemoGetP in its 3 arguments flavor OmemoGetP(pre, post, sep) to code the template like this: OmemoGetP(<img src=”,”>,<BR>)
Another common requirement are “nested properties”, e.g. displaying only FOAF:name for FOAF:knows objects. This can be achieved by means of the macro OmemoGetP in its 5 arguments flavor OmemoGetP(relation, propPref, pre, post, sep. A simple (multivalues separated by <BR>) codification could be: OmemoGetP(knows, name„,<BR>)
But, if additionally you want to associate a link to the value, you have to use the macro OmemoGetLink. The final template code would be like this: <A href =”OmemoGetLink(knows)”>OmemoGetP(knows, name„,<BR>) </A> This macro is replaced in runtime by a link capable of displaying ontology components of the type pointed by the relation knows, i.e. a FOAF:Person. In the current implementation, clicking the link would “change to a new page”, but it can be modified to place the client code in a new DOM object in the same page by using AJAX. 3
Conclusions and further work Our experience in VPOET shows that, in the context of templates creation, macros provides web designers with a friendly environment, requiring lower competencies than other equivalent frameworks such as Semantic Media Wiki, Rhizomer, or Fresnel. An additional advantage of VPOET templates is that these templates can be used easily by other developers skilled in any programming language due to the simplicity of the
An initial small set of macros were obtained from the analysis of the semantic
templates in Semantic Media Wiki. The experiments [
Our current work is focused on providing web designers with new features such as creation of containers to handle individuals sets in a more attractive way. The current implementation lists individuals in a simple sequence. Probably, this will require new macros or modifications to the existing ones.