{"id":335,"date":"2013-08-07T12:46:19","date_gmt":"2013-08-07T10:46:19","guid":{"rendered":"http:\/\/blog.zeit.de\/dev\/?p=335"},"modified":"2015-09-14T08:50:52","modified_gmt":"2015-09-14T06:50:52","slug":"technik-100-jahre-tour-de-france","status":"publish","type":"post","link":"https:\/\/blog.zeit.de\/dev\/technik-100-jahre-tour-de-france\/","title":{"rendered":"Technik hinter „100 Jahre Tour de France“"},"content":{"rendered":"

ZEIT-ONLINE-Chefredakteur Jochen Wegner k\u00fcndigte das Projekt \u201e100 Jahre Tour de France<\/a>\u201d als einen Ausblick in die Zukunft von ZEIT ONLINE<\/a> 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\u00e4glichen Entwicklungsarbeit an www.zeit.de<\/a> gro\u00dfe entwicklerische Schritte zu machen und neue Tools und Technologien zu erproben.<\/p>\n

Kern des Feiertagslayouts ist das sogenannte responsive webdesign<\/em>.\u00a0Hinter 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\u00dft in diesem Fall f\u00fcr uns vor allem eines: Die Website ist auf allen Ger\u00e4ten hervorragend lesbar. Gleichzeitig haben wir im interdisziplin\u00e4ren Austausch zwischen Redaktion und Technik versucht, eine Einheit aus Inhalt und Webdesign zu bilden, um eine optimale Textpr\u00e4sentation zu gestalten.<\/p>\n

\"Reihe
\nEin Blick auf die verschiedenen Ausformungen von \u201e100 Jahre Tour de France\u201d bei unterschiedlichen Bildschirmgr\u00f6\u00dfen<\/p>\n

Diese Art des Webdesigns und nat\u00fcrlich die vielen kleinen und gro\u00dfen Features<\/em>, die sich in den Datenvisualisierungen, den Bildergalerien oder auch dem Navigationskonzept verstecken, haben hohe Anspr\u00fcche an die Entwickler gestellt. \u201e100 Jahre Tour de France\u201d soll ja nicht nur auf m\u00f6glichst vielen Ger\u00e4ten funktionieren, sondern auch in allen denkbaren Browsern. Dabei haben wir versucht, so wenig wie m\u00f6glich vorauszusetzen und gleichzeitig jenen Ger\u00e4ten, die bestimmte Technologien einfach noch nicht unterst\u00fctzen, mindestens eine abgespeckte Version zu pr\u00e4sentieren. 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<\/em><\/a>, dem gro\u00dfformatigen 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.<\/p>\n

Testing<\/strong><\/p>\n

Um all das zu testen, waren lange Testreihen n\u00f6tig. Wir erstellten dazu ein\u00a0Testpad<\/a> mit 50 verschiedenen, m\u00f6glichst repr\u00e4sentativen F\u00e4llen. Eine gr\u00f6\u00dfere Anzahl von Testf\u00e4llen w\u00e4re gut gewesen, war aber aufgrund des nicht verschiebbaren Launchtermins in der letzten Woche der Tour de France nicht realisierbar. F\u00fcr jeden Testfall wurden die gleichen Testschritte hinterlegt, untergliedert in die Hauptbereiche Navigation und Kapitel 1 bis 3 mit besonderer Ber\u00fccksichtigung der interaktiven und multimedialen Elemente. Die Testschritte f\u00fcr jedes Element definierten wir m\u00f6glichst 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\u00e4llen arbeiten konnten. So konnten viele Testf\u00e4lle in relativ kurzer Zeit bearbeitet werden. Nach einem gr\u00f6\u00dferen Update am Prototypen wurde dann rasch ganz oder teilweise neu getestet.<\/p>\n

Die Tests wurden an allen bei uns vorhandenen Ger\u00e4ten absolviert. Dar\u00fcber hinaus konnten wir \u00fcber den Remote-Dienst Browserstack<\/a> viele physisch nicht vorhandene Betriebssystem\/Browser-Kombinationen testen; insbesondere f\u00fcr das Testen von Windows- und Internet-Explorer-Kombinationen eine ideale M\u00f6glichkeit.<\/p>\n

Produktion<\/strong><\/p>\n

Unser Content-Management-System Vivi<\/em> haben wir f\u00fcr 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<\/em> auf Github<\/a> gehostet. Zus\u00e4tzlich zu den Kerntechnologien des Netzes \u2013 HTML, CSS und Javascript \u2013 haben wir die Javascript-Bibliotheken jQuery<\/a> und d3<\/a> eingesetzt. Im Vorfeld haben wir mit Python, node.js und Ruby gearbeitet. F\u00fcr das CSS haben wir SASS<\/a> und compass<\/a> genutzt. Mithilfe des Taskmanagers grunt.js<\/a> haben wir eine Entwicklungsstrecke programmiert, die den Code permanent auf Sauberkeit pr\u00fcft und testet, kompiliert und zusammenf\u00fcgt und letztendlich auch noch komprimiert. So ist der Code der Website immer optimiert, ohne dass die Entwickler dauernd selbst diese Prozesse ausl\u00f6sen m\u00fcssen. Auf diese Art haben wir \u201e100 Jahre Tour de France\u201d kontinuierlich vom ersten Prototypen bis zur ver\u00f6ffentlichten Version weiterentwickelt und uns im Sinne des Experiments richtig ausgetobt<\/em>.<\/p>\n

Nico Br\u00fcnjes, Leiter Frontend, und Thomas J\u00f6chler, Leiter Entwicklungsredaktion<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

ZEIT-ONLINE-Chefredakteur Jochen Wegner k\u00fcndigte das Projekt \u201e100 Jahre Tour de France\u201d 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\u00e4glichen Entwicklungsarbeit an www.zeit.de gro\u00dfe entwicklerische Schritte zu machen und neue […]<\/p>\n","protected":false},"author":388,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[16],"tags":[],"class_list":["post-335","post","type-post","status-publish","format-standard","hentry","category-allgemein"],"yoast_head":"\nTechnik hinter "100 Jahre Tour de France" - Dev-Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.zeit.de\/dev\/technik-100-jahre-tour-de-france\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Technik hinter "100 Jahre Tour de France" - Dev-Blog\" \/>\n<meta property=\"og:description\" content=\"ZEIT-ONLINE-Chefredakteur Jochen Wegner k\u00fcndigte das Projekt \u201e100 Jahre Tour de France\u201d 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\u00e4glichen Entwicklungsarbeit an www.zeit.de gro\u00dfe entwicklerische Schritte zu machen und neue […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blog.zeit.de\/dev\/technik-100-jahre-tour-de-france\/\" \/>\n<meta property=\"og:site_name\" content=\"Dev-Blog\" \/>\n<meta property=\"article:published_time\" content=\"2013-08-07T10:46:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-09-14T06:50:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/dl.dropboxusercontent.com\/u\/1607439\/Screenshots\/longform-versions.jpg\" \/>\n<meta name=\"author\" content=\"Thomas J\u00f6chler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Geschrieben von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thomas J\u00f6chler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"3\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.zeit.de\/dev\/technik-100-jahre-tour-de-france\/\",\"url\":\"https:\/\/blog.zeit.de\/dev\/technik-100-jahre-tour-de-france\/\",\"name\":\"Technik hinter \\\"100 Jahre Tour de France\\\" - Dev-Blog\",\"isPartOf\":{\"@id\":\"https:\/\/blog.zeit.de\/dev\/#website\"},\"datePublished\":\"2013-08-07T10:46:19+00:00\",\"dateModified\":\"2015-09-14T06:50:52+00:00\",\"author\":{\"@id\":\"https:\/\/blog.zeit.de\/dev\/#\/schema\/person\/f9ec9352c2d080d59360c94b16e31028\"},\"breadcrumb\":{\"@id\":\"https:\/\/blog.zeit.de\/dev\/technik-100-jahre-tour-de-france\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.zeit.de\/dev\/technik-100-jahre-tour-de-france\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.zeit.de\/dev\/technik-100-jahre-tour-de-france\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\/\/blog.zeit.de\/dev\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Technik hinter „100 Jahre Tour de France“\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.zeit.de\/dev\/#website\",\"url\":\"https:\/\/blog.zeit.de\/dev\/\",\"name\":\"Dev-Blog\",\"description\":\"Entwicklungsblog von ZEIT ONLINE\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.zeit.de\/dev\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blog.zeit.de\/dev\/#\/schema\/person\/f9ec9352c2d080d59360c94b16e31028\",\"name\":\"Thomas J\u00f6chler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/blog.zeit.de\/dev\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/23ae35ba535fad85e699abf20da35be178d208d3fd164bc36a5f9202e9926513?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/23ae35ba535fad85e699abf20da35be178d208d3fd164bc36a5f9202e9926513?s=96&d=mm&r=g\",\"caption\":\"Thomas J\u00f6chler\"},\"url\":\"https:\/\/blog.zeit.de\/dev\/author\/tjoechler\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Technik hinter \"100 Jahre Tour de France\" - Dev-Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blog.zeit.de\/dev\/technik-100-jahre-tour-de-france\/","og_locale":"de_DE","og_type":"article","og_title":"Technik hinter \"100 Jahre Tour de France\" - Dev-Blog","og_description":"ZEIT-ONLINE-Chefredakteur Jochen Wegner k\u00fcndigte das Projekt \u201e100 Jahre Tour de France\u201d 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\u00e4glichen Entwicklungsarbeit an www.zeit.de gro\u00dfe entwicklerische Schritte zu machen und neue […]","og_url":"https:\/\/blog.zeit.de\/dev\/technik-100-jahre-tour-de-france\/","og_site_name":"Dev-Blog","article_published_time":"2013-08-07T10:46:19+00:00","article_modified_time":"2015-09-14T06:50:52+00:00","og_image":[{"url":"https:\/\/dl.dropboxusercontent.com\/u\/1607439\/Screenshots\/longform-versions.jpg"}],"author":"Thomas J\u00f6chler","twitter_card":"summary_large_image","twitter_misc":{"Geschrieben von":"Thomas J\u00f6chler","Gesch\u00e4tzte Lesezeit":"3\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.zeit.de\/dev\/technik-100-jahre-tour-de-france\/","url":"https:\/\/blog.zeit.de\/dev\/technik-100-jahre-tour-de-france\/","name":"Technik hinter \"100 Jahre Tour de France\" - Dev-Blog","isPartOf":{"@id":"https:\/\/blog.zeit.de\/dev\/#website"},"datePublished":"2013-08-07T10:46:19+00:00","dateModified":"2015-09-14T06:50:52+00:00","author":{"@id":"https:\/\/blog.zeit.de\/dev\/#\/schema\/person\/f9ec9352c2d080d59360c94b16e31028"},"breadcrumb":{"@id":"https:\/\/blog.zeit.de\/dev\/technik-100-jahre-tour-de-france\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.zeit.de\/dev\/technik-100-jahre-tour-de-france\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/blog.zeit.de\/dev\/technik-100-jahre-tour-de-france\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/blog.zeit.de\/dev\/"},{"@type":"ListItem","position":2,"name":"Technik hinter „100 Jahre Tour de France“"}]},{"@type":"WebSite","@id":"https:\/\/blog.zeit.de\/dev\/#website","url":"https:\/\/blog.zeit.de\/dev\/","name":"Dev-Blog","description":"Entwicklungsblog von ZEIT ONLINE","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.zeit.de\/dev\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/blog.zeit.de\/dev\/#\/schema\/person\/f9ec9352c2d080d59360c94b16e31028","name":"Thomas J\u00f6chler","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/blog.zeit.de\/dev\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/23ae35ba535fad85e699abf20da35be178d208d3fd164bc36a5f9202e9926513?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/23ae35ba535fad85e699abf20da35be178d208d3fd164bc36a5f9202e9926513?s=96&d=mm&r=g","caption":"Thomas J\u00f6chler"},"url":"https:\/\/blog.zeit.de\/dev\/author\/tjoechler\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blog.zeit.de\/dev\/wp-json\/wp\/v2\/posts\/335","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.zeit.de\/dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.zeit.de\/dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.zeit.de\/dev\/wp-json\/wp\/v2\/users\/388"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.zeit.de\/dev\/wp-json\/wp\/v2\/comments?post=335"}],"version-history":[{"count":13,"href":"https:\/\/blog.zeit.de\/dev\/wp-json\/wp\/v2\/posts\/335\/revisions"}],"predecessor-version":[{"id":644,"href":"https:\/\/blog.zeit.de\/dev\/wp-json\/wp\/v2\/posts\/335\/revisions\/644"}],"wp:attachment":[{"href":"https:\/\/blog.zeit.de\/dev\/wp-json\/wp\/v2\/media?parent=335"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.zeit.de\/dev\/wp-json\/wp\/v2\/categories?post=335"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.zeit.de\/dev\/wp-json\/wp\/v2\/tags?post=335"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}