Der Wahl-O-Man lebt!

Heute nun kommt das womöglich am längsten andauernde Softwareprojekt meiner noch relativ jungen Entwicklerkarriere zu seinem glorreichen Ende und wird auf die Öffentlichkeit losgelassen: Der Wahl-O-Man.

Wahl-O-Man

Gezeichnet hat diesen jungen Herrn übrigens Valerie Esch.

 Worum geht es?

Natürlich geht es wieder um die Wahl zum XXXVI. Studierenenparlament der Uni Bonn. Bereits am 10. Juli 2013 wurde im SP ein Antrag verabschiedet, der die akut mit… nun ja, der Entwicklung eines Konzepts, das in einem Antrag münden… Also letztendlich wussten die Parlamentarier nicht, wen sie überhaupt womit genau beauftragen wollten. Am Ende jedoch, das stand fest, sollte ein dem Wahl-O-Mat der bpb ähnliches Teil stehen, mit dem man sich seine Lieblings-Liste zur Wahl auswürfeln lassen kann.

Die akut übernahm die ganze Sache dann.

Inhaltlich wurde das Projekt von einer Arbeitsgruppe innerhalb der akut-Redaktion vorangetrieben, Thesen wurden gesammelt (auch von den zur Wahl antretenden Listen), sprachlich schön geschliffen, dann den Listen zugeleitet und ausgewertet. Diese Arbeitsgruppe hat sich auch den wohlklingenden Namen ausgedacht.

Die technische Umsetzung des Wahl-O-Man hingegen habe ich an mich gerissen übernommen, weil es mich gereizt hat. Woraus baut man einen Wahl-O-Man?

Bootstrap

Bootstrap ist ein von Twitter entwickeltes Framework, mit dem man sich halbwegs hübsche Webseiten quasi zusammenstöpseln kann. Das ganze besteht aus wenig HTML, viel CSS, und falls man noch Effekthascherei dazu haben will (au ja!) etwas JavaScript. Der Wahl-O-Man verwendet noch Bootstrap 2.3.2, wie es bereits beim Liveticker der Fall war. Ich konnte sogar teilweise Teile des Tickers recyceln, was sehr hilfreich war.

PHP-Internals

Hübsche Einzelseiten alleine machen noch keinen Wahl-O-Man. Das eigentliche Programm ist in PHP geschrieben, wie auch schon der Liveticker. Code reuse gab’s auch hier. Eine Datenbank wird für den Wahl-O-Man allerdings nicht benötigt.

Die einzelnen Antworten und Gewichtungen des Benutzers werden in PHP-Session-Variablen gespeichert und am Ende mit den vorgegebenen Antwortvektoren der Listen verglichen – wie die Punktzahl im Detail berechnet wird, habe ich bereits in einem älteren Artikel beschrieben. Die Interaktion mit dem Benutzer ist größtenteils eine reine GET-POST-Orgie.

Volkszählung

Natürlich möchte man auch wissen, wie viele Personen denn das spannende Listensortierspiel spielen. Hierzu wird in einer internen Variable gespeichert, wie oft eine IP-Adresse den Wahl-O-Man “durchgespielt” hat. Die IP-Adresse wird dabei nicht direkt gespeichert, sondern nur ein mit der PHP-Funktion crypt erzeugter Hashwert, der mit einem zufälligen String gesalzen wird, der täglich durch einen neuen ersetzt wird. Somit sollten sich aus den Statistikdaten nicht einmal mehr die IP-Adressen der Besucher rekonstruieren lassen1. In der Auswertung bekommt man pro Tag angezeigt, wie viele Adressen den Wahl-O-Man aufgerufen haben und wie oft er insgesamt aufgerufen wurde.

OpenGraph

Wir sind hip, wir sind cool, wir wollen auch ordentlich auf Facebook geteilt werden können. Dazu habe ich heute noch OpenGraph-Metadaten in die Startseite eingebaut. Das Problem mit Facebook ist allerdings, dass es eine einmal eingegebene URL im Cache speichert und dann Änderungen an den OG-Tags keine Auswirkungen mehr haben.

