A story embedded in a page

When I started to read this week’s assignment of redesigning a webpage to tell a story, I at first thought it meant embedding a story within an existing webpage. And I got REALLY excited. This seemed like such a cool idea – the story could be relevant to the page content, or a complete non sequitur.

But then I continued reading, and realized the assignment meant something more like this. Which, don’t get me wrong, was a lot of fun. But I was still excited by my initial interpretation. So I decided to go ahead and do it and submit this as an assignment proposal.

I took the non sequitur approach, writing a story embedded in Google Apps integration documentation. (I wanted to use something long to accommodate the story structure and inherently uninteresting to most people so that they wouldn’t be distracted by it.) The story began with the idea of someone crying out for help, and then it went off in its own … surprising direction.

The poem is one that I wrote back in high school, with the enticing description of “Crappy poem I wrote while bored and procrastinating on homework.” I honestly do not remember what inspired it, but in rereading it I found the mawkishness and the self-importance to be so entertaining that I decided to use it here. (I used to write a lot of humorous poetry, and initially wanted to use one of those poems, but then I came across this one, and immediately knew I had to use it. Because it gave me my ending.)

Here is a pdf version of the story, or you can download the webpage here.

UPDATE: Assignment has been submitted! http://assignments.ds106.us/assignments/hidden-story-in-a-page/ Hope you enjoy it. I had fun creating the thumbnail for the assignment page:

Lolspeak Virus, OMG!

Changing a webpage to tell a story is not for the faint of heart. I tried out the X-Ray Goggles recommended for the assignment, and could not get it to work (not sure if it was a problem with the program, or if I was just fundamentally misunderstanding something). So then I tried Firebug. And the initial site that I wanted to hack (The Official Google Blog) seems to have been designed to prevent exactly this sort of thing. So I switched to CNN.com. And the code was overwhelming. The recommendation to choose a simple site is very wise.

But I decided to go with it anyway. I downloaded the homepage (File -> Save Page As in Firefox), chucked the folder of extras, and started wiping out all of the excess code in Dreamweaver. Although this method does require expensive proprietary software, it was soooo nice to be able to have a dual-view of the source code and the page, and just click on an item on the page, selecting the code so that I could easily delete it. It also made changing the text really easy, and to replace the images I just had to paste URLs into a box. I did, however, keep one image. Can you guess which one?

So what is the narrative of the web story? Well… In the fall of 2012, a new virus emerged. A feline virus. The Lolspeak Virus.

To view the full page, complete with links that I didn’t bother changing so they will take you to surprise CNN articles (the mystery is part of the fun!), you can access it here. Dropbox shows the source code, so you need to download the file and then open it in a browser to view the page.

Wellesley: A Google Search Story

So, I went to a women’s college. And I chose it for the college ranking and the financial aid package they offered me, not because it was a women’s college. This Google Search Story reflects my transition from trying to get  off campus as much as possible (It certainly didn’t help that one of my best friends from high school went to Emerson College in downtown Boston. Why stay on campus when I could go visit him and do fun Bostony things?) to eventually taking pride in the empowering environment of the school. So here is that story:

