Entwicklungsblog von ZEIT ONLINE
Kategorie:

Entwicklung

Einstieg ins Programmieren für Jugendliche mit Python und Blender

Von 12. September 2013 um 10:34 Uhr

ZEIT ONLINE war am vergangenen Wochenende im Veranstaltungsraum der Berliner Redaktion Gastgeber für den vom Python Software Verband (PySV) veranstalteten Workshop “Pymove3D Python Kurs Für Einsteiger”, der sich an Jugendliche im Alter von 13 bis 21 Jahren richtete.

schueler_programmier_workshop_zeit-online

Im ersten Teil wurden allgemeine Programmiergrundlagen vermittelt: Variablen, Datentypen, Operatoren, For-Schleifen, If-Bedingungen, Funktionen. Python – übrigens auch eine Programmiersprache für zentrale Dienste der ZEIT ONLINE Architektur – gilt als eine aufgrund ihrer eleganten Syntax einfach zu erlernende Sprache. Zudem ist Python eine gute Wahl für einen Einsteiger-Workshop, weil die Schnittstellen zum 3D-Renderingprogramm Blender Python verstehen. So ist es möglich, einfache Blender-Objekte (sichtbar als einfache geometrische Figuren) programmatisch zu erstellen, zu bewegen oder einzufärben. Auf diese Weise konnten dann im zweiten Teil des Workshops die im ersten Teil erworbenen Grundlagen praktisch und anschaulich angewendet werden.

Bildschirmfoto 2013-09-12 um 10.27.34

Wie schon Python eignet sich Blender sowohl zum Lernen auf einfachem Niveau als auch für den professionellen Einsatz. Davon konnten sich die Teilnehmer einen Eindruck verschaffen, indem zwischendurch zur Auflockerung der ohnehin schon lockeren Atmosphäre Filme gezeigt wurden, die mit Blender produziert wurden.


Tears of Steel – Blender Foundation’s fourth short Open Movie


Big Buck Bunny

Die Teilnehmer zeigten sich anschließend sehr zufrieden mit dem Wochenende; gerade auch, weil der Workshop eine praxisnahe Ergänzung zum Informatikunterricht in der Schule darstellte. Stefania Trabucchi, Peter Koppatz und Joren Retel vom PySV sowie Ron Drongowski und Thomas Baumann von ZEIT ONLINE bedauerten, dass sich für den Workshop keine Teilnehmerinnen angemeldet hatten.

Wer nicht dabei sein konnte oder nach Lesen dieses Berichts neugierig geworden ist, kann sich auf der Webseite zum Workshop über die Python-Grundlagen und das Zusammenspiel von Python und Blender informieren.

Der nächste Workshop dieser Art soll voraussichtlich im Oktober bei ZEIT ONLINE in Hamburg veranstaltet werden. Der genaue Termin wird, sobald bekannt, hier im Artikel und bei uns auf Twitter bekanntgegeben. Über die Anmeldung insbesondere auch von Mädchen und jungen Frauen würden sich Veranstalter und Gastgeber sehr freuen.

Weitere Informationen:

Hacks / Hackers Meetup #11 at ZEIT ONLINE Newsroom

Von 22. August 2013 um 13:37 Uhr

Our recap from an exciting meetup at ZEIT ONLINE’s newsroom on 22th August 2013. On stage: Noah Veltman (BBC), Friedrich Lindenberg (SPIEGEL ONLINE), Stijn Debrouwere (Guardian), Thomas Jöchler and Julian Stahnke (ZEIT ONLINE).

Kategorien: Entwicklung

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