Inhalt

16.3 Technische Umsetzung - Teil 1

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).

Joomla!-Installation – Konfiguration
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).

Website ohne Beispieldaten
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).

Aktiviertes Modul
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).

Neue Module erzeugen
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).

Erstellen einer Nachricht
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).

Startseite mit drei Beiträgen in beez
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).

Konfiguration der Inhalte
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).

Einbinden eines Newsfeeds in Firefox
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).

Die Beiträge als Feed in der Lesezeichen-Symbolleiste
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 ist3.

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.4

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)

Ein Beitrag in das Menü bringen
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).

Erstellung des Impressum-Links
Abbildung 16.13: Erstellung des Impressum-Links

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

Auswahl des Beitrages für den Menülink
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).

Impressum im Menübereich
Abbildung 16.15: Impressum im Menübereich

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

Impressum auf der Website
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).

Feinheiten im Impressum
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.

Modul Anmeldung erstellen
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).

Links auf der zweiten Menüebene
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ü.

Baumartige Struktur der Menüs
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).

Neue Kontaktkategorie
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).

Neuer Kontakt
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).

Kontakt Menülink
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).

Neues Menü erstellen
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).

Positionierung des neuen Menüs
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).

Menüeinträge kopieren
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).

Menüeintragstyp ändern
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.

4 Genau genommen gibt es hier noch einige andere Pflichteinträge – aber das lesen Sie am besten unter http://de.wikipedia.org/wiki/Impressum#Impressum_im_Internet nach und entscheiden selbst, was für Sie zutrifft.

16.2 Vorbereitungen

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).

Großvater Bertrands Logo
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.

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

Zum Erstellen dieses Logos benutzt Ruth hier das Programm Photoshop Elements1. 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 Gimp2.

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.

8.3 Papierkorb

Wie bei den Menüeinträgen können Sie auch Beiträge nicht direkt löschen. Durch einen Klick auf das Icon Papierkorb in der Beitragsbearbeitung werden die Beiträge in diesen befördert. Im Papierkorb können Sie durch einen Klick auf das Icon Wiederherstellen die gelöschten Beiträge wiederherstellen, mit dem Icon Löschen können Sie die Beiträge endgültig löschen (Abbildung 8.19).

Papierkorb für Beiträge
Abbildung 8.19: Papierkorb für Beiträge

 

8.2 Neuen Beitrag erstellen

Lassen Sie uns am Beispiel einer Neuigkeit, die Sie auf der Startseite anzeigen lassen wollen, die Erstellung eines Beitrages durchgehen. Klicken Sie auf Neu. Sie sehen eine Eingabemaske wie in Abbildung 8.7 mit einem großen Editor-Textfeld.

Bearbeitungsmaske eines neuen Beitrages
Abbildung 8.7: Bearbeitungsmaske eines neuen Beitrages

Geben Sie einen Titel und einen Text ein. Falls Sie auch immer vor einem weißen Blatt sitzen und nicht wissen, was Sie schreiben sollen, dann kopieren Sie sich einfach einen schönen Blindtext1.

Wählen Sie:

  • Bereich: Nicht kategorisiert
  • Kategorie: Nicht kategorisiert
  • Freigegeben: Ja
  • Startseite (Frontpage): Ja

Klicken Sie auf das Icon Anwenden und besuchen Sie Ihre Website. Ihre Nachricht steht tatsächlich auf der Startseite! (Abbildung 8.8).

Ein Beitrag auf der Startseite
Abbildung 8.8: Ein Beitrag auf der Startseite

So, der Text ist schon mal da. Jetzt müssen wir uns um die Feinheiten kümmern. Als Erstes soll nicht der gesamte Text angezeigt werden, sondern nur ein kleiner Aufmacher. Wechseln Sie wieder in das Backend, positionieren Sie den Cursor an die Stelle, an der der Aufmachertext beendet sein soll, und klicken Sie unterhalb des Textfeldes auf den Button Weiterlesen. In das Fenster wird eine rote Linie eingefügt, die die Grenze zwischen den beiden Texten symbolisiert (Abbildung 8.9).

