Touch the firehose of ds106, the most recent flow of content from all of the blogs syndicated into ds106. As of right now, there have been 92400 posts brought in here going back to December 2010. If you want to be part of the flow, first learn more about ds106. Then, if you are truly ready and up to the task of creating web art, sign up and start doing it.

Headless ds106 Week 9: Stories in/of the Web

Posted by
Where has the time gone? We are well into the back stretch of the open ds106 Digital Storytelling course— aka Headless ds106. You are never late or behind in ds106.. All you need to do is set up a blog, connect it to this site, and start making art! Learn more…!


This video was made by Rachel, a 2012 UMW Student. It is one of many works featured in the ds106 inSPIRE site, something she and a co-student also designed as a final project. it is a place to recognize the other work of people in ds106. Maybe you might be inspired to show us what inspired you.

Web Stories

cc licensed ( BY ND ) flickr photo shared by will668

All the work your groups have done the last two weeks pays off as your shows are planned to be broadcast on ds106 radio Tuesday night this week. And there is talk of another broadcast during the week that will be more timezone friendly for our European participants. Watch the #ds106 tag on Twitter and the Google Plus group to see if that is going to happen, and if so, when. As the last part of our audio segment, you are asked to evaluate the show from another team and also self-evaluate your own team’s show.

In addition, we move to a different kind of storytelling, one that uses the space of existing web sites as a place for you to assert your own stories into them.

Radio Shows Go Live

The recorded radio shows will be broadcast live this week starting at 6pm Pacific/9pm Eastern in N. America, on ds106 radio which you all have had experience listening to back in week four.

Try to listen to the show from another group (either live or from the posted archives coming soon). You might want to write a blog post in which you evaluate the show, offer advice, suggestions, or compliments (be sure to link to the show!). In addition, you will provide the same evaluation for your own show, after having completed the work and listened to other ones.
Some criteria you can use to do this includes:

  • Quality of audio sound -e.g. Is the volume appropriate? Are the levels even? Is the sound clear, and free of noises not needed (e.g. mouse clicks, background noise)?
  • Quality of audio editing – use of effects, transitions, are the edits clean?
  • Use of sound effects- How are they used? Is it effective?
  • Use of music- how is it used? Is it effective or distracting?
  • Does the show have a structure? Is it cohesive or does it feel stitched together?
  • Does it tell a story effectively? Is there a sense of drama, unknown? Does it draw you in to listen?
  • If you would rate this radio show, how many stars out of five would you give to the show

Remember to use these criteria as well to self-evaluate your own team’s show.

Telling Stories Within The Web

This might be a subtle distinction, but so far you have been using media (images, design, and audio) to create stories in the web spaces you publish to- this is writing stories ON the web. In this week, we play with this idea in a new way, in that you will be asked to use the affordances of other web sites to change their intent, meaning, or purpose to tell a story in those spaces.

This Web Storytelling idea was first done in ds106 in the Spring of 2011 where the description for what we are asking you to do is located.

Over the next week we’ll be playing with storytelling within the web. What does this mean? Well, Martha Burtis lays out the idea nicely in this post here about the idea behind this assignment (read it!), but to briefly summarize: you will be intervening in the code and design of a website of your choice to tell a story. You are not to photoshop the design of the site (if you can), but rather intervene in the actual html and CSS of the site—though you can photoshop particular images on the site.

Perhaps the most well known examples take place on Amazon pages such as The Mountain Three Wolf Moon Short Sleeve Tee where people have intervened just in the product comments to make this ordinary t-shirt have magical powers. It becomes a way of making a political statement as read in the comments of a children’s aircraft toy (hat tip to @bellekid). Or read how Phillippe Dubost’s resume modded to look like an Amazon product worked out pretty good for him. See more examples of Amazon Funniest Product Reviews – these are all ways in which an ordinary web page is fictionalized in a creative way simply through comments.

You are not being asked to code web pages; but we have tools that you can use in a web browser to modify the content of an existing web page, change the text, images, and links, so that it has different content and meaning. Some examples by previous ds106 students include:

The story creation part means finding an existing web page to work with as raw material -good candidates are newspaper stories, product entries in sites like Amazon or eBay, movie/book reviews — in fact, simpler pages like a search result or Craigslist are easier to work with.

The tools you can use allow you to, in a web browser, actually modify the content. The trick is then to save it as a raw HTML web page, and upload it to your own web directory (this means returning to your control panel to upload files to your site). The end goal is to have both a screen shot image and a real working web page you created.

