Neukonzeption und Realisierung eines Internet-Auftritts unter Verwendung eines frei verfügbaren Content-Management-Systems (CMS) Bachelorarbeit

Transkript

1 Neukonzeption und Realisierung eines Internet-Auftritts unter Verwendung eines frei verfügbaren Content-Management-Systems (CMS) Bachelorarbeit am Fachbereich Informatik der Universität Bremen Studentin: Betreuer: Zweitgutachter: Ayse Araz Prof. Dr. Karl-Heinz Rödiger Prof. Dr. Rainer Koschke

2 Inhaltsverzeichnis 1 Einleitung Motivation Aufgabenstellung Gliederung der Arbeit Grundlagen Web-Content-Management-Systeme (WCMS) Definition und Idee Komponenten von WCMS Vor- und Nachteile von WCMS TYPO Konzeption COAT-Website Kurzvorstellung der COAT-Website Ist-Analyse Neukonzeption Erstellung des Designs Navigation Typographie und Farben Allgemeiner Seitenaufbau und Zusammenspiel aller Teilaspekte Umsetzung Installation und Konfiguration des Systems Einbinden des Designs Integration in TYPO Mehrsprachigkeit i

3 INHALTSVERZEICHNIS 4.5 Suchmaschinenoptimierung Valider Quellcode nach den Webstandards des W3C Seitentitel Metadaten Freundliche URLs Veröffentlichung der Website Validieren Browserkompatibilität Barrierefreiheit Fazit 28 Erklärung 30 ii

4 Kapitel 1 Einleitung 1.1 Motivation Das Internet ist inzwischen zur wichtigsten Infrastruktur für alle Arten von Kommunikation geworden. Insbesondere in der virtuellen Geschäftswelt sind Selbstpräsentationen im Internet für Unternehmen obligatorisch. Parallel zu dieser Entwicklung sind die Ansprüche an die Gestaltung und Benutzungsfreundlichkeit der Internetpräsenzen sowohl von Anbieter- als auch von Nutzerseite ebenso wie deren Informationswert, Umfang und Funktionalität gestiegen (vgl. Runkehl/Schlobinski/Siever 1998, S. 15). Beim herkömmlichen Webpublishing werden Webseiten, die sowohl das Layout und die Struktur als auch den Inhalt festlegen, in der Auszeichnungssprache HTML 1 verfasst, mittels Hyperlinks verknüpft und direkt auf dem Server als Dateien abgelegt. Es existiert keine Datenbank im Hintergrund und der Inhalt und das Layout sind direkt miteinander verknüpft. Die Erstellung, Veröffentlichung, Überarbeitung und Archivierung einer Website obliegen meistens einem für die HTML-Codierung und -Programmierung verantwortlichen Webmaster in der Organisation. Daraus entstehen etliche Probleme. Weil die Inhaltsänderungen an den Webmaster übermittelt werden müssen, können die Aktualisierungen des Webauftritts bei hohen Änderungsfrequenzen nicht zeitnah realisiert werden und 1 Hypertext Markup Language, Auszeichnungssprache für WWW- Seiten 1

