Here is the link to the assignment:

YoutubeItYourWay

(Details about he assignment are on this page)

Inspiration: For this assignment I was just simply inspired by the week when we learned how to use X-ray Goggles and learned all about Web Designing. I thought this would be a cool fun way for students to play around with x-ray Goggles.

Rating: When I initially created this project I forgot to give it a rating. (So, hopefully my professor will go back and do that for me) However, since their are a lot of steps in this assignment I would give it a 4 star rating.

Original Youtube Page:

Here is my altered Youtube Page:

In the Assignment Way Back Time Machine, I used the Internet Archive’s Way Back Time Machine to analyze how YouTube has changed through the years.

Originally, YouTube was very basic. Not too much main page advertizing made the page seem less clustered than today’s YouTube. The simpleness of the website’s look in 2005 is relieving compared to the new site. You can see exactly what you want to accomplish as far as searching for videos, signing in, and browsing trends right away, because the website is simple and the features pop out more. The site was not as flashy as it would become.

Skipping ahead to 2008, YouTube has developed and become the biggest online video sharing website in the world. The icons and logos have been redesigned giving it a fresher look. They are no longer using trends, but rather just recommended videos for easier browsing. The site looks clean and trimmed, giving it a professional look and user friendly.

Now on to today’s Youtube. Advertizements are the biggest things on the page. After you see around the ads, a lot of what used to be user friendly is now hidden in a failed attempt to look more user friendly but also trim down the site. One of the more irritating things is there is no immediate place to register for YouTube. You can only find Sign In buttons. Unless you are already registered with YouTube, I can see this being frustrating. Besides the disregard for usability, the site does look trim, flashy, and modern.

In this web assignment I must use images from Google Street View to make a story.

Frank’s Salt Water Taffy is the best in all of Virginia. He makes taffy at Forbes’ Salt Water Taffy in Virginia Beach, VA down Atlantic Avenue, and he is so passionate about his taffy, he even decked out his whole van with his passion of making Forbes’ Taffy. It’s a good thing he can use Google Maps as an alibi, because his wife has been suspicious about his late hours and whereabouts when he goes to work. She does not appreciate the effort it takes to make the best taffy in all of Virginia, and how time consuming it must be. Here is a picture of Franks’ van at work. Exactly were he said he would be.

Poor Frank. His wife is obsessed with the idea that Frank isn’t where he says he is. You can see her friend Linda walking her dog past the shop like clockwork every morning to spy on Frank. It may be that Frank is aware of his wife’s spying, but most believe Frank is a stand up guy and is as true a husband as his taffy is true in good taste. Frank’s best friend Al has always had is back. Frank feels so sad about the fact that his wife has no faith in him, he often spends time with Al at their favorite bar pictured here. Maybe if Frank spent less time at the bar with Al, and came home to his family earlier, his wife wouldn’t have to worry as much. Until then, poor old Frank endures knowing that he makes the best taffy in Virginia, and he has great best friend in Al, and a wife that cares about him enough to keep holding on.

Using Google X-Ray Goggles from Hackersaurus, I “hacked” Twitter to show what it would look like if pirates were to take over Twitter. Here is a screen shot of the finished project.

I used the Twitter main page for my project and this is the link to the assignment.

I’m going to publish my weird borked edited web page for the evil awful horrid honestly quite educational Storytelling Within the Web assignment right now so that the code is at the very least out there and accessible before the storm robs me of my interwebs. Here’s what it ought to look like (flaws and all):

Read on for the full writeup…

This assignment basically decimated my brain. And the sad thing is, I was super excited for this week when it all began:

The degree to which I am excited for this week’s #ds106 assignments might actually be detectable from space. #webshenanigans #4life

— Haley (@doodle_muse) October 23, 2012

But I got freaked out by the amount of stuff I wanted to do and how unfamiliar the coding language was and Firebug not working and me being more or less unable to make heads or tails of it anyway, and before I knew it I had zero time and less plan.

My first thought was to turn Prof. Levine’s blog into a bunny sanctuary (the new title was going to be BunnyButtsBlog. GENIUS), but I couldn’t figure out how to edit the header image behind the very first navigational menu. After failed attempts with Hackasaurus, the Firebug extension failing to show up in my browser even after extensive troubleshooting and some unsuccessful prodding with a 30-day free trial of Dreamweaver, I gave  up and moved on to sillier, lamer things.

Expanding on my original idea of invading Prof. Levine’s blog with pictures of adorable fluffy bunny rabbits, I decided to edit my Goodreads.com recommendations page to do something similar. Instead of a site that suggests awesome books, my thought process went, how about a site that recommends cute little animals to hug and squeeze and love (but nobody is calling them George). Here’s what my rec’s page looked like originally:

Because you can never have enough poetry in your life. Never ever.

I discovered that to make the images look reasonable and not squished and malformed, I was going to have to edit them myself. Desperate as I was by that point, I did a few quick image searches and grabbed whatever images I could find of “cute puppies,” “chinchillas,” “bunny rabbits” and “cute reptiles” (yes, snakes are adorable. Yes, I will fight you on that point). After snagging five from each category I’d made up, I opened them all in GIMP and cropped them to more or less the right dimensions, then got the aspect ratio perfect with the “Scale Image” tool. Finally I uploaded all of the images (including a modified Goodreads logo) into a private, unsearchable folder in my Flickr account to prevent the images from being recirculated too widely and then went image-crazy with Hackasaurus.

Several hours later when I thought I was finished it barfed up some completely unusable code that I had to look up tutorials in order to save properly, because Notepad is pure evil. I have no idea why the HTML I got from that program was borked, if it had something to do with me saving the file improperly or if the Coding Gods are just particularly cruel and capricious to newbies, but whatever the case, I couldn’t use the web page I’d worked so hard to edit.

The one good thing Hackasaurus did was familiarize me with code in a way that wasn’t entirely overwhelming. I decided to just save the source code of the Goodreads page I wanted to alter, open it up in Dreamweaver and see what there was to see. With the split-screen view I was able to click on elements visually and see which lines of code corresponded to them, and pretty soon I was editing the code alone (also necessary, as the split-screen view makes the program freeze up on my craptop every other minute).

After several more hours of painstakingly editing the same lines of code over and over again, copy+pasting image locations from Flickr and uploading the file every now and again to see if it looked presentable, I once again had a more or less working web page. Despite all my issues with this assignment, I am kind of impressed that I mostly just muddled through it myself without looking at tutorials or coding guides. I just sorta looked at stuff and figured out what needed to go where, which suggests that coding websites is actually not that difficult at all.

Regarding the story behind my altered web page, I feel like Cutebreeds (See? SEE WHAT I DID THERE?!?!) is a site that someone would visit if they really needed to calm down after a long, stressful day at work. Maybe it would crop up as an extension of Tumblr or Pinterest, where you can share content extremely easily across user spaces. The cutest animal images and videos would be determined by user ratings and the reach of any individual piece of media would be dependent on how far users were willing to share it, thereby determining its popularity.

Or maybe it’d just be a hangout for wannabe crazy cat ladies. I’d be into a website like that.