Download - Relaunching ZEIT ONLINE
![Page 1: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/1.jpg)
Relaunching ZEIT ONLINE
![Page 2: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/2.jpg)
Nico Brünjes
‣ Weblog: http://codecandies.de‣ Twitter: @nicobruenjes
![Page 3: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/3.jpg)
![Page 4: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/4.jpg)
![Page 5: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/5.jpg)
Der Plan
![Page 6: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/6.jpg)
Komplett neues Webdesign
![Page 7: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/7.jpg)
Austausch wichtiger Backend-Komponenten
![Page 8: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/8.jpg)
Neuer CMS-Editor für Centerpages
![Page 9: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/9.jpg)
Editor für Bildergalerien, neues Bilduploadtool…
Neuer CMS-Editor für Centerpages
![Page 10: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/10.jpg)
Relaunch des Communitysystems
![Page 11: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/11.jpg)
Einführung eines neuen Videosystems
![Page 12: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/12.jpg)
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/
![Page 13: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/13.jpg)
Redaktion.
![Page 14: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/14.jpg)
Produktmanagement.
![Page 15: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/15.jpg)
Geschäftsführung.
![Page 16: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/16.jpg)
Eigentümer.
![Page 17: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/17.jpg)
Technik.
![Page 18: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/18.jpg)
Und natürlich Nutzer.
![Page 19: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/19.jpg)
Das Team
![Page 20: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/20.jpg)
Die Architektur
![Page 21: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/21.jpg)
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
![Page 22: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/22.jpg)
Frontendarchitektur
‣ standardkonformes HTML (5)‣ standardkonformes CSS‣ jQuery
![Page 23: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/23.jpg)
Phasen des Relaunches
![Page 24: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/24.jpg)
Spiel-Phase
Foto unter CC Lizenz: http://www.flickr.com/photos/orcaman/
![Page 25: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/25.jpg)
Projekt-Projekt-Phase
Foto unter CC Lizenz: http://www.flickr.com/photos/dnorman/
![Page 26: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/26.jpg)
Projekt-Projekt-Phase
‣ Designentwicklung: Wordpress‣ Featureorientierte Planung: Drupal‣ jedes Feature gelistet‣ Seiten als Sammlung von Features‣ Abnahmeprozess:‣ Feature‣ Seite‣ Designentwurf‣ Umsetzung in der Entwicklungsumgebung
![Page 27: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/27.jpg)
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«
![Page 28: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/28.jpg)
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/)
![Page 29: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/29.jpg)
Styleguides? Coding Guidelines!
‣ Styleguide für das Schreiben von HTML-Code‣ CSS-Styleguide‣ Coding Guidelines für Javascript
![Page 30: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/30.jpg)
Umsetzungsphase
Foto unter CC Lizenz: http://www.flickr.com/photos/yourdon/
![Page 31: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/31.jpg)
Launch-Phase
![Page 32: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/32.jpg)
Was hat gut funktioniert?
![Page 33: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/33.jpg)
Agile Designentwicklung am Prototypen.
![Page 34: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/34.jpg)
Zusammenfassung aller Dokumente an einem Ort.
![Page 35: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/35.jpg)
Frontdev Entwicklungssystem.
![Page 36: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/36.jpg)
Was hat nicht so gut funktioniert?
![Page 37: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/37.jpg)
Iterationen, Iterationen, Iterationen.
![Page 38: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/38.jpg)
Testen.
![Page 39: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/39.jpg)
Barrierefrei ganz nebenbei?
![Page 40: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/40.jpg)
![Page 41: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/41.jpg)
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.
![Page 42: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/42.jpg)
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?
![Page 43: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/43.jpg)
Zumindest haben wir einen Preis dafür bekommen.
![Page 44: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/44.jpg)
Und weiter…
![Page 45: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/45.jpg)
Apps für iPhone und iPad
![Page 46: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/46.jpg)
…
![Page 47: Relaunching ZEIT ONLINE](https://reader034.vdocuments.site/reader034/viewer/2022051313/5485092d5806b5b8588b4737/html5/thumbnails/47.jpg)
Und zum Schluss