5 1.1 Motivation der Webmaster stellt hier eine Art Flaschenhals dar, sodass sein Ausfall zu Unterbrechungen des Prozesses führen kann. Zur mangelnden inhaltlichen Aktualität kommen Probleme der Abhängigkeit des Inhalts vom Layout. Weil weder das Eine noch das Andere voneinander getrennt verwaltet werden kann, setzt der Webmaster die Inhalte oft unterstützt durch einen Grafiker; für jede Layout-Änderung muss die Gesamtstruktur der Website immer wieder neu überdacht werden oder große Mengen vorhandener HTML-Seiten müssen überarbeitet werden. Daraus ergeben sich Inkonsistenzen und tote Links. Der Arbeitsaufwand wächst exponentiell mit steigendem Umfang der Inhalte. Die Anfangsinvestition der Erstellung der Website schlägt sich mit niedrigen Kosten in der Bilanz nieder, dafür entstehen hohe bis sehr hohe Folgekosten durch die laufende Aktualisierung (vgl. Albrecht/Curkovic/Jetter 2003, S. 7). Um die im Zuge der bereits erwähnten Entwicklung entstehenden Anspruchssteigerungen abzufangen und gleichzeitig die Qualität des Designs und Layouts nicht verringern zu müssen, bieten sich Web-Content-Management-Systeme (im Folgenden auch WCMS) an, welche die wichtigen Eigenschaften von Webservern mit denen von Dokumenten-Management-Systemen verknüpfen (vgl. Gernot 1998). Dass ein ansprechender Webauftritt für eine erfolgreiche Unternehmung obligatorisch ist, ist auch der COAT-EDV-Systeme für die Bekleidungsbranche GmbH bewusst. Ein großer Teil der potentiellen Kunden wird über die Internetpräsenz auf das Angebot von COAT aufmerksam, und Bestandskunden informieren sich ständig über die Neuigkeiten von COAT. Aus diesem Grund legt das Unternehmen großen Wert auf die Webpräsenz. Mit dem bereits existierenden Webauftritt ist das Unternehmen nicht mehr zufrieden. Dies liegt einerseits daran, dass der Webauftritt nicht mehr nach dem neuesten Stand der Technik, standardkonform nach den international geltenden Webstandards des W3C 2, benutzungsfreundlich und browserkompatibel ist, andererseits wegen der Realisierung durch statische HTML-Seiten die Änderungen der Inhalte nicht mit einem vertretbaren Aufwand durchgeführt werden können. Infolge dieser Schwachstellen kam das Unternehmen zur Einsicht, dass die ursprüngliche Website vollständig überarbeitet werden musste und dazu neue Technologien eingesetzt werden sollten, die die völlige 2 World Wide Web Consortium 2

6 1.2 Aufgabenstellung Trennung von Inhalt und Layout zulassen. 1.2 Aufgabenstellung Das Ziel dieser Arbeit umfasst die Neukonzeption und Realisierung der COAT- Website auf Basis eines frei verfügbaren Content-Management-Systems. Ausschlaggebend für die Umsetzung ist dabei die Umstellung der Website auf ein Content-Management-System. Dadurch sollte in erster Linie sichergestellt werden, dass die Redakteure ohne technisches Know-how die ihnen zugewiesenen Inhalte selbständig, einfach und effizient verwalten können. Weitere Anforderungen an die Neukonzeption sind dabei: einfache und konsistente Gestaltung valider Quellcode (Standardkonformität) ein hohes Maß an Barrierefreiheit, Browserkompatibilität und Suchmaschinenfreundlichkeit Die Umsetzung umfasst mehrere Phasen. Hierzu gehören die Konzeption, in der der Ist-Zustand der aktuellen Website analysiert wird und die Ziele der Neukonzeption definiert werden, die Anfertigung des Designs, das als Vorlage für die Umsetzung dient, und die praktische Umsetzung der Konzeption mit dem Web- Content-Management-System sowie die Erstellung und Einbindung dynamischer Inhalte. Anschließend folgen die Optimierung für Suchdienste und die Validation der Website auf Standardkonformität, Barrierefreiheit und Browserkompatibilität. Für die hier beschriebene Umsetzung kommt TYPO3 als Open-Source-WCMS zum Einsatz. Da eine detaillierte Untersuchung aller im Markt verfügbaren Open- Source-WCMS für die Wahl des richtigen WCMS den Rahmen dieser Arbeit gesprengt hätte, beruht die Auswahl des anforderungsgerechten Systems nur auf Informationen Dritter. Dabei wurden auf den Online-Quellen (u.a. contentmanager.de, etc.) veröffentlichte Vergleiche populärer WCMS unter die Lupe genommen und 3

