From the Spring 2011 ds106 class came the idea of changing up an existing web page to tell a new story ” 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, but rather intervene in the actual html and CSS of the site—though you can photoshop particular images on the site. Essentially you alter the content of a web page (content, images) to make it tell a new story. Originally we recommended doing this using the Firebug extension in the Firefox browser, which does work, but is unfortunately easy to lose your work. We currently recommend Mozilla Hackasaurus — install the X-Ray Googles in any browser and use it to re-cast the content of any web page. When you blog it, include both a screen capture in your post, but you will also need to upload the web files (HTML and media files) to your own site so it can exist as a stand alone URL. (see our older Firebug Tutorial) Consider using news sites, social media profiles, product pages, movie review pages etc. The simpler the design of the page, the easer it will be (think Craig’s List).Assignment Bank- Web Assignments
For this storytelling web assignment, I thought it would be great for Sammy “Skippy” Squirrel to review his favorite product in the whole wide world, Skippy peanut butter. He may have included a little too much information about his new job at the Super Secret Squirrel Agency, but at least his review helped nine people on Amazon! Check out his review here!
I had a very difficult time completing this assignment. I downloaded the Mozilla X-Ray Goggles Tool and Mozilla Firefox successfully, but I had problems with using the X-Ray Goggles Tool. I was not sure which websites worked with the tool, so I tried Instagram, Twitter, CNN, Facebook, and many more. I re-read the instructions for the assignment and saw that simple was better and Amazon was a good site to use.
I immediately knew exactly what I wanted to do as I got onto the Amazon website. It was going to be perfect. Sammy A. Squirrel is going to review Skippy peanut butter and give some details about how he was recruited in the Super Secret Squirrel Agency. I clicked on the X-Ray in my bookmarks bar on Mozilla Firefox and it finally worked! I could see all of the different code on Amazon! I clicked on the name of the reviewer and typed in “Sammy A. Squirrel”. It worked perfectly, but not for long.
I tried to change the picture for the reviewer to Sammy’s fedora picture:
No code for the website came up. The only options I saw were “Update” and “Cancel”. I clicked the “Cancel” button and waited patiently for something to happen. When nothing happened, I decided to push the button again, and again, and then I tried the “Update” button. Still nothing. I refreshed the page, deleting Sammy A. Squirrel from Amazon. This process continued many, many more times until it finally happened.
I got all of the elements changed in the Amazon review to follow along with my furry secret agent. The name, profile picture, title of the review, and the review itself were all changed on the Amazon review. It does not sound like much, but it did the trick. When I was first starting out, I thought it would have been cool to change a lot more things, but as things got difficult with the X-ray tool, I realized that simplicity is the key.
Aside from all of my difficulties, I had fun with this assignment. Editing the code on Amazon was really cool, especially when bringing my fictional secret agent character to life. I can’t wait to see everyone else’s stories told through the web!!