So, Joe was thinking to himself… Do I really need this machine? All I keep doing is going back in time and reliving days I don’t want to anymore. I can’t even get Maria back by using this and it’s actual a waste of the present time…. SOOOOO Joe put his Time Machine on Craigslist. He uploaded a beautiful picture of this machine and told people how new it is and how well it works and the easy steps it takes to go back in time. The Time Hopper doesn’t even have any batteries!! It’s like an electric car and you can just keep it plugged in over night to charge. That’s awesome. He was also nice enough to put a 200,000,000 discount on the machine and include the remote as well. Joe is very desperate to sell this because he wants more gadgets like guns and bombs so he can defeat the Russians. He also wants more gadgets to spy on conversations and video cameras to hide in places!

I chose to create a Craigslist post because I already had the idea in mind that Joe was going to sell this. Honestly I kind of wanted to get it out of the story anyway. So this was perfect. My Xray app wouldn’t go into my Bookmark so I had to photoshop. I photoshopped a really nice picture of a time machine in place of some random John Deere picture. I then wrote over where all the words were on the old post, for this post on my mobile phone. Things are squished because of the mobile site, but it works. I included his location, his contact info, the price, a description (I felt like making it more personal would create more customers for the emotional effect of helping this guy out). I also added “serious inquirers” at the bottom so he would not get randoms trying to contact him for no reason. I did all the photoshopping in an app called Photoshop Mix and I put text on via an app called PicStitch. I actually really enjoyed this and liked how we added a story to it. You can see this Craigslist post below!

When I first saw the web storytelling assignment, I was pretty nervous. There were so many words and it looked so confusing! Once I downloaded the Mozilla X-Ray Goggles tool, I realized that it was actually going to be easier than I thought. I originally was planning on doing a post on eBay, but realized that the vast amount of information that eBay has for each item would be too confusing to work with. Instead, I decided to alter the content of a Craigslist page.

First I changed the top of of the page, which had previously shown the location/topics that led me to the page, into a welcome for a site specifically for secret agent swaps! I decided that Mia (my character who is both a secret agent and a librarian) would try to sell some of her books on a special secret agent version of Craigslist. She has collected quite a few over the years, but is moving to a different apartment as a result of some highly classified missions that are coming her way. Below is her listing.

Here is a link to the listing. Changing online code was so much easier than I thought it would be. This made me think about how easy it could be for anyone to go online and alter information. I have a feeling this is how a lot of false news articles/tweets/headlines are spread online. The fact that people can edit things so easily is kind of scary! However, I had a lot of fun with this assignment. It was interesting to be able to tell a story based on the existing information of a previous story.

Storytelling Within The Web

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

For this assignment, I utilized the Assignment Bank itself! Specifically, I utilized this page specifically! Here is the screenshot of the final product:

And here is a link to the live webpage!

BEHIND THE SCENES

For this assignment, I was a bit at a loss at first. I had no idea what page I wanted to edit. I knew what story I wanted to tell (i.e the introduction of Wisteria’s investigative team), but not how to tell it. As I was looking frustratingly at the page, I had an idea…why not use the page itself?

And so, that’s what I did! I formatted the page accordingly, and managed to get it to suit my needs. A period towards the bottom is unedited mostly due to the sheer volume of things I would need to delete one by one in order to get them to disappear. It’s alright, as I worked this into the narrative.

STEPS TO SUCCESS

— Download Firefox

— Download X-Ray Goggles

— Stare at the assignment page for a couple minutes

— Have a Brain Blast

— Edit the page according to the narrative I came up with (also during this step).

— Publish the live webpage

— Take a screenshot

— Write in this textbox

And that’s about it! This assignment was really interesting, and I think it’d be fun to play with it again someday!

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!!

I’m not gonna lie, when I saw that we were doing web design this week I was just about to piss my pants. I have NO idea about any of that coding nonsense!!! I really thought I was just gonna have to skip this week or something. But, after carefully reading over directions, I realized it really isn’t that bad after all. I toyed around with the google x-ray lens, and it is pretty cool to be honest. You can just typed anything you want in there simply by rolling over it with your mouse! It was pretty incredible to see, and I think I have a newfound appreciation for people who are in the coding field who actually develop all of these websites. Hats off to y’all.

Anyways, I made my character her own little website, and its not actually half bad. I thought about doing amazon or eBay or craigslist, but for the sake of being different I decided to go with something that I see as more fitting for Helga-the Kate Spade website. Yeah, you heard me right: Its classy and understated and sophisticated, just how I would see Helga in her prime doing her assassination business.

I first thought I would stick a picture of Helga in front of the product on the page, but then I saw that there is a personalization shop, so I chose to keep the picture of the notebook with the letter “H” for her first name. I made all the subheadings things that would go on her actual website, like the assassinations she’s completed, some references to people she’s worked with, and her famous apple pie recipe. Then, I made the actual page that I screenshotted about her assasinations, which show their first initial. I just kinda continued to toy around with things that I thought I should keep on there vs. things I would change completely, which included an array of buttons and pictures and so on. It was a really fun experience honestly. I would love to introduce it in my classroom when I am a teacher. Below is my work screeshotted, but I have also hyperlinked the website so you can see it in real time.

-Caty

This was inspired in part by alternate names for animals (snake = danger noodle), and also by my husband recently nicknaming one of our cats ‘majestic land orca’. Cecil does bear a strong resemblance to a panda, in coloring, body type, and behavior. Also the question ‘Who the hell passed up the chance to name orcas, sea pandas? Or pandas, land orcas?’

Fire-breathing noodle is probably my favorite part of this.

The original: Giant panda

Though not for stars, this week we were tasked with modifying a web page to tell our own story. See a link to my modified web page here.

For this assignment, I chose to edit an Amazon product page, to display my own product, Vampire Repellent. You may remember this particular product, from my commercial for my radio show last week. I decided to use this because I wanted to do more with the product idea, since I found it an amusing expansion on the worl my character Callen Zelrich’s world. In fact, points to you if you can spot where he’s mentioned in the reworked page. Extra double points to you if you can spot another character mentioned on this page that I used in my radio show segment, when interviewing customers about Callen’s capture (hint: she mentioned in my segment that she purchased the product). I really liked my idea for this because I thought I created these fun easter eggs and I think it turned out well!

To do this assignment, I used the Mozilla Googles as was recommended. It was easy to install and use them, because once you have them installed you can simply click on any object on the screen and are able to edit the html and css instantly. I thought that was pretty cool. It was however, difficult since Amazon is a page that is pretty complicated, and has a lot of text, though I hope I was able to make it believable in the end, especially with the reviews I wrote for the product. It took far more time than I expected to complete this, but I’m glad I learned how to do it, and it’s a unique style of storytelling I hadn’t considered before.