Departures

...und leider hat der Abfahrtsplan am Busbahnhof keinen Touchscreen, sonst hätte man beim Warten ja eben mal den Browser reparieren können

kino.to

...heute heißt es zur Abwechslung mal nicht "die Kriminalpolizei rät" sondern "ich rate der Kriminalpolizei" - und zwar zu einer hübscheren Defacement-Seite, wenn die schon irgendwelche Domains wegen Urheberrechtsschutzdings hops nehmen müssen. Dieser Artikel versteht sich also als kleiner Ratgeber in Sachen Webdesign. Aber worum geht es eigentlich? OK, fangen wir vorne an: Im Spiegel ist zu lesen, daß die Betreiber von kino.to festgenommen wurden, es gab Razzien, die Domain kino.to wurde beschlagnahmt und entsprechend fand man dort heute nur noch einen kleinen Hinweistext der Polizei (siehe auch im lawblog), der in etwa so aussieht:


Leider sieht das HTML hinter diesem Text ganz furchtbar aus: Kein doctype und dann auch noch Tabellendesign, das die Schrift in die Mitte rücken soll, was es aber nicht immer verlässlich tut. Kleiner Tip: CSS. Und mit einer serifenlosen Schrift sieht das ganze gleich viel besser aus:


Da der durchschnittliche kino.to-Besucher auf der Seite wahrscheinlich Multimedia erwartet hat, sollte man m.E. diese Erwartung auch nicht enttäuschen. Ich hab hier mal das Intro der Serie "Cops" reingepackt, ein kleiner Kripo-Promo-Film tut es aber bestimmt auch:


"Bad boys, bad boys, whatcha gonna do? Whatcha gonna do whatcha gonna do when they come for you?" - das ist doch schick! So, jetzt verleihen wir der Sache noch ein bisschen Klasse durch andere Fonts. Dank Google Webfonts gibt es ja kaum Grenzen mehr. Und wir wissen schließlich: Je mehr verschiedene Fonts, desto besser:


Damit aber nicht genug! Was ein ordentliches defacement sein will, muß mit der Zeit gehen und mindestens auf ein Meme eingehen. Nyan Cat geht immer und ein animiertes GIF als Hintergrundbild hat auch noch keinem geschadet:


Jetzt muß für den Wiedererkennungswert nur noch ein ordentlicher Header her. Und in Richtung JavaScript haben wir auch noch viel zu wenig gedacht. Wir basteln uns also einen mit mootools animierten Header, Wölkchen sind doch schön. Die Schrift muß im ganzen noch etwas größer und roter und unten ist noch Platz für ein Foto einer Dienstmarke (gibts bei Wikipedia) - das lässt die ganze Seite viel offizieller erscheinen. Tada!


Na? War das denn so schwer?

(erstes Bild: Screenshotausschnitt kino.to vom 8.6.2011)

contentEditable

...heute mal aus der Reihe "Dinge, die ich so bisher noch nie wirklich benutzt habe": Das contentEditable-Attribut. In eigentlich allen neuen Browsern ist auch "ein rich-text-Editor eingebaut" (in der Gecko-Engine heißt das Ding "Midas") - man kennt diese meist aus CMSystemen, die oft js-Editoren wie den fckeditor verwenden. Man kann die API für den im Browser eingebauten Editor natürlich auch selber ansprechen.
Ich habe dazu mal eine kleine Demo gebaut, die den Text in einem DIV-Tag mit dem Attribut contentEditable zum Bearbeiten freischaltet. (Die alternative Möglichkeit ist, das ganze Dokument mit designMode=on bearbeitbar zu machen).
Über das DHTML-Kommando document.execCommand (die Liste der möglichen Kommandos findet man auf mozilla.org) kann der markierte Text dann entsprechend verändert werden.
Unter 'Resultat' zeigt die Demo nach dem Abschicken des bearbeiteten Textes, was dann beim Server ankommt. Einfach mal mit verschiedenen Browsern ausprobieren und in den Quelltext schauen.
Um mal ein bisschen hinter die Kulissen zu blicken sicherlich so weit ganz interessant, für den tatsächlichen Einsatz lohnt es sich aber, einen fertigen Editor zu verwenden und evtl. nach den eigenen Bedürfnissen anzupassen. Mir gefällt insbesondere TinyMCE von Moxiecode, da er sich sehr leicht integrieren und konfigurieren läßt.