The Citation Web Service is a widget developed by Tzu-Lun (Alan) Wong and Alan Yang. The service is embedded within a web page containing
useful metadata on different resources in the background and by utilizing these metadata, the widget can present citation formats on different
resources that the user is viewing.
The widget is inserted by a simple line of javascript which will then load the necessary files when the viewer views the page. Once inserted
the widget will be displayed as a button which will create an overlay menu on the whole page once clicked.
The widget is customizable that you can write your own citation formats and add it into the widget or choose which default formats you wish to
have. Same thing applies to exporting, you can write your own and extend to the list or choose what export is shown on your widget. You can also
change the look of the widget such as colors and font style/size. The widget is fully compatible with many popular browsers such as Internet
Explorer, Firefox and Google Chrome.
<--Try It!
The following are more demo on what the widget will do on different metadata.
- Compatible on Internet Explorer 7+, Firefox 3+, Opera 10+ and Google Chrome 4+.
- Customisable, add your own formats/exports or change the look and feel of the widget button to suit your web pages.
- Simple and easy installation.
The following subsections describe how to use the Citation Web Service.
To use the widget, simply include the following JavaScript file in the position which you want it to appear in your page:
<script type="text/javascript" src="http://cite.ws/w/CWS.js"></script>
Specify Formats:
To specify formats, simply create an array variable above the widget script named customFormatArray or customExportArray depending
on which you would like to change, and populate the array with the "name" of the formats you would like to use. It is important that the two variables be
placed above the javascript import of the widget or in the <head> of the html document.
For example,
<script type="text/javascript">
var customFormatArray = new Array("MLA","myFormat");
var customExportArray = new Array("EndNote", "myExport");
</script>
<script type="text/javascript" src="http://cite.ws/w/CWS.js"></script>
The above will give you the format MLA and myFormat while the export are EndNote and myExport as shown below.
For details on creating own format, check out the "Writing Own Format" section.
For details on creating own export, check out the "Writing Own Export" section.
Changes look of widget button:
To change the look of the widget button, there are two HTML elements that you can specify your own custom CSS on. The cite_button
and cite_button_container.
For example,
<style type="text/css">
#cite_button:link {
color: green;
}
#cite_button:hover {
color:red;
}
#cite_button_container {
width: 200px;
}
</style>
will result in the button to be 200 pixel wide and shown as green and red when cursor hovers on the button.
The CSS can be placed anywhere in your file however, if using placing these in an external css, it will not work if the external css file
is imported into the HEAD section of the HTML.
To add your own format, what you need to do is create a new formatting function on your web page and put the name of the function into customFormatArray.
For example, lets make a custom format named myFormat. The function name will HAVE to be the same as the name which you put into the customFormatArray, hence myFormat().
Inside the myFormat function, you can generate the citation by calling the "accessor" methods like getAuthor(),getTitle() function as shown below.
<script type="text/javascript">
function myFormat(){
var citation;
switch(type){
case "journal article":
citation = abbreviatedName(getAuthors()) + " \'" + getTitle() + "\' " + " (" + getYear() +") "+
"<i>" + getNameOfPublication() + "</i>, " + "vol. " + getVolume() + ", no. " +
getIssue() + ", pp. " + getPages() + ". " + displayDOI(getDOI());
break;
//you may add some more types of resources here
}
}
</script>
You can place your own format script anywhere in your web pages or import it externally elsewhere.
For more information on the "accessor" methods or any other functions/variables, view the Code Documentation.
To add your own export, what you need to do is create a new exporting function on your web page and put the name of the export function into customExportArray.
In order to build your export content, you will use the addInput() function which will place fields within the dataForm form and will be sent to Export.php
to be pieced together. It is important to note that the order that you add the field is correct as the content of the export will be pieced together according to it.
Export.php essentially gets all the dataForm fields and link them together into a long string and pass it back to the user as a downloadable file.
As an example, lets make a custom export named myExport. The function name will HAVE to be the same as the name which you put into the customExportArray, hence myFormat().
A template of the function are shown below as a guidance,
<script type="text/javascript">
function myExport {
addInput("fileName", selectedExport); //fileName and fileExt are required to specify the name and extension of the file that will
addInput("fileExt", "myExportExt); //be passed backed. selectedExport stores the name of the export, in this case it will be "myExport".
//any content you will add using addInput() for each line
.
.
.
escapeAll(); //necessary to allow Export.php to remove certain unrecognisable character such as
var form = document.getElementById("dataForm"); //special apostrophes
form.submit(); //sends the form to Export.php
}
</script>
For more information on addInput, view the Code Documentation.
A list of types the service currently supports are as follows,
(Type of a resource the users are current viewing is stored in the variable type)
- technical report
- working paper
- journal article
- conference paper
- thesis
- book
- book chapter
- conference poster
- image
Here is a example that the widget is embedded on the current ResearchSpace test site in University of Auckland Library.
- Initially the widget appears as a button on the page.
- To use it,just click the button. Then the pop up menu will show in the middle of the screen.
- You can choose the preferred style of the citation by clicking one of the formats on the menu bar of the widget.
- Alternatively you can export the metadata into some reference management tools by clicking the exporting links.
- Only Compatible with Dublin Core Metadata
- The widget currently only support lookup in web pages with Dublin Core metadata in them.
- Only Digital Object Identifier Lookup
- The widget currently only does external metadata retrieval through CrossRef using DOI serials, could extend to support ISBN/ISSN in future.
- Incomplete metadata
- Metadata embedded in the web page is incomplete which makes it impossible to create a adequate reference.
- Metadata inconsistency
- Dspace is used by many universities or organisations. However metadata embedded in the web page is not
in standard format,like the value populated with DCTERMS.bibliographicCitation. This makes it
very difficult to distinguish a particular data such as name of conference,year of conference and so on.
- Minor Interface Issues
- There are a minor interface bug. When there are too many export links, the loading gif on the right would push them
towards the left and possibility down a line overlapping the disclaimer box.
- Export Character Issues
- Some special characters such as certain "apostraphe" are not recognisable by Export.php, so they are escaped first(using EscapeAll()) before they are
passed to Export.php which will pick them out and replace them with ' instead.