Relaunching ZEIT ONLINE

Nico Brünjes

‣ Weblog: http://codecandies.de‣ Twitter: @nicobruenjes

Der Plan

Komplett neues Webdesign

Austausch wichtiger Backend-Komponenten

Neuer CMS-Editor für Centerpages

Editor für Bildergalerien, neues Bilduploadtool…

Neuer CMS-Editor für Centerpages

Relaunch des Communitysystems

Einführung eines neuen Videosystems

Stakeholder

»Als Stakeholder wird eine natürliche oder juristische Person bezeichnet, die ein Interesse am Verlauf oder Ergebnis eines Prozesses hat.«

Foto unter CC Lizenz: http://www.flickr.com/photos/pictfactory/

Redaktion.

Produktmanagement.

Geschäftsführung.

Eigentümer.

Technik.

Und natürlich Nutzer.

Das Team

Die Architektur

Systemarchitektur

‣ Apache Webserver als XML Document Storage‣ Metainformationen: PostgreSQL-DB‣ Online-Redaktionssystem: ZOPE basiert‣ Rendering: Apache mit einem XSLT-Modul‣ Cache-Lösung mit Varnish

Frontendarchitektur

‣ standardkonformes HTML (5)‣ standardkonformes CSS‣ jQuery

Phasen des Relaunches

Spiel-Phase

Foto unter CC Lizenz: http://www.flickr.com/photos/orcaman/

Projekt-Projekt-Phase

Foto unter CC Lizenz: http://www.flickr.com/photos/dnorman/

Projekt-Projekt-Phase

‣ Designentwicklung: Wordpress‣ Featureorientierte Planung: Drupal‣ jedes Feature gelistet‣ Seiten als Sammlung von Features‣ Abnahmeprozess:‣ Feature‣ Seite‣ Designentwurf‣ Umsetzung in der Entwicklungsumgebung

Codeentwicklung

‣ HTML, CSS und JS muss kompakt entwickelen‣ XSL/T-Entwicklung zu langsam‣ HTML wird als Vorlage für das XSL/T genutzt‣ Entwicklungsumgebung »Frontdev«

Werkzeuge

‣ Apple-Rechner‣ Firefox‣ Firebug (plus Plugins)‣Webdeveloper Extension‣ Selenium IDE Plugin‣ Texteditor‣ Espresso (http://macrabbit.com/espresso/‣ Textmate (http://macromates.com/)‣W3C Validator integriert‣ JS Lint integriert

‣ Transmit (http://www.panic.com/transmit/)‣ Virtual Box (http://www.virtualbox.org/)

Styleguides? Coding Guidelines!

‣ Styleguide für das Schreiben von HTML-Code‣ CSS-Styleguide‣ Coding Guidelines für Javascript

Umsetzungsphase

Foto unter CC Lizenz: http://www.flickr.com/photos/yourdon/

Launch-Phase

Was hat gut funktioniert?

Agile Designentwicklung am Prototypen.

Zusammenfassung aller Dokumente an einem Ort.

Frontdev Entwicklungssystem.

Was hat nicht so gut funktioniert?

Iterationen, Iterationen, Iterationen.

Testen.

Barrierefrei ganz nebenbei?

Validiert? Nope.

‣ 5 Validierungsfehler:‣ X-UA-Compatible IE=edge‣ 2 x falsches Datumsformat‣ IDʻs doppelt an best. Links

‣ Ist das wirklich ein Problem?‣ Keine komplette Validität garantiert.

Barrierefreiheit?

‣ loosly barrierefrei‣ CMS: alt- und title-Attribute an Bildern

vorgeschrieben bei der Bildanlage‣ Layout ist gut lesbar‣ Links hingegen nicht so gut

‣ keine Tabellen, Framesets etc.‣ ordentliches HTML‣ gesunder Menschenverstand?‣ ist zeit.de barrierefrei?

Zumindest haben wir einen Preis dafür bekommen.

Und weiter…

Apps für iPhone und iPad

…

Und zum Schluss

S/W-Fotos: © Konstantin Weisshttp://konnexus.net/