2011, technisch betrachtet

2011 ist auch – wie in den vergangenen Jahren – wieder eine Menge unter der Haube von MTB-News.de und Rennrad-News.de passiert, auch wenn man viele Dinge optisch nicht oder noch nicht bemerkt.

Ich habe mir für das vergangene Jahr mal ein paar einzelne Projekte herausgesucht, an denen wir gearbeitet haben und werde etwas aus dem Nähkästchen plaudern. Die Liste ist nicht annähernd komplett, sie sollte aber (ohne Gewähr) die wichtigsten Dinge abdecken. 2012 werde ich mir Stichpunkte machen, so dass ich euch dann auch eine komplette Liste geben kann.

Fotoalbum

Eine der auffälligsten Änderungen betrifft die Startseite des Fotoalbums. Dort sind nun an prominenter Stelle immer das „Foto des Tages“ und das „Foto der Woche“ zu sehen. Dabei ist das „Foto des Tages“ erst im Laufe dieses Jahres hinzugekommen. Es werden jeden Tag so viele qualitativ hochwertige Fotos hochgeladen, so dass wir uns entschlossen haben, die Frequenz der „Ehrung“ von guten Fotos etwas gegenüber dem bisherigen Wochentakt zu erhöhen. Zum Foto des Tages wird automatisch dasjenige gewählt, welches am meisten „Likes“ auf sich vereinen kann. Ihr bestimmt also welches das „Foto des Tages“ – und das gleich in zweierlei Hinsicht: Ihr ladet die Fotos hoch und ihr bewertet die Fotos. Das „Foto der Woche“ wird übrigens seitdem immer durch unsere Redaktion ausgewählt.

Die größte sichtbare Änderung betrifft die Foto-Einzelansicht. Wir haben uns vom vorherigen, zweispaltigen Layout verabschiedet und zeigen das Foto nun über die komplette Breite der Seite. Somit kommen die Bilder deutlich besser zu Geltung.

Die visuellen Änderungen sind die, die ihr in eurem Webbrowser direkt mitbekommt. Was „unter der Haube“ passiert, erschließt sich dem Benutzer ja nicht direkt (und es interessiert ja die meisten auch zu recht nicht…). Ich wollte an dieser Stelle noch erwähnen, dass wir im Laufe des Jahres fast die gesamte Codebasis des Fotoalbums nach und nach im laufenden Betrieb ausgetauscht haben. Es kam dabei zu erstaunlich wenig Fehlern, in den meisten Fällen dürftet ihr das nicht mal bemerkt haben. Wir sind mit dem Rewrite des Codes jetzt fast fertig, es fehlen nur noch wenige Teile (z. B. Benutzerliste und Upload-Formular).

Die Seiten des Fotoalbums sind durch den kompletten Rewrite deutlich schneller geworden, was man zum Beispiel sehr gut an der Foto-Einzelansicht sehen kann. Die alte Version benötigte auf auf dem Server knapp 200 Millisekunden zum Erstellen der Seite, nun sind es nur noch rund 50 Millisekunden – das ist immerhin viermal so schnell!

Videobereich

Der Videobereich hat einige Anpassungen im Detail erhalten. Ihr habt ja sicher mitbekommen, dass die Anzahl der Videos – und vor allem der qualitativ hochwertigen Videos – stetig zunimmt. Auch werden mittlerweile fast alle Videos auch als HD-Version angeboten. Das führte dazu, dass wir die Bandbreite für die Videoauslieferung mehrmals erhöhen mussten. Anfangs reichte uns ein Server mit 100 MBit/s zum Ausliefern aus, lediglich zu Spitzenzeiten gab es vereinzelt Probleme mit zu langsamen Streaming. Wir stellten uns dann einen zweiten Server dazu, mit welchem wir die Bandbreite verdoppeln konnten. Seit der Eurobike haben wir dann die Geschwindigkeit von 200 MBit/s auf 1,1 Gbit/s erhöht.

Winterpokal

Die größte Änderung im Winterpokal ist die 2011 neu hinzugekomme Möglichkeit, auf viele Funktionen über ein sogenanntes API zuzugreifen.

Damit ist es möglich, den Winterpokal in andere Websites zu integrieren oder auch Apps für iPhone und Co. zu bauen. Es sind einige Projekte dazu in Arbeit – ich denke zur Saison 2012/2013 wird da einiges in den AppStores zu finden sein.

Wer sich für die Details interessiert, kann sich die API-Dokumentation auf GitHub anschauen. Dort gibt es eine Referenz aller Funktionen und ausführliche Beispiele.

