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 now is pretty much the same (the tools we suggest are different)

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).

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 use 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. You do not have to worry about defacing another web page, you are just recrafting a copy of it (remember the old saying about imitation as a form of flattery?)

Some examples by previous ds106 students include:

• Serena Epstein re-wrote an MSNBC news page to make it look like it was talking about the fences on the UMW campus
• Martha Burtis made an Amazon product page look like some contraption that automated ds106 work.
• Alan Levine re-crafted an IMDB summary of a Clint Eastwood movie to change the movie plot.
• Andrew Wallingham turned a google search result into something… well maybe creepy.

The creative part requires that you find 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 easy to work with.

The tools you can use allow you to, in a web browser, actually modify the content. The end goal is to have both a screen shot image and a real working web page you created that you can link to in your unit summary blog post (and heck why not tweet what you did?)

We recommend the Mozilla X-Ray Googles tool is is meant to help you see (like an x-ray) how web content is structured:

X-Ray Goggles allow you to see the building blocks that make up websites on the internet. Activate the goggles to inspect the code behind any webpage, then remix elements with a single click, swapping in your own text, images and more.

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

What you should do is review the X-Ray Googles instructions and install the tool in your browser bar. (this will work in any modern web browser). This can be invoked directly on any web page you want to explore and change Goggles 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 on your own site.

Your work then is to do at least one 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.

What does it tale to create a character or persona on the web?

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 open participants, 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? How can you best stay un character? What makes a character work in this environment?

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

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.

Or more.

There is never a problem with doing too much art.

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. Do at least three Daily Creates this unit.

When you have completed three Daily Creates, 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. You should able to start at one, and follow links to follow the story through the other two.

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.

Your unit summary and personal reflection post might include the following:

• 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.