Dev-Blog

Entwicklungsblog von ZEIT ONLINE

Technik hinter “100 Jahre Tour de France”

Von 7. August 2013 um 12:46 Uhr

ZEIT-ONLINE-Chefredakteur Jochen Wegner kündigte das Projekt „100 Jahre Tour de France” als einen Ausblick in die Zukunft von ZEIT ONLINE an und hat damit genau den Blickwinkel beschrieben, unter dem die Entwicklung des “Feiertagslayouts” stattfand. Es ist ein willkommenes und spannendes Experiment, jenseits der täglichen Entwicklungsarbeit an www.zeit.de große entwicklerische Schritte zu machen und neue Tools und Technologien zu erproben.

Kern des Feiertagslayouts ist das sogenannte responsive webdesign. Hinter dem Schlagwort verbirgt sich der Versuch, eine Website so zu gestalten, dass sie sowohl am riesigen 27-Zoll-Monitor als auch auf dem kleinen Smartphonedisplay funktioniert. Funktioniert heißt in diesem Fall für uns vor allem eines: Die Website ist auf allen Geräten hervorragend lesbar. Gleichzeitig haben wir im interdisziplinären Austausch zwischen Redaktion und Technik versucht, eine Einheit aus Inhalt und Webdesign zu bilden, um eine optimale Textpräsentation zu gestalten.

Reihe von Screenshot des Tour-de-France-Projekt
Ein Blick auf die verschiedenen Ausformungen von „100 Jahre Tour de France” bei unterschiedlichen Bildschirmgrößen

Diese Art des Webdesigns und natürlich die vielen kleinen und großen Features, die sich in den Datenvisualisierungen, den Bildergalerien oder auch dem Navigationskonzept verstecken, haben hohe Ansprüche an die Entwickler gestellt. „100 Jahre Tour de France” soll ja nicht nur auf möglichst vielen Geräten funktionieren, sondern auch in allen denkbaren Browsern. Dabei haben wir versucht, so wenig wie möglich vorauszusetzen und gleichzeitig jenen Geräten, die bestimmte Technologien einfach noch nicht unterstützen, mindestens eine abgespeckte Version zu präsentieren. Dies trifft beispielsweise auf die Datenvisualisierungen zu, die nicht in jedem Browser funktionieren. Nutzer mit einem solchen Browser bekommen dann etwa ein Bild statt der interaktiven Grafik angezeigt. Genauso sind wir auch beim lebenden Bild, dem großformatigen Hintergrundvideo des Radfahrers in den Alpen, vorgegangen. Allein unser Sorgenkind, der Internet Explorer 7, bekommt eine Nur-Text-Variante angeboten, da auf diesem Browser praktisch keines der Features des Feiertagslayouts funktioniert.

Testing

Um all das zu testen, waren lange Testreihen nötig. Wir erstellten dazu ein Testpad mit 50 verschiedenen, möglichst repräsentativen Fällen. Eine größere Anzahl von Testfällen wäre gut gewesen, war aber aufgrund des nicht verschiebbaren Launchtermins in der letzten Woche der Tour de France nicht realisierbar. Für jeden Testfall wurden die gleichen Testschritte hinterlegt, untergliedert in die Hauptbereiche Navigation und Kapitel 1 bis 3 mit besonderer Berücksichtigung der interaktiven und multimedialen Elemente. Die Testschritte für jedes Element definierten wir möglichst spezifisch nach korrekter Funktionsweise und Darstellung. Die Tester beurteilten bei jedem Testschritt, ob die Darstellung korrekt war oder ein Interface-Element funktionierte. Den Test machten mehrere Menschen, die gleichzeitig an verschiedenen Testfällen arbeiten konnten. So konnten viele Testfälle in relativ kurzer Zeit bearbeitet werden. Nach einem größeren Update am Prototypen wurde dann rasch ganz oder teilweise neu getestet.

Die Tests wurden an allen bei uns vorhandenen Geräten absolviert. Darüber hinaus konnten wir über den Remote-Dienst Browserstack viele physisch nicht vorhandene Betriebssystem/Browser-Kombinationen testen; insbesondere für das Testen von Windows- und Internet-Explorer-Kombinationen eine ideale Möglichkeit.

Produktion

Unser Content-Management-System Vivi haben wir für das Tour-de-France-Projekt ausnahmsweise mal ungenutzt gelassen. Stattdessen wurde Inhalt und Technik gleichberechtigt in einer Entwicklungsstrecke zusammengebracht. Das gesamte Paket ist mit Git versioniert und als private repository auf Github gehostet. Zusätzlich zu den Kerntechnologien des Netzes – HTML, CSS und Javascript – haben wir die Javascript-Bibliotheken jQuery und d3 eingesetzt. Im Vorfeld haben wir mit Python, node.js und Ruby gearbeitet. Für das CSS haben wir SASS und compass genutzt. Mithilfe des Taskmanagers grunt.js haben wir eine Entwicklungsstrecke programmiert, die den Code permanent auf Sauberkeit prüft und testet, kompiliert und zusammenfügt und letztendlich auch noch komprimiert. So ist der Code der Website immer optimiert, ohne dass die Entwickler dauernd selbst diese Prozesse auslösen müssen. Auf diese Art haben wir „100 Jahre Tour de France” kontinuierlich vom ersten Prototypen bis zur veröffentlichten Version weiterentwickelt und uns im Sinne des Experiments richtig ausgetobt.

Nico Brünjes, Leiter Frontend, und Thomas Jöchler, Leiter Entwicklungsredaktion

 

Kategorien: Entwicklung

Shortcuts für Longform

Von 18. Juli 2013 um 16:41 Uhr