7 1.3 Gliederung der Arbeit die Referenzen, die bereits Systeme erfolgreich eingeführt und eingesetzt haben, berücksichtigt. Bei der Betrachtung der veröffentlichten Vergleiche und der mehr als 1000 Referenzen (u.a. BASF, DaimlerChrysler, ThyssenKrupp Automotive, Philips Dictation System, Europcar, General Electric, EDS, Konica-Minolta, Volkswagen, UNESCO), die für TYPO3 als stabiles, umfangreiches und weit verbreitetes Open-Source-System sprechen, fiel auf, dass TYPO3 alle Aufgaben, die heutzutage allgemein an Content-Management-Systeme gestellt werden, löst und alle benötigten Funktionalitäten für diese Umsetzung anbietet. Darauf basierend wurde TYPO3 als bester Kandidat für ein WCMS bei dieser Umsetzung identifiziert. In Anbetracht des Rufs von TYPO3 als sehr leistungsfähiges, aber auch entsprechend komplexes System fungieren die eigenständige Einarbeitung in solch ein komplexes System und die Auseinandersetzung mit dem umfassenden Themengebiet der Content-Management-Systeme als Herausforderung dieser Arbeit. 1.3 Gliederung der Arbeit Die vorliegende Ausarbeitung gibt im folgenden Kapitel zunächst einen grundlegenden Überblick über die Begriffe Web-Content-Management-Systeme und deren Vorteile im Vergleich zum konventionellen Webpublishing. Daran anschließend wird das WCMS TYPO3 in Abschnitt 2.2 dargestellt. Kapitel drei beginnt in Abschnitt 3.1 mit der Analyse des Ist-Zustandes der aktuellen Website. In Abschnitt 3.2 werden Überlegungen zur Neukonzeption der Website unter Berücksichtigung der soeben vorgestellten Anforderungen angestellt. Das Erstellen der ersten Designvorlage folgt in Abschnitt 3.3. Kapitel vier behandelt schrittweise die Realisierung der erarbeiteten Neukonzeption unter Verwendung von TYPO3. Bevor im letzten Kapitel die erarbeiteten Ergebnisse der in der Aufgabenstellung genannten Anforderungen zusammengefasst werden, behandelt Kapitel fünf das Validieren des neuen Webauftritts. 4

8 Kapitel 2 Grundlagen In diesem Kapitel wird ein kurzer Überblick über Konzepte der Web-Content- Management-Systeme gegeben. Dadurch soll deutlich werden, wie sie bei den oben aufgeführten Problemen Abhilfe schaffen können. Nach einer Begriffserklärung wird ein Vergleich zwischen dem Webpublishing mit WCMS und dem herkömmlichen Webpublishing dargestellt. Abschließend folgt die Betrachtung des Web-Content-Management-Systems TYPO Web-Content-Management-Systeme (WCMS) Definition und Idee Ein WCMS ist eine komplexe Software, die zur Verwaltung, Erstellung, Bearbeitung, Überwachung, Veröffentlichung und Archivierung von Webinhalten dient. Der Aufbau von WCMS entspricht grundsätzlich dem eines allgemeinen Content- Management-Systems (CMS) mit dem Unterschied, dass sie speziell auf Webinhalte ausgelegt sind. Darüber hinaus arbeiten WCMS browserbasierend, das heißt, die Inhalte lassen sich dank webbasierter Benutzeroberflächen von jedem beliebigen Internetarbeitsplatz aus in das System einspielen. Das Entwurfsprinzip eines WCMS baut wesentlich auf der Trennung von Inhalt, Layout und Struktur auf. Die Inhalte werden daher in Datenbanken verwaltet und zum Zeitpunkt des Seitenaufrufs von dort ausgelesen und über sogenannte Templates automatisch eingebettet. 5

9 2.1 Web-Content-Management-Systeme (WCMS) Komponenten von WCMS Der Architektur von WCMS lässt sich prinzipiell in fünf Komponenten gliedern. Die zentralen Bestandteile stellen dabei das Assetmanagement, mit dem die Website unter Berücksichtigung der Trennung von Inhalt und Layout verwaltet wird, und die Workflowkomponente, mit der die Inhaltselemente in einem teamorientierten Arbeitsablauf eingebunden werden, dar. Durch die Benutzer- und Zugriffsverwaltung lassen sich Zugriffrechte einzelner Benutzer auf Inhalte u.a. vergeben. Die Grundidee besteht in der dedizierten Nutzung des Expertenwissens der verschiedenen Beteiligten an der Entwicklung eines Internetauftritts. Damit kann jeder Benutzer Beiträge an den ihm zugewiesenen Stellen in das System einpflegen. Dies ist besonders dann von Bedeutung, wenn viele Benutzer an unterschiedlichen Orten abteilungsübergreifend gemeinsam am Prozess der Erstellung und Pflege der Website zusammenarbeiten. Mögliche Rollen sind: Redakteur für die Verwaltung des Inhalts ohne große technische Kenntnisse, Designer für den grafischen Aufbau, Chefredakteur, der für die Publikationen und die Struktur der Website verantwortlich ist, Administrator für die Überwachung des WCMS und die Administration des Inhalts. Import- und Exportschnittstellen dienen zur Unterstützung einer eiwandfreien Integration der Dokumente aus anderen Anwendungen oder in diese (z.b. Microsoft Office). Die Programmierschnittstellen (API, Application Programming Interface) ermöglichen die funktionale Erweiterungen des Systems für spezielle Anpassungen (vgl. Zschau/Oliver/Traub 2002, S ) Vor- und Nachteile von WCMS Aus der zentralen Komponente, über die ein WCMS identifiziert wird, resultieren die Einsatzbedingungen und Vorteile von WCMS, die im Folgenden kurz eingeführt werden. Dafür stellt die Vergleichsübersicht in Tab. 2.1 die Unterschiede zwischen dem Webpublishing mit WCMS im Vergleich zum konventionellen Webpublishing dar. Dadurch soll deutlich werden, welche Problematiken des herkömmlichen Webpublishings die WCMS erforderlich machen und mit welchen Konzepten und Maßnahmen WCMS diesen Problematiken begegnen. 6

