Entwicklungsblog von ZEIT ONLINE

Autoren Archiv von Thomas Jöchler

ZEITMASCHINE – responsive Such-App fürs Archiv

Von 7. November 2013 um 09:21 Uhr

Mithilfe der ZEIT ONLINE Api entwickelte Mathias Kotowski für die Firma Neofonie die Anwendung ZEITMASCHINE.

Die Anwendung ermöglicht gezielte Suchabfragen auf den umfangreichen Textbestand des Archivs von ZEIT und ZEIT ONLINE. Die Treffervisualisierung erfolgt auf einem Zeitstrahl, dessen Skala individuell eingestellt werden kann. Die App ist responsiv und touchoptimiert, sie kann somit auf unterschiedlichsten Endgeräten genutzt werden. Suchergebnisse können lokal im Browser abgespeichert werden.

Screenshot App Zeitmaschine

Facts:

Kategorien: Anwendung, API

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