Website

Die Seite ist online. Es hat tatsächlich nur zwei Tage gedauert.

Die nächsten zwei Wochen verbringt Herr Bertrand damit, die Bilder der Weinlese einzupflegen und an den Texten zu feilen. Er spricht Bekannte an, sich doch mal als Benutzer zu registrieren und er erhält sogar eine Bestellung über sein neues System.

Der Provider hat eine Weile mit Herrn Bertrand über die Update-Problematik von Joomla! gesprochen, und Herr Bertrand hat einen Wartungsvertrag abgeschlossen. Immer, wenn eine neue Joomla!-Version auf den Markt kommt, wird der Provider das Update einspielen.

Die Seite ist relativ einfach auf dem aktuellen Stand zu halten, da sie den Standardumfang von Joomla! nutzt und die Exposé-Galerie in einem HTML-iframe läuft, also ähnlich wie bei der Wrapper-Komponente.

Herr Bertrand ist froh, dass er die Arbeit mit den Updates und mit dem Template ausgelagert hat.

Falls Sie auch Bedarf an Gestaltung haben, setzen Sie sich doch einfach mit Ruth in Verbindung: Ruth Prantz, Diplom Designerin (http://www.ateliersite.de).

16.7.1 Und wie ist das in Wirklichkeit?

Viele Entstehungsgeschichten von kleineren Websites laufen genau so ab wie bei Herrn Bertrand. Ich habe es oft selbst erlebt. Die größeren Websites starten meistens auch so, die Firmen geben es aber nicht offen zu.

In größeren Projekten ist der Weg prinzipiell der gleiche. Eine grafische Agentur übernimmt die Gestaltung und eine technische die Programmierung und Entwicklung. Oft gibt es Fachabteilungen für die Texte, die Corporate Identity und die Sicherheit der Website. Das Hosting muss auch geklärt werden.

Aber ansonsten passt das schon. :-)

Der nächste Morgen ist da, das Weinfest ist vorbei, Didier und Marlene haben viel fotografiert. Herr Bertrand hat die Website zu seiner Zufriedenheit fertig gestellt und auch schon die PDFs eingebunden.

Die PayPal-Anbindung funktioniert.

Man trifft sich zum Frühstück, und Ruth ist mittlerweile fertig mit dem Template. Sie bringt die fertige Komponente auf einem USB-Stick mit und erzählt eine Stunde lang über ihre Erlebnisse mit dem Template.

16.6.1 Installation des Templates

Herr Bertrand überträgt die Template-Dateien per FTP in das Verzeichnis /httpddocs/ templates/tmpl_bertrand und /httpddocs/templates/tmpl_bertrand_shop. Im Menü Erweiterungen - Templates macht er das neue Template tmpl_bertrand zum Standard (Abbildung 16.60).

Abbildung 16.60: Neues Template im Template-Manager

Das Template tmpl_bertrand_shop ordnet er im Bearbeitungsmodus den Weinseiten zu. Damit ist sichergestellt, dass der Kunde bemerkt, dass er jetzt im Shop-Bereich ist (Abbildung 16.61).

Abbildung 16.61: Spezielles Template für den Shop-Bereich

16.6.2 Das Template

Das Template ist von Ruth nach folgenden Gesichtspunkten gestaltet worden:

Pflege

Da Herr Bertrand die Seite weiter pflegen will, hat sie ein möglichst einfaches und übersichtliches Gestaltungsraster zu Grunde gelegt. Herr Bertrand kann die Bilder im oberen Bereich später leicht durch neue ersetzen.

Layout

Ruth erklärt ihre Arbeit so:

Es gibt viele Wege, eine Website gestalterisch umzusetzen.

Herr Bertrand will Wein verkaufen.

Das bedeutet, sein Template braucht die optische Ausstattung eines traditionellen, qualitätsbewussten Winzers, bei dem man gern guten Wein einkaufen möchte.

Eine High-Tech-Ausstattung im Metallic-Look wäre einfach unpassend, auch wenn sie gerade modern ist.

Nein, in diesem Fall geben Wein, Trauben und Erde der Seite das Look and Feel. Getragen wird dies durch die Farbeinstellungen wie durch das Fotomaterial.