Für unser am Dienstag gelaunchte Longformprojekt 100 Jahre Tour de France gibt es jetzt eine Reihe von Deeplinks zu den multimedialen Inhalten.

Hier die Liste (möglichst selbstsprechend benamst)

http://www.zeit.de/sport/tour-de-france.html#chapter-01

http://www.zeit.de/sport/tour-de-france.html#quote-helden-castillan

http://www.zeit.de/sport/tour-de-france.html#video-alpe-d-huez
http://www.zeit.de/sport/tour-de-france.html#video-dopingfall-1978
http://www.zeit.de/sport/tour-de-france.html#bilder-alpe-d-huez
http://www.zeit.de/sport/tour-de-france.html#bilder-historische-fahrraeder

http://www.zeit.de/sport/tour-de-france.html#chapter-02
http://www.zeit.de/sport/tour-de-france.html#video-bernhard-kohl
http://www.zeit.de/sport/tour-de-france.html#doping-historie
http://www.zeit.de/sport/tour-de-france.html#infografik-blutdoping
http://www.zeit.de/sport/tour-de-france.html#dopingplan-bernhard-kohl
http://www.zeit.de/sport/tour-de-france.html#bilder-bernhard-kohl

http://www.zeit.de/sport/tour-de-france.html#chapter-03
http://www.zeit.de/sport/tour-de-france.html#video-helmkamera-hobbyfahrer

http://www.zeit.de/sport/tour-de-france.html#datenvisualisierung-leistung-profi-hobbyfahrer

http://www.zeit.de/sport/tour-de-france.html#video-interview-hobbyfahrer

Kategorien: Entwicklung

Hack the newsroom!

Von 4. Juni 2013 um 11:01 Uhr

Redaktionen müssen sich täglich neu erfinden und Experimente zulassen. Sie müssen permanent im Beta-Stadium sein, denn die Lesegewohnheiten verändern sich schnell und der journalistische Markt ist umkämpft.

Weil neue Ideen oft mit technischen Anforderungen verbunden sind, ist Teamwork gefragt. Wir erleben das in der täglichen Arbeit bei ZEIT ONLINE zum Beispiel im Datenjournalismus. Hier arbeiten Journalisten mit Designern und Programmieren zusammen, jeder bringt sein Fachwissen ein, um zeitgemäßes Storytelling zu entwickeln.

Das Global Editor’s Network (GEN) fördert eine solche Herangehensweise mit der Veranstaltungsreihe Editor’s Newslabs. Teams aus Journalisten, Designern und Programmierern treten dabei in einen journalistischen Wettstreit. Die Mannschaften haben zwei Tage Zeit, zu einem vorgegebenen Thema kreative Lösungen zu finden.

Eine solche Veranstaltung des GEN-Newslab findet nun auch in Deutschland statt: Der ZEIT-ONLINE Newsroom am Askanischen Platz 1 in Berlin wird am 6. und 7. Juni der Austragungsort sein.

Das Thema dieses Hackathons lautet: Innovative use of Open Data to cover Global Development. Ein spannendes Thema, das weit auslegbar ist und viele kreative Möglichkeiten lässt. Es könnte zum Beispiel mit einem spannenden Datensatz gearbeitet werden, der internationale Entwicklung verständlich macht und Grundlage für zukünftige Entscheidungen sein kann. Denkbar wäre auch die Erarbeitung eines Konzepts, das die Gewinnung und Sammlung von internationalen Daten zum Ziel hat.

Neben dem Wettstreit ist auch das Kennenlernen und Austauschen die Redaktionsgrenzen hinweg wichtig. Zugesagt haben Teams von Spiegel/Spiegel Online, sueddeutsche.de, dpa, NDR, Deutsche Welle, Berliner Morgenpost und Rhein-Zeitung. Besonders freuen wir uns auf die Kollegen des kroatischen Teams von 24sata.hr. Am 7. Juni (Freitag) pitchen die Teilnehmer mit ihren Projekten. Hier ist interessiertes Publikum herzlich willkommen. Los gehen die 5minütigen Präsentationen um 16:30 Uhr im Veranstaltungsraum von ZEIT ONLINE.

Press Release (english)

austrai_580.jpg
Ein Team von ZEIT ONLINE hat bereits an einem ähnlichen Hackathon in Österreich teilgenommen und gewonnen. Teams von ORF, Neue Zürcher Zeitung, Der Standard, der APA und anderen ambitionierten Newsrooms befassten sich zwei Tage lang mit dem Thema Internationale Migration.

Datensätze wurde gesichtet, Wireframes skizziert und erste Prototypen programmiert. Zum Abschluss stellte jedes Team das Erarbeitete in einem Fünf-Minuten-Pitch vor. Eine Jury kürte die Sieger. Das Team von ZEIT ONLINE – Annabel Church, Paul Blickle und Sascha Venohr – kam mit den Kollegen des ORF gemeinsam auf Platz eins.

Unser Siegerbeitrag sieht vor, mit Hilfe von Facebook-Daten zu visualisieren, wie Integration in verschiedenen Staaten tatsächlich funktioniert. Der ORF überzeugte mit einer trimedialen Umsetzung regionaler Daten Österreichs. Hier gibt es alle Projekte auf einen Blick.

Mit dem Sieg verbunden war ein Preisgeld von 5.000 Euro und die Qualifikation für den globalen Final-Hackathon während des World Summit in Paris.

Auch die Gewinner des Hackathons in Berlin haben knapp zwei Wochen vor dem Weltfinale die Chance, noch nach Paris zu fahren.

Wir werden an beiden Tagen live unter dem Hashtag #EditorsLab twittern.