Textbearbeitung – Weiterlesen-Bereich
Abbildung 8.9: Textbearbeitung – Weiterlesen-Bereich

Sie können hier auch beginnen, den Text mit den Editor-Tools zu formatieren. Nach einem Klick auf Anwenden sieht Ihre Startseite folgendermaßen aus (wie in Abbildung 8.10):

Beitrag mit Weiterlesen-Link
Abbildung 8.10: Beitrag mit Weiterlesen-Link

Zurück in das Backend.

8.2.1 Parameter

Wie bereits bei der Menüerstellung gibt es auch hier verschiedene Parameterblöcke. Über den Parameterblöcken sehen Sie noch allgemeine Informationen über den Beitrag.

Inhalt ID: Die Datensatznummer des Beitrages

Status: Aktueller Status (momentan veröffentlicht)

Treffer: Anzahl der Zugriffe auf diesen Beitrag. Durch einen Klick auf den Button Zurücksetzen können Sie die Zugriffe auf 0 setzen.

Überarbeitet: Der Beitrag hat am Anfang die Versionsnummer 1. Bei jedem Speichervorgang wird die Versionsnummer um eins hochgezählt (hier ist schon eine Grundlage für die geplante Versionsverwaltung geschaffen).

Erstellt: Erstellungsdatum

Bearbeitet: Bearbeitungsdatum

Parameter – Beitrag

Der erste Block stellt die Basis-Parameter dar (Abbildung 8.11).

Beitragsbearbeitung – Basis-Parameter
Abbildung 8.11: Beitragsbearbeitung – Basis-Parameter

Autor: Hier können Sie den Verfasser der Nachricht durch Listenauswahl ändern. Alle vorhandenen Benutzer werden in der Liste angezeigt.

Autor-Alias: Hier können Sie ein Pseudonym für den Autor eingeben, das dann auf der Website angezeigt wird.

Zugriffsebene: Zugriff für die drei Benutzergruppen.

Erstellungsdatum: An dieser Stelle können Sie das Erstellungsdatum des Beitrages verändern. Durch einen Klick auf das Kalender-Icon erhalten Sie einen grafischen Kalender als Eingabehilfe.

Freigabe starten: Dies dient dazu, den Start der Veröffentlichung festzulegen. Standardmäßig werden Inhalte sofort veröffentlicht. Durch einen Klick auf das Kalender-Icon erscheint ein grafischer Kalender als Eingabehilfe.

Freigabe: Hier können Sie das Verfallsdatum des Inhalts bestimmen. Standardmäßig verfallen Inhalte nie. Ein Klick auf das Kalender-Icon zeigt Ihnen wieder den grafischen Kalender.

Parameter – Erweitert

Im Bereich Parameter – Erweitert können Sie die Voreinstellungen (siehe Kapitel 8.1, Seite 151) für diesen Inhalt überschreiben (Abbildung 8.12). Diese Einstellungen gelten nur für den Aufruf des kompletten Beitrages, in unserem Fall nach Klick auf den Link Weiterlesen. Für die Teaser-Ansicht stellen Sie die Parameter in den entsprechenden Menülinks ein.

Inhaltsbearbeitung – Erweiterte Parameter
Abbildung 8.12: Inhaltsbearbeitung – Erweiterte Parameter

Seitentitel: Soll der Seitentitel angezeigt werden?

Verlinkte Artikel: Überschreiben der globalen Einstellungen

Intro-Text: Soll der Aufmachertext angezeigt oder versteckt werden?

Bereichsname: Soll der Bereichsname angezeigt werden?

Verlinkbarer Bereichsname: Soll der Bereichsname als Link auf alle Beiträge in diesem Bereich angezeigt werden?

Kategoriename: Soll der Kategoriename angezeigt werden?

Verlinkbarer Kategoriename: Soll der Kategoriename als Link auf alle Kategorien in diesem Bereich angezeigt werden?

Die weiteren sieben Parameter überschreiben die globalen Einstellungen für diesen einen Beitrag.

