Firebug to the rescue

CC: Some rights reserved by Darius Baužys on Flickr

This week we bid audio in ds106 adieu. I’m sad about that because I feel like we just started to realize the awesomeness of this medium, but such is the relentless, heartless rhythm of ds106.

The good news is that next we move into the web portion of the show, or “Telling Stories in/on the Web.” I think I was the one that pushed hard for this unit this spring — Jim had been doing a number of assignments that I think fell into this broad category, and I’m particularly enchanted with it. Basically, the idea is to tell stories within existing spaces on the Web — essentially co-opting Web sites/spaces/tools that are meant for something else (usually something functional) to tell stories.

An example of this that people are pretty familiar with is the Google search stories. Yes, I know that these are, technically, videos but the point is that they are using a functional web tool (the search engine) to actually enact a narrative. Video is just the means of capturing the narrative.

There are also some interesting examples of people using Twitter to enact narrative. The Twitter of Oz was a story a few years ago in which Twitter accounts were created for the main characters in Frank Baum’s classic, and then the story was re-enacted through tweets.  The site now allows you to re-read the story (in reverse chronological order) which is exceedingly disjointed. Stories like these are really best experiences in real-time (in this case, by subscribing to each character and then watching the narrative unfold). The ephemeral nature of some of these stories is definitely a distinguishing mark, and, ultimately, I think it pushes our consideration of “story” once again. We’re used to stories that can be pretty easily retold through a limited number of temporally bound communicative experiences (boy is that a jargon-y sentence). Books/texts we’re used to reading from start to finish. Oral stories we can listen to, and now record to capture the narrative chronology . Visual narrative has found a home in film. There’s a clear start and finish to these narratives (although there are certainly examples even in these traditional formats that push us to reconsider the role of time and chronology in narrative.)

I’m particularly interested in Web stories that force us to reconsider whether bounded chronology is really a key element of stories. Both the Google search stories and the Twitter of Oz remain true to the notion of chronology as an organizing principle of stories. But this week I’m going to work on an exercise with Jim and my class that will ask students to tell a story without a medium that explicitly expresses chronology — and they’re going to have to muck around in code to do it.

I’ve asked my students to make sure they’ve downloaded and installed Firefox and Firebug for class this week. Firebug is a Web development extension for Firefox. Basically it makes it possible to drill down to inspect every element on a Web page. Primarily, Web developers use Firebug to debug Web pages — I frequently use it to drill down to an element on a page and figure out what’s going wrong with styling. The fantastic thing about Firebug is that it allows you to make edits to the CSS and HTML of a page right in the browser. Now, of course, you’re not actually editing the source code of the site you’re visiting. Rather, you’re editing a local copy of the page and it’s associated files, but this means you can preview changes you make right in the browser.

On the Firebug FAQ this is described:

Editing in Firebug is kinda like taking out the pickles from and
adding mustard to a restaurant sandwich: you can enjoy the result, but
the next customer at the restaurant will still get pickles and no
mustard.

In other words, you’re not editing the “source” of the sandwich (the menu or recipe) just your (local) copy of it.

In the case of ds106, we’re going to be using Firebug to modify Web pages, and we’re going to be doing it to tell stories. (A former UMW student, Serena Epstein, did a project like this several years ago: check it out. Last spring, I did a re-work of Twitter to tell my own apocalypse story, but I can’t find the link anymore–still searching. ) During class, I’m going to ask the class to settle on a page that we’ll modify together to tell a story — and to briefly brainstorm the story they’d like to tell. I’ll be leading things up front with my own demonstration, but I’ll be expecting students to all follow along, so, really, there can be deviation from whatever story we settle on as a group as each student tackles the project individually.

Then we’ll use Firebug to first examine the code and the basic architecture of the page. I imagine this is going to be pretty overwhelming for some students who aren’t used to perusing source code, but I’m hoping I can make it as painless as possible. For me, the beauty of doing this in Firebug is that it’s relatively easy to mentally map how the code relates to the page. As you inspect elements of the page, they get highlighted by Firebug. And when you make an edit to either the text of the page or the surrounding HTML or CSS, you immediately get to see the results.

So, my goal is that we’ll work through this project together. At the end, I’m going to ask students to do two things: take a screenshot of the page on their own computer to post to their blog (have to think about the best way to do this when the page may be more than can be captured with a single screenshot) and save the complete Web page to their computer. Then, they’ll be asked to upload it to their Web hosting account. This is probably going to be a pretty tricky concept, too. When you save a Web page in Firefox, you get the core HTML file as well as a folder containing all of the associated files (images, stylesheets, javascripts). In order for the page to look even remotely correct, they’ll need to maintain the file/folder relationship when uploading to Firefox.

I’m asking them to do both, because, frankly, there’s a good chance that the file/folders won’t work properly even when uploaded correctly (that’s just the nature of the Web — if there’s the page is dependent on any server-side interaction, this won’t be captur-able). So the screenshot is a way for them to preserve the work beyond the code.

So why the heck am I asking students to do this exercise? I have few objectives aspirations:

• I want students to have to grapple with the code. It’s not that I expect them all to become expert coders or even to understand everything they encounter, but I do want them to develop a basic understanding and healthy respect for what goes on under the hood of a Web page.
• I want them to develop an understanding of the architecture of a page: how do HTML and CSS work together? How is content separated from design?
• I want them to think about how a story can be told in a single page. Web pages are complex information spaces. There are often a myriad of opportunities on a page to let a story unfold: menus, titles, texts of articles, texts of links. What do these elements represent rhetorically and how can we use them to construct a single-page narrative?
• I want them to think about the choices we’re making as we tell our story. The Web provides us with a truly unlimited platform of spaces to co-opt for narrative. As we choose the site to build upon or through, I want to talk about what that choice represents. And as we enact the story in that space, I want to keep interrogating those choices.

The plan right now is to tackle this project in-class, together. Tomorrow, I’ll be leading the class for Jim’s students. On Thursday, I’ll be leading the class for my students. I know this probably seems like an insane thing to try and tackle in 75 minutes, but ds106 is making me increasingly crazy.

If you’re a student in one of the classes, here’s what you need to hit the ground running:

• make sure you have Firefox installed
• make sure you have the Firebug extension installed
• make sure you know how to access cPanel for your Web hosting account.  (Some students had trouble accessing this over anything but the secured wireless at UMW. Please make sure you can get on secured wireless for class!!!)

For everyone: What do you think? Am I crazy? What other examples do you have of stories told in/on the Web? Any other advice?

Update: Thanks to Tim Owens for the recommendation of a Firefox extension for screeshots. Here are a few possibilities:

• FireShot (PC only: allows you annotate the image)
• ScreenGrab (Mac or PC)
• Page Saver (Mac or PC: you can capture Flash content; lets you upload/embed right from the interace)