10 2.1 Web-Content-Management-Systeme (WCMS) Kriterien Traditionelles Webpublishing Webpublishing mit WCMS Die Technik Keine Datenbank, Inhalt Datenbankbasiert, Inhalt und Layout verknüpft und Layout getrennt Pflege Zentral, durch Webmaster Dezentral, durch verteilte oder Webteam Mitarbeiter ohne technisches Know-How Time-to-Web Lang durch Flaschenhals Kurz durch Dezentralisierung Webmaster Workflow Manuell Automatisiert Redesign Aufwändig durch die Umprogrammierung Einfach durch Änderung der Vorlagen Funktionalität Durch viele Zusatztools Durch integrierte Tools im WCMS Preis Hohe Anfangsinvestition, Niedrige Anfangsinvestition, niedrige Folgekosten hohe Folgekosten Tabelle 2.1: Webpublishing mit WCMS im Vergleich zum traditionellen Webpublishing (vgl. Albrecht/Curkovic/Jetter 2003, S. 8) 7

11 2.2 TYPO3 2.2 TYPO3 TYPO3 ist ein frei konfigurierbares Content-Management-System (CMS) zur Pflege von dynamisch generierten Webprojekten für kleine bis mittelgroße Webauftritte. 1997, noch bevor der Begriff Content-Management-System geprägt wurde, begann Kasper Skårhøj mit der Entwicklung von TYPO3 bestrebt nach einer einfachen Problemlösung angesichts der ständig wachsenden Komplexität von Websites (vgl. Meyer 2008, S. 8-9). Im Jahr 2000 wurde TYPO3 von Skårhøj als Open-Source-Software unter der GPL (GNU Public License) freigegeben und ist mittlerweile zu einem der umfangreichsten und meistgenutzten WCMS im Open- Source-Bereich geworden, das von einer wachsenden Entwickler-Community ständig erweitert wird und derzeitig in der Version vorliegt. TYPO3 ist eine auf Scriptingsprache PHP 1 basierte Serverapplikation, die auf allen Unix-Versionen einschließlich Linux und Macintosh und auf den verschiedenen Windows-Versionen sowie unterschiedlichen Webservern lauffähig ist. Zur Benutzung wird keine zusätzliche Software benötigt, es genügt ein Computer, der einen Internetzugang und einen gängigen Webbrowser besitzt. Standardmäßig arbeitet TYPO3 mit der MySQL-Datenbank, mittlerweile ist auch die Anbindung an beliebige Datenbanksysteme durch die Implementierung eines Datenbankabstraktionslayers möglich. TYPO3 baut auf einer relationalen Datenbank auf. Mit der Installation der Grundversion von TYPO3 erhält man den Systemkern, der das Grundgerüst des Systems bildet und bereits über grundlegende Funktionen, die allgemein von einem WCMS erwartet werden, verfügt. Das bedeutendste Teilmodul von TYPO3 ist der integrierte Extension Manager mit zahlreichen Erweiterungen, mit deren Hilfe sich das Kernsystem beliebig um neue Funktionen und Anwendungen erweitern lässt. Durch die Programmierung über diese Schnittstelle können Entwickler spezialisierte Erweiterungen entwickeln, wenn die Spezifikation der Website etwas erfordert, was TYPO3 noch nicht anbietet. Die große Anzahl frei verfügbarer Extensions im Online-Repository ist eine der großen Stärken von TYPO3. 1 rekursives Akronym für PHP Hypertext Preprocessor 8

