Little Red Riding Hood a la AJAX
This week Juri Imamura and I worked together to on a project in which we explored ways to use web-based synchronous environments for digital storytelling. After discussing a few possible options, we decided to try and retell a popular fairy tale (Little Red Riding Hood) using a custom built Web 2.0 framework.
We started by identifying a basic outline of how we wanted things to play out. We decided that we wanted to try and incorporate the following elements into our storytelling platform:
- Allow the storyteller to “push” images and text to logged-in viewers
- Allow the viewers to control the flow of the story through a structured “voting” system
- Allow the viewers to comment on images by providing alternate captions for the characters in the story
Juri, who is an accomplished web designer, whipped up a layout that took advantage of the storybook motif, and from there we began to build the necessary functionality using JavaScript, PHP and a little bit of Perl (which was completely unnecessary, but at heart I’m a Perl guy!)
Layout for Little Red Riding Hood
We started off by building an AJAX handler that would read in the story text from a text file. We then moved on to build a driver system that would deliver a URL for an image to display on the left side of the page and hooked that up to an AJAX handler as well. From there we built a dynamic polling system that would store results and display voting patterns as a series of bar charts. We hooked this functionality up to our driver system in order to minimize the number of AJAX calls needed by the project. Finally, we built a third subsystem that would allow visitors to post comments to the chat bubble that resided under the picture on the left side of the page.
Once this was complete we figured that we needed an easy way to manage the delivery of our story, so we began work on an administration site that would allow us to drive all aspects of the experience from a single web page. A basic dataflow diagram can be seen below:
Click to activate the animated dataflow diagram
September 29th, 2009 at 12:44 am
[...] that someone else is viewing on our web site using Javascript, AJAX and PHP. Craig has posted a blog about our thought process and how we landed on the idea of creating Web 2.0 version of a famous fairy tale, “The Little [...]