Ein optisches Erscheinungsbild setzt sich aus mehreren wichtigen Elementen zusammen. Zu ihnen gehören: Logo, Farben, Foto- und Grafikstil (mit Grafiken sind alle Bildelemente gemeint, die nicht Fotografien sind, beispielsweise Buttons und Symbole), Schriftarten.

Zusätzlich wirken Raumaufteilung und Proportion.

All das muss auf einer Website zueinander passen, wenn der optische Eindruck stimmig sein soll. Am besten sollte nur eine Schriftart verwendet werden. Mit fetten und kursiven Schnitten der gleichen Schrift kann man sehr gut Unterschiede hervorheben.

Im Bertrand-Template habe ich für die Überschriften nicht eine besonders originelle, sondern eine sehr klassische Schrift gewählt, die einen seriösen Eindruck hinterlässt. Es ist die klassische Times, ähnlich den Überschriften überregionaler Zeitungen. Gestaltung muss nicht immer besonders originell sein, es ist ausreichend, wenn es einfach gut passt.

Ein Porträt

Während des Frühstücks und beim Telefongespräch, als Ruth Herrn Bertrand die CSS-Technik erklärte, hat sie nebenbei ein wenig gezeichnet. Sie schickt ihr Werk per E-Mail an Herrn Bertrand, und der baut es gleich mit in die Bildergalerie ein.

Abbildung 16.62: Herr Bertrand

Um in Suchmaschinen gelistet zu werden, benutzt Herr Bertrand zwei Ansätze.

16.5.1 Suchmaschinenfreundliche URLs

Wiederum abhängig vom Provider ist die Möglichkeit der suchmaschinenfreundlichen URLs. Der Provider von Herrn Bertrand erlaubt diese URLs, und Herr Bertrand schaltet das Feature im Menü Site - Konfiguration - SEO ein. Dann benennt er die Datei htaccess.txt in .htaccess um. Die Exposé-Galerie wird dann beispielsweise mit der URL

http://bertrand.cocoate.com/Impressionen

aufgerufen (siehe Kapitel 6.4.1).

Diese Art des Umschreibens von URLs funktioniert nur mit dem Apache Webserver.

16.5.2 Metatags

In seinen Beiträgen trägt Herr Bertrand gewissenhaft eine kurze Beschreibung und die Schlüsselworte ein (siehe Kapitel 6.4.1).

Jetzt haben Sie das Buch vielleicht bis hierher durchgelesen. Sie haben Dutzende von Administrationsseiten gesehen, Sie haben sich über Zusammenhänge von Webtechnologien und Strukturen von Joomla! den Kopf zerbrochen. Und wahrscheinlich brummt Ihnen schon der Schädel von Kürzeln wie HTTP, HTML, CSS, SQL, PHP, SEO, SEF, DIV, MVC etc.

Aber eigentlich wollen Sie doch nur eine Website! Vielleicht sind Sie ja gerade aus diesem Grunde zuerst in diesem Kapitel gelandet.

Egal wie – herzlich willkommen bei einem konkreten Projekt. Dieses Kapitel beschreibt den Aufbau einer Website mit Joomla!, von der Idee bis zur Realisierung.

Herr Bertrand will, solange seine Kinder mit dem Sammeln der Materialien unterwegs sind, schon mal die Struktur der Website vorbereiten.

16.3.1 Lokale Installation

Er installiert sich ein lokales Joomla! in einer XAMPP lite-Umgebung, wie in Kapitel 3 beschrieben. Diesmal nicht im Unterverzeichnis [PfadzuJoomla]/Joomla150, sondern im Unterverzeichnis [PfadzuJoomla]/bertrand.

Die Verbindungsdaten für den MySQL-Server sind:

• Hostname: localhost
• Benutzername: root
• Passwort: kein Passwort (leer lassen)
• Datenbankname: bertrand

Die Installation findet ohne Beispieldaten statt, da Herr Bertrand ja seine eigenen Inhalte einstellen will. Er lädt die Daten im sechsten Installationsschritt durch einen Klick auf den entsprechenden Button. Die Benutzerführung ist hier etwas missverständlich. Der Radio-Button neben der Schaltfläche Beispieldaten installieren ist standardmäßig aktiv. Ohne Klick auf den Button werden die Daten jedoch nicht installiert (Abbildung 16.3).

Abbildung 16.3: Joomla!-Installation – Konfiguration

