Case Study: Relaunch der VSA Unternehmensgruppe auf Basis des CMS Typo3

Transkript

1 Perplex gestaltete und vereinheitlichte die Webpräsenzen der Unternehmen der VSA Unternehmensgruppe auf Basis des lizenzfreien Open Source Redaktionssystems Typo3 Seit Mitte April 2005 treten die Websites der VSA Unternehmen in einheitlichem Layout und eng verzahnt auf. Die neuen Webauftritte werden nun in einem gemeinsamen Typo3 Webserver bei der VSA in München selbst gehostet und von VSA Redakteuren an verschiedenen Standorten gepflegt, nachdem diese von perplex in die Pflegeprozesse mit Typo3 eingewiesen wurden. Die Website der VSA Gruppe integriert die Einzelunternehmen

2 Die einzelnen Unternehmenswebsites stellen sich einheitlich dar und nehmen vielfältig aufeinander Bezug Das neue Look & Feel

3 Für die Besucher der ergibt sich nun das Bild integrierter Websites der VSA Unternehmensgruppe. Das neue Look&Feel der Webauftritte wurde zuvor in einem Web Styleguide festgeschrieben. Die Möglichkeiten von Typo3 zur Vererbung von Templates und Scripts konnte bei diesem Projekt in vollem Umfang genutzt werden, denn alle Websites basieren auf dem gleichen zentralen Grundtemplate und ihre indivividuellen Layoutunterschiede sowie die spezifischen Funktionsmerkmale der einzelnen Auftritte werden durch Fallunterscheidungen und individuelle Cascading Style Sheets (CSS) realisiert. Spätere Relaunches und der Ausbau weiterer Websites wird hierdurch stark erleichtert. Die Plattform Typo3 Die Vorteile und Möglichkeiten des Typo3 Systems konnten auch bei weiteren Aspekten voll ausgespielt werden: Die Navigation wird dynamisch in drei Ebenen aus der Rubrikenstruktur von Typo3 erzeugt. Rubrikenstruktur in Typo3 Navigationsstruktur der Website Die Webseiten werden konsequent über positionierte Layer und Style Sheets realisiert. Dies gewährleistet XHTML Konformität und Vermeidet deneinsatz von HTML Tabellen zu Layoutzwecken. Die Mandantenfähigkeit von Typo3 ermöglicht das Betreiben der Einzelwebsites in einem gemeinsamen System unter eigenen Domänen. Die Rubrikenbäume der VSA Unternehmen in Typo3

4 Es wird der Anforderung Rechnung getragen, identische Inhalte redundanzfrei zu publizieren. Indem die Inhalte von Seiten und Inhaltselementen in Typo3 siteübergreifend referenziert werden können, entfällt die Notwendigkeit zur Mehrfach-Einpflege. Die Inhalte erscheinen hierbei im jeweiligen Layout der darstellenden Website. Originalinhalte Darstellung referenzierter Inhalte Funktionen wie die zweispaltige Inhaltsanordnung, die Newsverwaltung und anzeige und die Steuerung der suchmaschinenrelevanten Metainhalte werden über Typo3 Extensions realisiert. Solche Open Source Extensions für Typo3 sind vielfältig lizenzfrei verfügbar und erlauben einen bedarfsangepassten modularen Ausbau des Systems. Die News Extension von Typo3 ermöglicht die automatische Generierung der Newsteaser