Wir arbeiten daran, die APIs auch für die anderen Anwendungen einzubauen.

MTB-News.de – News

Am 19. Januar ist der neue News-Bereich gestartet. Vorher haben wir eine Art Plugin für die Forensoftware „vBulletin“ genutzt, welche die Themen eines bestimmten Forums etwas anders als sonst angezeigt hat. Die News-Artikel waren Anreißertexte, welche meist ein Bild enthielten und verwiesen auf jeweils ein Thema im Forum, welches dort auch ganz normal diskutiert werden konnte.

Mit dem Ausbau des News-Bereiches war schon seit längerer Zeit klar, dass die bisherige Lösung unseren Ansprüchen nicht gerecht wird, in vielerlei Hinsicht nicht skaliert und keinerlei Anpassungsmöglichkeiten bot. Wir haben uns 2010 lange Gedanken gemacht, wie ein Relaunch der News technisch und optisch aussehen könnte. Die erste Idee war, die Software einfach selbst zu schreiben. Die Integration ins Forum wäre damit sehr einfach gewesen, die nötigen Schnittstellen zur Benutzerauthentifizierung usw. haben wir über die Jahre schon gebaut. Der Aufwand, das Content Management System (CMS) zu bauen ist aber kein trivialer und so kam Thomas irgendwann auf die Idee, einfach ein bekanntes (das bekannteste?) CMS zu nutzen und um Schnittstellen zu erweitern.

Also begannen wir, den Newsbereich mit WordPress umzusetzen.

Im Großen und Ganzen gab es drei Probleme zu lösen:

  1. Importieren aller alten News-Artikel
  2. Übernahme neuer Artikel ins Forum – die Diskussionen sollten wie gehabt dort stattfinden
  3. Kommentarfunktion im WordPress, mit der man direkt auf das Thema im Forum antworten kann

Import vorhandener Artikel

Die Forumsoftware und WordPress speichern Beiträge auf komplett verschiedene Art und Weise. Wir mussten also einen Konverter bauen, der die News-Beiträge aus dem Forum ausliest und diese im WordPress speichert, denn die Artikel sollten ja komplett über den neuen Newsbereich abrufbar sein.

Ich habe dazu einfach eine kleine Applikation in PHP geschrieben, die alle Themen aus dem Newsforum einliest und von jedem ersten Beitrag eines Themas (das ist ja der News-Artikel) einen Eintrag in der WordPress-Datenbank erzeugt. An sich kein großes Problem, würden die Beiträge im Forum bereits als HTML vorliegen. Tun sie leider nicht.

Im Forum werden Formatierungen am Text mit BBCode vorgenommen. WordPress speichert aber alles als HTML. Die Versuche, den BBCode-Parser von vBulletin in unserem Konverter zu benutzen, schlugen allesamt fehl, es tauchten an allen Ecken und Enden Probleme auf. Die Art und Weise, wie vBulletin aufgebaut ist, macht das Weiterverwenden einzelner Teile extrem schwer bis unmöglich.

Ich habe dann einfach „Trick 17“ angewendet: Ich habe mir die Seite der Themenansicht per HTTP geladen, einen DOM-Baum daraus erzeugt und das fertig gerenderte HTML des News-Artikels direkt aus dem DOM extrahiert.

Das Mappen der Benutzer-IDs und das Erstellen eines Datenbankeintrags im WordPress war dann trivial.

Übernahme neuer Artikel ins Forum

Wenn ein neuer Artikel in den News veröffentlicht wird, soll dieser automatisch ein neues Thema im Forum starten und der Artikelinhalt soll wie bisher auch im ersten Beitrag des Themas stehen.

Ich habe die selbe Applikation mit der wir die Forenbeiträge ins WordPress übernommen haben um die umgekehrte Funktionalität erweitert.

Auch hier passiert kein Voodoo, die Schwierigkeiten waren aber ziemlich ähnlich: Aus dem HTML, mit dem die Texte in WordPress strukturiert sind, galt es BBCode zu machen, so dass das Forum die Artikel halbwegs korrekt anzeigen kann.

Das Wort „halbwegs“ habe ich deshalb geschrieben, da mit BBCode nur eine Teilmenge der Möglichkeiten zur Textstrukturierung zur Verfügung steht. Bestimmte Dinge können also nicht vom WordPress ins Forum übernommen werden.

Wie konvertiert man nun HTML nach BBCode? Ich habe eine Weile überlegt, bis mir XML und XSL einfielen. Wenn man die Artikel in XHTML schreibt hat man ein syntaktisch korrektes XML-Dokument vorliegen. Und mit XSL kann man aus einem XML-Dokument so ziemlich alles bauen, was sich mit Bits darstellen lässt. Also auch BBCode.

