A Dirty Cop Cleans Himself Up- Soiled Harry

This turned out to be a love/hate/love assignment for ds106- Telling Stories in/on the web. It was a brilliant, creative, and challenging assignment cooked up by Martha. The task is to re-write a public web page to have it tell a new story, using only code (especially the Firebug plugin for Firefox).

I’ll b&m about Firebug later, but first, it is story time! I went for an IMDb profile page for a movie to have it portrary a well known movie radically different. I chose Dirty Harry, partly because I love the series, but also saw the Harry Callahan character as one to be turned inside out.

I present the full version of Soiled Harry online at http://cogdogblog.com/stuff/soiled/ – the screen below is just what is above the fold you can enjoy a full screen version.

Basically, I transformed Harry the tough “do you fell lucky, punk” bad-ass into a pathetic loser with B.O, who undergoes a emotion jerking process of self-discovery:

In the year 1971, San Francisco faces the embarrassment of an inept and hygiene challenged cop- Inspector Harry Callahan (known as Soiled Harry by his peers who knows he has not showered since 1967). He is only kept on the force because of the power and influence of his billionaire father and former populist mayor, Pinky Callahan. It is his newest partner, Inspector Frida Lopez (who benefits from a genetic lack of olfactory sensors) who is able to convince Harry to seek help from an unconventional shrink, Dr. Connor. Using humiliation and cat and mouse type of games against Callahan, Connor is able to crack the fears and veener of the smelly cop and bring him to a full state of self actualization

Do not miss the touching shower scene where Dr Connor, played by Phyllis Diller, coaxes Soiled Harry into the world of cleanliness. Also, there is the unforgettable rendering of “Feelings” sung by Dennis Hopper.

I started off great in Firebug, and got used to grabbing items and editing them. I did a big chunk last night, mostly on the part above, and creating the graphics I would swap in.

Luckily there are tons of Clint Eastwood images out there, so I was able to sap the movie cover photo with one of him holding his nose (and posterizing it to match). I found a bunch of other ones to crop to the square row of other images.

I wanted to make as many of the links work as possible, so all of the actors, links to others movies, work as they should.

My approach first was to use Firefox to save the web page as “complete” meaning I got a folder full of assets, and then used Firebug to find the names of the image files. My first idea was to just replace the files in this directory, but then my page lost all of the functionality of the local referenced urls. Plus when I copied HTML from Firebug, the local directory links were lost in the code.

So I instead used the same source, and in my local file, added to the <head>…</head>… section:

<base href="http://www.imdb.com/title/">

1	<base href="http://www.imdb.com/title/">

meaning that all local links like

<a href="/name/nm0001123/">Dom DeLuise</a>

1	<a href="/name/nm0001123/">Dom DeLuise</a>

would work. What I did for the images I replaced was to load them on my own web server, and replaced in the source code the IMG links to point to these new URLs.

I was humming along this morning, having fun, adding tons of content in Firebug… and not saving! And I paid dearly. I ment to use the element selector tool on a link, but forgot to click it, and ended up following a link and blowing away all my work.

I was ready to cry.

But alas, I had my local HTML file with all the work I had done up to 1:00am last night, so I just sat down with BBEdit and manually edited all of the HTML the old fashioned way, by hand. Because I had already done the work once, and Firebug gave me a good sense of the structure, it was just a tedious re-write… and actually a few sections turned out better.

For grins, the last thing was creating a fake ad banner for the top.

In the end it was a fun and creative assignment; I tried to change as much detail as possible, including the recommended movies (for these I just searched on IMDb, and viewed the source code, and just grabbed the code for each DIV.