Post on 07-Dec-2014
description
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