Er klickt auf den Button Weiter. Der Installer erzeugt ein »leeres« Joomla!. In der Fenstertitelleiste sieht er bereits den Namen Les Vins de Bertrands (Abbildung 16.4).

Abbildung 16.4: Website ohne Beispieldaten

So ganz leer ist die Website noch nicht. Herr Bertrand wechselt jetzt in den Administrationsbereich in das Menü Erweiterungen - Module. Hier sieht er ein aktiviertes Modul mit dem Namen Main Menu (Abbildung 16.4).

Abbildung 16.5: Aktiviertes Modul

Herr Bertrand stellt sich sofort die Frage »Hm, wo sind denn die ganzen anderen Systemmodule, wie beispielsweise das Login-Modul?«. Ein kurzer Klick auf das Icon New beruhigt ihn wieder. Hier können diese Module bei Bedarf erzeugt werden (Abbildung 16.6).

Abbildung 16.6: Neue Module erzeugen

Spracheinstellungen

Herr Bertrand stellt die Sprache von Frontend und Backend auf Deutsch um, wie in Kapitel 4.1.1 auf Seite 87 beschrieben. Nach der Umstellung sind die statischen Texte auf der Website und im Administrationsbereich ins Deutsche übersetzt.

Die ersten Beiträge

Jetzt kommt die Struktur. Herr Bertrand möchte seine Nachrichten in Blogform auf der Startseite der Website haben. Er möchte zunächst drei Nachrichten anlegen, um zu sehen, wie es aussieht. Die Nachrichten müssen nicht kategorisiert werden. Er geht in das Menü Inhalt - Beiträge - Neu und legt drei Nachrichten an. Dort, wo der Weiterlesen-Link erscheinen soll, positioniert er den Cursor und klickt unter dem Editor auf den Button Weiterlesen. Eine rote Linie wird eingefügt. Bereich und Kategorie sind nicht kategorisiert, bei Frontpage kreuzt er Ja an (Abbildung 16.7).

Abbildung 16.7: Erstellen einer Nachricht

Die drei Nachrichten (Beiträge) erscheinen auf der Website und im Menüpunkt Inhalt Startseite Beiträge. Herr Bertrand schaltet mal das Beez-Template unter Erweiterungen Templates ein (Abbildung 16.8).

Abbildung 16.8: Startseite mit drei Beiträgen in beez

Herr Bertrand möchte unter der Überschrift nur das Datum der Erstellung der Nachricht haben. Den Namen des Erstellers und das Aktualisierungsdatum möchte er ausblenden. Da er bis auf Weiteres der Einzige sein wird, der hier Beiträge einstellt, ändert er die Einstellungen im Menü Inhalt Beiträge Voreinstellungen im Feld Autoren-Namen und in den beiden Datumsfeldern darunter (Abbildung 16.9).

Abbildung 16.9: Konfiguration der Inhalte

Die Startseite entspricht jetzt seinen Wünschen. Joomla! erstellt automatisch ein RSS-Newsfeed für diese Nachrichten und zeigt es im Internet Explorer ab der Version 7 und im Firefox-Browser im URL-Feld durch ein orangefarbenes Symbol an. Ein Klick auf dieses Symbol veranlasst Firefox, ein dynamisches Lesezeichen hinzuzufügen (Abbildung 16.10).

Abbildung 16.10: Einbinden eines Newsfeeds in Firefox

Immer wenn Herr Bertrand jetzt einen neuen Beitrag für die Startseite schreibt, taucht dieser Beitrag sofort in seinem Browser auf. Das funktioniert natürlich auch in beliebigen anderen Feedreader-Programmen. Mittlerweile setzt sich das Konzept der Feeds auch auf mobilen Geräten wie Telefonen und PDAs durch. Herr Bertrand hofft, dass viele Kunden seine Nachrichten abonnieren und dadurch auf seine Angebote aufmerksam werden (Abbildung 16.11).

Abbildung 16.11: Die Beiträge als Feed in der Lesezeichen-Symbolleiste

Impressum

In Deutschland ist das Impressum aus rechtlichen Gründen sehr wichtig. Laut Telemediengesetz vom März 2007 muss es verschiedene Informationen enthalten. Dem Besucher der Website muss es möglich sein, zu erkennen, wer inhaltlich für die Website verantwortlich ist³.

