Nico Brünjes' Präsentation über den Relaunch von ZEIT ONLINE im September 2009, gehalten auf dem Webkonkress Erlangen, am 7.10.2010.

1. Relaunching ZEIT ONLINE

2. Nico Brünjes
‣ Weblog: http://codecandies.de
‣ Twitter: @nicobruenjes

5. Der Plan

6. Komplett neues Webdesign

7. Austausch wichtiger Backend-Komponenten

8. Neuer CMS-Editor für Centerpages

9. Neuer CMS-Editor für Centerpages
Editor für Bildergalerien, neues Bilduploadtool…

10. Relaunch des Communitysystems

11. Einführung eines neuen Videosystems

12. Stakeholder
Foto unter CC Lizenz: http://www.flickr.com/photos/pictfactory/
»Als Stakeholder wird eine natürliche oder juristische
Person bezeichnet, die ein Interesse am Verlauf oder
Ergebnis eines Prozesses hat.«

13. Redaktion.

14. Produktmanagement.

15. Geschäftsführung.

16. Eigentümer.

17. Technik.

18. Und natürlich Nutzer.

19. Das Team

20. Die Architektur

21. 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

22. Frontendarchitektur
‣ standardkonformes HTML (5)
‣ standardkonformes CSS
‣ jQuery

23. Phasen des Relaunches

24. Spiel-Phase
Foto unter CC Lizenz: http://www.flickr.com/photos/orcaman/

25. Projekt-Projekt-Phase
Foto unter CC Lizenz: http://www.flickr.com/photos/dnorman/

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

27. 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«

28. 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/)

29. Styleguides? Coding Guidelines!
‣ Styleguide für das Schreiben von HTML-Code
‣ CSS-Styleguide
‣ Coding Guidelines für Javascript

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

31. Launch-Phase

32. Was hat gut funktioniert?

33. Agile Designentwicklung am Prototypen.

34. Zusammenfassung aller Dokumente an einem Ort.

35. Frontdev Entwicklungssystem.

36. Was hat nicht so gut funktioniert?

37. Iterationen, Iterationen, Iterationen.

38. Testen.

39. Barrierefrei ganz nebenbei?

41. 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.

42. 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?

43. Zumindest haben wir einen Preis dafür bekommen.

44. Und weiter…

45. Apps für iPhone und iPad

46. …

47. Und zum Schluss

48. S/W-Fotos: © Konstantin Weiss
http://konnexus.net/