12 2.2 TYPO3 Das System TYPO3 beruht außerdem auf der eigens entwickelten Konfigurationssprache TypoScript, die der Anpassung der Software an spezifische Bedürfnisse dient und einen Ersatz für die Verwendung von PHP in Templates darstellt. TY- PO3 bietet auch ein integriertes Caching-System, womit die durch dynamische Seitengenerierung bedingte geringere Performance ausgeglichen wird. Auf weitere Ausführungen zu TYPO3 wird in dieser Abhandlung verzichtet, da dies den Rahmen der Arbeit sprengen würde und alle Themen von der Installation bis zu komplexen Themen wie TypoScript-Programmierung oder Extensions- Programmierung von der zahlreich existierenden Literatur zu TYPO3 ausführlich behandelt werden. 9

13 Kapitel 3 Konzeption Nachdem im vorangegangenen Kapitel erläutert wurde, was unter einem WCMS verstanden wird und welche Vorteile im Vergleich zum herkömmlichen Webpublishing mit einem WCMS verbunden sind, wird in diesem Kapitel auf die Neukonzeption der Website eingegangen. Als Erstes folgt eine Ist-Analyse der derzeitigen Website. Bei der Analyse wird sich vor allem am Buch Designing Web Usability vom Jakob Nielsen (Nielsen 2000) orientiert und die Seite nach den Bereichen Gestaltung und Informationswert untersucht. Nach der Ist-Analyse folgen Überlegungen zur Neugestaltung der Website und dazu die Beschreibung, wie diese konkret umgesetzt werden. 3.1 COAT-Website Kurzvorstellung der COAT-Website Die COAT -Website präsentiert das COAT-System seit dem Jahr 2000 im Internet. Eine der COAT-Website entnommene Beschreibung für das COAT-System lautet wie folgt: COAT ist ein Komplettsystem für die Bekleidungsbranche. Es besteht aus einem Schnittkonstruktionsteil, mit dem man eigene Bekleidungsschnitte nach Maß konstruieren, drucken oder cutten kann und einem Büroteil, mit dem Aufgaben wie Schriftverkehr, Kundenkartei, Bestellwesen etc. erledigt werden können. 10

14 3.1 COAT-Website Mit diesem Internetauftritt strebt das Unternehmen in erster Linie die Gewinnung von potentiellen Interessenten und Kunden sowie einen direkten weltweiten Kontakt mit bereits existierenden Kunden an. Die Website ist ganz konventionell in HTML kodiert, das heißt, Inhalt und Layout sind noch direkt miteinander verknüpft. Die Website entwickelte sich im Laufe der Zeit und es wurden immer wieder Anpassungen durchgeführt, sowohl hinsichtlich des Layouts als auch bezüglich der angebotenen Inhalte. Anfangs war die Website in drei Sprachen verfügbar, mit der Zeit hat sich die Mehrsprachigkeit auf acht Sprachen erweitert. Durch die Veränderungen und Erweiterungen wuchs die Website schnell und verlor an Konsistenz hinsichtlich Struktur und Layout. Parallel dazu fiel es den Verantwortlichen immer schwerer, neue Inhalte einzubinden Ist-Analyse Die Website umfasst rund 20 Pages. Es handelt sich dabei um die Beschreibung des Produkts, dessen Schulung, Preislisten, Service, Projekte und Kontaktinformationen. Die Seitenstruktur der Website ist relativ einfach gegliedert und hierarchisch aufgebaut. Der Einstieg für den Nutzer erfolgt in der Regel über die Startseite. Aufgrund des schlichten, in zwei Farben gehaltenen Designs und der konventionellen Anordnung von Elementen auf der Startseite wirkt die Website übersichtlich und erwartungskonform. Die Startseite erschafft Anhand des Logos und der Figurine schnell einen Überblick über die Identität der Website und darüber, wovon sie handelt. Die Navigationsleiste ist am linken Seitenrand platziert und farblich konsistent gestaltet. Zur Orientierung stehen allerdings keine weiteren Navigationshilfen zur Verfügung, weder ein Klickpfad noch eine Sitemap. Auf einigen wenigen Seiten befinden sich längere Texte, dennoch muss fast auf jeder Seite gescrollt werden, um die gesamten Informationen zu sehen. Die Größe der Website liegt in ihrer Mehrsprachigkeit begründet. Derzeit ist die Website in acht Sprachen verfügbar. Um zwischen den Sprachen zu wechseln, befindet sich nur auf der Startseite eine Sprachumschaltung. Die Farbgestaltung der Website ist harmonisch. Die Schrift ist kontrastreich und generell gut lesbar. Weiter sind beinahe alle Designelemente, wie z.b. Schriftgröße der Überschriften oder Positionierung der Elemente, unterschiedlich gestaltet. Bei jeder Seite weichen die Positionen der Elemente voneinander ab. Gleich auf der Startseite befinden sich Links zu den aktuellen Informationen. Der Schwerpunkt der Website liegt 11