Inhaltssprache: Hier kann die Sprache des Beitrages festgelegt werden. Dieses Feature ist neu und bietet im Zusammenhang mit dem Joomfish von Alex Kempkens2 interessante Möglichkeiten bei der Sprachsteuerung. Abhängig vom Inhalt könnte die Website in der einen oder anderen Sprache erscheinen.

Schlüsselreferenz: Hier können Referenzen gesetzt werden für den Export in das DocBook-Format3. Momentan spielt dieses Feld nur für Entwickler im Zusammenhang mit dem Hilfesystem eine Rolle.

Alternativer Weiterlesen Text: Hier kann für den Weiterlesen-Link ein alternativer Text eingegeben werden. Das ist wichtig bei der Erstellung von barrierefreien Websites.

Metadaten

In diesem Parameterbereich können Sie für jede Seite eine spezifische Beschreibung und Schlüsselwörter als Metadaten eingeben. Die hier eingegebenen Texte werden dann im HTML-Quellcode der Website mit der Nachricht in den Metatags zusätzlich zu den in der globalen Konfiguration festgelegten Metadaten eingebaut (Abbildung 8.13).

Beitragsbearbeitung – Metadaten
Abbildung 8.13: Beitragsbearbeitung – Metadaten

Im Bereich Robots können Suchworte für Robots eingegeben werden. Der entsprechende Metatag wird eingeblendet.

<meta name="robots" content="Wort1 Wort2" />

Im Feld Autor können Sie noch einen gesonderten Autorennamen für die Metatags eingeben.

8.2.2 Bilder

Wie kommen Bilder in den Inhalt? Das Bilderproblem zieht sich wie ein roter Faden durch die CMS-Welt.

Das Bild muss

  • erstellt (Kamera),
  • übertragen (Kabel, WLAN),
  • bearbeitet (Bildbearbeitung),
  • auf den Server geladen (FTP, PHP-Upload) und
  • in den Beitrag eingebunden werden.

Sie sehen schon, vermutlich gibt es zahlreiche Möglichkeiten.

Joomla! sieht als Standard vor, Bilder, die sich im Medienbereich befinden, per Auswahldialog in den Beitrag einzufügen.

Positionieren Sie den Cursor im Text an der Stelle, an der das Bild erscheinen soll. Klicken Sie dann den Button Bild unter dem Textfenster. Es erscheint der Bild einfügen-Dialog (Abbildung 8.14).

Beitragsbearbeitung – Bilder
Abbildung 8.14: Beitragsbearbeitung – Bilder

Sie können jedem Inhalt ein beliebiges Bild aus dem Medienbereich zuordnen. Sollte es noch nicht im Medienbereich vorhanden sein, können Sie es durch Klick auf das Icon Upload während der Bearbeitung hochladen.

Wählen Sie ein Unterverzeichnis aus und klicken Sie auf das Bild, das Sie einfügen wollen. Klicken Sie auf den Button Einfügen. Sie können bereits einen Titel für das Bild angeben und es ausrichten.

Im Textfenster darunter sehen Sie jetzt Ihr Bild (Abbildung 8.15).

Eingefügtes Bild
Abbildung 8.15: Eingefügtes Bild

Die Bildeigenschaften sind im TinyMCE Editor natürlich bearbeitbar. Markieren Sie das Bild durch einen Klick mit der linken Maustaste. Klicken Sie auf das Icon mit dem Baum oberhalb des Textfensters. Es öffnet sich der Bildeigenschaften-Dialog des TinyMCE-Editors. Hier können Sie noch weitere Eigenschaften wie Links, Popup-Fenster, Verhalten und andere Parameter setzen (Abbildung 8.16). Ich habe beispielsweise einen 15 Pixel-Abstand um das Bild herum festgelegt.

Bildparameter-Dialog von TinyMCE
Abbildung 8.16: Bildparameter-Dialog von TinyMCE

Kontrollieren Sie, nachdem Sie auf das Icon Anwenden geklickt haben, das Ergebnis entweder auf der Website oder durch einen Klick auf das Icon Vorschau. Genau wie den Weiterlesen-Link oder die Bilder können Sie auch Seitenumbrüche einfügen. Positionieren Sie den Cursor an der Stelle, an der der Seitenumbruch eingefügt werden soll, und klicken Sie auf den Button Seitenumbruch unter dem Textfeld. Es öffnet sich ein Seitenumbruch-Dialog (Abbildung 8.17).