Here are a few approaches you can take for this project:


We recommend the Mozilla Hackasaurus tool:

Hackasaurus makes it easy to mash up and change any web page like magic. You can also create your own webpages to share with your friends, all within your browser.

Here is an example of one modified in Hackasaurus from a ds106 page!

ds106 doom

What you should do is install the X-Ray Googles tool in your browser (this should work in any web browser). This can be invoked directly on the web page you want to change — and it provides an overlay interface to change text, formatting, even images — essentially to rewrite any web page.

When you are done, you’ll need to save your changed code – click “P” in the bottom left when the X-Ray Googles are activated. The easy way is to publish it on the Hackasaurus site, from which you will get a URL, but if you want to go extra geeky, you can save the code and make it a page in your own site (this is by no means necessary)

  1. When you hit Publish in Hackasuarus, use the option to “download” your code which gives a display of HTML code. Copy that in its entirety.
  2. On your computer, open up the app that is a plain text editor- in Windows this is NotePad, on the Mac it is Text Edit. DO NOT USE MS WORD. DO NOT USE MS WORD. Did we say DO NOT USE MS WORD. IT WILL RUIN YOUR PROJECT!
  3. Paste all the stuff you copied.
  4. If you are using TextEdit on the Mac, Select “Make Plain Text” from the Format menu.
  5. Save it as a file that ends in .txt
  6. From your desktop, change the file name so its extension is “.html”
  7. Open this file (it should appear in your web browser)and make sure it looks like the page you redesigned. You may get weird warnings for things like flash, etc. Ignore them.
  8. Start editing your blog post. Click the “add media” button (It is one of the icons just above the editing tools, towards the left side.
  9. Upload the html file
  10. Edit the “title” field to be the text you want to make hyperlinked
  11. Make sure you use the option nest to Link URL for “File URL” This is the web address of your new page.
  12. Click insert

And now you have a link to a standalone web page.

Raw Code

If you are down and dirty with web code, you can save the raw source of a web page and reconstruct the content in HTML. This approach is not for the faint of heart! We recommend taking it ONLY if you have some experience with writing/editing HTML.

Your work then is to do the Storytelling Within the Web assignment – write a blog post with the usual writeup components, and include both a screen shot of your reworked page and a link to a live web version of your retold web story page. This is a five star assignment.

ds106 Blog Comment Narratives

Develop your own fictional character, give them a name and a bit of personality traits. Have that person leave comments on at least 5 blog posts by other students in our class, and where possible, they should interact with other characters there. Be interesting (Do not be mean or rude!) and see how your character can interact and relate to the content on other blogs. How do you assert a character using text in a comments box?

For some bit of randomness, try our link which sends you to a random post from someone in our class’s section (one published in the last 3 weeks).

More Web Storytelling

We have a few more of these kinds of activities in the ds106 Web Assignments section – your task is to do another 5-10 stars worth of these assignments.

Daily Creates

You should be very deft now at doing the Daily Create assignments, so we are going to ask that you add a new component this week. You are to do at least three Daily Creates this week. When you have completed your three, look at them and find a way to connect them in a story. Re-edit your captions of your Flickr photos, YouTube videos, and SoundCloud recordings so that there is a narrative that uses the media AND links them (via a hyperlink) between these media.

So your story might start with a Flickr image, then link to a YouTube video, and then link back to another Flickr image. The idea here is to construct a story that jumps across these media sites in a way that works as a single story.

Weekly Summary

Your weekly summary and personal reflection post is due by midnight on Sunday, October 27. Your post would include the following:

  • Recognize at least one other ds106er’s work in the ds106 inSPIRE site.
  • Evaluation of another DS106 radio show you listened to, as well as one for your own group.
  • Complete the Storytelling within the Web assignment
  • Complete another 5-10 stars worth of Web Assignments (other than the storytelling within the web one). If you do not like these assignments, this could be a good time to create your own assignment or write a tutorial.
  • Describe the comment character you created and describe its interactions on the blogs. Include links where appropriate
  • Complete 3 daily creates and connect them as one web based story.


Add a comment

  1. Stories Inside the Web: If Owners Oversaw the Front Page « Kevin's Meandering Mind10-25-13
  2. DS106 Week 9 | Rhonda Jessen.comRhonda Jessen.com11-03-13
  3. Headless ds106ers, Stand Proudly! Some Disjointed Thoughts and Puny Data - CogDogBlog12-18-13

ds106 in[SPIRE]