23 Jan

Witzige 404-Errorseite mit Nerdfaktor

Jeder Webserver sendet eine Fehlermeldung, wenn er eine verlinkte Seite nicht mehr findet. Meist erscheint dann im Browser langweilige Fehlerbeschreibung. Warum also nicht mal eine interaktive und witzige Seite entwerfen?

\"*\"

Die Fehlerseiten von Kontent sind wirklich extrem langweilig. Wenigstens blenden sie keine Werbung ein. Auf der WOW -Seite hab ich letztens ein witzige Errorseite in Form eines Zeile für Zeile erscheinenden Textes gesehen. Leider war die Präsentation eher eher öde. Ich wollte ein \“richtiges\“ altes Textterminal mit grünen Lettern haben.

Die Zutaten

Um den Effekt (wie im Beispiel) perfekt zu machen, brauchen wir drei übereinander liegende Ebenen, die wir mit DIV-Containern und verschiedenen Z-Index – Werten im Stylesheet realisieren.

  1. Den Hintergrund.
    Ein JPEG mit einem leichten Grünstich und Farbverlauf, das die komplette Seite ausfüllt und sich automatisch der Browersgröße anpasst.
  2. Den Text-Layer
    Ein DIV-Container mit Anfangstext und blinkendem Cursor in Form einer GIF-Animation.
  3. Den Raster-Layer
    Das Zeilenraster liegt über dem Text. Das Hintergrundbild dieses Layers besteht aus einem GIF, bei dem jede zweite Zeile undurchsichtig ist. Dadurch entsteht der Effekt eines Zeilenrasters, wie bei einem alten Terminal.

Die Technik

Das Terminal funktioniert mit Javascript. Nach dem Laden der Seite wird ein Timer initialisiert, der die Funktion printout() aufruft. Printout() wiederum arbeitet einen Text Buchstabe für Buchstabe ab und ruft sich dabei solange selbst solange über den Timer auf, bis es am Ende ist. Über spezielle Zeichen werden Zeilenumbrüche und Pausen realisiert. Jedes neue Zeichen wird an den letzten Textnode vom DIV-Container angefügt. Zeilenumbrüche werden als Nodes eingefügt.

\".\"

<script language=\"JavaScript\"> 
<!--//

var laber = \"*GEHEIM*#404 Page not Found\"
+\"Click ˆ *to get back#\";
var laberpos = 0;
var laberspeed = 700;
var newLINK = document.createElement(\"a\");
var newTEXT = document.createTextNode(\"HERE\");
newLINK.appendChild(newTEXT);

// initialize terminal on body.load
function initTerminal() {
setTimeout( \"printout();\" , laberspeed);
}

// Timerfunction... get next char and change contentvalue
function printout() {
var lchar = laber.charAt(laberpos);
var tcontent = document.getElementById(\'content\');
var tcursor = document.getElementById(\"cursor\")
var newLINE = document.createElement(\"br\");
var newTEXT = document.createTextNode(\"DAU@/var/www: \");
laberpos++;

if (lchar == \"#\") { // newline and 0.7 seconds delay
laberspeed = 700;
tcontent.insertBefore(newLINE, tcursor);
tcontent.insertBefore(newTEXT, tcursor);
} else if (lchar == \"*\") { // 0.8 seconds delay­
laberspeed = 800;
} else if (lchar == \"ˆ\") { // Link
tcontent.insertBefore(newLINK, tcursor);
var newTEXT = document.createTextNode(\"\");
tcontent.insertBefore(newTEXT, tcursor);
} else { // printout the next char
laberspeed = 10;
// write new content
tcontent.lastChild.previousSibling.appendData(lchar);
}

if (laberpos<laber.length) { // retimer if not last char
setTimeout( \"printout();\" , laberspeed);
}
}
//-->
</script>

Ich bin mir sicher, dass mein Verfahren nicht sehr elegant und flexibel ist. Dafür ist es aber einfach nachzuvollziehen und kurz.

Kompatibilität

Ursprünglich hatte ich einfach den Text des DIVs mit content.innerHTML ergänzt. Wenn aber das innerHTML eines Elementes ersetzt wird, dann muss es komplett neu gezeichnet werden. Während Firefox das ohne große Probleme packte, gab es beim Internet Explorer Performanceprobleme. Daher das aufwendige Einfügen neuer Zeichen und Knoten in die DOM-Struktur des Text-Layers.

Die 404-Seite funktioniert so mit allen Browsern (inklusive IE6 und Opera), sowie auf älteren Computern ohne Probleme.

Der Effekt mit dem Zeilenraster könnte noch verstärkt werden, wenn man ein PNG nimmt und mit dem Alpha-Wert der Zeilen spielt. Dadurch glühen die Buchstaben richtig. Leider beherrscht der IE6 keine Transparenz bei PNGs.

Einbinden in die eigene Homepage

Zuerst muss man herausfinden wo die Errordokumente liegen und wie sie benannt sind. Das ist je nach Provider unterschiedlich. Einfach mal mit einen FTP-Client browsen. Das folgende ZIP muss dort nur entpackt werden. Mit Bildern ist die Seite nur ca 17KB groß. Danach sollten natürlich die Texte und die Links auf die Bilder un der 404.hml angepasst werden. Aller Bilder müssen über ihren absoluten Pfad (z.B. /errosocs/cusor.gif) angesprochen werden.

\".\"

Download­­

Source, Grafik­en und CSS 404­-error.zip (12 KB, ZIP)

Links

11 Jan

Hacking Democracy

*Eigentlich bin ich kein Freund von Youtube und Konsorten. Viele Filmchen sind dumm und peinlich. Als überzeugter Feind von Wahlcomputern bin ich auf die Dokumentation „Hacking Democracy“ gestoßen. Dieser Film ist ein Muss für Leute die glauben, dass das Ergebnis von Wahlen hier nicht manipuliert werden kann.

Die preisgekrönte Doku kann auf Google-Video in voller Länge (1 Stunde 20 Minuten) betrachtet werden. Es geht um den Kampf einer amerikanischen Journalistin gegen Wahlcomputer und den lachsen Umgang mit den Ergebnissen, die Resultat der Technikgläubigkeit der Noobs sind.

Viele Fakten im Film sind echt haarsträubend. Beispielsweise, wenn der Manager eines Herstellers behauptet, die Daten auf einer Flashkarte seien nicht manipulierbar, weil die Karte keinen eigenen Prozessor hätte. Oder sein Chef bei den Republikanern mit der Aussage wirbt „Sie machen die Politik, wir besorgen Ihnen die Stimmen“.

Gegen Ende des Films wird das Anliegen nochmal sehr deutlich. Mit einfachsten Mitteln manipuliert ein Informatiker aus Berkley eine Flashkarte. Das Ergebnis, der später nicht nachweisbaren Manipulation, ist ein beliebig gefälschter Wahlausgang.

*Zumindest aufmerksamen Menschen wird nach den Film auch klar, wie Bush Präsident wurde und blieb. So dumm kann die Mehrheit der Amerikaner einfach nicht sein.

Eine letzte Anmerkung

Unabhängig von den technischen Risiken und der leichten Manipulierbarkeit von Wahlen. Für mich ist die Wahl ein sehr persönlicher Akt, bei dem der Wahlzettel wichtig ist. Durch das haptische Empfinden bei der Entgegennahme und dem Entfalten des Zettels, habe ich einen Moment, in dem ich meine Wahlentscheidung festige oder verwerfe. Ich zumindest hab auch schon ungültig gewählt oder mich im letzten Moment für eine andere Partei entschieden.