Im Falle von Herrn Bertrand sieht ein Impressum folgendermaßen aus:

Verantwortlich für den Inhalt dieser Seite:

Fa. Bertrand
Musterstraße 1
12345 Musterhausen
Musterland
E-Mail: bertrand@cocoate.com
Telefon: 0123 4567-89

Da die Seite gewerblich genutzt wird, muss er auch die Umsatzsteuer-Identifikationsnummer angeben.⁴

Er legt wieder einen nicht kategorisierten Inhalt über das Menü Inhalt - Beiträge - Neu an. Dieses Mal veröffentlicht er ihn nicht auf der Frontpage. Der Link zum Impressum muss jetzt ins Main Menu. Herr Bertrand geht ins Menü Menüs - Main Menu - Neu. Der Menüeintragsassistent startet. Er wählt Beitrag Standard Beitrag Layout aus (Abbildung 16.12)

Abbildung 16.12: Ein Beitrag in das Menü bringen

Herr Bertrand verzweigt in die Bearbeitungsmaske des neuen Menüeintrags, trägt den Namen des Links ein (Impressum) und muss jetzt noch in Menüeintrag Parameter den gewünschten Artikel auswählen (Abbildung 16.13).

Abbildung 16.13: Erstellung des Impressum-Links

Nach einem Klick auf den Button Auswahl erscheint ein Auswahlfenster mit allen Beiträgen (Abbildung 16.14).

Abbildung 16.14: Auswahl des Beitrages für den Menülink

Herr Bertrand klickt auf den Beitrag Impressum, das Auswahlfenster schließt sich, und der Menüeintrag ist komplett. Ein letzter Klick auf das Icon Speichern sorgt dafür, dass der Link auch im Menü landet. Jetzt muss Herr Bertrand noch darauf achten, dass der Link aktiviert ist (rotes Kreuz oder grüner Haken). Die Veröffentlichung bezieht sich hier auf den reinen Menülink, nicht auf den Beitrag. Mit den grünen Pfeiltasten kann der Link positioniert werden (Abbildung 16.15).

Abbildung 16.15: Impressum im Menübereich

Auf der Website sieht es dann aus wie in Abbildung 16.16.

Abbildung 16.16: Impressum auf der Website

Herr Bertrand möchte jetzt noch den Erstellungstag und die Druck-, PDF- und E Mail-Icons ausblenden. Dazu ruft er erneut den Impressum-Beitrag auf (Inhalt - Beiträge - Impressum) und ändert in den erweiterten Parametern die Werte für das PDF-, E-Mail- und Druck-Icon auf Verstecken (Abbildung 16.17).

Abbildung 16.17: Feinheiten im Impressum

Jetzt ist das Impressum komplett, und Herr Bertrand macht sich an die Struktur der Menülinks für die restlichen Seiten.

16.3.2 Menü- und Linknamen ändern, Modul erstellen

Momentan gibt es ein Menü mit dem Namen Main Menu mit einem Link Home und einem Link Impressum. Außerdem möchte Herr Bertrand noch einen Login-Bereich haben.

Aus Main Menu soll Hauptmenü werden, das Login-Formular soll Anmeldung heißen, und aus Home soll Startseite werden. Herr Bertrand ändert die Bezeichnungen für das Main Menu im Menü - Erweiterungen - Module - Main Menu und dort im Feld Titel. Das Login-Formular muss erst erstellt werden (Erweiterungen - Module - Neu – Abbildung 16.18). Den Titel des Login-Formular-Moduls ändert er gleich bei der Erstellung auf Anmeldung.

Abbildung 16.18: Modul Anmeldung erstellen

Den Titel des Home-Links ändert er in Menüs - Main Menu - Home. Bei der Gelegenheit fällt ihm auf, dass auf der Startseite immer noch Welcome to the Frontpage steht. Diesen Text blendet er erst mal unter den Systemparametern aus.

16.3.3 Menüstruktur

Herr Bertrand möchte drei Menüs haben. Ein Hauptmenü, ein oberes horizontales Menü und ein Benutzermenü für angemeldete Benutzer.

Struktur Hauptmenü

Im Hauptmenü soll die gesamte Struktur der Seite sichtbar sein:

- Startseite - Nachrichten
- Die Weine - Allgemeiner Text
-- Weißwein - Produktbeschreibung mit Kaufmöglichkeit
-- Rotwein - Produktbeschreibung mit Kaufmöglichkeit
-- Roséwein - Produktbeschreibung mit Kaufmöglichkeit
- Terroir - Allgemeiner Text
-- Am Hang – Beschreibung mit Link zum Wein
-- Am Meer – Beschreibung mit Link zum Wein
-- In der Ebene – Beschreibung mit Link zum Wein
- Impressionen – Galerie-Komponente mit Bildern der Weinlese
- Angebote – spezielle Angebote im Benutzerbereich
- Kontakt
- Impressum

Struktur Oberes Menü

Das obere Menü soll einen schnellen Zugriff auf die vier Kernthemen geben. Wenn jemand im oberen Menü auf einen Link klickt, sollen sich im Hauptmenü die zu diesem Link gehörenden Links ebenfalls öffnen.

- Weine - Allgemeiner Text
- Terroir - Allgemeiner Text
- Impressionen – Galerie-Komponente mit Bildern der Weinlese
- Kontakt

Struktur Benutzermenü

Nach einer Benutzerregistrierung und dem erfolgreichen Anmelden über das Login-Modul sollen registrierte Benutzer die Möglichkeit haben, spezielle Angebote wahrzunehmen. Hinter der Registrierung steckt die Idee, langfristig einen näheren Kundenkontakt aufzubauen. Angezeigt werden soll eine regelmäßig aktualisierte Seite mit einem günstigen Weinangebot und einer Kaufmöglichkeit. Über den Link Download will Herr Bertrand registrierten Benutzern Zugriff auf seine eingescannten Dokumente geben.

- Angebote
- Download
- Abmelden

Anlegen der Texte und der Menülinks im Hauptmenü

Alle Texte bis auf das Kontaktformular und die Galerie sind zunächst nicht-kategorisierte Inhalte, die Herr Bertrand im Menü Inhalt - Beiträge anlegt. Er achtet darauf, dass die Inhalte nicht auf der Startseite (Frontpage) angezeigt werden. Alle Beiträge sollen die drei Icons PDF, E-Mail und Druck anzeigen, nicht aber das Erstellungsdatum.

Nachdem er alle Beiträge angelegt hat, wechselt er zur Erstellung der Menülinks. Um Weißwein, Rotwein und Roséwein auf die zweite Menüebene zu bekommen, muss als übergeordneter Eintrag Die Weine ausgewählt werden (Abbildung 16.19).

Abbildung 16.19: Links auf der zweiten Menüebene

In Menüs - Main Menu sieht ein baumartiges Menü aus wie in Abbildung 16.20. Der Name Main Menu bleibt intern übrigens erhalten. Nur der Titel von Main Menu ist jetzt Hauptmenü.

Abbildung 16.20: Baumartige Struktur der Menüs

Kontaktlink

Herr Bertrand möchte die in Joomla! integrierte Kontakt-Komponente für sein Kontaktformular benutzen. Er benötigt zunächst eine Kategorie mit dem Namen Fa. Bertrand, die er über den Menüpunkt Komponenten - Kontakt - Kategorien anlegt (Abbildung 16.21).

Abbildung 16.21: Neue Kontaktkategorie

Im Reiter Kontakte legt er, wie in Kapitel 9.2 auf Seite 173 beschrieben, zunächst sich selbst als Kontakt an. Langfristig kommen hier vielleicht noch mehr Kontakte zusammen. Momentan sollte ein zentrales Formular ausreichen (Abbildung 16.22).

Abbildung 16.22: Neuer Kontakt

Jetzt fügt er noch den Kontaktlink in das Hauptmenü ein. Er klickt dazu auf Menüs - Main Menu - Neu. Im Menüeintragsassistent klickt Herr Bertrand auf Kontakte - Standard Kontakt Layout und landet in der Bearbeitungsmaske für den neuen Menüeintrag. Im Parameterbereich werden ihm jetzt die zur Verfügung stehenden Kontakte angezeigt. Momentan ist das natürlich nur er selbst. Er markiert seinen Namen und klickt auf das Icon Speichern (Abbildung 16.23).

Abbildung 16.23: Kontakt Menülink

Jetzt muss er in Menüs - Main Menu den Kontaktlink noch veröffentlichen und an der richtigen Stelle positionieren.

