Anonymity Articles App

Thursday, January 29, 2009

In response to Karl Fisch's request after Dr. Wesch posted information about the little web app I put together for the Digital Ethnography reading/research assignment, this is a little insight into how I created the app (Arvind also wrote on the Zoho blog). To create this app for the Digital Ethnography assignment I just modified an existing structure I created for Kansas State University Libraries. In it, my goal was to create an ultra-usable interface that would utilize both the expertise of library organization systems and web 2.0 technology.

By putting the reference books online in this format as a virtual annotated bibliography, my hope was to evoke serendipity in the users so that they can find interesting content based on its relationship to other content. In this vein, making the presentation very visual and very interactive was of prime importance.

The Reference Books app was actually based on a New Display Books app I created for similar purposes. I spent about a year working a few hours a week to learn javascript in order to make the app do what I wanted it to. Okay, enough babble, on to the nuts and bolts.

In order to create the Anonymity Articles page I grabbed the JSON feed from the Zoho Creator form that Dr. Wesch created. For the library instances, I setup custom forms to help drive the design. To do that I just went to the form view, clicked More Actions > Export Data > JSON Feed.

The JSON Feed is a feed tailered extremely well to javascript as it sends the information in the database in a preformed object. For non-coders, it just looks like one long string of text. This is ideal for javascript because it can then be parsed out into its component elements very easily. So, after copying the feed, I paste it into a script in the html page, which when run, goes to Zoho Creator and gets the database information.

Surrounding that script, there are a number of other scripts that are pulled into the page to do other things. There is a script from Zoho to use their API to create custom form interfaces to add entries to the database in the app, there is a script from Google to enable embedded book previews, there is a script from jQuery to aid in javascript effects and ease of javascript writing, and there is a script that I wrote to take the JSON feed from Zoho, parse it out, and inject that data into the interface of the page. Here is the javascript used for the anonymity articles, reference books, and new display books (for js pros, keep in mind I'm a self-taught newby).

As the html page is loaded, it grabs the data from Zoho, and my javacript file does all the work to get it to display and function appropriately. Most of the divs in the html file are empty because they are injected with content via the DOM with javascript. In the books version of this app, the javascript would also take the ISBN numbers from the books and query Google Books, Amazon, and LibraryThing for information about the books, book cover images, and book previews. The interface loads 10 actual entries at a time, and so everytime new entries are selected, the javascript queries those services ten times. Where it cannot get anything from them, a blank book cover image appears (in the case of articles, this happens with all the entries).

When an individual entry is clicked, the javascript uses jQuery and a jQuery plugin called Facebox to pop the entries up into a light-box. In the articles version this shows the summaries/abstracts and in the books version this shows a bigger book cover image, links to more information about the book, and a book description. In the books version, there is also the option for the user to add tags to the book, allowing folksonomy to help determine the organization.

The tags are collected from the whole JSON feed and then a function lists them alphabetically and determines how big they should look. When you click on a tag, it delimits the entry results on the left to only those entries that have that tag. The tag cloud modifies itself to show only the collective tags of those delimited entries, and thus you can continue to narrow the results (this is sometimes called faceted browsing). The same concept works with the custom search, also javascript driven.

This web app fits very well into the concept of "situated applications" that Zoho Creator is suited so well for. They have an excellent post about this concept and an enlighteningly simple graph to illustrate what situated apps are. Emerging web services enable us to create some amazingly customized web pages with relatively low cost on its creation. While this particular app took me well over a year to create, the vast majority of that time was spent learning basic coding skills.

I look forward to continuing to develop this idea. I am currently working on using hash tags to make the app interact with the browser's back/forward buttons and to give each entry listing its own url. I am also working on cleaning up the code as I learn better coding techniques, along with working on making it easier and easier for a lay-person to input their own data and get the app to work.

I hope that at least some of this is coherent and offers a little insight into how this application was created. I find it very difficult to write about given the amount of time and energy I've invested in it. Please feel free to leave comments and perhaps from them, I will create more targeted specific explanations of the components involved.

Kevin's Bookmarks