Beitragsbearbeitung – Seitenumbruch
Abbildung 8.17: Beitragsbearbeitung – Seitenumbruch

Hier können Sie einen Seitentitel für die nächste Seite eingeben. Außerdem können Sie einen Alias-Text für den Seitentitel für das automatisch von Joomla! erzeugte Inhaltsverzeichnis eingeben. Der Titel der Nachricht ist Meine Neuigkeit, und im Inhaltsverzeichnis steht jetzt als Überschrift Alles über Muscheln. Klicken Sie anschließend auf seitenumbruch einfügen. Der Seitenumbruch erscheint im Textfenster als eine graue Linie. Auf der Website sieht Ihr Beitrag jetzt aus wie in Abbildung 8.18.

Von Joomla! dargestellter mehrseitiger Beitrag
Abbildung 8.18: Von Joomla! dargestellter mehrseitiger Beitrag

Über dem Beitragstext steht jetzt Seite x von y, rechts oben steht ein Inhaltsverzeichnis mit dem von Ihnen angegebenen Text, und unter dem Beitragstext finden Sie die Links Zurück und Nächste zum Navigieren zwischen den Seiten. Sie können beliebig viele Bilder und Seitenumbrüche in einen Text einbauen.

 

8.1 Beiträge

Der Menüpunkt Menü Inhalt Beiträge führt Sie in die Übersichtsmaske für Ihre Beiträge (Abbildung 8.2). Hier ist die zentrale Schaltstelle für die Organisation der Beiträge auf Ihrer Website.

In vier Optionslisten im Informationsbereich können Sie die angezeigten Inhalte nach Bereich, Kategorie, Autor und Status filtern. Außerdem finden Sie dort ein Suchfeld, mit dem Sie in den Titeln suchen können.

Im unteren Bereich ist die Navigationsleiste, mit deren Hilfe Sie durch die Inhalte blättern können. In einer Optionsliste können Sie auswählen, wie viele Einträge Sie in der Liste sehen wollen. Standardmäßig gilt hier die Einstellung, die Sie in den Voreinstellungen (siehe Kapitel 8.1.2, Seite 151) vorgenommen haben.

Die Liste ist sortiert nach Bereich, Kategorie, Autor und Titel. Sie können die Sortierung durch einen Klick auf die entsprechende Spaltenübersicht ändern.

Inhalt – Beiträge

Abbildung 8.2: Inhalt – Beiträge

8.1.1 Beschreibung der Beitragsliste

Vor dem Titel ist eine Checkbox, mit der Sie die zu bearbeitenden Elemente auswählen können. Wenn Sie die Checkbox in der Kopfzeile anwählen, werden alle Elemente der Liste ausgewählt.

Der Titel führt als Link zum Editiermodus des Beitrages (Abbildung 8.3).

Beitrag-Bearbeitungsmaske

Abbildung 8.3: Beitrag-Bearbeitungsmaske

Freigegeben zeigt an, ob der Eintrag veröffentlicht ist (grüner Haken) oder nicht (rotes Kreuz). Außer diesen beiden Symbolen gibt es auch noch die Möglichkeit, dass die Veröffentlichungsperiode abgelaufen ist und das Element bereits im Archiv liegt. In der Fußzeile der Seite finden Sie eine Legende für die Icons. Hier werden auch die Symbole für schwebend (im Wartezustand) und abgelaufen erklärt.

Startseite zeigt an, ob der Eintrag auf der Startseite (siehe Kapitel 3.1.2, Seite 78) veröffentlicht ist (grüner Haken) oder nicht (rotes Kreuz)

Unter Reihenfolge können Sie die Einträge durch Klick auf die grünen Pfeile innerhalb eines Bereiches verschieben. Sie können auch die Sortierung durch die Eingabe einer Zahl und einen anschließenden Klick auf das Disketten-Icon in der Überschrift vornehmen.