Auf der Website erscheinen jetzt hinter dem Link Kontakt die Daten von Herrn Bertrand und ein Formular, in das ein Besucher seine Frage schreiben kann.

Oberes Menü

Das Hauptmenü ist nun bis auf die Einbindung der Galerie-Komponente komplett. Jetzt erstellt sich Herr Bertrand ein »oberes Menü«. Im Menübereich wählt er Menüs aus und klickt auf das Icon Neu. Er nennt das neue Menü Top Menü (Abbildung 16.24).

Abbildung 16.24: Neues Menü erstellen

Das Menü muss jetzt noch unter Erweiterungen Module auf die Position user3 gesetzt und aktiviert werden. Herr Bertrand muss keine Rücksicht auf den Titel nehmen, da dieser bei den horizontalen Menüs in der Regel nicht angezeigt wird (Abbildung 16.25).

Abbildung 16.25: Positionierung des neuen Menüs

Die gewünschten Links kann er sich aus dem Main Menu in das Top Menü kopieren. Er geht dazu auf Menüs - Main Menu, markiert die Links Die Weine, Terroir und Kontakt und klickt auf das Icon Kopieren (Abbildung 16.26).

Abbildung 16.26: Menüeinträge kopieren

Die Links wurden kopiert. Er schaut schnell auf die Website, um das Ergebnis zu überprüfen. Die Links sind richtig auf der Website angekommen und werden im oberen Menü angezeigt. Wenn sie angeklickt werden, wird auch der richtige Beitrag angezeigt. Im Hauptmenü öffnet sich jedoch nicht das entsprechende Untermenü. Beim Ausprobieren bemerkt er in der URL unterschiedliche Werte für die ItemID. Wenn er den Wert für die ItemID aus dem Hauptmenü nimmt und per Hand in der URL im Browser verändert, verhält sich der Link wie gewünscht, und die untergeordneten Links werden im Hauptmenü sichtbar.

Herr Bertrand überlegt eine Weile und beschließt, die Top Menu-Links als URLs zu realisieren. Er will die zwei Links zu Die Weine und Terroir aus dem Hauptmenü ins Top Menu bringen.

Dazu geht er auf Menüs - Top Menu - Die Weine und klickt in der Bearbeitungsmaske auf den Button Typ ändern und im darauf folgenden Menüeintragsassistent auf Externer Link (Abbildung 16.27).

Abbildung 16.27: Menüeintragstyp ändern

Jetzt ist das Feld Link nicht mehr grau hinterlegt, sondern beschreibbar. Er fügt den entsprechenden Link ein. Bei Herrn Bertrand sind das für

• die Weine der Link index.php?option=com_content&view=article&id=5&Itemid=4 und für
• die Terroir der Link index.php?option=com_content&view=article&id=9&Itemid=8.

Vor index.php sollte kein / (Slash) stehen. In unserem Fall würde so das Dokumentenverzeichnis des Apache Webservers angesprochen, und die XAMPP lite-Startseite würde erscheinen. Ein relativer Link enthält nicht die vollständige Angabe des Links und wird immer in Ergänzung des jeweiligen Aufrufortes als Vervollständigung angesehen. Zieht man zum Beispiel einen Internetauftritt auf eine andere Domain um, stimmen alle relativen Links sofort wieder. Hätte man alle als absolute Links (mit Slash) geschrieben, müssten zuerst alle Links verändert werden. Die ItemIds können bei Ihnen natürlich andere Werte als bei Herrn Bertrand haben.

Um diese Anforderungen erfüllen zu können, bedarf es einiger Vorbereitungen.

16.2.1 Logo und Erscheinungsbild

Die Familie Bertrand trifft sich mit der befreundeten Designerin Ruth Prantz, um das Layout zu besprechen, und diskutiert auch über die Inhalte, die auf der Website publiziert werden sollen. Ruth fragt unter anderem, ob es bereits ein Logo und ein Erscheinungsbild im Printbereich gibt. Unter Printbereich versteht sie bereits vorhandene Prospekte, Flyer, Briefpapiere und auch beispielsweise ein Ladenschild.

Es gibt bereits ein Logo, das der Großvater Bertrand mal gezeichnet hat (Abbildung 16.1).

Abbildung 16.1: Großvater Bertrands Logo