Ich habe mir also ein simples XSL-Stylesheet gebaut, welches bestimmte Auszeichnungen des XHTML-Dokumentes in die BBCode-Entsprechungen konvertiert:

Einfacher geht’s kaum!

Das Mappen der Benutzer-IDs von WordPress nach vBulletin und das Erstellen von Beitrag und Thema im Forum war danach ähnlich trivial wie der umgekehrte Weg.

Jedes Mal wenn ein Artikel im WordPress veröffentlicht wird (oder ein bereits veröffentlichter Artikel verändert wird), erzeugen oder aktualisieren wir das entsprechende Thema im Forum.

Kommentarfunktion

WordPress bietet eine eigene Kommentarfunktion, die aber entweder anonym ist oder aber einen Account im WordPress erfordert. Beides war nicht zufriedenstellend – wir wollten, dass unsere Benutzer Beiträge direkt mit ihrem Foren-Account kommentieren können.

Wir haben dann einfach das Kommentarfeld umgebaut, so dass es direkt ans Forum abgesendet wird und nicht ans WordPress.

Hier passiert also keine Magie.

Die Anzeige der Kommentare lassen wir direkt vom vBulletin rendern und binden sie nur noch an die entsprechende Stelle im WordPress ein. Das hat den Vorteil, dass sich vBulletin schon um Behandlung von gelöschten oder nicht freigeschalteten Beiträgen kümmert.

Rennrad-News.de – Forum

Die Änderung mit dem größten Impact auf Benutzerseite ist wohl der Wechsel der Forensoftware bei Rennrad-News.de gewesen. Vergleichbar sicher mit einer Herztransplantation.

Die bisher bei Rennrad-News.de verwendete Forensoftware vBulletin ist im Kern über zehn Jahre alt und das spürt man auch an allen Ecken und Enden. Moderne Software wird einfach anders gebaut und bringt auch nicht mehr die Nachteile von Brocken wie vBulletin mit, was Übersichtlichkeit, Wartbarkeit und auch Performance angeht.

Wir haben uns nach längeren Tests dazu entschieden, ab sofort XenForo als Herzstück von Rennrad-News.de einzusetzen. Die Übernahme der Daten von vBulletin klappte fast ausnahmslos (die Interessengemeinschaften werden wir nachliefern, sobald XenForo Unterstützung dafür bietet), wir mussten das Forum am Tage des Software-Wechsels nur knapp acht Stunden offline nehmen. Es wäre sogar noch schneller gegangen, wenn nicht noch ein Fehler in einem selbst geschriebenen Modul aufgetreten wäre.

Ein für uns sehr wichtiger Punkt ist das Thema Single Sign-On – mit dem Einloggen ins Forum stehen alle Dienste von Rennrad-News.de (oder MTB-News.de) zur Verfügung, ohne dass man sich noch mal gesondert einloggen müsste. Da wir unsere Dienste auf verschiedene Server an verschiedenen Standorten hosten, brauchten wir eine robuste Möglichkeit, Benutzer von jedem beliebigen Server gegen die Benutzerdatenbank des Forums zu authentifizieren. Wir haben uns für die vBulletin-Installationen eine eigene Web-Applikation gebaut, welche ein HTTPS-API zur Authentifizierung von Benutzern zur Verfügung stellt.

Mit XenForo ist das alles einfacher geworden – wir brauchen die gesonderte Web-Applikation nicht mehr, da es sehr einfach ist, solche Funktionalitäten direkt als XenForo-Modul zu implementieren.

Technisch gesehen war der Umstieg ein riesiger Fortschritt und auch auf Benutzerseite gibt es viele neue Funktionen und Vereinfachungen. Wir planen, MTB-News.de auch auf XenForo zu migrieren, hierfür müssen aber noch viele Abhängigkeiten aufgelöst werden, so dass ihr sicher noch ein klein bisschen mit der aktuellen Forensoftware vorlieb nehmen müsst.

Rennrad-News.de – einheitlicher Seitenkopf

Zeitgleich mit der Umstellung der Forensoftware haben wir auf Rennrad-News.de einen einheitlichen Header eingebaut. Dieser wird jetzt auf allen Seiten benutzt und ermöglicht eine einfach Navigation durch die verschiedenen Bereiche.