Also, for those who want to complete this assignment but are having trouble finding the tool (YouTube has a flashy showcase of submissions, but the actual link to the tool on http://www.youtube.com/searchstories is currently missing), there is a permalink to it here: https://searchstories-intl.appspot.com/en-us/creator/. I’m going to tag this as a tutorial so that others can easily find the link. Because this is through an external service, you do have to jump through a couple extra hoops to connect the video to your YouTube account. Google will identify it as suspicious activity from a new IP address. This is okay, just say that it was you and you can then log in.

American Eagle Through the Years!

This is 2 star web assignment #115, “Way Back Time Machine.” The assignment was:

“Using the Way Back Time Machine website on Internet Archive, take screen shots of a favorite website overtime. Then, look at how the website has changed for better and worse. Blog about what makes a website effective and how that changes. See some examples of sites like McDonald’s and Best Buy as they looked in 1996 https://www.msu.edu/~karjalae/internet96.htm?hoho

I decided to use the American Eagle website!

I decided to use screen shots from 2000, 2001, 2002, 2004, 2006, 2007, 2008, 2010, 2011.

2000 and 2004 are extremely simplistic, but not in a good way. In a very boring way. They are just not aesthetically pleasing at all. I liked 2001 and 2002 much more, but they seemed to change for the worse in 2004. 2001 and 2002 just seem a little less simplistic, but definitely still not very modern.

The 2006 and 2007 screen shots definitly show improvement. There is a better color variety and a better layout. It is a little more complex than the layout from previous years. 2007 even has a video clip on the home page.

2008 is probably my favorite screen shot! I love the vintage look with the bright colored wood pieces being used as the background! I think it is a much better use of space also, over all I think it looks awesome!

2010 and 2011 look pretty different than all of the previous years. It definitely looks cool, but not for American Eagle. I really liked the beachy, vintage look of 2008. It looks too modern now, it isn’t as bright and fun as it was.

(I did not take a screen shot of the site today because the homepage is a slideshow; therefore, a screen shot would not be the same, AT ALL!)

I think that American Eagle has probably always been an effective site. It was probably on track with other websites at the time and changed as time and technology did.

 

This assignment was really interesting! I had no clue there was a site that achieved shots of other sites in the past! Very cool :)

Columbus Sailed the Ocean Blue

This is 3 star web assignment #712, “What They Might Have Done in Social Media.” The assignment read:

“Too bad Facebook was not around for most of history! Use the Fakebook tool to make a Facebook profile for a historical figure and make a fake tweet for the same character using the Twister tool. See for Abaraham Lincoln the example of a fake facebook profile and what he might have tweeted.

Make sure what you create is coherent with the person’s background, and explain what it might have meant for that person to use Facebook and twitter “way back then”. Include screen shots and links to what you created, and elaborate on what their use of social media might have been like if it existed for them.”

I decided on Christopher Columbus as my famous person. I don’t really have any special reason for this other than I knew a bit about him and felt comfortable with the knowledge I had.

Oh! And I really like the poem we were always taught about him:

In fourteen hundred ninety-two
Columbus sailed the ocean blue.

He had three ships and left from Spain;
He sailed through sunshine, wind and rain.

This assignment was a lot of fun! (Silly, but awesome)

On Columbus’ Fakebook, I added 5 friends. The King and Queen hired him to go on this voyage, they are his cyber friends so that they can track the events of the voyage and easily communicate with him. Vinecent and Martin were the captains of the two other ships. They are his fakebook friends just in case they get split up at sea or need to communicate from ship to ship. And Leif Ericsson was a viking that Columbus met, they are friends so that they can keep in touch and hopefully meet again.

On his page I posted a status right after he left for his journey, when he arrived at his destination and once he arrived home.

The tweet is pretty self explanatory! Columbus though he had gone around the world to Asia, but he actually discovered North America.

This assignment was pretty neat. I have never hear of twister or fakebook. Fakebook really seemed very similar to facebook!! Both sites were easy to use, I like that!

View Fullscreen | Create your own

The Tudors

Who has watched The Tudors before? well I have just started it and so for the Fakebook assignment I decided to do it on Henry VIII, send him a fakebook friend request today!

Henry VIII

KH8

Basically all I did was go on Wikipedia and find all the concrete dates I could out of there… up to the point in The Tudors I am currently at… I don’t want any spoilers and used the Fakebook tool. I actually created one of these earlier in the week about Ulysses S. Grant (real name Hiram Ulysses Grant) because he shared my name… though it didn’t save and I didn’t feel like redoing everything.

The Zombie King of Pop

Michael Jackson has Risen from the grave read the full story here.

In this week we started to do HTML and the web to tell stories. I took an HTML class back in highschool so I thought I’d give the whole Raw HTML thing a try and I think I did a decent job. The HTML they use in most websites these days are much more complicated than anything I ever messed with (plus it has been a few years). The hardest part was finding where all the text was located within the coding so I could edit it. sites like this often have 500+ lines of coding so ti’s a bit tricky to make sure you get all the original text out of it so there are no indications that it is a doctored site.

ZMJ

