views:

1382

answers:

15

I am a web developer for a Django-based site for a student organization, and I have the opportunity to make the website temporarily absurd for a day of general campus-wide debauchery and chaos (long story, doesn't matter.)

What are your best ideas for web development practical jokes (that you could never use in the real world)?

For example, one idea we had was to use a client-side script to convert each character to its upside down equivalent in Unicode, sıɥʇ ǝʞıן ƃuıɥʇǝɯos.

I'm not necessarily looking for Django-specific solutions. I imagine most of these things would happen on the front-end. I am also quite aware that usability will suffer considerably--the point is to be fun for a day, and there will always be a link to the normal version of the site.

Also, everything must be relatively cosmetic and easily reversible--I'm happy to swap out static CSS/JS/HTML/templates/images, and even temporarily add a django view, but no messing with the data level!

+2  A: 

Rotating the entire web page would be fun using CSS Matrix Rotations.

fuzzy lollipop
+9  A: 

Give it a "retro" feel. Marque tags with horizontal and vertical scrolling, loudly coloured backgrounds, low-rez animated GIFs galore... And make sure you use the <blink> tag!

oh yeah, and add those stupid animations that follow the cursor everying, like a sparkly unicorn or something awful like that.

FrustratedWithFormsDesigner
I'm thinking along the lines of xkcd's geocities parody. Make sure to have lots of random HTML code everywhere that isn't right and have Visual Basic source in the HTML comments!
Earlz
With or without the many 'under construction' flashing-.gif-based 404s/301s?
David Thomas
Haha, yeah, I thought about doing something like that, but I worry that people might think we're serious. I suppose if I took it far enough they might get it. I wonder if it can be done entirely in CSS and maintain our XHTML-Strict compliance.I do like the cursor idea. Hadn't thought of that. Way old school.
Ellie P.
@Ellie P. I'm *so* tempted to say something like 'post the code so we can turn it into an anti-ZenGarden...' *must resist...* =b
David Thomas
@Ellie: Take a look at http://www.webpagesthatsuck.com for inspiration. Also, such a cursor thing can be seen at http://www.youtube.com/watch?v=GgzQgcVQVTU
Marcel Korpel
+11  A: 

One tag to rule them all:

<blink></blink>
Hooray Im Helping
Doesn't blink dramatically slow down the page though?
animuson
@animuson: that depends on how fast your browser can blink.
FrustratedWithFormsDesigner
+1  A: 

Put everything in <marquee> tags. Or make everything fall to the ground like this: http://www.chromeexperiments.com/detail/gravity/.

Adam
That gravity thing is awesome, but I need a cross-platform compatible solution. Less than 1% of our users use Chrome.
Ellie P.
It is written in JavaScript and should work in nearly all browsers. I just tested it in Firefox, it works it's just slower. See here for more information on how to add it to your site. http://mrdoob.com/blog/post/644
Adam
+26  A: 
document.body.style.MozTransform = 'rotate(180deg)';
document.body.style['-webkit-transform'] = 'rotate(180deg)';

Ideas for web development practical jokes - rotated screen

Daniel Vassallo
That would be even more more interesting if the rotation amount varied by time. Example: Midnight is 0 deg, noon is 180 deg, midnight (the end of the prank day) is 0 degrees again.
FrustratedWithFormsDesigner
hehe... yes that's cool. Unfortunately I noticed that some sites do not handle the degrees between 0 and 180 very well. For example rotating Stackoverflow.com by 90 degrees you'd get a very long horizontal scroll bar.
Daniel Vassallo
@Daniel Thats a good thing!
Earlz
@Daniel: Perfect opportunity to put the Droste effect into action: http://en.wikipedia.org/wiki/Droste_effect
Hooray Im Helping
Excellent! Although I take it this will only work in Firefox and Safari. Any ideas for something extra-mean I can do for the 55% of our viewers who still use IE?
Ellie P.
@Ellie P. you could use xhtml 1.1 strict; that *could* maybe cause them some pain... =p
David Thomas
@Ellie: Hehe, especially if you send your file as `application/xhtml+xml`. ;)
Marcel Korpel
You should also be able to make this work in IE by using the CSS `filter: flipv;` In other words, add the line `document.body.style.filter='flipv';` Opera supports some transforms in the latest version, I think. (They also supported some of the MS filters at one point but I doubt the above would work.)
DisgruntledGoat
Scratch that, I think that only works for images. Applying this to the `body` works for me: `position: absolute; filter: progid:DXImageTransform.Microsoft.Matrix(M11='1',M12='0',M21='0',M22='-1', sizingMethod='auto expand');`
DisgruntledGoat
Classic IE! Compare the IE CSS property value to the standard :P (though IE *probably* did implement it first!)
alex
+2  A: 

Animated characters (using GIF or something) walking across the screen. Or maybe a ghost that jumps at you suddenly :)

Anurag
That's not a practical joke, that Microsoft's new revenue stream on Win Mo 7 Series Zune.
Frank Krueger
+2  A: 