15 3.2 Neukonzeption Abbildung 3.1: Derzeitige COAT-Website auf Texten, die kurz und klar strukturiert sind. Ein Impressum, Kontaktangaben und die Anzeige des Aktualisierungsdatums, die den Nutzer darüber informiert, wann die Website zuletzt aktualisiert wurde, sind vorhanden. Die Website bietet keine Suchmöglichkeit an, die auch bei der Neukonzeption als überflüssig angesehen wird. Die Website liefert keinen validen bzw. standardkonformen Code und damit sind die Zugänglichkeit und Barrierefreiheit gefährdet. Erwartungsgemäß handelt es sich hauptsächlich bei den aufgefundenen Problemen um das Prinzip: Konsistenz und Standardkonformität. Im Folgenden werden die aufgefundenen Probleme für die Neukonzeption berücksichtigt und mögliche Lösungsvorschläge erarbeitet. 3.2 Neukonzeption Neben den Ergebnissen der Ist-Analyse werden bei der Neukonzeption der Website auch folgende technischen und gestaltspezifischen Richtlinien berücksichtigt, die teilweise von Verantwortlichen der Website in Gesprächen als Anforderungen aufgestellt wurden. Einheitlichkeit: Jedes Gestaltungsmerkmal sollte überall auf der Website konsistent angewendet werden. 12

16 3.3 Erstellung des Designs Dezentes, einfaches Design: Inhaltliche Aspekte sollten bei der Umsetzung der Website im Vordergrund stehen und das Design muss in erster Linie auf Einfachheit ausgerichtet sein und im Hintergrund den Inhalt optisch dezent unterstützen. Intuitive Navigation: Die Benutzung der Website sollte intuitiv und einfach erfolgen, damit die Benutzer schnell die gesuchten Informationen finden können. Die Navigation muss dem Benutzer jederzeit einen Überblick darüber verschaffen, wo er sich gerade befindet, was es auf der Website zu sehen gibt, wie er dahin kommt und welche Seiten er schon besucht hat. Kein Scrollen: Nach Nielsen haben sich die Benutzer zwar in den letzten Jahren daran gewöhnt, dass gescrollt werden muss, aber trotzdem bleibt die Abneigung gegen das Scrollen (Nielsen/Loranger 2006, S. 98). Deshalb sollte eine einzelne Webseite nicht mehr als eine Bildschirmseite umfassen. Farbliche Orientierung an den Firmenfarbtönen: Farben und Farbkombinationen sollten so gewählt werden, dass sie auf die Grundfarben des Firmenlogos abgestimmt sind. Barrierefreiheit: Die Website soll Software-, Plattform- und Geräteunabhängig dargestellt und von allen Menschen, unabhängig von körperlichen Voraussetzungen, genutzt werden können. Die Einhaltung dieser Anforderungen ist unausweichlich und wurde bei der Erstellung des Designs berücksichtigt. Im Folgenden wird deren Widerspiegelung bei der konkreten Umsetzung schrittweise dargestellt. 3.3 Erstellung des Designs In dieser Phase wurde zuerst ein Grobkonzept des Designs angefertigt und den Verantwortlichen der Website vorgestellt. Bei der Vorstellung wurden noch Änderungswünsche eingebracht. Aufgrund der Änderungswünsche wurde der Entwurf weiter eingearbeitet und das endgültige Design der Startseite erstellt. Die inneren Seiten sollten das gleiche Design verwenden. 13