I first had to find an idea to use, so what do I do? ask if anyone has Any Ideas (see what I did there). And one response was Zombie Michael Jackson. Now the original idea was a bit convoluted and way to involved and a little politically biased so I stuck with the zombie michael jackson/elvis presley revenge thing. I changed the title, the author, and the article text but there was still something missing… the original article I used had a video embedded in it but when I took it out there was still a huge space… which I couldn’t figure out how to remove… so I filled it with another video, one of a thriller flash mob in Boulder, CO… which is where MJ is holding up till his demands are met.

Misinterpretation Translation!

Throughout high-school and college, foreign language teachers and professors are ALWAYS telling their students never to use www.freetranslation.com . I usually abide by their requests, knowing that most translations turn out horribly inaccurate. But, sometimes I will use it to translate part of a paragraph that I don’t understand, or to just find the quick translation of a word. Well, I win this week and this is how…It’s web assignment week…(I’m still trying to figure out what the heck I’m supposed to be doing lol) and there is an assignment worth 1 star called Google Translate Fail. I had a Spanish exam this week and my professor put out some sample questions. I answered one and I wanted to check to see if I did the sentence right. Well I didn’t use Google, instead I used Free Translation. What I wanted to say was “I lived in Manassas when I was 10 years old.”

….NO BUENO! 10 tapeworm anuses? Seriously? You’ve got to be joking me. Well it’s true, go type in what you see and you will get the same result. I even did it twice to make sure it wasn’t my computer playing a joke on me! Well, luckily for me, Google has a translator that kicks ass and this was the answer I WAS looking for

MUY BUENO!!! Yes, yes I did live in Manassas at age 10! Google saved the day, and my grade! (Well, at least I hope I aced the test :P )

 

Chicken Soup for the ds106 Soul-Storytelling within the web!

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 easier it will be (think Craig’s List).

This is a 5 star assignment

For this assignment I actually thought was was going to be really hard and I was worried about how I was going to get this assignment done.  The tutorial on hackasaurus really helped me though, and after figuring out what I was doing the hardest thing for me was deciding what kind of story I wanted to tell on the web.  While looking on amazon I came across the chicken soup for the soul books.  This got me thinking about how awesome would it be if there was a Chicken Soup book for the ds106 soul.  That is when I got the idea to use hackasaurus and the x ray goggles.  These tools make is really easy for me to hack the site.  I even used photoshop to create a new book cover for the Chicken soup for the soul.  After I got the hang of using the X-ray goggles it was really easy to add my own words on the website.  After that I then published my story and grabbed the html code and saved it to EditPad lite.  I then saved it as an html file and uploaded it to my blog.

Below are screen shots of my amazon page Chicken Soup for the ds106 Soul:

hackedamazon1

hackingamazon2

hackingamazon3

hackedamazon4

Here is the link to my amazon page on Chicken Soup for the ds106 Soul.

WayBack Wikipedia

Wikipedia.org is one of my favorite and probably most used sites. It’s a tool which can help be gain a basic understanding of things before I delve deeper into them. I’ve learned a lot from Wikipedia, as well as the sources they link to.

Today Wikipedia is a slick site with a cool globe puzzle thing with different letters from a selection of languages as well as language selection portals orbiting around it with a simple sleek white background. Now when we look back to 2001, the year it was created, it is very blocky and cluttered. The page is full of blue links to different articles because that was the only way to go about it have all the links on a single page for the viewer to choose from. Their selection of articles was severely limited too, as is to be expected from a site in its infancy. Skipping forward to 2003 we see the well known wikipedia puzzle globe thing. the page also get much more organized and less harsh. The page is still loaded with links to everything they have to offer but the included a search box. they also separate certain sections and color coded them. Now skip to 2009 where we see a much more organized and more friendly visual for the homepage. there are different articles linked and referenced to but not a cluster of blue links attacking the eye. In reality the 2009 homepage is just like the one today though they added that intermediary step that I mentioned in the beginning which aids in the use of the site especially since it has become such a wide used site all over the world.

This was an easy enough thing to do using The Wayback Machine though screen grabbing was a bit of a pain. I’ve never screen grabbed on my current computer and you have to use a certain program to  do so. I guess it works out so you don’t have to edit out the stuff you don’t want like your home bar and search bar and everything in the shot as well.