Um nicht jede Anwendung einzeln anfassen zu müssen wenn sich mal ein Link im Header ändert oder ein neuer Link hinzukommt, habe ich mir ein System überlegt, mit dem ich den Header gleichzeitig in allen Anwendungen aktualisieren kann. Die technische Umsetzung erkläre ich mal in einem anderen Artikel – es lässt sich wohl am besten mit „die simplen Ideen sind meist die besten“ zusammenfassen.

Keine Frage, dass ein einheitlicher Seitenkopf auch bei MTB-News.de eingeführt wird. Wir arbeiten bereits daran!

Fazit

Es ist wieder eine Menge passiert – vieles sichtbar, vieles aber auch „unter der Haube“. Und 2012 wird noch mehr passieren, die ToDo-Listen und das Ticketsystem sind voll bis Anschlag :)

Ich freue mich auf 2012!

13 Gedanken zu „2011, technisch betrachtet

  1. Sehr interessanter Beitrag! Da erwähnt wurde, dass viele Biker keine Ahnung vom Programmieren haben, wollte ich mich mal zu Wort melden und Fragen, ob ihr auf diesem Gebiet vielleicht Verstärkung sucht :)
    Ich bin immer auf der Suche nach neuen Aufgaben, auch wenn ich derzeit „nur“ Student bin :P

    Grüße

  2. Gibt es dieses Jahr kein Statistikvergleich zum letzten Jahr. Die Informationen waren mal was neues, hatte mich aber schon seit ein paar Tagen auf Zahlen gefreut.

  3. Schöner Artikel. Warum fiel denn die Wahl auf XenForo? Warum nicht Burning Board oder IP.Board?

  4. @moepmoep Auch Burning Board und IP.Board entstammen ungefähr der gleichen Zeit wie vBulletin und schleppen beide eine Menge Altlasten mit sich rum (wobei sich Burning Board doch recht gut entwickelt hat, die haben ihre gesamte Codebasis nach und nach auch recht modern gemacht).

    XenForo ist die erste Forensoftware, die sich traut, Dinge anders zu machen als alle anderen. Viele Ansätze sind sehr modern (z. B. „Follower“-Prinzip statt „Freunde“). Das und die wirklich erstklassige technische Architektur und Umsetzung lassen in meinen Augen eigentlich nicht viel Alternativen übrig.

    Fast alle Boards da draußen sind immer mehr oder weniger eine vBulletin-Kopie, XenForo ist IMHO die erste Software, die damit bricht und Dinge anders macht. Das bringt natürlich auch Schwierigkeiten mit sich, weil sich die Benutzer umgewöhnen müssen, das ist es aber unserer Meinung absolut wert.

    Anekdote am Rande: Kier Darby, der Chefentwickler von XenForo war damals auch Chefentwickler von vBulletin. Er hat die Firma, die vBulletin produziert nach einem Verkauf an einen Investor verlassen – die Perspektive dort war nicht sehr berauschend. Was er meinte, sieht man sehr gut an vBulletin 4… in meinen Augen ein ziemlicher Griff ins Klo.

  5. Hallo, mir gefällt Euro Seiten wirklich gut, andererseits wundere ich mich wie viele LSO Cookies und andere Überbleipsel auf meinem Computer zurückbleiben, daher frage ich mich, warum das so ist und welche Daten Ihr sammelt

  6. Spannend, gerade auch für mich als Mod, der zwar ein bisschen hinter die Kulissen sehen kann, aber von dem ganzen „Maschinenraum“ null Ahnung hat. Nur gut, dass Thomas und Du sich darum kümmern, ich wäre mit diesem Kram völlig überfordert.

  7. Welches WP-Plugin / Theme habt ihr für die Startseite mit den wechselnden Fototeasern verwendet? Gefällt mir sehr gut und find toll, dass ihr ein bisschen IT-Technik verratet. Dein XSL-Stylesheet würde mich auch näher interessieren. Stellst Du es als Open Source unter CC zur Verfügung?

  8. Das Stylesheet kannst du gerne benutzen, es steht unter der MIT-License.

    Zum WordPress-Theme kann Thomas ja vielleicht kurz was sagen…

  9. Ja wäre nett, wenn Thomas noch ein paar Infos zum Theme bereitstellen würde. Danke schon mal!

  10. Ist denn schon klar, wann der Winterpokal 2012/13 starten wird? Würde gerne eine Android App entwickeln, die dann gleich zum Start bereit wäre :)

  11. Hallo @famalgosner,

    der Winterpokal startet am 5. November 2012. Wir werden vorher einen Server für App-Entwickler aufsetzen, mit dem ihr die API-Funktionen auch schon vorher nutzen könnt.

    Klingt das ok für dich?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.