17 3.3 Erstellung des Designs Navigation Als erstes Gestaltungselement wurde ein auf JavaScript basiertes Drop-down- Menü erstellt. Allerdings hat sich im Laufe der Arbeit herausgestellt, dass die Verwendung von HTML-fremden Technologien wie JavaScript bei unreflektiertem Einsatz sehr häufig zu Barrieren führt. Denn Browser auf mobilen Endgeräten sind derzeit nicht in der Lage, JavaScript auszuführen, oder JavaScript kann aus Sicherheitsgründen beim Browser deaktiviert sein. Es ist zwar auch möglich, Drop-down-Menüs ohne JavaScript zu realisieren, dies ist jedoch umständlicher, weil dann auch Kompatibilitätsprobleme mit einigen Browsern auftreten. Hinzu kommt, dass Drop-down-Menüs schwer zu navigieren sind, da Benutzer nie in der Lage sind, mehr als ein Menü gleichzeitig zu öffnen und einen vollen Satz von Funktionen sehen zu können. Über diese Kritikpunkte wurden Diskussionen mit den Verantwortlichen der Website geführt, sie konnten aber von der Notwendigkeit eines neuen Designs nicht überzeugt werden. Schließlich wurden die von Verantwortlichen vorgebrachten Einwände akzeptiert, dass bei der Zielgruppe der Website die Wahrscheinlichkeit sehr gering ist, JavaScript zu deaktivieren, und dieses Menü den Nutzer schneller zu seinem Ziel führt, da der Weg zur gewünschten Seite über drei Ebenen hinausgehen kann. Darüber hinaus wird diese Skriptsprache direkt im Browser des Nutzers ausgeführt, womit das Menü ohne Zeitverzögerung funktioniert. Der Link zur Startseite wurde bei der neuen Website als erster Menüpunkt in der Navigation angebracht, mit dem von jeder Webseite aus auf die Startseite zurückverwiesen wird. Das Logo ist auf allen Webseiten anklickbar und fungiert auch als Link zur Startseite, wie es sich in den letzten Jahren als Konvention durchgesetzt hat Typographie und Farben Nielsen empfiehlt allgemein, für eine Website die Anzahl der Schriften und Farben zu begrenzen und die Auswahl durchgehend anzuwenden (vgl. Nielsen 2000, S. 223). Deshalb wurden die Farben und Schriftattribute sparsam und zweckge- 14

18 3.3 Erstellung des Designs bunden eingesetzt. Die Hauptfarben der Website orientieren sich stark an den Logofarbtönen. Verdana Normal ist die Schriftart, die in 12 Pixel Schriftgröße bis auf wenige zweckgebundene Ausnahmen auf der ganzen Website konsistent verwendet wird. Verdana ist eine serifenlose Linear-Antiqua-Schrift, die für die optimale Bildschirmdarstellung entworfen wurde und wegen ihrer großen Buchstabenabstände und ausgeprägten Unterschiede zwischen ähnlich geformten Buchstaben im Vergleich zu traditionellen Schriften wie Arial oder Times New Roman zu einer bessere Lesbarkeit führt (vgl. Wilson 2001, S. 2) Allgemeiner Seitenaufbau und Zusammenspiel aller Teilaspekte Bei der Anordnung der Elemente der Website wurde eine symmetrische Layoutart bevorzugt, um den sachlichen und ausgeglichenen Eindruck der Website zu bewahren. Das Layout besteht aus einem Kopfbereich, einem Hauptbereich und einem Seitenfuß. Der Kopfbereich enthält in der Mitte das Logo, am linken Rand einen Link für die Neuigkeiten des Produkts und am rechten Rand die Sprachumschaltung. Im Hauptbereich werden oben die Navigation und ein Klickpfad abgebildet, der dem Nutzer zeigt, welche Hierarchiestufen er bisher durchlaufen hat und auf welcher Ebene er sich gerade befindet. Darunter befindet sich auf der linken Seite die Figurine, wo sie auf den ersten Blick ins Auge fällt. Die Figurine verschafft dem Nutzer eine schnelle Erkennung der Identität der Website. Rechts davon erstreckt sich der Inhalt, der die Hälfte des Hauptbereichs ausmacht. Weitere Menüpunkte finden sich im Seitenfuß wieder. Durch Klicken auf die Sitemap im Seitenfuß wird dem Benutzer eine hierarchische Struktur der gesamten Website angezeigt. Dort haben die Benutzer auch die Möglichkeit, mit dem Verantwortlichen in Kontakt zu treten und zu den AGB und zur Datenschutzerklärung zu gelangen. Für längere Inhalte wird nicht mehr auf den Seiten gescrollt, sondern zwischen den Seiten geblättert. Das Datum der Aktualisierung der Website befindet sich auf jeder Webseite und informiert den Nutzer darüber, wann diese zuletzt bearbeitet wurde. 15