5 in der rechten Spalte und der dahinterliegenden Newsseiten. Das Datum, die Headline und der Teasertext muss nur einmalig eingeben werden und erscheint auch auf der Newsseite selbst. Jede Website besitzt eigene News, diese können aber - wie alle Seiten und Seiteninhalte - problemlos in andere Sites kopiert werden. Seiteninhalte werden teilweise als Datenbankinhalte importiert und dynamisch eingebunden. Als serverseitige Scriptsprache findet PHP Verwendung und die dem Redaktionssystem zugrundeliegende MySQL Datenbank dient hierbei zugleich als Container der Daten. In die Auswahlfelder von Kontaktformularen werden automatisch die Rubrikenstrukturen eingelesen zur Anforderung von Informationsmaterial zu diesen Punkten. Jede strukturelle Änderung der Website wirkt sich somit automatisch in den Auswahlfeldern der Kontaktformulare aus. Rubrikenstruktur von CSE Auswahlfelder des CSE Kontaktformulars Die Navigation kann wahlweise normal dargestellt werden oder als Drop Down Navigation in der Seite selbst. Hierzu muss ein Redakteur für die Seite lediglich einen anderen Typ der Navigation einstellen. In der Folge wird die Rubrikenstruktur der Seite ausgelesen und als Drop Down dargestellt. Typo3-typisch vererbt sich die Darstellung hierbei automatisch auf die Unterseiten. Zweck dieser Einrichtung ist die Vermeidung allzu langer Auflistungen in der Navigation, wenn z.b. viele Produkte vorhanden sind. Möglich wird eine Einrichtung dieser Art durch die völlige Trennung von Inhalt (hier die Rubrikenstruktur) und Form (hier entweder in der linken Navigation oder als Drop Down) im Redaktionssystem Typo3.

6 Darstellung der dritten Navigationsebene als Drop Down. Kontakt- Feedback und Buchungs-Formulare werden dynamisch angezeigt und ändern ihre Inhalte abhängig von der aufrufenden Seite bzw. den übermittelten Parametern. Hierzu sind die Formulare als PHP Blöcke formuliert und in Typo3 eingebunden. Die Formulare sind konsequent dreistufig aufgebaut in der Abfolge Formularseite Zusammenfassungsseite Bestätigungsseite und verschicken stets eine Mail an den Besucher mit den eingegeben Daten. Selbstverständlich werden die Formulare validiert, bevor ein Versand möglich ist. Formularseite (Ausschnitt) Zusammenfassungsseite

7 Eine PHP Suchfunktion ist speziell auf die verwendeten Datenstrukturen der Sites abgestimmt, zeigt die Suchergebnisse formatiert und redundanzfrei an und gibt zudem die strukturelle Lage einer Ergebnisseite als Breadcrumb Trails aus. Die Suche jeder Unternehmens Website ist auf ihre eigenen Seiten eingeschränkt, während die übergeordnete Suche der Hauptsite alle Sites durchsucht und die Suchergebnisse nach Sites gruppiert ausgibt. Die Trefferliste der VSA Suchfunktion Die Headlines von Hauptseiten werden von Typo3 als GIF Grafiken generiert. Diese Funktion stellt Typo3 standardmäßig zur Verfügung und ermöglicht die Darstellung großer Headlines und Slogans ohne die Verpixelungen großer Schriften. Hierbei ist sogar der Einbau in Headergrafiken möglich, ohne dass ein Grafiker Hand anlegen müsste. Typo3 generierte Slogans

8 Ein ausgeklügeltes Rollen und Rechtesystem schränkt die Rechte der Redakteure auf Seiten und Funktionen gruppenbasiert ein. Durch die konsequente Rechtevergabe über Gruppen können Redakteure bequem einer Gruppe zugeordnet werden, wobei auch Mehrfachzuweisungen problemlos sind. Das gruppenbasierte Benutzerkonzept ist zudem eine Voraussetzung der vorgesehenen LDAP Rechtezuweisung. Die Benutzergruppen in Typo3 Freigaben und Workflows werden unkompliziert durch das Ein/Ausblenden von Seiten und Seitenelementen realisiert. Typo3 erlaubt hier durch einfaches Setzen von hidden Checkboxes eine zeitverzögerte Publikation. Zudem ist der Publikationszeitpunkt im Voraus einstellbar. Das Verstecken einer Seite in Typo3 Die zeitverzögerte Publikation einer Seite in Typo3