Abhilfe schafft hier der “Debugger” von Facebook, dem man eine URL übergeben kann, die er dann neu lädt und untersucht. Und Holladiewaldfee, es klappt!

2-Klick-Tweet-und-Share-Buttons

Wo ich gerade dabei war wollte ich noch versuchen, Tweet- und Share-Buttons zu integrieren. Allerdings mit 2-Klick-Lösung, wie sie zum Beispiel bei heise.de zum Einsatz kommt. Das entsprechende Heise-Plugin ist allerdings schon zwei Jahre alt, und so funktionierte lediglich der Twitter-Button anstandslos: Beim Aktivieren des Facebook-Buttons wurde zwar etwas nachgeladen, aber das Feld blieb leer. Das Teilen über Google+ schlug stets fehl und eine ganz und gar nicht hilfreiche Hilfeseite öffnete sich.

Etwas Abhilfe konnte ich mit Hilfe des entsprechenden WordPress-Plugins schaffen: Nach einiger Handarbeit lässt sich nun auch der Facebook-Knopf blicken.

Wo kann man dieses Meisterwerk deutscher Ingenieurskunst nun bewundern?

Haha. Ha. Aber den Wahl-O-Man gibt’s ab sofort, unverzüglich, hier.

  1. Was der Server hingegen so alles von sich aus speichert, weiß ich jetzt spontan nicht.

delaycommentsz

Der fromme Wunsch

Man besitzt so ein WordPress-Blogdings und will, dass die Besucherinnen und Besucher die Texte erst lesen, bevor sie ihre Meinung in den Kommentaren kundtun.

Die Idee

Das Kommentarfeld bleibt eine gewisse Zeit ausgeblendet und wird erst nach, sagen wir, 2 Minuten sichtbar. Wer ob der frivolen Überschrift erbost ist und seiner Empörung direkt in den Kommentaren Luft machen will, ohne den eigentlichen Text gelesen zu haben, wird dadurch ausgebremst.

So etwas gibt es schon. Ich bin mir sicher, dazu etwas auf heise.de oder so gelesen zu haben. Leider konnte ich das Plugin nicht mehr finden.

Die Umsetzung

Folgender JavaScript-Code wird direkt unter das Kommentarformular gesetzt:

<!-- delaycommentz -->
<script type='text/javascript'>
    //hide comment field
    document.getElementById('respond').style.display='none';

    // wait x milliseconds
    //then show it again
    var delay = 120;
    var refresh_auto = window.setInterval('showComments()', delay*1000);

    function showComments(){
        document.getElementById('respond').style.display='block';
    }
</script>
<!-- /delaycommentz -->

Das Formular, das die ID “respond” besitzt, wird direkt ausgeblendet und erst nach 120 Sekunden wieder eingeblendet.

Praktischerweise kann man das ganze auch sehr einfach als WordPress-Plugin mit dem wohlklingenden Namen “delaycommentsz” umsetzen:

dl

 

Die Installation ist denkbar einfach:

  1. zip-Datei entpacken
  2. Ordner auf den Server nach ‘/wp-content/plugins’ hochladen
  3. Das Plugin ‘delaycommentsz’ im Adminbereich aktivieren

In den Einstellungen kann man die Verzögerung dann sogar noch sekundengenau einstellen.

Einstellungsdialog von delaycommentsz

Einstellungsdialog von delaycommentsz

Mehr Ideen

  • Man könnte die Wartezeit abhängig von der Textlänge machen.
  • Dann könnte man eine Mindest- und eine Höchstwartezeit festlegen.
  • Und die Funktion nur für einzelne Artikel aktivieren.

Alles machbar, je nach Lust und Laune und Bedarf.

Falls jemand das ursprüngliche Plugin kennt und einen Link dazu hat, immer her damit.