Kapitel 9 Eine Site aufbauen

Nach den ausführlichen Erläuterungen zu den Möglichkeiten von Joomla! in den vorangegangenen Kapiteln werden wir nun ein umfangreicheres Projekt erstellen, das sich jedoch auf die nötigsten Funktionen beschränken wird. Viele der bereits vorgestellten Möglichkeiten und Parameter werden in den folgenden Kapiteln wieder auftauchen, andere Dinge wiederum werden wir nicht mehr benötigen. Bei dieser Gelegenheit können Sie die wichtigsten Bereiche vertiefen und den praktischen Nutzen der nötigen Parameter kennen lernen.

9.1 Vorüberlegung und Planung 

Unser Vorgehen beim Erstellen einer Site wird dem Vorgehen bei der bereits besprochenen Website für einen Tanzlehrer ähnlich sein. Einen neuen Schwerpunkt wird jedoch das Template bilden. Anders als bei unserem Tanzlehrer soll die neue Site individueller erscheinen und nicht in einen vorgefertigten Rahmen gepresst werden. Diesmal bestimmen Sie das Layout und die Gestaltung und legen fest, welche Module oder Komponenten verwendet werden sollen.

Zwangsläufig werden dadurch auch die Planung und Strukturierung eine größere Bedeutung gewinnen, da Sie sich nicht mehr auf einen fertigen Aufbau stützen können. So müssen Sie im Vorfeld die einzelnen Content- und Menübereiche klären und sich bewusst machen, wie umfangreich das gesamte Projekt werden kann. Dies geht bis hin zu der Entscheidung, welche Farben Sie verwenden möchten oder welche Schriftarten bzw. -größen eingesetzt werden sollen.

9.1.1 Die Funktion der Beispiel-Site 

Nach der kleinen »Web-Visitenkarte« des Tanzlehrers möchten wir mit einem ähnlichen Thema weiterarbeiten. Wir werden uns daher mit der Site für ein Tanzstudio beschäftigen, die neben Informationen auch einige nützliche Funktionen enthält. Dabei können wir auf eine Vielzahl vorgefertigter Module zurückgreifen. So gibt es eine Anzahl von Bildergalerien, Kalendern etc., aus denen wir zumindest einige interessante Beispiele herauspicken möchten. Die meisten dieser Module besitzen, ähnlich wie Joomla!, wiederum etliche Parameter, die wir Ihnen im Rahmen der Website-Entwicklung vorstellen werden.

Weitere wichtige Aspekte, die Sie in diesem Zusammenhang kennen lernen sollen, sind der Umgang mit CSS-Formatierungen zum Erstellen eines eigenen Templates und die Details der Userverwaltung. Ob noch andere Joomla!-Komponenten für unser Vorhaben geeignet sind, werden wir dann bei der Site-Planung erfahren.

Mit der CSS-Formatierung können Sie das Erscheinungsbild jedes einzelnen Elements, das im Frontend dargestellt wird, zentral steuern. Sie bestimmen die Merkmale der Schrift der Content-Bereiche, die Farbe und die Linienstärke von Tabellen oder legen die Rollover-Effekte für Links in Menüs fest.

Eine andere nützliche Funktion bietet die Userverwaltung. Sie können nicht nur bestimmte Bereiche im Frontend für User-Gruppen zugänglich machen und für andere sperren. Auch für das Backend können Sie die Zugriffe regeln und die Verwaltung der Inhalte verteilen. So sind sensible Daten und Elemente nicht für jeden Autor erreichbar und bleiben vor Fehlanwendungen geschützt.

Bevor wir mit der eigentlichen Gestaltung unserer Site beginnen, sollten wir unser Joomla!-System neu aufsetzen. Dazu müssen Sie nicht alle Schritte des Installationskapitels befolgen. Da wir XAMPP auch für unser Tanzstudio benötigen werden, reicht es, wenn Sie zunächst eine neue Datenbank und ein neues Verzeichnis anlegen. Genauere Anweisungen finden Sie in Abschnitt 2.6, Zweitinstallation. Mit unserer lokalen Testumgebung können wir wieder unbekümmert arbeiten und müssen uns keine Gedanken wegen misslungener Inhalte oder verschobener Layouts machen.

9.1.2 Struktur der Site 

Bevor wir uns dem Layout und der detaillierten Gestaltung unserer neuen Website widmen, organisieren wir die Struktur des Tanzstudios. Wir müssen zunächst bestimmen, welche Inhalte wir erzeugen möchten und welche der angesprochenen Funktionen (Newsfeed, Login etc.) wir tatsächlich als sinnvoll erachten. Diese Überlegungen müssen uns aber nicht von nachträglichen Ergänzungen abhalten. Selten lässt sich die Struktur einer Website im Vorfeld komplett planen. Das Layout soll aber zumindest einige Eckdaten zur Orientierung bekommen, und die nötigen Bereiche für Menüs oder Content müssen halbwegs klar sein. Denn je nachdem, wie viele Menüpunkte wir verwenden möchten, kann z.  B. die Entscheidung für ein horizontales Menü der Wahl eines vertikalen Menüs weichen. Schon die Entscheidung, wie viel Platz unser Layout im Browserfenster einnehmen wird, hängt von der Vorüberlegung ab, wie viele Inhalte online gestellt werden. Verwendet man die gesamte Bildschirmbreite, hat aber für die Menüpunkte jeweils nur zwei Absätze Text, so wird das Erscheinungsbild stark auseinander fallen. In diesem Fall würde es sich empfehlen, die Breite der Darstellung zu reduzieren und so die Inhalte zu einer geeigneten Darstellungsdichte zu komprimieren. Grundlegend für unser Layout wird also die Seitenstruktur sein. Für die Planung der Struktur sind momentan drei Dinge wichtig:

Welche Unterseiten brauchen wir (und welche Menüpunkte ergeben sich daraus)?

Wie werden die Inhalte aussehen, und welchen Umfang haben sie etwa?

Welche Funktionalität muss auf der Seite für den User gegeben sein?

Diese drei Punkte werden wir zunächst für unser Beispiel klären, und anschließend erstellen wir ein geeignetes und ansprechendes Layout. Anhand des Layouts werden wir entscheiden, ob wir für die Umsetzung ein vorgefertigtes Layout verwenden möchten oder lieber ein eigenes Template mit der zugehörigen CSS-Datei entwerfen.

Bis jetzt haben wir überwiegend die Bedeutung der Struktur für unsere Seitengestaltung behandelt. Die Organisation der Inhalte in Joomla! unterliegt in der Version 1.0 immer noch den Sektionen, Kategorien und Inhaltsseiten. Diese Hierarchie wird nur von den statischen Inhalten unterbrochen, ansonsten haben Sie keine Möglichkeit, diese Vorgaben zu umgehen. Eine dynamische Ordnerhierarchie wird aber in kommenden Joomla!-Versionen realisiert werden. Der Vorteil unserer Sektionen und Kategorien ist jedoch, dass wir jeder Sektion oder Kategorie ein eigenes Template zuweisen können. So kann das Layout den Ansprüchen der jeweiligen Inhalte entsprechend angepasst werden. Außerdem bleibt das Erscheinungsbild gewahrt, auch wenn unterschiedliche Autoren den Kategorien neue Inhalte hinzufügen. Egal, wer die Inhalte ergänzt, sobald man z.  B. der Seite »Tanzstile« einen neuen Tanz hinzufügt, wird der Inhalt wie alle anderen Tanzstile-Inhalte formatiert sein und nicht wie z.  B. die Inhalte der Sektion »Referenzen«.

Die Aufteilung in Sektionen und Kategorien bringt natürlich eine hierarchische Organisation mit sich. Die jeweiligen Inhaltsseiten sind aber meist chronologisch angeordnet.

9.1.3 Layout und Gestaltung 

Bevor wir zur Bearbeitung des Templates kommen, möchten wir noch kurz das Layout unserer Website ansprechen. Das Layout spielt bei unseren Vorüberlegungen insofern eine Rolle, als dass sich das Template, das wir verwenden möchten bzw. noch erstellen werden, natürlich an der Aufteilung des Screens orientieren muss. Ein Template besteht aus zwei Bereichen. Ein Teil ist für die Formatierung der Seitenelemente verantwortlich (CSS), der andere Bereich steuert das Layout, also die Positionierung verschiedener Module und Inhalte. Dies geschieht über eine HTML-Datei mit PHP-Variablen.

Es empfiehlt sich, erst eine grobe Skizze mit der gewünschten Einteilung zu erstellen (Abbildung 9.1).

Danach können Sie mit einem Grafikprogramm einen farbigen Entwurf als Grundlage für Ihre Seitengestaltung anfertigen (Abbildung 9.2). Das hat den Vorteil, dass Sie das Design schnell und unkompliziert ändern können, bis es Ihren Wünschen entspricht. Teile davon werden später als Design-Elemente in die HTML-Seite eingebunden. Denken Sie dabei immer an Ihre Zielgruppe. Bei der Farbpalette muss ein Kompromiss gefunden werden zwischen wenigen Farben, die das Design übersichtlich halten, und einer Farbauswahl, die dennoch interessant ist und dem Auge etwas bietet, ohne dabei störend zu werden.

Der Entwurf ist natürlich keine unverrückbare Lösung. Achten Sie aber darauf, dass Sie bei Ergänzungen nicht plötzlich eine ganz andere Richtung einschlagen und so einen »Design-Salat« erzeugen. In diesem Zusammenhang möchten wir auch darauf hinweisen, das Layout möglichst so zu gestalten, dass Sie evtl. nachträglich Menüleisten oder Content-Bereiche erweitern können. Meistens lassen sich die benötigten Flächen nicht pauschal vorher bestimmen und sollten daher auch noch für längere Inhalte geeignet sein.

Dieser Screenshot kann nun in Einzelteile (Slices) »zerschnitten« werden, die dann in der HTML-Datei unseres Templates wieder zu einem Ganzen zusammengesetzt werden. Dabei sollten Sie darauf achten, nicht einfach alles mit Grafik zu bepflastern, sondern Bereiche, die z.  B. einen einheitlichen Hintergrund haben, direkt über CSS zu kodieren. So ersparen Sie den Usern unnötige Download-Zeiten und erhöhen die Performance der Site.

Wir erstellen also in unserem Grafikprogramm einzelne Slices aus unserem Gesamtbild und speichern diese in einem für das Internet geeigneten Format ab (also als .gif, .jpg oder .png). Die Art und der Prozess des Zerschneidens hängen von Ihrem Entwurf und dem verwendeten Grafikprogramm ab. In unserem Beispiel bieten sich etwa fünf Einzelgrafiken an (vgl. Abbildung 9.3).