Das Logo taucht in verschiedenen Zusammenhängen immer wieder bei der Familie Bertrand auf. Ein einheitliches Erscheinungsbild gibt es allerdings nicht. In verschiedenen Druckerzeugnissen wird mit unterschiedlichen Farben, Schriften und Foto- und Grafikstilen gearbeitet.

Außerdem möchte Ruth wissen, welche Ziele die Familie Bertrand mit der Website verfolgt und welche Zielgruppen angesprochen werden sollen.

Die Firma Bertrand ist ein ökologischer Betrieb, der sehr auf die Qualität des produzierten Weines achtet und damit auf einen Zeittrend setzt. Sie wollen über die Website etwa 5% ihres Weines verkaufen. Zielgruppe sind Weinliebhaber und deren Freunde ab ca. 35 Jahre aufwärts.

Um sich von seinen Konkurrenten deutlich abzugrenzen, rät Ruth Herrn Bertrand, das Logo, die Farben und die Schriften zeitgemäß zu überarbeiten.

Ein erster Entwurf, der nach einer halben Stunde auf ihrem Bildschirm sichtbar wird, sieht aus wie in Abbildung 16.2.

Abbildung 16.2: Großvater Bertrands Logo nach der Bearbeitung durch Ruth

Zum Erstellen dieses Logos benutzt Ruth hier das Programm Photoshop Elements¹. Viele Website-Provider legen dieses Programm als kostenlose Zugabe beim Abschluss eines Hosting-Vertrages bei. Sie können natürlich auch jedes andere Grafikprogramm benutzen, um ein Logo zu erstellen, beispielsweise das Open Source-Programm Gimp².

Der Familie Bertrand gefällt der Entwurf gut und Ruth verabschiedet sich, um ein Joomla!-Template auf dieser Basis in diesen Farben weiterzuentwickeln. Familie Bertrand will in der Zwischenzeit Materialien für die Website sammeln und die Struktur des Joomla!-Systems festlegen.

16.2.2 Fotos

Um einen Eindruck vom Wein, der Umgebung, den Reben, der Arbeit und der Familie zu bekommen, werden Fotos benötigt. Der Sohn Didier und die Tochter Marlene werden beauftragt, ihr umfangreiches Foto- und Videoarchiv nach brauchbarem Material zu durchsuchen und beim heutigen Weinfest zu fotografieren und zu filmen.

16.2.3 Texte

Um die Texte, die auf der Website erscheinen sollen, möchte sich Herr Bertrand persönlich kümmern. Er hat bereits zahlreiche Flyer in der Vergangenheit mit Texten versehen und Artikel in der lokalen Presse und in Fachzeitschriften geschrieben. Außerdem besitzt er viele Dokumente über Untersuchungen seines Landes und seines Weins. Diese Dokumente möchte er einscannen und als PDF im internen Bereich anbieten.

Die Website, die hier beschrieben wird, ist die Website der Winzerfamilie Bertrand. Pascal Bertrand betreibt Weinbau in dritter Generation. Er hat verschiedene Rebsorten und Jahrgänge Wein im Angebot.

Bisher liefert er seinen Wein an eine Winzerkooperative, und im Sommer verkauft er direkt an die Kunden. Jetzt möchte Herr Bertrand zusätzlich seinen Wein auch über das Internet verkaufen, natürlich mithilfe von Joomla!.

Die Website soll

• das Unternehmen Bertrand darstellen,
• Hintergründe über die Weinlagen und den Wein vermitteln,
• eine Online-Bestellmöglichkeit bieten,
• eine Möglichkeit für Herrn Bertrand bieten, Neuigkeiten auf der Website zu publizieren,
• eine Galerie mit Bildern und Videos von der Weinlese und Veranstaltungen enthalten,
• einen internen Bereich bieten, in dem registrierte Benutzer besondere Angebote und einen Newsletter erhalten,
• eine zentrale Kontaktmöglichkeit für Besucher bieten und
• die Einbindung von Newsfeeds aus der Weinbranche ermöglichen.

Die Realisierung der Website soll in zwei Tagen abgeschlossen sein.

Nachdem Sie nun Joomla! installiert und vorsichtig erkundet haben, können wir uns das Ergebnis gemeinsam ansehen. Auf den ersten Blick sieht die Website mit den Beispieldaten ein wenig verwirrend aus. Grundsätzlich teilt sich das Joomla!-System in ein Frontend (Ihre eigentliche Website) und ein Backend (die Verwaltungssicht Ihrer Website). Das Frontend sieht der Kunde, der Websurfer, das Backend nur die Mitarbeiter bzw. Administratoren.