Use the text shadow tag and some fun coloring options in CSS to make everything in 3D! Find some cheap 3D glasses and start handing them out to people but not inform them why (probably mention something about the importance of them so they just don't go throw them away...).

EDIT: If you wanted to keep it simple, since hyperlinks are usually blue I'll assume yours are, so just add the following CSS code. Not positive if text shadow is supported in all browsers... I just did it in Firefox.

a { text-shadow: 2px -2px red };

But yeah I don't know how cheap even some cheap 3D glasses would be. Still it'd be kinda funny just to put out there. I think most people would get the joke even without the glasses.

The Jug
Nice idea, but requires real money. Also, do you know of any specific resources on how to 3D-ify a webpage? Seems like it could be tricky.
Ellie P.
Not at all! I'm just thinking in the oldschool red on blue background (or vice-versa... or whichever is used I can't remember off the top of my head). I've editted my answer with some code.
The Jug
+42  A: 

At a Dutch IT related forum there was ever an 1 April joke with some Javascripts (created by the creator of the fabulous DHTML Lemmings who's the webdev forum moderator over there) which made all pages instantly been broken up by constantly downfloating mining and exploding lemmings.

Some screens:

alt text

alt text

It was really awesome. I unfortunately cannot find the original scripts anywhere (I'll however contact him sooner or later), but it should give some ideas :)

Update: he pointed me the location of the script: http://tweakimg.net/g/forum/templates/tweakers/js/l.js It's however specific to Tweakers.net, but it should give sufficient ground for some ideas. Here's a blog with some background and explanation how it works.

Have fun!! ;)

BalusC
+1 for lemmings!
FrustratedWithFormsDesigner
I used my last vote of the day on this post. Everyone upvote this, it's so much better than my idea!!!
Josh
I, too, used my last vote of the day for this idea. It's awesome! Page-destruction, lemmings...wish I'd thought of this =)
David Thomas
haha, love it.. also add crawling insects on the page, and you have a buggy software right there..
Anurag
How do you integrate this script? I added the script to a page, nothing happens. Tried to calling the `Lemmings()` function but I just get an error `Object.extend is not a function` in Firebug.
DisgruntledGoat
Ah yes, the script is specific to the Tweakers.net framework. Unfortunately, you'll have to modify/extract the desired logic yourself. At least the idea is clear.
BalusC
+11  A: 

http://www.cornify.com

A semi-related story:

When I left a previous job, I added some code into our homepage so that for one particular user only, after one minute on the site without changing the page, it would "cornify" it. This meant that should she open the site, then go check emails, when she returned it would be covered in rainbows and unicorns, but it wouldn't be immediately obvious what triggered them (and hence, when she went to show someone, it probably wouldn't happen). There was also a built-in 1% chance per pageload that all the text on the site would be switched to color: #f0f (fuchsia).

The bad part of the story was that she showed her husband who figured it must be a virus, so they raced out and paid way too much money for Norton's or something. After that, my successor (who, like everyone else in the company, was aware of the prank) turned off the cornify action, but -- since she actually loved it so much -- left in the 1% chance of fuchsia text.

nickf
I love cornify. I actually put it on a project where it could be activated by typing in the Konami code.
GSto
+5  A: 

Why not simply add a bit of javascript (digitalBush's hotLinkr) to do any of the following:

  • cornify - This injects the cornify script from cornify.com and adds sparkle and happiness on 5 second intervals.

  • translate - Redirects to a google translated version of the site in Swahili.

  • pad - Adds 300px of padding to all divs on the page.

  • hasselhoff - Changes all images on the site to reference a picture of David Hasselhoff with puppies.

  • overlay - Overlays a transparent div on top of the entires page to prevent interaction with the site.

  • flip - Flips all images upside down on the site in IE. Flips the entire page on other browsers.

  • move - Picks a direction and moves the margin body in that direction.

  • spaz - Jiggles the body margin.

  • vroomvroom - Gives the hotlinking site an extra 20hp and 15 ft/lb of torque.

  • rickroll - Self explanatory. (If evil)

It's already been written for you. All you have to do is edit it.

Sean Vieira
+2  A: 

My favorite website practical joke has always been adding JavaScript to buttons so when you click on a button, instead of performing their actions, the button would move to the other side of the screen. Click on it again and it moves back. You can move around to several different spots.

dj_segfault
+3  A: 

redirect to http://en.wikipedia.org/wiki/Practical_joke

:)

NAVEED
+5  A: 

Just take a snapshot of the website, and substitute the entire page with just that image. People will try to click everywhere, but no chance :)

Megadix
If you could make it a gif that looked like it was rendering the page you might even catch out the odd geek.
Spence
+1  A: 

We have a comment feature on the site, and I'm looking for a fun way to prevent folks from commenting during this day of mayhem. I'm considering trying to move the "comment" button to a different location on the page when moused over, to prevent the user from ever actually clicking.

Ellie P.
What if when they press the Comment button, the site comments on them? "That's quite the hair do you have there..."
Toon Van Acker
A: 

Make every link go to a Rickroll video on Youtube! Oh the fun things that would ensue...