I’ve excited that we brought back the within the web storytelling assignment to ds106- the one where we ask students to use a browser tool to “re-edit” the content of an existing web site to give it a whole new meaning. IN many ways this subverts the web in a playful way that says, I can make this web page tell any story I want:
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.
Because this is a new one (or has not been done in a while) and I know some of my students have gotten tripped up on this, I wanted to do an example. I also think it is important to try and alter almost every page element you can, alot of students do the headlines and some text, but the adds, menus, and footers are rich fodder for mucking.
I am not sure the exact path of my thinking of what I could flip on its head (political sites where candidates say honest and humble statements was one thought, but I hate politics). Then I thought about the banality and tripe of YouTube comments, and found my spot- I wanted to recast a YouTube video into one that represented a piece of fine art, where the comments were thoughtful, well punctuated, and… well nice.
In looking at sites that document some of the worst in YouTube commenting it took but a few clicks to land at Sneezing Baby Panda 17 glorious seconds of silly animals caught on video. The stream of comments include:
Wow… The mother panda even got? a fright.
fake
i guess? it’s cute
Haahahhahaaaahhaha?
Why u gotta? say it fake just laugh and shut ur face!!!!
Fake?
How sad, cryptic, and juvenile are tose comments. So here is my remade version of how this video might play ins some alternate universe, Panda Sneezes in E-Minor (that’s the web version)
I found a bunch of art and theater reviews to use as some of my fake comments. I changed the commenters names as well, inlfated the views, and made it have 0 dislikes. Who could dislike a panda? C’mon….
I am super impressed with the versatility of the Hackasaurus tool – activate it as a javascript bookmarklet, and any web page becomes editable. You hover over portions of the page to find elements you can edit, like the title of the video:
Clicking it makes the element editable:
(click for full size version)
Here I can not only change the text that appears on the screen, the html attributes (“alt”) are also available for messing with.
I like that it gives you a sense as to the structures of a page, the divs, etc and how they are fit together. I changed the comments, the commenter names, a few hyperlinks, menu items,. buttons, almost everything in the YouTube interface I transformed. The only thing I could not change was the iframe (clicking it opens the iframe, but I could do that in raw HTML were I so inclined.
The trick then is to hit the “P” button bottom left, this is the publish button.
It is not really publish, but gives you the full HTML to generate the page in one file. What you have to do is copy all of this, then open a plain text editor (meaning NotePad in Windows or Text Edit in the Mac, and paste that sucker in). It should then be saved as HTML (Not sure if this is an option in NotePad, but it is critical in Mac, a few seemed to save their as RTF which then took a big search and replace to get rid of spurious / characters).
Note for Mac Users: Uh oh, we had left off a ket step… After you paste your code into TextEdit, be sure to select Make Plain Text from the Format menu. When you save, use the “.txt” file name it provides. Then go to your desktop, and change the extension to “.html” If you do no do this, all you will see in the browser is code!
These HTML files are a bit big, a few hundred K because Hackasaurus wraps all of the external CSS, JS files a web page might have and folds it into one. You should test loading this form your desktop in a web browser (double clicking should do it). If you see something that looks like the web page you made, good. If you see HTML code, you gotta go back.
From here you can upload directly to your wordpress site via the “Media Upload” button just above the editor box. You select the file, like they way you upload an image. Whatever you enter for Title becomes the linking text, the key is for Link URL to check the box for File URL:, this uploads your HTML file and creates a hyperlink to it
So there you go, with this tool you can bend any web page to be your slave, to be lord and master of its content. Feel the power?
UPDATE Oct 27 As Stephen noted in a comment, the video did not actually play in my mucked page, must be something about the embed code Youtube uses makes sure it is from its own server. This was an easy enough fix with a dive into the HTML, I removed all of the code in the css div
<div id="watch-player">...</div>
and replaced it with the embed code set to the width of that div (700px)
<iframe width="700" height="525" src="http://www.youtube.com/embed/FzRH3iTQPrk" frameborder="0" allowfullscreen></iframe>
Now you can haz sneeze!
