baby steps baby steps
I need to play around with a more text-heavy site so I can play with all the colors and fonts, etc.! I’ve used a lot of HTML before but since I was on a time crunch I just dawdled around Hackasaurus because Firebug wasn’t working for me at alllllll. Good stepping stone for upping up my blog! Huzzah!
For this assignment, I chose to go to amazon and pick a gallon of Elmers glue that looked like a gallon milk. Then I edited the title, through FireBug and changed the title to ” when mommy needs her quiet time…she uses”. Long story short, my mother used to joke around and say that some people should use glue sticks as lip gloss and when we always annoyed her, she would make sarcastic remarks like this. So when I saw what this assignment required us to do, I thought about my crazy mother who let me put on glue stick as lip gloss because I was being a stubborn little child.
Here is the original link Elmers Glue
Storytelling within the web! This assignment would have been really fun if I didn’t have a massive case of writer’s block when I decided to get down to it. I decided to remix a cnn webpage as if the coming hurricane-apocalypse mix was going to miss the east coast.
That’s just part of the work I had done. I used the hackasaurus X-Ray Goggles tool that was suggested on the assignments page. From there, I just made all of my changes (which were all text). Here’s the actual page. I followed @cogdog’s post for guidance in uploading the actual page.
So I was wandering around the internet this week, and I happened to stumble across this cute maid robot for sale on JList. Supposedly, this robot can do just about everything for me, and I can program it to do stuff if it can’t! And it’s only $160! I’ll never have to do any work again! This is fantastic, and this should be the last blog post I ever write myself! So for the last time, Clem, signing off!
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!
Yes, I did it. I transformed my guilty pleasure show into a ds106 affair. I used hackasaurus which made it super easy to do. I simply put the X-Ray goggles into my bookmarks bar and went to the page I wanted to edit. I clicked x-ray goggles and voila! I could edit all the text and images I wanted, so I did. I clicked P when I was done, and copied the code it spit out. I put this code into notepad, like cogdog suggested. I saved it as an html file, which worked the second time (ok, maybe third time) I tried it. I hadn’t put notepad into unicode, so it’s understandable. Then I uploaded the file to wordpress by clicking the cool camera imposed on a musical note button at the top of posts page. Yeah, and it works! woohoo! go me! (my first attempt was awful so I deleted it.)
I thought it would be fun to insert ds106 things into a real housewives scenario. I used Martha and Cogdog as the main characters, all in good fun! I think there is also a little mention of DTLT and maybe my friend Kendall! I love the real housewives and I love ds106. I tried to insert 106 into the writing as much as possible. Hence the seemingly random 06 but it does usually follow after a 1!
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.
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.
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.
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:
Here is the link to my amazon page on Chicken Soup for the ds106 Soul.
