Thursday, January 3rd, 2008

Protagonize: Choose your own Web 2.0 Adventure

Category: Showcase, Yahoo!

Nick Bouton has released Protagonize, an
online writers’ community dedicated to the (nearly) lost art of the adventure, a type of collaborative fiction. Once an author writes a story, others can post branches to that story in different directions.

We chatted with Nick about the new site:

What was your inspiration?

Early forms of this on the web date back over a decade, when Snoot.com popularized a site called “Choose Your Own Schizophrenia”, an collaborative fiction site popular in the mid-to-late ’90s. Of course, this all dates back to the old Choose Your Own Adventureâ„¢ series that started back in 1979 and ran until 1998, published by Bantam Books.

I developed Protagonize as an attempt to modernize the collaborative creative writing arena a bit and inject a little Web 2.0 love to produce a better interface. So far, so good.

How did you use Ajax?

The site uses the Yahoo! User Interface (YUI) library quite extensively.

Here’s a brief overview of the features that use AJAX calls (thus far — still adding more):

  • Commenting (add/delete)
  • Add & remove favourites & page markers (like a bookshelf)
  • Story ratings
  • Modal dialogs (login)
  • Send to a friend
  • Contact author
  • Report an item

All of the AJAX calls I’ve written return JSON objects as results, so the transactions are quite lightweight. We also use JavaScript pretty heavily throughout the rest of the site — for example, branch previewing is all JS, and the YUI TabView control is used for managing your favourites / page markers / top rated listings; the lists are each loaded once and reformatted into different sorted views via JS.

The site also uses FCKEditor for content editing, which is a pretty JS-heavy component on its own.

What features are you proud of?

The ease of use of the interface. The TabViews were a lot of work to get working nicely and I’m pretty happy with those, too. My AJAX calls are pretty snappy (particularly managing your favourites and page markers), and I really liked using the YUI Animation effects to do fade-ins and fade-outs when showing/hiding dialogs and deleting items. Makes the whole app feel nice and smooth.
The toughest parts were probably securing the AJAX/JSON calls and dealing with user input validation gracefully (I can still work on that a bit — not very happy with the built-in ASP.NET client-side validation scripts). I’ve also had some minor layout problems with smaller-market
browsers (specifically Opera) that are a pain in butt to track down.

I’d also like to make user profiles feel a bit more personal; they’re a little cold right now without any way to put in your own image, but I think the profile blurb and quote helps people customize it a bit so far.

Future plans?

Future plans – the main large feature I’m I’m going to be adding in the next month or two is user-created and controlled group functionality. Groups will be either be open or closed membership, where closed groups would require an invitation and optionally not be displayed on the front end of the site (i.e. public/private), and open groups would allow people to join in at will. That way we could cater to your usage, private & closed groups, and allow others to use the feature in a different way, maybe for close circles of friends who don’t want other people participating in their stories.

Nick has some more cool projects coming over at Taunt Media too.

Protagonize

Posted by Dion Almaer at 1:55 pm
2 Comments

+++--
3.4 rating from 25 votes

2 Comments »

Comments feed TrackBack URI

I’ve done this too, although not quite the same as nick’s implementation. My branch-able stories system is written in rails, and is used specifically for writing erotica, although obviously the code itself could be used for anything. http://www.playfulbent.com/stories

Comment by Craig — January 3, 2008

Great site! It’s almost like StoryMash but without earning money.

Comment by donpalm — February 14, 2008

Leave a comment

You must be logged in to post a comment.