Joomla! ist eine Art Baukasten, mit dem Sie, wenn es einmal auf dem Server installiert ist, Ihre Website erstellen und pflegen können. Joomla! ist wie ein Haus, das Sie sich auf einem Grundstück Ihrer Wahl bauen und das Sie nach und nach einrichten. Also gewissermaßen eine Immobilie.

Halt! Ich rede die ganze Zeit von Mobilität, und nun sollen Sie eine Immobilie bauen?

Keine Angst, die Immobilie, die Sie bauen werden, befindet sich zwar physikalisch an einem Ort (Ihrem Server), ist aber von jedem anderen Ort aus zugänglich. Um eine Immobilie bewohnbar zu machen, brauchen Sie lebensnotwendige Versorgungsleistungen wie Heizung, Strom und Wasserversorgung. Das ist der Grund, warum Ihr Joomla! in einem möglichst sicheren Server deponiert wird, bei dem hoffentlich nie der Strom ausfällt. Denken Sie an die Abkürzung 24/7¹³.

Wie bei einem Haus haben Sie auch in Joomla! eine bestimmte Raumaufteilung. Sie haben einen Raum zum Repräsentieren (Inhalte), einen zum Kochen und Reden (Forum), einen zum Arbeiten (Administrationsbereich) und einen ganz privaten, den Sie nur guten Freunden zeigen (Mitgliederbereich). Vielleicht haben Sie auch einen großen Raum, der alle Bereiche integriert.

Egal, für welche Raumaufteilung Sie sich entscheiden ... Sie sollten Ihr Haus möblieren, mit einem schönen Fußboden versehen, die Wände tapezieren, ein paar Bilder an die Wand hängen (Template) und natürlich auch regelmäßig sauber machen. Die vielen Gäste hinterlassen ja Spuren, die nicht immer erwünscht sind.

Damit Besucher Ihr Haus auch finden, braucht es eine Adresse, unter der es gefunden werden kann (Domain). Diese Adresse sollte im Falle einer Website möglichst vielen Menschen bekannt sein. Da es im Internet kein Einwohnermeldeamt gibt, müssen Sie sich selbst um das Thema »Wie werde ich gefunden?« kümmern.

Vielleicht haben Sie um Ihr Haus herum auch einen Garten mit verschiedenen Eingangstoren, einem offiziellen Eingangsportal, einen Hintereingang und vielleicht noch eine kleine verwitterte Gartenpforte für die guten Freunde.

Vielleicht mögen Sie ja solche Häuser gar nicht und benutzen eher Bauwagen, Zelte, Wohnmobile, Hotels oder bevorzugen Wohngemeinschaften. Vielleicht wohnen Sie auch gern zur Miete und wollen sich über diese Dinge keine Gedanken machen.

Wenn Sie die letzten Sätze auf Ihre Website beziehen, so merken Sie schon, dass es wichtig ist zu wissen, was Sie wollen, wer Sie sind und wie Sie Ihrer Umwelt erscheinen wollen.

Man kann nicht nicht kommunizieren! Man kann aber sehr schnell falsch verstanden werden.

Also planen Sie Ihr virtuelles Haus im Internet genau. Denken Sie nach über die Texte und über die Farbgestaltungen, über mögliche interaktive Elemente wie einen Kalender oder ein Forum und natürlich einen Bereich, den nur registrierte Benutzer sehen dürfen.

Denken Sie an Benutzerführungen, die Benutzer führen und nicht bevormunden, und schauen Sie sich mal um, wie andere es machen.

Reden Sie mit den Menschen, die Sie mit Ihrer Website ansprechen wollen. Sie werden sich freuen, VORHER gefragt zu werden und werden Ihnen die Tipps geben, an die Sie aus Ihrem Blickwinkel vielleicht gar nicht gedacht haben. Das ist eine preisgünstige und effektive Möglichkeit, auf Ideen zu kommen und die schlimmsten Fehler zu vermeiden. Investieren Sie viel Herzblut in diese Dinge, die ganz entscheidend für den Erfolg Ihres Auftritts sind.