Unter Zugriff sehen Sie grüne Öffentlich-Links. Durch Klick auf einen dieser Links ändern Sie die Zugriffsrechte zwischen den drei Gruppen Öffentlich, Registriert und Special.

Bereich ist der Bereich, dem dieser Eintrag zugeordnet ist. Durch einen Klick auf den Link gelangen Sie in die Bereichbearbeitung. Beiträge ohne einen Bereich gelten als nicht kategorisiert. Nicht kategorisierte Beiträge entsprechen den statischen Inhalten in Joomla! 1.0.

Kategorie ist die Struktur unterhalb der Bereiche, in der dieser Eintrag eingeordnet ist. Ein Klick auf den Link führt Sie in die Kategoriebearbeitung.

Autor ist der Autor des Eintrages. Durch einen Klick auf den Link gelangen Sie in die Benutzerverwaltung.

Datum schließlich ist das Erstellungsdatum des Eintrages.

ID ist die Datensatznummer innerhalb der Tabelle der Datenbank. Diese ID taucht in der URL zu diesem Eintrag wieder auf.

Exkurs

In Joomla! 1.0.x gab es zwei Textfelder – eines für den Aufmachertext (Teaser) und eines für den weiterführenden Text. Diese Trennung wird in Joomla! 1.5 aufgehoben, die Funktionalität an sich bleibt aber erhalten. Sie können jetzt innerhalb des einen Fensters die entsprechenden Trennungen (Weiterlesen, Seitenumbruch) per Mausklick einfügen. Ebenfalls aufgehoben ist die Trennung von statischen und dynamischen Inhaltselementen. Statische Beiträge sind jetzt einfach nicht kategorisierte Beiträge und können auch auf der Frontpage erscheinen.

8.1.2 Icons zur Bearbeitung eines Beitrages

Zur Bearbeitung eines oder mehrerer Beiträge in einem Rutsch stehen Ihnen verschiedene Funktionen zur Verfügung (Abbildung 8.4).

Icons in der Beitragsbearbeitung

Abbildung 8.4: Icons in der Beitragsbearbeitung

Archivieren, Aus Archiv entfernen

Die Idee des Archivs ist es, veraltete Inhalte nicht zu löschen, sondern für die Nachwelt zu erhalten. In der Beitragsbearbeitung können Sie Beiträge durch einen Klick auf das Icon Archiv archivieren. Der Beitrag wird dann in der Übersicht grau hinterlegt angezeigt (Abbildung 8.5).

Archivierter Beitrag

Abbildung 8.5: Archivierter Beitrag

Durch die Auswahl Archiviert im Statusfilter können Sie die Anzeige auf die archivierten Beiträge begrenzen. Die archivierten Beiträge können Sie in verschiedenen Situationen auf der Website einblenden. Siehe auch Kapitel 10.3.7.

Freigeben, Sperren

Hier können Sie Beitrage für die Veröffentlichung freigegeben oder sperren.€

Verschieben, Kopieren

Verschieben oder kopieren Sie einen oder mehrere Beiträge in andere Kategorien und Bereiche.

Papierkorb

Werfen Sie einen oder mehrere Artikel in den Papierkorb.

Voreinstellungen

In den Voreinstellungen für Beiträge können Sie ein Standardlayout für alle Beiträge festlegen (Abbildung 8.6). Diese Einstellungen gelten zunächst für jeden Beitrag. Wenn Sie einem Beitrag ein individuelles Layout geben wollen, so funktioniert das in den Parametern der Beitragsbearbeitung.

Exkurs

In der Version Joomla! 1.0 waren viele Voreinstellungen in der globalen Konfiguration zu finden. Mit Joomla! 1.5 wurden die Voreinstellungen dort entfernt und in den einzelnen Komponenten untergebracht. So finden Sie die Voreinstellungen für die Beiträge in der zentralen Beitragsbearbeitung und beispielsweise die Voreinstellungen für die Protokollierung der Suchstrings in der Such-Komponente.

Beitragsvoreinstellungen

Abbildung 8.6: Beitragsvoreinstellungen

Inhalt abgleichen