19 3.3 Erstellung des Designs Abbildung 3.2: Allgemeiner Seitenaufbau 16

20 Kapitel 4 Umsetzung Die Umsetzung des Konzepts mit TYPO3 stellt den letzten Schritt der Arbeit dar. Dazu müssen zuerst alle benötigten Softwarekomponenten auf dem Rechner installiert und entsprechend konfiguriert werden. Anschließend wird die Designvorlage aus dem vorigen Kapitel in TYPO3 integriert und werden die Inhalte eingefügt. Die Suchmaschinenoptimierung steht als Abschluss der Umsetzung an. 4.1 Installation und Konfiguration des Systems Da es notwendig war, den bestehenden Webserver für COAT-Website auf die oben genannten technischen Voraussetzungen umzustellen, mussten die Installation und Konfiguration auf einem lokalen Server erfolgen. Obwohl TYPO3 auf allen gängigen Betriebssystemen und auf üblichen Webservern lauffähig ist, entwickelt und entfaltet es sein ganzes Leistungsspektrum nur auf einem LAMP- System (Linux, Apache, MySQL, PHP) vollständig (vgl. Meyer 2008, S. 13). Aus diesem Grund wurde auch für diesen Einsatz auf die Zuverlässigkeit von TYPO3 auf LAMP-Systemen vertraut. Als Betriebssystem wurde Ubuntu in der Version 8.10 verwendet. Für die Datenbankunterstützung wurde MySQL in der Version 5.0 und als Webserver Apache 2 mit PHP 5 installiert. Auf dem bereitgestellten Webserver wurden als letzter Schritt der Installation Quellen für TYPO3 aus der offiziellen Website heruntergeladen. Nach- 17

21 4.2 Einbinden des Designs dem die TYPO3-Dateien auf dem Webserver kopiert worden waren, wurde der Installationsassistent verwendet, um TYPO3 grundlegend zu konfigurieren, wobei die Datenbank angesprochen, diese mit den TYPO3-Tabellen befüllt und alle Basis-Konfigurationsoptionen (Schreibrechte, Zeichensatz, -Einstellungen etc.) eingestellt werden mussten. Anschließend erfolgte das Einloggen im Backend, mit dem Administratoren und Redakteure die Website erstellen und pflegen können. In das Backend gelangt man, indem man die URL im Browser an den Ordner /typo3 anhängt, z.b. Wo es ein Backend gibt, muss es natürlich auch ein Frontend geben. Mit Frontend wird die eigentliche Website bezeichnet, die die normalen Besucher zu sehen bekommen. Nach dem Einloggen im Backend kann die Backend-Sprache geändert werden und können neue Benutzer mit unterschiedlichen Zugriffsrechten hinzugefügt werden. Die Systemkern-Installation von TYPO3 bringt bereits eine Vielzahl an Funktionen mit sich. Spezielle Module müssen dennoch über den Extension Manager nachträglich installiert werden. Im Fall dieser Umsetzung mussten nur die Erweiterungen irfaq, mc autokeywords und realurl installiert werden, da alle im Konzept aufgestellten Anforderungen mit den Kernfunktionen des Systems zu erfüllen sind. Nach der erfolgreichen Installation und Konfiguration wurde als erster Schritt zur Umsetzung des vordefinierten Designs die hierarchische Seitenstruktur der Website angelegt. Es wurden bei den Anforderungen konkrete Angaben darüber gemacht, wie tief die Navigation gehen darf und welche Menüpunkte zur Verfügung stehen sollten. Die anforderungsgerechte hierarchische Seitenstruktur wurde wie in folgender Abbildung 4.1 zu sehen abgebildet. 4.2 Einbinden des Designs Die technische Seitenerstellung mit einem WCMS erfolgt folgendermaßen: Eine Designvorlage in HTML oder XHTML 1 wird mit so genannten Platzhaltern angereichert, die dann von einem Template angesprochen und durch spezifischen Inhalt aus der Datenbank ersetzt werden. Als Designvorlagen werden in der TYPO3-Welt die HTML-Dokumente bezeichnet, die das Layout der Website festlegen und bestimmte Bereiche durch sogenannte Platzhalter für die Inhalte 1 Extensible HyperText Markup Language, Fortschreibung von HTML 18