9 Die Seitendruck Funktion wird direkt von Typo3 unterstützt und extrahiert gezielt und in der originalen Formatierung den Inhalt der zu druckenden Seite in einem eigenen Fenster. Hierbei wird die Bezeichnung der Werbsite und die Bezeichnung der Seite mit augegeben. Datenbankbasierte Inhalte werden in gleicher Weise extrahiert. Der Link Diese Seite drucken extrahiert den Seiteninhalt für den Druck

10 Die datenbankbasierte Seminardarstellung Herzstück des neuen Auftritts ist die datenbankbasierte Seminardarstellung und suche der Über verschiedene Zugangswege - Veranstaltungsthemen, Veranstaltungsarten sowie über eine Suche nach Ort und Termin werden Übersichten und Detailinformationen zu den Veranstaltungen der akademie.vsa dynamisch und sortierbar dargestellt. Darstellung des Semiarangebotes über den Zugangsweg Themen Darstellung des Semiarangebotes über den Zugangsweg Seminararten

11 Darstellung des Semiarangebotes über den Zugangsweg Suche nach Thema, Ort und Termin Ein Besucher kann hierüber rasch und übersichtlich das Veranstaltungsangebot der akademie.vsa einsehen, alle Details abrufen und sich gleich online einbuchen. Abruf der Details in der Veranstaltungsübersicht

12 Die Detaildarstellung zeigt Details, Nutzen, Inhalte und Termine strukturiert an Aus der Termin/Ort Übersicht kann direkt gebucht werden

13 Die Online Buchung rekapituliert die wichtigsten Details Die Daten selbst werden von der VSA aus einer Veranstaltungs-Datenbank im CSV Format exportiert. Der Import der Daten in die MySQL Datenbank des Typo3 erfolgt über ein PHP Script, das unkompliziert über den Browser aufgerufen wird. Die Darstellung der Übersichten und Suchergebnisse erfolgt über intelligente Scripts, die selbsttätig erkennen, ob buchbare Termine zu einer Veranstaltung vorliegen. Hierüber werden entweder Links zu Terminübersichten und den dahinterliegenden Buchungsmöglichkeiten generiert oder der Besucher kann die Details einsehen und Wunschtermine für Veranstaltungen formulieren. Besonderer Nutzen ergibt sich aus der Möglichkeit, die dynamischen Veranstaltungsübersichten der akademie.vsa in den Websites der übrigen VSA Unternehmen einzublenden. Typo3 ermöglicht es hier, einfach das Script zur Übersichtsdarstellung in einer beliebigen Seite zu hinterlegen - in der Folge erscheinen die dynamischen Fremdinhalte im Layout der Website als wären sie deren eigene Inhalte.

14 Einblendung der Themenübersicht zu einem Produkt in der Ein spezielles Symbol in Typo3 zeigt an, dass tatsächlich die Inhalte einer anderen Seite angezeigt werden. Die Quellseite wird in einem Pick-Baum gewählt und wird in dieses Feld eingetragen. Die technische Plattform Typo3 wird bei der VSA in München inhouse gehostet. Die MySQL Datenbank auf einem separaten Datenbankserver betrieben. Server und alle Softwarekomponenten wurden von perplex und der VSA in Kooperation eingerichtet. Einige Wochen vor dem Livegang wurde das Typo3 Projekt aus der Entwicklungsumgebung von perplex auf die VSA Server übertragen, samt der bis zu diesem Zeitpunkt bereits erfassten Inhalte der VSA Redakteure und aller Rollen- und Rechtedefinitionen. Hierdurch konnte bereits frühzeitig mit der Einrichtung und Pflege des Systems begonnen werden. Webserver wie Datenbankserver stellen eine vollständige LAMP Umgebung (Linux, Apache, MySQL, PHP) dar, so dass aufgrund des Open Source Ansatzes auch für Betriebssysteme, Web Server, Datenbank und Entwicklungsumgebung keinerlei Lizenzkosten anfallen. Kontakt: perplex GmbH Gesellschaft für interaktive Kommunikation und Design Rosenheimer Straße 145c München Frau Delia Marshall Tel