Bastelstunde

Es ischt mal wieder soweit: Die Studierendenparlamentswahl steht vor der Tür, und zwar vom 19. bis zum 22. Januar. Sie werden es vielleicht schon bemerkt haben.

Die akut bietet dieses Jahr zum zweiten Mal den Wahl-O-Man an – ein Wahlpositionsvergleichswerkzeug, das nicht nur vom Namen her starke Ähnlichkeit mit dem Wahl-O-Mat der bpb aufweist. Der Wahl-O-Man enthält die Positionen der 5 zur Wahl antretenden Listen zu 23 ausgesuchten Thesen und kann hier durchgespielt werden.

Nun könnte man auf die Idee kommen, die Kompatibilität der Listen untereinander zu prüfen, indem man einfach die Antworten aller Listen einträgt und prüft, wie kompatibel die zu den Antworten der restlichen Listen sind.

Bei 23 Fragen und 3 möglichen Punkten pro Frage sind bis zu 69 Punkten erreichbar. Die Kreuztabelle sieht folgendermaßen aus:

Die Skala reicht von Schwarz (0 % Übereinstimmung) über rot (20 % Übereinstimmung) bis hellgrün (100 % Übereinstimmung).

Die Farbskala reicht von schwarz (0 % Übereinstimmung) über rot (20 % Übereinstimmung) bis hellgrün (100 % Übereinstimmung).

Hinweis: Die Erläuterungen sind hier natürlich nicht mit eingeflossen.

Diese “ideologischen Abstände” voneinander (69 – Punktwert) könnte man nun noch in Form eines Graphen optisch darstellen. Leider ist dieser Graph nicht wirklich planar, sodass die Längen nicht originalgetreu abgebildet werden können und verzerrt würden.

Zufällig haben wir hier noch Klebeband, eine Schere und Plastikstrohhalme herumliegen. Was könnte man daraus nun schönes basteln? Eine 3D-Darstellung der “Abstände”!

wahloman3d-1 wahloman3d-2 wahloman3d-3 wahloman3d-4 wahloman3d-5 wahloman3d-6

Viel Spaß beim Nachbasteln.

Read More

In der Mache: Mahlowat V2

Im letzten Jahr gab es zur Studierendenparlamentswahl an der Uni Bonn erstmals den sogenannten “Wahl-O-Man”, der ein lokaler Wahl-O-Mat-Klon ist. Dieses Angebot des formidablen studentischen Magazins akut habe damals ich implementiert.

Auch in diesem Jahr wird die akut wieder einen Wahl-O-Man anbieten. Bereits jetzt möchte ich eine bestimmte Hochschulgruppe darauf hinweisen, dass ich lediglich für die technische Umsetzung des Wahl-O-Man verantwortlich bin, inhaltlich jedoch gar nichts damit zu tun habe 😉

Für dieses Jahr bin ich dabei, den “Mahlowat”, wie ich die zugrunde liegende Anwendung benannt habe, einmal komplett zu überarbeiten. Größte Neuerung wird sein, dass die zur Wahl antretenden Listen ihre Antworten nun direkt in ein Webformular eintragen dürfen – die manuelle Übertragung der Antworten aus diversen Textdokumenten in den Wahl-O-Man war im letzten Jahr das Nervigste an der ganzen Aktion.

Außerdem wurde durch ein wenig JavaScript-Hexerei umgesetzt, dass nicht mehr jede zu beantwortende These einzeln vom Server geladen werden muss, sondern alles auf einer einzelnen Seite geschieht. Die Anwendung sollte dadurch erheblich schneller sein und deutlich weniger Frustpotenzial bieten. Dennoch kann per Sprungmarke1 immer noch direkt auf einzelne Thesen verlinkt werden.

Eine große Neuerung gibt es noch beim Teilen des Wahl-O-Man-Ergebnisses: Es ist jetzt möglich, nur das Balkendiagramm in sozialen Medien zu teilen, ohne dabei direkt die eigenen Antworten zu den Thesen zu verraten. Hierzu wird das persönliche Ergebnis auf dem Server gespeichert und anhand einer eindeutigen ID identifiziert. Die geteilte Ergebnisseite enthält keine Hinweise mehr auf die gegebenen Antworten. In bestimmten Fällen ist es allerdings trotzdem möglich, aus der Übereinstimmung mit den einzelnen Listen die gegebenen Antworten zu berechnen.

Sind Sie sicher? Der Mahlowat fragt nach.

“Sind Sie sicher?” Der Mahlowat fragt nach.

Wer nicht möchte, dass seine/ihre Antworten gespeichert werden, hat nach der Bewertung aller Thesen die Möglichkeit, auf die Speicherung zu verzichten. Dann gibt es allerdings auch keine Möglichkeit, das eigene Ergebnis auf die oben beschriebene Weise zu teilen, sondern der Share-Link enthält wie bislang die eigenen Antworten in kodierter Form.

Damit nicht etwa die Server-Logs über URL-Parameter die gewählten Antworten verraten, wurde auch die Navigation komplett überarbeitet. Das hat die folgende, lustige Konstruktion zur Übergabe von Daten zum Ergebnis:

Beim Klick auf einen Link zu einer Spezialseite wird per JavaScript ein Formular in die Seite eingefügt, das als Felder die zu übertragenden Werte enthält und als action die Zielseite. Dieses Formular wird dann sofort abgesendet und die Zielseite erhält die gewünschten Werte. Da die Werte nur als POST-Parameter hin- und hergeschickt werden, tauchen sie in der Zugriffslogdatei eines handelsüblichen Apache-Servers nicht auf.

Wird also auswählt, dass die Ergebnisse nicht gespeichert werden sollen, dann werden sie auch nicht irgendwo gespeichert.

Sobald der Mahlowat fertig überarbeitet ist, wird er wieder auf GitHub zur Verfügung gestellt.

  1. Dat is dat Dingen mit dem # ↩

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. ↩