Mit TYPOlight Webseiten erfolgreich gestalten: Konzeption, Umsetzung, Beispielprojekte

125

Der Alternativtext ist aus verschiedenen Gründen wichtig und daher auch ein Pflichtfeld beim Verwenden eines Bildes in TYPOlight. Stichworte sind hier die Google-Bildersuche, das Anzeigen des Alternativtextes beim Surfen mit abgeschalteten Bildern sowie die Zugänglichkeit bzgl. Screenreadern. Wenn z. B. alle Alternativtexte nur „untitled.gif“ heißen, lässt sich daraus keine Information gewinnen, was die Grafik/das Bild anzeigt. Verwenden Sie deshalb immer einen sinnvollen und die Bildaussage unterstützenden Alternativtext.

Listing 7.4 Generierter Inline-Style

126

K apite l 7

Abbildung 7.55 Einstellungen

Wie zu Beginn dieses Abschnitts bereits erwähnt, werden die Vorschaubilder auf der Übersichtsseite Portfolio auf die jeweiligen Unterseiten verlinkt. Wie Sie in Abbildung 7.55 sehen, ist ein Link im Feld Link-Adresse eingetragen. Klicken Sie für eine Verlinkung eines Bildes auf das Weltkugel-Icon rechts neben dem Feld. Daraufhin öffnet sich in einem neuen Fenster ein Auswahlmenü, das Ihnen alle zur Verlinkung stehenden Seiten auflistet (Abbildung 7.56). Wählen Sie dort die Seite Portfolio → Reisen aus. Nach der Auswahl schließt das Fenster automatisch (sofern Sie JavaScript in Ihrem Browser nicht deaktiviert haben). Abbildung 7.56 Verlinkung des Bildes mit der Seite Reisen

Bei wiederkehrenden und nahezu gleichen Inhaltselementen können Sie auch das bestehende Inhaltselement duplizieren und somit die gleichen Werte und Angaben übernehmen. Sie ändern dann nur die abweichenden Informationen ab.

Legen Sie nun auch noch die zwei weiteren Inhaltselemente für die PortfolioThemen Luftfahrt und Diverses an. Für dieses Beispiel ändern Sie die Überschriften, das anzuzeigende Bild, den Alternativtext und die Verlinkung ab. Wenn Sie alle drei Inhaltselemente angelegt haben, werden Ihnen diese zunächst untereinander angezeigt. Ein Blick auf die Frontendansicht (der relevante Ausschnitt soll genügen) der fertigen Webseite zeigt Ihnen Abbildung 7.57.

Aufbau einer Website mit T YPO light

127

Abbildung 7.57 Frontendansicht Portfolio

7.11.2 Inhaltselemente werden nebeneinander positioniert Um nun die drei Inhaltselemente nicht unter-, sondern nebeneinander darzustellen, greifen Sie in die CSS-Trickkiste und vergeben für alle drei Inhaltselemente eine CSS-Klasse fotoblock. Öffnen Sie dazu die drei Inhaltselemente durch Klick auf das Editier-Icon und schreiben in der Rubrik Experten-Einstellungen in das Feld CSS-ID/Klasse die CSS-Klasse fotoblock. In den CSS-Definitionen legen Sie fest, dass die Klasse fotoblock folgende Eigenschaften hat: #main .fotoblock { margin:0 40px 0 0; padding:0; width:200px; overflow:hidden; float:left; }

Was passiert durch die Verwendung der Klasse fotoblock?

Listing 7.5 CSS-Definition der Klasse fotoblock

128

K apite l 7

Es wird eine feste Breite von 200 Pixel definiert (width:200px;) und die einzelnen Elemente floaten nach links (float:left;). Ein Außenabstand nach rechts von 40 Pixel Breite (margin; 0 40px 0 0;) wird definiert; alle Innenabstände werden auf Null (padding:0;) gesetzt. Der Wert overflow:hidden; verhindert Scrollbalken im Internet Explorer 6 und setzt die float-Definition in standardkonformen Browsern zurück. Mit der Eigenschaft float:left;8 werden Elemente solange nebeneinander nach links positioniert, bis die Gesamtbreite aller gefloateter Einzelelemente größer als die Gesamtbreite des übergeordneten Elements ist. Das nachfolgende Element wird dann unterhalb der gefloateten Elemente wieder links beginnend positioniert. Anhand der zwei Abbildungen wird dies deutlicher:

Abbildung 7.58 Elemente mit der Eigenschaft float:left; positioniert – ausreichende Breite

In Abbildung 7.58 ist die Breite des Browsers ausreichend, um alle vier Elemente nebeneinander zu positionieren. Wird nun die Breite des Browserfensters verkleinert (Abbildung 7.59), dann wird das letzte Element (Fläche 4) nach links gefloatet und unter den ersten drei Elementen positioniert.

Abbildung 7.59 Elemente mit der Eigenschaft float:left; positioniert – geringe Seitenbreite

8 http://www.css4you.de/float.html

Aufbau einer Website mit T YPO light

129

Mit der Eigenschaft overflow:hidden;9 werden Elemente, die innerhalb anderer Elemente angeordnet und größer sind als das übergeordnete Element, wie z. B. ein Bild in einem Div, abgeschnitten und nicht angezeigt. Da der Internet Explorer 6 Außen- und Innenabstände anders berechnet, kommt es zur Anzeige von Scrollbalken. Um diese unsichtbar zu setzen, wird die Eigenschaft overflow:hidden; verwendet. Ein Bild verdeutlicht die vier verschiedenen overflow-Eigenschaften (Abbildung 7.60):

Abbildung 7.60 Überblick der vier overflowEigenschaften auto, visible, hidden und scroll

Schauen Sie sich das Ergebnis wieder in der Frontendansicht an (Abbildung 7.61): Abbildung 7.61 Frontendansicht Portfolio

9 http://www.css4you.de/overflow.html

130

K apite l 7

In den CSS-Definitionen wurde für die Artikel eine Breite von 720 Pixel definiert. Daraus resultiert die Breite der einzelnen Inhaltselemente, die durch die Vergabe der CSS-Klasse fotoblock vergeben wurde. Drei Bilder mit je 200 Pixel Breite sowie je einen rechten Außenabstand von 40 Pixel ergibt wieder die Gesamtbreite von 720 Pixel. Sie sehen: Mit einem Griff in die CSS-Trickkiste werden die Inhaltselemente nun nebeneinander ausgegeben – die Übersichtlichkeit und kompakte Darstellung ist erreicht. Durch die Definition und Zuweisung der CSS-Klasse fotoblock an die drei Inhaltselemente können Sie eine Mehrspaltigkeit innerhalb eines Layoutbereichs erreichen – hier in der Hauptspalte –, ohne dass Sie dazu ein neues Seitenlayout erstellen müssen.

7.11.3 Bildgalerie für einzelne Portfolioseiten einrichten Der Fotograf hat Ihnen eine Auswahl an Bildern zur Verfügung gestellt, die Sie für ihn in TYPOlight einbinden werden. Die Aufteilung erfolgt in die drei Themenbereiche Reisen, Luftfahrt und Diverses. Die Bildergalerie erstellen Sie mit dem Inhaltselement Galerie. Damit lassen sich Bilder aus Verzeichnissen auslesen und Vorschaubildern in mehreren Spalten und Reihen ausgeben.

Erstellen Sie für jede Bildergalerie ein eigenes Verzeichnis. So können Sie später einfach das Verzeichnis als Quell-Verzeichnis für diese Bildergalerie verwenden und müssen nicht jedes darin enthaltene Bild aktivieren. Unabhängig davon, ob Sie später Bilder aus diesem Verzeichnis löschen oder hinzufügen, werden somit alle in diesem Verzeichnis gespeicherten Bilder in der Bildergalerie angezeigt. Aktivieren Sie hingegen die Bilder einzeln und löschen oder benennen diese um, geht die Verknüpfung zu diesen Bildern verloren und Sie müssen diese wieder einzeln von Hand aktivieren.

7.11.4 Verzeichnisse/Verzeichnisstruktur vorbereiten Der Großteil des Bildmaterials wird auf der Seite Portfolio gezeigt werden. Hier erstellen Sie am besten gleich die Verzeichnisstruktur so, wie Sie diese später auch auf der Webseite anzeigen möchten. Innerhalb des Verzeichnisses tl_files erstellen Sie ein Verzeichnis portfolio; darin drei weitere Unterverzeichnisse reisen, luftfahrt und diverses. Die Verzeichnisstruktur sieht jetzt so aus: ◆◆ tl_files ◆◆ portfolio ◆◆ reisen ◆◆ luftfahrt ◆◆ diverses Wenn Sie innerhalb der Portfolioseite luftfahrt als eine Galerie verwenden möchten, legen Sie dazu von Anfang an weitere Unterverzeichnisse luftfahrt_01, luftfahrt_02 oder airshow_paris_09 etc. im Verzeichnis luftfahrt an.

Aufbau einer Website mit T YPO light

7.11.5 Bilder vorbereiten Bereiten Sie die Bilder vor dem Hochladen mit einem geeigneten Bildbearbeitungsprogramm vor. Denken Sie dabei an den Farbraum (RGB als Farbmodell für die Darstellung am Bildschirm) und an die Bildgröße. Laden Sie JPG-Dateien nicht direkt aus der Kamera auf den Server; die Bildgrößen werden Sie für eine Bildergalerie nicht benötigen. Bei durchschnittlichen Monitorauflösungen ist eine maximale Breite oder Höhe von 800 -1200 Pixel sinnvoll. Sie sparen zum einen Zeit beim Hochladen der Dateien, Speicherplatz auf dem Server und belasten den Server nicht mit unnötiger Skalierarbeit (es kann dadurch dann auch zum Abbruch der serverseitigen Bildskalierung führen, weil die Ausführungszeit des PHP-Skriptes erreicht ist). Zudem freut sich der Besucher der Website, wenn die Inhalte zügig geladen werden :-). TYPOlight ermöglicht es Ihnen, Standardvorgaben für maximale Bildbreite und Bildhöhe für Datei-Uploads einzustellen. Sie finden diese Einstellungen im Backend unter System → Einstellungen in der Rubrik Datei-Uploads. Wird eine Datei hochgeladen, die größer ist als diese definierten Werte, wird die Datei auf die definierten Maximalwerte umgerechnet und in der Dateiverwaltung ein entsprechender Hinweis ausgegeben (Abbildung 7.62).

131

Wenn Sie sich auf den FTP-Server Ihrer TYPOlight-Installation einloggen und in das Verzeichnis tl_files wechseln, sehen Sie die gleichen Inhalte wie wenn Sie im Backend von TYPOlight System → Dateiverwaltung aufrufen. Wenn Sie eine Website mit vielen Verzeichnissen erstellen, kann es sinnvoll sein, diese Verzeichnisstruktur lokal auf Ihrem Rechner zu erstellen und anschließend auf den FTP-Server zu übertragen.

Abbildung 7.62 Hinweis nach dem Hochladen und Verkleinern

Achten Sie auch auf Namensbezeichnungen bzw. -konventionen. Verwenden Sie keine Leerzeichen, Umlaute und sonstigen Sonderzeichen für Ihre Dateinamen. TYPOlight fängt die wesentlichen Bedienungsfehler intelligent ab, dennoch empfehle ich Ihnen, von Anfang an darauf zu achten, dass Sie die Namensbezeichnungen bzw. -konventionen einhalten. Sie sparen sich dadurch Probleme, Fehlermeldungen und Frust. Nicht sinnvolle Bezeichnung: Lösungsansätze Webdesign.jpg Sinnvolle Bezeichnung: loesungsansaetze_webdesign.jpg

132

K apite l 7

Benennen Sie Bilder vor dem Hochladen sinnvoll um. Digitalkameras speichern die Bilder zwar mit einer fortlaufenden Nummer ab, aber würden Sie hinter einem Dateinamen DSC_0387. jpg eine spektakuläre Aufnahme eines ausbrechenden Geysirs vermuten? Google und andere Suchmaschinen auch nicht. Und die Wahrscheinlichkeit, dass Bilder von Geysiren mit einem Dateinamen DSC_0387.jpg gefunden werden, ist sehr unwahrscheinlich. Geben Sie einmal den Dateinamen bei Google ein und stellen Sie auf die Option Bildersuche um: ungefähr 24.100 Treffer; wenn Sie die normale Textsuche verwenden, sogar 52.400 Treffer. Wenn Sie jetzt zum Vergleich den Dateinamen ausbrechender_geysir.jpg mit der Bildsuche von Google suchen: exakt 5 Treffer. Sie sehen es lohnt sich – gerade auch aus Sicht der Suchmaschinenoptimierung –, sinnvolle und treffend beschreibende Dateinamen zu vergeben.

Nachdem die Vorbereitungen für die Bildergalerie abgeschlossen sind, legen Sie die erste Bildergalerie an. Gehen Sie im Backend von TYPOlight wieder in die Artikelübersicht durch Klicken auf Inhalte → Artikel und wählen den Artikel Reisen durch Klick auf das Editier-Icon aus. Erstellen Sie zunächst wieder eine Überschrift mit der Auszeichnung h1 und Speichern und schliessen Sie das Inhaltselement. Erstellen Sie nun ein weiteres Inhaltselement nach der Überschrift und wählen als Elementtyp Galerie aus. Im nächsten Schritt definieren Sie in der Rubrik Dateien und Ordner das Verzeichnis der Quelldateien. Klicken Sie dazu rechts auf die Checkbox Auswahl ändern. Jetzt wird Ihnen die gesamte Verzeichnisstruktur innerhalb des Verzeichnisses tl_files angezeigt. Wählen Sie das Verzeichnis portfolio/reisen aus, indem Sie nur die Checkbox für dieses Verzeichnis aktivieren (Abbildung 7.63). Abbildung 7.63 Auswahl des Verzeichnisses reisen

Nun weiß TYPOlight, dass die Bildergalerie aus diesem Ordner erstellt wird. In der Rubrik Bild-Einstellungen definieren Sie nun weitere Details. Für die Vorschaubilder der Galerie verwenden Sie ein quadratisches Format, damit alle Bilder in einer einheitlichen Größe angezeigt werden – dabei wird die sichtbare Fläche von der Bildmitte aus berechnet. Dies ist insbesondere dann sinnvoll, wenn Sie Hoch- und Querformate haben. Definieren Sie im Feld Bildbreite und Bildhöhe den Wert von 100 Pixel und setzen den Skaliermodus auf Exaktes Format. Im Feld Bildabstand bestimmen Sie den Abstand zwischen den einzelnen Vorschaubildern. In diesem Beispiel setzen Sie den Bildabstand für rechts und unten auf 10 Pixel, für den oberen und linken Rand auf 0 Pixel. Selbst wenn Sie nur einen Wert definieren, wählen Sie auf jeden Fall eine Maßeinheit aus – in der Regel Pixel (px).

Aufbau einer Website mit T YPO light

133

Im Feld Vorschaubilder pro Reihe wählen Sie in diesem Beispiel 6 Bilder aus. Die sinnvolle Anzahl der Bilder ergibt sich aus mehreren Faktoren: ◆◆ verfügbare Breite der Hauptspalte ◆◆ Breite der Vorschaubilder ◆◆ Abstand der Vorschaubilder Also ist ein wenig Rechenarbeit nötig: Das Seitenlayout ist auf 960 Pixel Breite angelegt. Im Seitenlayout wurde keine linke oder rechte Spalte definiert, sodass theoretisch eine nutzbare Breite von 960 Pixel zur Verfügung stehen müsste. Jedoch wurde die sichtbare Breite aller Artikelelemente durch eine CSS-Definition auf 720 Pixel festgelegt und diese mit einem linken Außenabstand von 120 Pixel definiert. Aus visuellen Gründen: Der linke Randabstand der Artikel verläuft linksbündig mit der linken Kante des Naviga­ tionsmenüs. Zusammengefasst: Für die Breite der Bildergalerie stehen 720 Pixel Breite zur Verfügung. Nun addieren Sie alle Breitenangabe zusammen: 6 Vorschaubilder mit je 100 Pixel Breite, dazu einen rechten Randabstand von je 10 Pixel ergibt eine Gesamtbreite von 660 Pixel. Das heißt, alle sechs Bilder finden genug Platz in einer Reihe. Für eine gleichmäßige Verteilung auf die verfügbare Gesamtbreite könnten Sie nun entweder die Bildbreite oder den Bildabstand nach rechts vergrößern. Oder die Kombination aus beidem. Nochmal gerechnet: Die Gesamtbreite von 720 Pixel geteilt durch 6 Vorschaubilder ergibt 120 Pixel für jedes Bild – dann ohne Bildabstand. So würden die Vorschaubilder direkt aneinandersitzen, was optisch in diesem Beispiel nicht gewünscht ist. Also bietet es sich an, die Bildbreite auf 110 Pixel zu verringern und einen rechten Bildabstand von 10 Pixel zu definieren. Die Gesamtbreite von 720 Pixel abzüglich 6 Randabstände von je 10 Pixel ergibt 660 Pixel. 660 Pixel durch 6 Bilder ergibt eine Bildbreite von 110 Pixel pro Bild. Mit diesen Werten würden die Vorschaubilder die Gesamtbreite ausfüllen. Da ich in diesem Beispiel noch einige CSS-Definitionen vorgenommen habe, die die Gestaltung betreffen (ein Rand um die Vorschaubilder sowie ein Schlagschatten), ist die Rechnung der möglichen Breiten und Abstände anders vorzunehmen. Dazu erfahren Sie nach diesem Abschnitt mehr – jetzt soll die Galerie erste einmal fertig gestellt werden. Im Feld Sortiert nach wählen Sie aus dem Menü die Option Dateiname (aufsteigend) aus. Mit dieser Option legen Sie fest, wie TYPOlight die Bilder in die Bildergalerie lädt und anzeigen soll. Zur Option Meta-Datei (meta.txt) erfahren Sie im Abschnitt 7.11.9 mehr.

Sie können dies auch erreichen, indem Sie im Seitenlayout eine linke Spalte von 120 Pixel Breite definieren und diese dann nicht befüllen. Hier wurde darauf verzichtet, da es verwirrender ist, wenn für den Benutzer (Redakteur) eine Spalte in der Auswahl zur Verfügung steht, die aber nicht „befüllt“ werden soll, sondern nur der Layoutdarstellung dient.

134

K apite l 7

Rechts neben dem Feld Sortiert nach aktivieren Sie die Checkbox Grossansicht/Neues Fenster. Dadurch werden die Vorschaubilder in der Bildergalerie mit einem Link ausgestattet, der dann die Großansicht des Bildes anzeigt. Dazu wird ein Skript geladen, das in diesem Fall die Vorschaubilder vergrößert anzeigt. Vorausgesetzt, Sie haben im Seitenlayout in diesem Beispiel das MooTools-Script moo_mediabox aktiviert, damit dieses mit der Webseite geladen wird und zur Verfügung steht. Um das zu kontrollieren, klicken Sie im Backend auf Layout → Seitenlayout und öffnen das Seitenlayout zum Bearbeiten durch Klick auf das Editier-Icon (Abbildung 7.64). In der Rubrik Skript-Einstellungen finden Sie die Option MooTools-Templates. Hier sollte das Template moo_mediabox aktiviert sein. Wenn nicht, aktivieren Sie dieses und Speichern und schliessen das Seitenlayout. Wechseln Sie wieder in den Artikel Reisen und öffnen das Inhaltselement Galerie erneut. Abbildung 7.64 MooTools-Template ­aktivieren

Kontrollieren Sie noch einmal die Einstellungen im Inhaltselement Galerie und Speichern und schliessen dann das Inhaltselement. Somit haben Sie die erste Bildergalerie angelegt und können sich diese in der Frontendansicht am Beispiel der fertigen Website ansehen (Abbildung 7.65). Für die beiden anderen Bildergalerien Luftfahrt und Diverses können Sie das vorhandene Inhaltselement Galerie aus der Seite Reisen duplizieren und in die beiden anderen Artikel einfügen. Passen Sie dann noch die spezifischen Angaben des Verzeichnisses der Quelldateien an. Dann haben Sie für alle drei Portfolioseiten die Bildergalerien angelegt.

Aufbau einer Website mit T YPO light

135

Abbildung 7.65 Frontendansicht der Bildergalerie Reisen

Klicken Sie nun einmal auf eines der Vorschaubilder. Sie sollten eine vergrößerte Darstellung des angeklickten Vorschaubildes sehen (Abbildung 7.66). Abbildung 7.66 Aktivierte Großansicht der Bildergalerie

136

K apite l 7

Das MooTools-Skript blendet dabei in den Standardeinstellungen den Inhalt der Website optisch aus. Durch die Transparenz können Sie die Inhalte noch erkennen, aber der Fokus liegt nun ganz auf dem vergrößerten Bild. Sie sehen unten links den Dateinamen angezeigt (doch wirklich besser als nur DSC_0378 oder?) und finden eine Navigation auf der rechten Seite, mit der Sie durch die vergrößerte Ansicht blättern können. Da das Skript englischsprachig ist, werden mit der Standardeinstellung noch englischsprachige Grafiken (previous, next, close) angezeigt (Abbildung 7.66). Auch die Bezeichnung neben dem Bildnamen ist noch in englischer Sprache (3 of 10). Diese werden Sie im nächsten Schritt noch anpassen, indem Sie die Grafiken mit deutschen Worten neu erstellen oder grafische Elemente verwenden und diese austauschen. Ebenso wird die englische Ausgabe der Anzahl der Bilder sprachneutral abgeändert. Wenn Sie die englischen Texte und Grafiken nicht stören, dann überspringen Sie dieses Unterkapitel.

7.11.6 Grafiken und Texte des MooToolsSkriptes Mediabox anpassen Das Skript Mediabox 10 wird in TYPOlight ab der Version 2.8 verwendet, um unterschiedliche Inhalte innerhalb einer Mediabox wie Bilder, Video- und Audiodateien, Flash etc. darzustellen. Das Skript wird als Plugin in TYPOlight eingebunden; die Dateien für das Mediabox-Skript liegen im Verzeichnis plugins/mediabox/. Öffnen Sie das Verzeichnis plugins/mediabox/images innerhalb des TYPOlight-Verzeichnisses, um die Grafiken des MooTools-Skriptes anzupassen. Dieses öffnen Sie am besten in einem lokalen TYPOlight-Verzeichnis oder laden sich diesen Ordner vom Server zur Bearbeitung auf Ihren Rechner. Verändert werden die Dateien BlackClose.gif, BlackNext.gif und BlackPrevious.gif. Öffnen Sie diese drei Dateien z. B. in Photoshop und ändern Sie nur die Texte. Wie Sie anhand der bestehenden Grafiken sehen können, ist der erste Buchstabe anders eingefärbt als der restliche Text. Dies kennzeichnet die Tastaturkürzel, mit denen Sie auch navigieren können. Für die geänderten Grafiken habe ich grafische Symbole verwendet, sodass die Tastaturkürzel nicht mehr angezeigt werden. Das Blättern kann jedoch nach wie vor durch die Pfeiltasten nach links oder rechts erreicht werden. Nun ändern Sie im nächsten Schritt noch die Bezeichnung rechts neben den Bildnamen. Anstatt (x of y) ersetzen Sie dies durch (x / y). Dazu ändern Sie das Template für die MooTools-Galerie Mediabox. Klicken Sie hierzu im Backend auf Layout → Templates. Klicken Sie auf Neues Template und wählen im Menü aus der Rubrik Frontend moo_mediabox.tpl aus und speichern dieses durch Klick 10 http://iaian7.com/webcode/mediaboxAdvanced

Aufbau einer Website mit T YPO light

137

auf Template erstellen ab. Öffnen Sie das Template durch Klick auf das EditierIcon. Folgender Code – bestehend aus PHP und JavaScript – wird Ihnen angezeigt (Listing 7.6): <script type="text/javascript" src="plugins/mediabox/js/mediabox. js"> <script type="text/javascript"> 8) && el.rel. match(relsize[1])); }); }; window.addEvent("domready", Mediabox.scanPage); //-->

Suchen Sie die Stelle /* Put custom options here */. Innerhalb der geschweiften Klammern können Sie nun die Anpassungen vornehmen. Um die möglichen Befehle zu kennen, öffnen Sie die Datei mediabox_src.js mit einem Texteditor. Dort finden Sie die Befehle, die Sie dann zur Anpassung im Template angeben können. In diesem Beispiel fügen Sie an dieser Stelle den Befehl für den CounterText ein: {counterText:"({x} / {y})"}. Speichern und schliessen Sie das Template und schauen sich die Seite in der Frontendansicht an (Abbildung 7.67). Die Navigationsgrafiken wurden ersetzt und die Anzeige der Anzahl an Bilder ist nun sprachneutral geändert.

Listing 7.6 Template moo_mediabox.tpl

Protokollieren Sie am besten alle Änderungen, die Sie gegenüber den Originaldateien machen. Dies verringert das mühsame Suchen und Anpassen von Codeänderungen; z. B. nach einem Update.

138

K apite l 7

Abbildung 7.67 Aktivierte Großansicht der Bildergalerie mit angepasster Navigation

7.11.7 Visuelles Feintuning der Bildergalerie Nun haben Sie das Inhaltselement Galerie erfolgreich eingerichtet und die Anpassungen für die Großansicht vorgenommen. Um die Bildergalerie mit den Vorschaubildern optisch noch etwas zu verfeinern, fügen Sie einen Rand um die einzelnen Vorschaubilder hinzu. Wenn der Benutzer den Mauszeiger über einem Vorschaubild bewegt, wird die Farbe des Randes verändert – und der Benutzer erhält dadurch ein visuelles Feedback. Nutzen Sie dazu wieder die Funktionen des AddOns Firebug, um die richtigen CSS-Klassen aufzuspüren. Die CSS-Definition für das Vorschaubild lautet (Listing 7.7): Listing 7.7 CSS-Definition Vorschaubilder

#main .ce_gallery .image_container img { margin:0; padding:0; border:1px solid #dfdfdf; }

Für das visuelle Feedback erstellen Sie diese CSS-Definition (Listing 7.8):

Aufbau einer Website mit T YPO light

#main .ce_gallery .image_container img:hover { margin:0; padding:0; border:1px solid #26A3CF; }

Listing 7.8 CSS-Definition hoverZustand

Sie sehen (Abbildung 7.68) – es wurde die Farbe für den Rand verändert. Abbildung 7.68 Farbiger Rand beim Überfahren des Vorschaubildes mit dem Mauszeiger

Ich habe in dieser Beispielseite mithilfe einer Grafik noch einen subtilen Schlagschatten hinter die Vorschaubilder gesetzt (Abbildung 7.68). Wie das geht, erkläre ich im folgenden Abschnitt.

7.11.8 Schlagschatten den Vorschaubildern hinzufügen Durch die Verwendung eines Hintergrundbildes können Sie einen Schlagschatten unter den Vorschaubildern simulieren. Erstellen Sie hierzu in einem Bildbearbeitungsprogramm wie z. B. Photoshop eine Datei, die eine maximale – sinnvolle – Bildgröße besitzt. Im Beispiel wird eine 200 x 200 große Grafik verwendet (Abbildung 7.69). Somit können Sie die Größe der Vorschaubilder variieren und müssen die Größe der Schlagschatten-Grafik nicht für eine feste Größe erstellen. Die Größe von 200 x 200 Pixel lässt sich also bis zu einer Größe der Vorschaubilder von ca. 190 Pixel verwenden. Sollen größere Vorschaubilder angezeigt werden, passen Sie die Größe der Schlagschatten-Grafik entsprechend an. Der Schlagschatten wird nach unten und rechts um sechs Pixel versetzt platziert. Dazu wird in der Bilddatei die Fläche mit dem Schlagschatten jeweils um sechs Pixel nach links und oben versetzt angeordnet. Die Füllfarbe für das Rechteck mit dem Schlagschatten und die Hintergrundfarbe, auf der das Rechteck platziert ist, ist die gleiche Farbe. Die, die Sie für den Hauptbereich (#main) definiert haben; in diesem Beispiel der Hexadezimalwert #444444.

139

140

K apite l 7

Abbildung 7.69 Schlagschatten-Grafik

Für die Platzierung wird der Bild-Container genutzt. Folgende CSS-Definitionen werden verwendet (Listing 7.9): Listing 7.9 Schattengrafik für den Bild-Container

#main .ce_gallery .image_container { overflow:hidden; margin:0 10px 10px 0; padding:0 0px 6px 0 !important; background:#333 url(tl_files/fotograf/imageshadow.png) no-repeat right bottom; }

Wichtig ist dabei, dass Sie die Abstände zwischen den Vorschaubildern in der CSSDefinition vornehmen und im Inhaltselement Galerie leer lassen oder nur mit 0 versehen (Abbildung 7.70). Abbildung 7.70 Bildabstand auf Null setzen

CD

Die PhotoshopEbenendatei für die Schattengrafik finden Sie zum Anpassen auf der beiliegenden CD-ROM.

Die CSS-Anweisung !important sorgt dafür, dass eingegebene Werte überschrieben werden. Wenn Sie andere Abmessungen und Abstände für die Schattengrafik verwenden möchten, passen Sie auch die CSS-Definitionen entsprechend an.

7.11.9 Meta-Datei für Bildergalerie verwenden Nachdem ich Ihnen im Unterkapitel 7.11.3 schon angekündigt habe, dass Sie die Auflistung der Bilddateien auch über eine Meta-Datei steuern können, zeige ich Ihnen nachfolgend, wie das geht. Mithilfe einer Textdatei – meta.txt genannt – lassen sich Bilddateien individuell sortieren bzw. anlegen. Dazu können Sie einen Alternativtext und einen individuellen Link angeben sowie einen Beschreibungstext hinzufügen. Achten Sie darauf, dass die Datei meta.txt immer im UTF-8-Format erstellt, bearbeitet und gespeichert wird, damit keine Umlaut- und Sonderzeichenprobleme entstehen. Sie können auch eine leere meta.txt-Datei erstellen und in das entsprechende Bild-

Aufbau einer Website mit T YPO light

141

verzeichnis laden und über die Dateiverwaltung bearbeitet. Da TYPOlight immer das UTF-8-Format verwendet, sind die Texte ebenfalls UTF-8-formatiert. Achten Sie darauf, keine Umbrüche einzufügen. Sie müssen für jedes Bildverzeichnis eine eigene meta.txt-Datei erstellen, wenn Sie die Sortierung mit einer Meta-Datei verwenden wollen. Bei mehrsprachigen Websites erstellen Sie mehrere meta.txt-Dateien, die entsprechend mit dem Länderkürzel im Dateinamen ergänzt werden; z. B. englisch meta_en.txt, französisch meta_fr.txt. TYPOlight durchsucht immer zuerst die Bildverzeichnisse nach länderspezifischen meta.txt-Dateien; wird keine länderspezifische meta.txt-Datei gefunden, wird auf eine ggf. vorhandene meta.txtDatei zurückgegriffen. Der Aufbau einer meta.txt-Datei sieht folgendermaßen aus (Listing 7.10): Bildname.Dateiendung = Alternativtext | Link | Beschreibungstext

Als Beispiel (Listing 7.11): Kaktusbluete.jpg = Kaktusblüte | | Makro-Aufnahme einer Kaktusblüte in den Hochgärten von Saigon

Hier wurde kein Link eingegeben; dazu lassen Sie einfach ein Leerzeichen zwischen den Trennstrichen stehen. Den Trennstrich geben Sie unter Windows mit der Tastenkombination (Strg)(Alt)(<) ein; am Mac mit der Tastenkombination (†)(7).

Listing 7.10 Inhaltsstruktur meta.txt

Listing 7.11 Beispiel Inhalte meta.txt

Als Beispiel habe ich für die Portfolioseite Luftfahrt eine meta.txt-Datei erstellt und diese in das Verzeichnis tl_files/portfolio/luftfahrt/ geladen. Der Inhalt der meta-txt-Datei (Listing 7.12): Into-the-Sky.jpg = Into the Sky || Schulgleiter.jpg = Schulgleiter || 01_North-American-T6.jpg = NorthAmerican T6 kurz nach dem Start || 01_P51-Mustang.jpg = P51 Mustang - Wer seine Mustang liebt lässt schieben || 02_North-American-T6.jpg = NorthAmerican T6 im Vorbeiflug || 02_P51-Mustang.jpg = P51 Mustang || Beech.jpg = Wunderschöne Silhouette in genietetem Blech || Teamarbeit-in-Formation.jpg = Formations-Kunstflug Pioneer-Team (Italien) || 03_P51-Mustang.jpg = P51 Mustang || 03_North-American-T6-Akrobatik.jpg = NorthAmerican T6 - Akrobatik || 04_P51-Mustang-Propellerdetails.jpg = P51 Mustang - Propellerdetails || DeHavilland_Dragon_Rapide.jpg = DeHavilland DragonRapide || Staurohrschutz_Junkers-JU_52.jpg = Staurohrschutz Junkers JU 52 || Morgentau_auf_Leitwerk.jpg = Morgentau auf Leitwerk || Cockpit_einer_Boeing_Stearman.jpg = Cockpit einer Boeing Stearman || Bleriot-XI-Pioniere_der_Luftfahrt.jpg = Blériot XI - Pioniere der Luftfahrt || Supermarine_Spitfire.jpg = Supermarine Spitfire || Mitchell_B_25H.jpg = Mitchell B 25H ||

Listing 7.12 Inhalte der meta.txt-Datei für das Portfolio Luftfahrt

142

K apite l 7

Auch bei der Methode, eine Meta-Datei zu verwenden, empfiehlt es sich, die Dateinamen aussagekräftig zu benennen. Zusammen mit dem Alternativtext erreichen Sie zwei mögliche Suchergebnisse in Suchmaschinen. Sie können ebenso Sonderzeichen und Umlaute im Alternativtext verwenden, wie zum Beispiel in Listing 7.13: Listing 7.13 Beispiele Sonderzeichen in der meta-txt-Datei

Bleriot-XI-Pioniere_der_Luftfahrt.jpg = Blériot XI - Pioniere der Luftfahrt ||

Hier wird im Alternativtext ein französischer accent égue verwendet. Wenn Sie nun in der Frontendansicht mit dem Mauszeiger über dieses Bild navigieren, wird Ihnen dieser Text so angezeigt (Abbildung 7.71):

Abbildung 7.71 Alternativtext aus der Meta-Datei meta.txt

Wenn Sie die Funktion der Meta-Datei öfters einsetzen wollen, dann werfen Sie auch einen Blick auf die Erweiterung MetaCreator11 von Felix Pfeifer. Diese Erweiterung erstellt automatisch eine meta.txt-Datei aus einem Bilderverzeichnis.

Sie haben die Bildergalerien in den drei Portfolioseiten erstellt und noch einige Tipps zu den Einstellungen für das Inhaltselement Galerie bekommen. 11 Aber noch ist der Aufbau der Website nicht ganz abgeschlossen. Auf der Kontaktseite möchte der Fotograf nicht nur die Adresse anzeigen und eine Kontaktmöglichkeit via E-Mail nutzen, sondern auch ein einfaches Kontaktformular anbieten. Ein Kontaktformular hat gegenüber einem einfachen E-Mail-Link den Vorteil, dass die Eingaben auch dann versendet werden, wenn der Benutzer auf dem Rechner kein E-Mail-Programm installiert hat (z. B. in einem Internet-Cafè).

7.12 Ein Kontaktformular erstellen Neben den üblichen Feldern Firma, Vorname, Nachname, Telefon und E-MailAdresse werden zwei weitere Felder angelegt: Betreff und Nachricht. Damit das Formular nicht durch Spamroboter automatisiert missbraucht wird, fügen Sie ein weiteres Feld für eine Sicherheitsabfrage ein. Und eine Absendeschaltfläche zum Schluss. Damit der Benutzer auch eine Rückmeldung erhält, dass die Nachricht versendet wurde, richten Sie noch eine Bestätigungsseite mit einem kurzen Bestätigungstext ein.

11 http://www.typolight.org/erweiterungsliste/view/MetaCreator.90009.de.html

Aufbau einer Website mit T YPO light

Wechseln Sie im Backend in Inhalte → Formulargenerator und klicken auf Neues Formular. In der Rubrik Titel und Weiterleitung geben Sie einen Titel für das Formular ein, hier Kontaktformular Hänk Hüperle. Darunter legen Sie die Weiterleitungsseite fest, auf die weitergeleitet wird, wenn der Inhalt des ausgefüllten Formulars erfolgreich versendet wurde: eine Bestätigungsseite. Dazu benötigen Sie eine neue Seite Kontaktbestätigung sowie einen darin enthaltenen Artikel mit einem Bestätigungstext. Damit Sie das Formular in diesem Schritt fertig stellen können, definieren Sie die Weiterleitungsseite erst im nächsten Schritt.

Wenn Sie künftig Websites erstellen und ein Kontaktformular mit Bestätigungsseite integriert werden soll, können Sie dies gleich bei der Seitenerstellung berücksichtigen. Ich lege die Bestätigungsseite als eine Unterseite der Kontaktseite an; so ist ein inhaltlicher Zusammenhang in der Seitenstruktur schneller zu erfassen.

Abbildung 7.72 Einrichten eines Kontaktformulars

In der Rubrik Formular-Konfiguration aktivieren Sie für dieses Formular die Option Tabellenloses Layout (Abbildung 7.72). In der Rubrik Formulardaten versenden legen Sie Sie im Feld Empfänger-Adresse die E-Mail-Adresse fest, an die das ausgefüllte Formular versendet werden soll – im Beispiel die E-Mail-

143

144

K apite l 7

Adresse des Fotografen. Im Feld Betreff tragen Sie eine sinnvolle und treffende Beschreibung ein. Zum Beispiel Kontaktformular Hänk Hüperle und nicht nur Kontaktformular – der Fotograf soll in seinem E-Mail-Programm schnell anhand der Betreffzeile erkennen, woher die E-Mail gesendet wurde. Im Feld Datenformat lassen Sie die Auswahl auf Rohdaten. Dadurch werden alle von Ihnen angelegten Felder in einer Text-E-Mail versendet. Wechseln Sie hier nicht – weil es nahe liegend ist – in das Datenformat E-Mail. Mit dieser Einstellung werden nur die Felder name, email, subject und message übertragen, wobei die Feldnamen in diesem Fall exakt so benannt sein müssen! Anders benannte oder weitere Felder werden nicht übermittelt. Die Checkbox Leere Felder auslassen können Sie aktivieren, wenn nicht ausgefüllte Felder in der E-Mail nicht mitgesendet werden sollen. Der Kopfbereich des Formulars ist nun bis auf die Weiterleitungsseite fertig definiert, sodass Sie nun die einzelnen Formularfelder anlegen können. Speichern und schliessen Sie das Formular. Um diesen Bereich abschließen zu können, erstellen Sie noch eine Bestätigungsseite sowie den Artikel mit dem Bestätigungstext. Wie Sie eine neue Seite in der Seitenstruktur anlegen und darin einen Artikel sowie das Inhaltselement, haben Sie schon kennen gelernt. Ansonsten schauen Sie am Beginn dieses Kapitel noch einmal nach. Die Bestätigungsseite legen Sie innerhalb der Seite Kontakt an (Abbildung 7.73). Abbildung 7.73 Seitenstruktur mit Bestätigungsseite

Auf eine Einstellung möchte ich Sie noch aufmerksam machen: Die Bestätigungsseite soll nicht im Menü auftauchen, daher wird diese Seite veröffentlicht, aber im Menü versteckt ( Abbildung 7.74). In der Rubrik Experten-Einstellungen aktivieren Sie die Checkbox Im Menü verstecken und in der Rubrik Veröffentlichen aktivieren Sie die Option Seite veröffentlichen. Speichern und schliessen Sie dann die Seite.

Aufbau einer Website mit T YPO light

Abbildung 7.74 Seiteneinstellungen Bestätigungsseite

Sobald Sie die Seite und den Artikel samt Inhaltselementen erstellt haben, wechseln Sie im Backend von TYPOlight in Inhalte → Formulargenerator und klicken das Editier-Icon zum Bearbeiten der Einstellungen an. Tragen Sie nun die Weiterleitungsseite in der Rubrik Titel und Weiterleitung ein (Abbildung 7.75).

145

146

K apite l 7

Abbildung 7.75 Festlegen der Weiterleitungsseite

Speichern und schliessen Sie das Formular. Somit sind die Einstellungen für das Kontaktformular abgeschlossen und Sie können nun die benötigten Felder erstellen. Klicken Sie dazu auf das Editier-Icon zum Bearbeiten des Formulars und erstellen ein Neues Feld. Das erste Feld wird das Feld Betreff (Abbildung 7.76) sein. Abbildung 7.76 Definition des Feldes Betreff

Aufbau einer Website mit T YPO light

In der Rubrik Feldtyp und -name wählen Sie den Feldtyp Textfeld aus. Im Feld Feldname tragen Sie Betreff ein. Und im Feld Feldbezeichnung tragen Sie Betreff (Pflichtfeld) ein. Das Feld Feldname wird intern in TYPOlight verwendet, wohingegen das Feld Feldbezeichnung den Text enthält, der später auf der Website neben dem Eingabefeld zu sehen ist. In der Rubrik Feldkonfiguration aktivieren Sie die Option Pflichtfeld. TYPOlight markiert die Pflichtfelder in der Frontendansicht mit einem Sternchen *. Sie sollten die Benutzer des Formulars unterstützen und entweder eine kurze Kennzeichnung ober- oder unterhalb der Eingabefelder einfügen oder wie oben beschrieben das Wort Pflichtfeld z. B. in Klammern hinzufügen. Wenn Sie die Benutzereingabe überprüfen möchten, dann wählen Sie aus dem Menü Eingabeprüfung eine Option aus. TYPOlight überprüft anhand sogenannter Regular Expressions die Benutzereingaben. Weitere Einstellungen sind in diesem Feld nicht vorzunehmen. Klicken Sie auf Speichern und neu, um gleich das nächste Feld anzulegen. Nun folgt das Feld für den Nachrichtentext (Abbildung 7.77). Abbildung 7.77 Definition des Feldes Nachricht

Wählen Sie hier in der Rubrik Feldtyp und -name den Feldtyp Textarea aus. Damit lassen sich mehrzeilige Textfelder erzeugen. Tragen Sie im Feld Feldname und im Feld Feldbezeichnung Nachricht ein. In der Rubrik Feldkonfiguration tragen Sie in die Felder Reihen und Spalten jeweils 1 ein. Die Größe des Eingabefeldes steuern Sie später über eine CSS-Definition. Klicken Sie wieder auf Spei-

147

148

K apite l 7

chern und neu und erstellen die Felder Firma, Vorname und Nachname so wie das

Feld Betreff. Die Felder Vorname und Nachname sind als Pflichtfeld markiert. Das Formular sollte mit den bisher angelegten Feldern so aussehen (Abbildung 7.78): Abbildung 7.78 Übersicht erstellte Felder

Als nächstes Feld folgt das Feld für die E-Mail-Adresse (Abbildung 7.79).

Aufbau einer Website mit T YPO light

149

Abbildung 7.79 Definition des Feldes E-Mail

Unter der Rubrik Feldtyp und -name wählen Sie den Feldtyp Textfeld aus. In das Feld Feldname schreiben Sie email und in das Feld Feldbezeichnung tragen Sie E-Mail (Pflichtfeld) ein. In der Rubrik Feldkonfiguration aktivieren Sie die Option Pflichtfeld und wählen im Auswahlmenü Eingabeprüfung E-MailAdresse aus. So, fast geschafft – noch zwei Felder anlegen und Sie haben das Kontaktformular fertig gestellt. Das nächste Feld dient dem Spamschutz und reduziert den „Datenmüll“, der leider auch gerne über Kontaktformulare verschickt wird. Klicken Sie in der Formularübersicht (Abbildung 7.85) auf das grüne Icon mit dem Plus-Zeichen im Feld email. Wählen Sie in der Rubrik Feldtyp und -name die Option Sicherheitsfrage aus und tragen im Feld Feldbezeichnung Sicherheitsabfrage (Pflichtfeld) ein und klicken auf Speichern und neu. Zum Schluss fügen Sie noch eine Schaltfläche zum Absenden des Formulars ein. Wählen Sie dazu in der Rubrik Feldtyp und -name die Option Absendefeld aus und tragen im Feld Bezeichnung der Absende-Schaltfläche Absenden ein. Wenn Sie keine CSS-Formatierung für die Absende-Schaltfläche verwenden möchten, können Sie in der Rubrik Bildschaltfläche auch eine Grafik aus der Dateiverwaltung angeben, die dann anstatt der Absende-Schaltfläche angezeigt und verwendet wird. Klicken Sie auf Speichern und schliessen.

Schreiben Sie in das Feld Feldname email in genau dieser Schreibweise – klein und in einem Wort. Nur dann wird Ihnen die E-Mail aus dem Formular so zugestellt, dass die Absende-E-Mail-Adresse die des Absenders ist (die dieser im Formular angegeben hat). Ansonsten können Sie nie auf eine eingehende E-Mail in Ihrem E-Mail-Programm durch ein einfaches Antworten an (reply) antworten und müssen stets die E-Mail-Adresse manuell aus der E-Mail heraus­ kopieren, bevor Sie darauf antworten können.

150

K apite l 7

Das Kontaktformular ist erstellt – und muss noch den Weg in die Kontaktseite finden. Wechsel Sie dazu im Backend in Inhalte → Artikel und wählen durch Klick auf das Editier-Icon den Artikel Kontakt aus. Legen Sie zuerst ein Inhalts­ element Überschrift mit der Auszeichnung h1 an. Danach klicken Sie auf Neues Element oder das grüne Icon mit dem Plus-Zeichen des Inhaltselements Überschrift (Abbildung 7.80). Wählen Sie in der Rubrik Elementtyp die Option Formular aus. Daraufhin lädt TYPOlight die Seite nach und Sie können in der Rubrik Include-Einstellungen im Feld Formular das Kontaktformular Hänk Hüperle­auswählen. Speichern und schliessen Sie das Inhaltselement. Abbildung 7.80 Einbinden des Kontakt­ formulars in die Seite Kontakt

Nun ist das Kontaktformular in die Seite Kontakt eingebunden. Wechseln Sie in die Frontendansicht, um sich das fertige Formular anzusehen (Abbildung 7.81) und eine Test-Nachricht zu verschicken. Füllen Sie zum Test alle Felder aus und schauen Sie, ob die E-Mail im Posteingang Ihres E-Mail-Programms eingegangen ist.

Aufbau einer Website mit T YPO light

151

Abbildung 7.81 Frontendansicht des Kontaktformulars

Zu Testzwecken füllen Sie einmal das Formular aus und schauen, ob alle ausgefüllten Felder in der E-Mail enthalten sind (Abbildung 7.82). Abbildung 7.82 Eingehende E-Mail aus dem Kontaktformular gesendet (Thunderbird)

Dem Besucher der Website wird nach dem Absenden die Bestätigungsseite angezeigt (Abbildung 7.83).

152

K apite l 7

Abbildung 7.83 Bestätigungsseite nach dem Absenden des Kontaktformulars

Geben Sie während der Entwicklung Ihre E-Mail-Adresse im Feld Empfänger ein, um die korrekte Funktion des Formulars gründlich zu testen. Ihr Kunde wird es Ihnen danken, dass Sie die ganzen Test-Nachrichten nicht an ihn senden.

7.12.1 Formularfunktionen erweitern Für die Erweiterung der Formularfunktionen stehen Ihnen in der offiziellen Erweiterungsliste (Extension Repository)12 zahlreiche zusätzliche Erweiterungen zur Installation zur Verfügung – nicht nur für Formularfunktionen. Eine der mächtigen Erweiterungen für Formulare ist die Erweiterung EFG (Extended Form Generator)13, der sich nahtlos in die Funktion des Core-Formulargenerators integriert. Der „EFG“ ermöglicht Ihnen, Formulareingaben auf der Bestätigungsseite auszugeben, Text- oder HTML-basierte Bestätigungs-E-Mails und auch mehrseitige Formulare zu erstellen. Zudem lässt sich sich der „EFG“ unter anderem auch dazu nutzen, Daten nur im Backend von TYPOlight zu erfassen und diese Datensätze im Frontend anzuzeigen. Wenn Sie sich dafür interessieren, dann schauen Sie sich einmal die Website14 (Abbildung 7.84) an, die in Zusammenarbeit mit Thomas Kuhn, dem Entwickler der Erweiterung „EFG“, und mir für den Workshop auf dem 2. TYPOlight-Usertreffen 2009 in Frankfurt/Main, erstellt wurde. Dort finden Sie neben den Informationen zum „EFG“ praxisrelevante Informationen und zahlreiche Beispiele, wie der „EFG“ und TYPOlight zusammen eingesetzt werden können. 12 http://www.typolight.org/erweiterungsliste.html 13 http://www.typolight.org/erweiterungsliste/view/efg.10120019.de.html 14 http://www.tl-usertreffen.weitzeldesign.com

Aufbau einer Website mit T YPO light

Abbildung 7.84 Website des TYPOlightUsertreffen Workshops

7.13 Reflexionen Lehnen Sie sich einmal kurz zurück und lassen alle Schritte, die Sie bereits erarbeitet haben, vor Ihrem geistigen Auge Revue passieren. Was haben Sie alles kennen gelernt und umgesetzt? Sie haben: ◆◆ die grundlegenden Einstellungen in TYPOlight vorgenommen ◆◆ eine Seitenstruktur aufgebaut ◆◆ CSS-Dateien und Module angelegt ◆◆ ein Seitenlayout erstellt ◆◆ Inhaltselemente in Artikel eingefügt ◆◆ zwei Möglichkeiten für die Darstellung von Bildergalerien kennen gelernt Es gibt zwei Besonderheiten auf der Website des Fotografen, die ich integriert habe und auf die ich Sie noch hinweisen möchte.

153

154

K apite l 7

7.14 Besonderheiten der FotografenWebsite Zum einen habe ich für das Navigationsmenü transparente Hintergrundgrafiken im PNG-Format verwendet. Der Internet Explorer 6 kann diese nicht darstellen; damit dieser Browser auch transparente PNG-Grafiken darstellen kann, habe ich ein JavaScript integriert, das dem Internet Explorer 6 die Transparenz „beibringt“. Als weiteren Zusatz habe ich eine Image Replacement-Technik für die Überschriften eingesetzt. Vielleicht ist Ihnen die andere Schrift bei den Überschriften der Abbildungen aufgefallen? Dort wird eine Technik eingesetzt, die sich Cufón15 nennt. Aber der Reihe nach – erst bringen Sie dem Internet Explorer 6 die Transparenz bei.

7.14.1 Transparente PNG-Grafiken auch im Internet Explorer 6 Ich habe das Skript DD_belatedPNG von Drew Diller verwendet. Sie finden auf der englischsprachigen Website16 eine detaillierte Erklärung, wie Sie das Skript auf Websites integrieren. Ich zeige Ihnen hier, wie Sie das Skript in TYPOlight einbinden und verwenden können. Laden Sie sich zunächst die JavaScript-Datei herunter und speichern diese lokal auf Ihrem Rechner. Sie können sich die unkomprimierte oder die komprimierte Datei herunterladen; mit der komprimierten Datei sparen Sie etwa 5 KB an Datenübertragung ein. Laden Sie diese Datei iepng.js nun in das Verzeichnis tl_files auf den Webserver. Öffnen Sie dann im Backend Layout → Seitenlayouts und bearbeiten das Seitenlayout Fotograf durch einen Klick auf das Editier-Icon. In der Rubrik Experten-Einstellungen tragen Sie im Feld Zusätzliche -Tags folgenden Code für diese Beispielseite ein (Listing 7.14): Listing 7.13 Einbinden des Skripts in das Feld Zusätzliche Head-Tags



Wichtig sind zwei Stellen: Zum einen die Pfadangabe zum Skript iepng.js und zum anderen die CSS-Selektoren, auf die die transparente PNG-Grafik angewendet wird. In diesem Beispiel betrifft es die Navigation und die folgenden CSS-Selektoren: .mod_navigation, .mod_navigation a:hover, .mod_navi15 http://cufon.shoqolate.com/generate/ 16 http://www.dillerdesign.com/experiment/DD_belatedPNG

Aufbau einer Website mit T YPO light

155

gation li.active, .mod_navigation .trail a. Da sich das Skript nur auf

den Internet Explorer 6 auswirkt, wird die Anweisung mit Conditional Comments eingebunden: [if IE 6] – also nur, wenn als Browser der Internet Explorer 6 erkannt wird, greift dieser Code. Speichern und schliessen Sie dann das Seitenlayout und öffnen die Website in der Frontendansicht mit dem Internet Explorer 6 (Abbildung 7.85). Abbildung 7.85 Die Fotografen-Website im IE6 mit transparenter Navigationsleiste

Hat der Benutzer JavaScript in seinem Browser deaktiviert, wird die Navigationsleiste mit den Farbwerten ohne Transparenz angezeigt (Abbildung 7.86).

156

K apite l 7

Abbildung 7.86 Navigationsleiste im IE 6 ohne aktiviertes JavaScript

Wichtig ist, dass die Website nach wie vor navigier- und bedienbar bleibt. Wenn Sie in anderen Bereichen der Website transparente PNG-Grafiken verwenden möchten, fügen Sie die entsprechenden CSS-Selektoren im Code kommagetrennt hinzu. Es gibt neben dem eingesetzten Skript auch noch weitere Lösungen; eine davon ist das Skript ie7.js17 von Dean Edwards, welches den Internet Explorer 6 soweit „nachrüstet“, dass sich dieser nahezu wie ein standardkonformer Browser verhält. Das Skript ist für dieses Beispiel – das „Nachrüsten“ der Transparenzfunktion – mit der ca. zehnfachen Dateigröße zu groß. Im nächsten Unterkapitel erfahren Sie, wie Sie mithilfe einer weiteren JavaScriptDatei plattformübergreifend eigene Schriften für Elemente valide einbinden können.

Wenn Sie einmal testen möchten, welche Schriften für Ihr Web­ design sinnvoll und welche Schriftarten plattformübergreifend verwendbar sind, dann schauen Sie sich die Website www.typetester. org18 an (Abbildung 7.87). Dort können Sie Schriftfamilien nebeneinander darstellen, die Lesbarkeit testen, Zeilenabstände einstellen und vieles mehr. Sie erhalten schnell eine Übersicht über die plattformübergreifenden Schriften – es sind nicht viele.

7.14.2 Dynamische Schriftersetzung durch Image Replacement-Technik erstellen Wofür sollten Sie eine Image Replacement-Technik einsetzen? Was steht hinter dieser Technik? Sie haben ja bereits die Methode der CSS-Sprites kennen gelernt, indem Sie in einem Bildbearbeitungsprogramm wie z. B. Photoshop einzelne oder dann später eine einzige Grafik erstellt haben, bei der Sie eine individuelle Schrift verwendet haben. Denken Sie jetzt einen Schritt weiter: Ihr Kunde ändert die Bezeichnung der Menüpunkte oder der Überschriften und schon müssen die Grafiken angepasst oder erstellt werden. Aha, daher dynamische Schriftersetzung ? Genau ;-).18

17 http://code.google.com/p/ie7-js/ 18 http://www.typetester.org/

Aufbau einer Website mit T YPO light

Ein wesentlicher Vorteil der Image Replacement-Technik ist es, Schriften verwenden zu können, die nicht zwangsläufig auf allen Rechnern und Plattformen installiert sind. Dabei hilft ein Skript, welches bei Veränderungen von Bezeichnungen automatisch neue Schriftgrafiken erstellt. Abbildung 7.87 Website www.typetester.org –

Schriften testen

Es gibt zahlreiche Techniken der dynamischen Schriftersetzung. Lange Zeit war die Technik sIFR Platzhirsch der Ersetzungstechniken. sIFR benötigt jedoch Flash, genauer das Flash-Plugin, welches auf einem Großteil der Rechner weltweit installiert ist, aber eben nicht immer und auch nicht immer in der richtigen Version. Diese Technik besitzt auch eine Fallback-Version, wenn kein Flash-Plugin vorhanden ist. Unschön ist, dass die dynamisch ersetzten Bereiche erst nach dem Laden der sonstigen Inhalte der Website angezeigt werden. Die Techniken der Schriftersetzung werden ständig weiterentwickelt – und es kommen immer wieder neue Techniken hinzu. Mit der CSS-Definition font-face z. B. – die schon jetzt in modernen Browsern wie Internet Explorer 8, Firefox oder Safari dargestellt werden können – steht eine weitere Möglichkeit der Schriftersetzung zur Verfügung.

157

158

K apite l 7

7.14.3 Image Replacement-Technik Cufón in TYPOlight einbinden Die auf der Beispielseite verwendete Technik nennt sich Cufón. Cufón bietet sich an, da hier JavaScript anstatt Flash verwendet wird und die Implementierung einfach ist. Wie bei allen Replacement-Techniken, gibt es auch hier minimale Einschränkungen: Die dynamisch generierten Elemente lassen sich mit dem Mauszeiger nicht markieren und auswählen. Im Quellcode werden keine Änderungen durch das Skript erzeugt; Ihre Webseiten bleiben valide und sind auch für Suchmaschinen vollständig erfassbar. Benutzer, die JavaScript in ihrem Browser deaktiviert haben, sehen anstatt der dynamisch erzeugten Schriftgrafik die Elemente so, wie Sie diese durch die CSS-Definitionen im Stylesheet definiert haben. Verwenden Sie ausschließlich Schriften, die eine Umwandlung und Einbettung lizenzrechtlich erlauben! Auf der CufónWebsite werden Sie darauf aufmerksam gemacht und müssen dies vor der Umwandlung bestätigen. Es existieren genügend FreeFonts, die sich einbetten und verwenden lassen.

Machen Sie sich ans Werk und bauen diese Funktion in Ihre TYPOlight-Website ein. Rufen Sie die Website von Cufón auf. Auf dieser Website finden Sie einen Generator, der Ihre lokale(n) Schrift(en) in eine JavaScript-Datei umwandelt. Es gibt zahlreiche Einstellmöglichkeiten, die Sie sich in Ruhe ansehen sollten. Für die Beispielseite habe ich den FreeFont Lacuna von Peter Hoffmann19 verwendet. Laden Sie sich die Schrift Lacuna von der Website auf Ihren Rechner und entpacken das Archiv. Anschließend laden Sie die Schrift Lacuna Regular auf die Cufón-Website und folgen den weiteren Schritten und generieren die CufónSchriftdatei, die Sie dann auf Ihren Rechner laden. Sie benötigen noch die eigentliche Cufón-JavaScript-Datei 20, die Sie ebenfalls von der Cufón-Website (Abbildung 7.88) auf Ihren Rechner herunterladen.

Abbildung 7.88 Cufón Website – Generator

19 http://www.glashaus-design.com 20 http://cufon.shoqolate.com/js/cufon-yui.js

Aufbau einer Website mit T YPO light

159

Binden Sie nun die Funktionalität von Cufón in TYPOlight ein: Öffnen Sie dazu das Seitenlayout zum Bearbeiten im Backend durch Klick auf Layout → Seitenlayouts und öffnen dann das Seitenlayout. In der Rubrik Experten-Einstellungen fügen Sie im Feld Zusätzliche -Tags – nach dem Skript für die PNGTransparenz im Internet Explorer 6 – folgenden Code (Listing 7.15) ein: <script src="tl_files/fonts/cufon-yui.js" type="text/javascript"> <script src="tl_files/fonts/Lacuna.font.js" type="text/javascript"> <script type="text/javascript"> Cufon.replace(‚h1'); Cufon.replace(‚h2');

Listing 7.15 Cufón JavaScript-Code einfügen

Sie sehen die Pfadangaben zur Datei cufon-yui.js und zur Datei Lacuna .font.js. Diese beiden Dateien laden Sie auf den Webserver in das Verzeichnis tl_files/fonts/. Die Anweisung für die Ersetzung der CSS-Selektoren wird in diesen beiden Zeilen ausgelöst: Cufon.replace(‚h1‘); Cufon.replace(‚h2‘);

Für jedes Ersetzen eines CSS-Selektors schreiben Sie den CSS-Selektor wie in Listing 7.16 zu sehen ist.

Listing 7.16 Cufón-Befehle einfügen

Damit auch der Internet Explorer 6 hier wieder „mitspielt“, fügen Sie in der Rubrik Skript-Einstellungen im Feld Eigener JavaScript-Code noch folgenden Code (Listing 7.17) ein: <script type="text/javascript"> Cufon.now();

Speichern und schliessen Sie nun das Seitenlayout und schauen Sie sich die Website einmal in der Frontendansicht an (Abbildung 7.89):

Listing 7.17 Cufón-Befehl für den Internet Explorer 6 einfügen

Abbildung 7.89 Frontendansicht mit dynamischer Schriftersetzung der Überschriften

Die Überschriften mit h1- und h2-Auszeichnung werden in der Schrift Lacuna dargestellt. Auch hier greift eine Fallback-Variante: Hat der Benutzer JavaScript deaktiviert, werden die CSS-Definitionen aus der CSS-Datei verwendet (Abbildung 7.90).

160

K apite l 7

Abbildung 7.90 Frontendansicht der Überschriften mit ­deaktiviertem Javascript

7.14.4 Stapellauf oder: Das wäre auch noch schön … Sie haben die Website nun fertig gestellt und diese dem Fotografen präsentiert. Ihm gefällt Ihre Arbeit und die Umsetzungen der Feinheiten. Dennoch denkt er darüber nach, wie es denn wäre, wenn man anstatt der kleinen Vorschaubilder so etwas wie Bildüberblendungen, wie eine Diaschau, darstellen könnte. Dann wären die Bilder für die Besucher der Website gleich in voller Größe zu sehen … Sie kennen das aus bisherigen Projekten? Kaum ist man glücklich, alle Inhalte und das Design fertig gestellt zu haben, dann kommen die Zusatzwünsche :-). Zum Glück kann ich Ihnen – zumindest hierbei – weiterhelfen. Dank zahlreicher engagierter Erweiterungs-Entwickler für TYPOlight können Sie sich die eine oder andere Zusatzfunktion in TYPOlight holen. Auch für eine Diaschau-Funktion existieren einige Erweiterungen. Eine Erweiterung stelle ich Ihnen für die Beispielseite im Detail vor.

7.14.5 Die Erweiterung Slideshow2 in TYPOlight verwenden Die Erweiterung wurde von Sabri Karadayi21 auf Basis eines Skriptes von Aeron Glemann22 entwickelt. Dabei lassen sich die einzelnen Slideshows komfortabel im Backend von TYPOlight erstellen und verwalten. Installieren Sie die Erweiterung zuerst in TYPOlight, indem Sie im Backend den Erweiterungskatalog unter System → Erweiterungskatalog aufrufen. Daraufhin werden Ihnen alle in der Erweiterungsliste veröffentlichten Erweiterungen angezeigt. Am schnellsten finden Sie die Erweiterung Slideshow2, in dem Sie den in der Fußzeile angegebenen Link in Ihren Browser eingeben. Oder wählen Sie im Backend im Erweiterungskatalog aus dem Menü Autor den Namen dieka aus – der Name des Entwicklers in der Erweiterungsliste (Abbildung 7.91). 21 http://www.typolight.org/erweiterungsliste/view/slideshow2.90008.de.html 22 http://www.electricprism.com/aeron/slideshow/

Aufbau einer Website mit T YPO light

161

Abbildung 7.91 Erweiterungskatalog im TYPOlight-Backend

Installieren Sie die Erweiterung Slideshow2 und führen Sie die nötigen Schritte wie das Datenbank-Update aus. Ist die Erweiterung installiert, finden Sie einen neuen Eintrag im Backend unter Inhalte → Slideshow2 (Abbildung 7.92). Abbildung 7.92 Erweiterung Slideshow2 im Backend

Über diesen Link rufen Sie die Verwaltung der Slideshow2 auf.

162

K apite l 7

Abbildung 7.93 Einstellungen für die Bildrotation erstellen – Teil 1

Zum Erstellen der ersten Slideshow klicken Sie auf den Link Slideshow2 und dann auf Neue Bildrotation (Abbildung 7.93). Unter der Rubrik Titel und Grösse geben Sie einen passenden Namen für die Slideshow ein; hier im Beispiel soll die Slideshow für die Portfolioseite Luftfahrt erstellt werden. In den Feldern Breiteund Höhe der Slideshow geben Sie in der Regel sinnvollerweise die Größe der Bilder an, in der Sie die Bilder erstellt haben (800 x 600 Pixel). In diesem Beispiel steht für die Inhaltselemente aufgrund des Designs nur eine Breite von 720 Pixel zur Verfügung. Entsprechend werden die Breite und Höhe proportional eingetragen (720 x 540 Pixel). In der Rubrik Rotation tragen Sie im Feld Einblendungsdauer einen Zeitwert in Millisekunden ein (z. B. 5000 für 5 Sekunden); im Feld Effektdauer tragen Sie ebenfalls den Zeitwert in Millisekunden ein (hier z. B. 3000 für 3 Sekunden). In der Rubrik Effekte können Sie nun unter verschiedenen Effekten wählen. Für eine weiche Überblendung der einzelnen Bilder wählen Sie für dieses Beispiel die Option Alpha aus. Experimentieren Sie mit den einzelnen Möglichkeiten und der Option Effekt Bewegung. Für das Beispiel wird die Option Effekt Bewegung nicht verwendet. In der nächsten Rubrik Abspielverhalten können Sie weitere Optionen auswählen – hier habe ich für das Beispiel die Option Zufällige Reihenfolge ausgewählt.

Aufbau einer Website mit T YPO light

Abbildung 7.94 Einstellungen der Bildrotation – Teil 2

In Kontrolle, der nächsten Rubrik (Abbildung 7.94), können Sie die Option Buttons aktivieren auswählen. Dies bewirkt bei der Positionierung des Mauszeigers über einem Bild, dass die Bedienelemente eingeblendet werden und Sie durch die Bilder navigieren, vor- und zurückspulen oder die automatische Überblendung deaktivieren und manuell durch die Bilder blättern können. Bei der Option Transition speed kann die Geschwindigkeit gesteuert werden, wenn ein Besucher der Portfolioseite eine Aktion auslöst. In der Rubrik Thumbnails können Sie die Option Thumbnails aktivieren anklicken, um kleine Vorschaubilder unter den Bildern der Slideshow anzeigen zu lassen. In den Feldern Bildbreite und -höhe der Thumbnails legen Sie eine Größe für die Thumbnails fest. Mit der Option Thumbnail Übergang blenden sich Farbverläufe als Grafiken über den linken und rechten Rand der Thumbnails – es entsteht der optische Eindruck des Ein- und Ausblendens. Diese Option wurde im Beispiel nicht verwendet. Mit der Option Bilduntertitel einblenden in der Rubrik Bilduntertitel blendet sich der Alt-Text ein, der für jede Slideshow einmal definiert werden kann. Zum Zeitpunkt der Drucklegung dieses Buches wurde zu jedem Bild der gleiche ­Alt-Text angezeigt; eine Ergänzung der Erweiterung um die Möglichkeit, eine meta.txt-

163

164

K apite l 7

Datei einzubinden, wurde jedoch schon angeregt und könnte in einer neuen Version der Erweiterung enthalten sein. Zu guter Letzt lassen sich in der Rubrik Templates CSS-Templates und JavaScriptTemplates auswählen, wenn Sie nicht die Standard-Templates für die Slideshow2 verwenden möchten und spezielle Anpassungen vornehmen wollen. Speichern und schliessen Sie dann die soeben erstellte Bildrotation. Die Konfiguration ist erstellt, nun fügen Sie der Bildrotation noch das richtige Bildverzeichnis hinzu, indem Sie auf Neues Element klicken oder – wie Sie es bereits kennen – auf das grüne Icon mit dem Plus-Zeichen. Abbildung 7.95 Bilderverzeichnis auswählen

Eine zusätzliche Großansicht gleich großer Bilder macht keinen Sinn. Verwenden Sie diese Option zum Beispiel dann, wenn die Größe der Bildrotation kleiner als die Bildgröße sein soll und Sie auf die Darstellung der Thumbnails verzichten. Ein Effekt, der dann doch keiner ist, irritiert. Die Verlinkung ist dann sinnvoll, wenn Sie eine Bildrotation im Kopfbereich einer Seite verwenden und bei einem Klick auf eines der Bilder auf eine Unterseite der Website oder auf eine externe Website verlinkt werden soll.

In der Rubrik Titel geben Sie im Feld Alternativer Text einen zu den Bildern passenden Text ein (Abbildung 7.95); hier: Portfolio-Luftfahrt. In der Rubrik Bildauswahl wählen Sie das Verzeichnis portfolio/luftfahrt aus. Mit der Option Bildgrösse anpassen können Sie die Bilddateien zur Optimierung der Dateigrößen umrechnen lassen – lesen Sie dazu auch den Tipp im Backend unter der Option. Diese Option wird im Beispiel nicht genutzt. Und zum Schluss können Sie in der Rubrik Verlinkung die Bildrotation zu einer anderen Seite verlinken oder die Option Grossansicht aktivieren.

Aufbau einer Website mit T YPO light

165

Speichern und schliessen Sie dann das neue Element. Fast geschafft. Nun binden Sie die erstellte Bildrotation noch in den Artikel Luftfahrt ein. Dazu öffnen Sie den Artikel im Backend von TYPOlight unter Inhalte → Artikel und klicken zum Bearbeiten des Artikels auf das Editier-Icon. Fügen Sie ein neues Inhaltselement ein – wie, das haben Sie bereits kennen gelernt – und wählen dann in der Rubrik Titel den Elementtyp Slideshow2 aus. In der Rubrik Include-Einstellungen wählen Sie nun die eben erstellte Bildrotation Luftfahrt aus. Speichern und schliessen Sie dann das Inhaltselement und wechseln Sie in die Frontendansicht, um sich die Slideshow anzusehen (Abbildung 7.96). Abbildung 7.96 Frontendansicht mit Slideshow2-Erweiterung

In Abbildung 7.97 sehen Sie eine Momentaufnahme der Bildüberblendungen und die eingeblendete Bildnavigation.

166

K apite l 7

Abbildung 7.97 Überblendeffekt und Bildnavigation der Slideshow2

CD

Sie finden die Version mit der Slideshow2 auch als Website-Vorlage zum Import in eine leere TYPOlight-Installation auf der beiliegenden CD-ROM.

CD

Sie finden die komplette Fotografen-Website zur Installation auf der beiliegenden CD-ROM, sodass Sie die CSS-Definitionen auch real ansehen und ­analysieren können.

Listing 7.18 CSS-Definitionen standard.css

Nun haben Sie noch eine weitere Möglichkeit der Bildpräsentation kennen gelernt und können dem Fotografen die neuen Portfolioseiten präsentieren und die Website freischalten.

7.15 Ein Blick auf die CSS-Definitionen Für die Beispielseite wurden, wie in Unterkapitel 7.5 beschrieben, zwei CSS­Dateien angelegt: Die CSS-Datei standard.css für das Layout und Inhalte und eine CSS-Datei navigation.css für die Navigation. Die Inhalte der CSS-Datei standard.css (Listing 7.18): /* Style sheet fotograf-standard */ body { margin:0; padding:0; font-family:"Lucida Sans","Lucida Grande",Verdana,Arial sans-serif; font-size:100.1%; background:#777 url(tl_files/body_background.jpg) repeat-x fixed top left; }

Aufbau einer Website mit T YPO light

Für den body-Selektor wurden alle Innen- und Außenabstände auf Null und die Schriftgröße auf 100.1% gesetzt. Für die Schrift wurde Lucida Sans verwendet, gefolgt von den weiteren angegebenen Schriften sowie der generischen Angabe sans-serif. Die erste Schrift, die auf dem Rechner des Benutzers installiert ist, wird aus dieser Schriftenliste verwendet. Schriften, die aus mehr als einem Namen bestehen, werden in Anführungszeichen gesetzt. Für den Hintergrund wird eine Hintergrundgrafik zugewiesen, welche sich in der x-Achse wiederholt (von links nach rechts) und oben links positioniert wird. Durch die zusätzliche Angabe der passenden Hintergrundfarbe entsteht der Eindruck eines nahtlosen Hintergrundes.­23 /* Kopfzeile */ #header { background:#444; }

Für den Selektor #header wird eine Hintergrundfarbe definiert. /* Hauptspalte */ #main { min-height:400px; height:auto !important; background:#444; }

Für die Hauptspalte wird eine Mindesthöhe festgelegt sowie eine Hintergrundfarbe. Die Anweisung min-height wird von modernen Browsern unterstützt – für den Internet Explorer 6 wird eine Mindesthöhe festgesetzt. /* minimale Hoehe fuer IE6 */ * html #main { height:400px !important; }

Für alle Artikel in der Hauptspalte werden Breite sowie Positionierung festgelegt, um eine linksbündige Ausrichtung des Inhaltes in der Hauptspalte zur Naviga­tion zu erreichen. Mit der Eigenschaft overflow:hidden werden mögliche Scrollbalken versteckt, die Innenabstände auf Null gesetzt und dann ein Außenabstand nach unten definiert. #main .mod_article { width:720px; left:120px; top:0; position:relative; overflow:hidden; margin:0 0 20px 0; padding:0; } 23 http://riddle.pl/emcalc/

167

Verwenden Sie für die Angabe der Schriftgrößen relative Größen wie em und %. Dadurch sind Schriften in ihrer Größe durch den Benutzer skalierbar – der Internet Explorer 6 kann Schrift nur dann stufenweise skalieren, wenn die Angaben in relativen Größen angegeben sind. Ein Online-Tool23 für die Umrechnung von festen Schriftgrößen (px) in relative Schriftgrößen (em) erleichtert Ihnen die Umrechnung. Weiterführende Links zu CSS finden Sie auf der Website zu diesem Buch.

168

K apite l 7

Für das Inhaltselement Text wird ein Innenabstand von oben definiert, die Außenabstände auf Null gesetzt und die Schriftgröße festgelegt. Als Schriftfarbe wird Weiß verwendet, ein 1,6-facher Zeilenabstand und ein Buchstabenabstand definiert. #main .ce_text { margin:0; padding:20px 0 0 0; font-size:0.75em; color:#fff; line-height:1.6; letter-spacing:0.05em; }

Für die Überschriften wird die gleiche Breite wie für alle Artikel eingerichtet, der Außenabstand auf Null gesetzt. Die Überschriften mit h1-Auszeichnung erhalten eine unten positionierte, gepunktete Linie mit einem Innenabstand. Zudem werden Schriftgröße und -farbe sowie Zeilenabstand festgelegt. /* Ueberschriften */ #main h1, #main h1.ce_headline { width:720px; margin:0; padding:0 0 5px 0; border-bottom:1px dotted #26A3CF; font-size:1.5em; color:#26A3CF; line-height:1.6; }

Für die Überschriften mit h2-Auszeichnung werden ebenfalls die Werte definiert; hier weicht die Schriftgröße gegenüber der h1-Auszeichnung ab. #main h2, #main h2.ce_headline { margin:0; padding:0 0 5px 0; font-size:1.7em; color:#26A3CF; line-height:1.6; }

Für das Inhaltselement Galerie wird der Außenabstand auf Null, der Innenabstand von oben definiert. /* Bildergalerien */ #main .ce_gallery { margin:0; padding:20px 0 0 0; }

Aufbau einer Website mit T YPO light

Für die Vorschaubilder werden Innen- und Außenabstände auf Null gesetzt und ein Rand definiert. #main .ce_gallery .image_container img { margin:0; padding:0; border:1px solid #dfdfdf; }

Für den Bildcontainer, der jedes Vorschaubild enthält, werden die Innen- und Außenabstände gesetzt, ein overflow:hidden verhindert Scrollbalken (IE 6) und die Schlagschattengrafik wird als Hintergrundbild positioniert. #main .ce_gallery .image_container { overflow:hidden; margin:0 10px 10px 0; padding:0 0 6px 0 !important; background:#333 url(tl_files/imageshadow.png) no-repeat right bottom; }

Für das visuelle Feedback wird den Vorschaubildern noch eine andere Farbe für den Rand bei einem Rollover zugewiesen. #main .ce_gallery .image_container img:hover { margin:0; padding:0; border:1px solid #26A3CF; }

Das Formular wurde auf tabellenlos eingestellt. Die Labels erhalten Außenabstände, die Innenabstände werden auf Null gesetzt. Mit display:block werden die Labels über die gesamte Breite gesetzt; dadurch werden die Eingabefelder darunter platziert. Die Schriftgröße und -farbe wird definiert sowie die Schrift fett ausgezeichnet. /* Formular */ #main #f2 label { display:block; margin:8px 0 4px 0; padding:0; font-weight:bold; font-size:0.88em; color:#26A3CF; }

Für die Felder vom Typ Textfeld werden die Außenabstände auf Null gesetzt und die Innenabstände definiert. Die Eingabefelder bekommen eine feste Breite, einen Rand sowie eine Schriftgröße und -farbe zugewiesen.

169

170

K apite l 7

#main #f2 .text { width:200px; margin:0; padding:4px 2px; border:1px solid #26A3CF; font-size:0.88em; color:#26A3CF; }

Entsprechend für das Feld vom Typ Textarea. #main #f2 .textarea { width:600px; height:100px; margin:0; padding:4px 2px; border:1px solid #26A3CF; font-size:0.88em; color:#26A3CF; }

Für das Eingabefeld der Sicherheitsfrage werden die entsprechenden Definitionen eingestellt. #main #f2 .captcha { width:100px; margin:0; padding:4px 2px; border:1px solid #26A3CF; font-size:0.88em; color:#26A3CF; }

Ebenso für den Hinweistext der Sicherheitsfrage. #main #f2 .captcha_text { margin:0; padding:4px 2px; font-size:0.88em; color:#26A3CF; }

Die Schaltfläche wird definiert und erhält eine feste Breite sowie Innen- und Außenabstände zugewiesen. Der Rand wird abgeschaltet und eine Schrift- und Hintergrundfarbe festgelegt.

Aufbau einer Website mit T YPO light

#main #f2 .submit { width:105px; margin:10px 0 0 0; padding:5px 10px; color:#fff; border:none; background:#26A3CF; }

Damit bei nicht korrektem Ausfüllen die Hinweise deutlich gekennzeichnet werden, werden eine Schrift- und Hintergrundfarbe sowie ein Innenabstand definiert. #main #f2 .error { padding:4px; color:#f30; background:#fff; }

Für die Übersichtsseite Portfolio wird die Klasse fotoblock definiert, damit die Elemente mit der zugewiesenen Klasse nebeneinander positioniert (gefloatet) werden. Dafür wird eine feste Breite definiert, ein overflow:hidden versteckt Scrollbalken (IE 6) und ein Außenabstand nach rechts definiert den Abstand der einzelnen Elemente untereinander. Der Innenabstand wird auf Null gesetzt. /* 3-Spalter Portfolio */ #main .fotoblock { width:200px; overflow:hidden; float:left; margin:0 40px 0 0; padding:0; }

Für die Fußzeile wird eine Schrift- und Hintergrundfarbe sowie ein Rand oben definiert. /* Fusszeile */ #footer { border-top:1px solid #666; color:#fff; background:#333; }

Der Inhalt der Fußzeile erhält Definitionen für die Schriftgröße und -farbe sowie den Buchstabenabstand. Die Außenabstände werden auf Null gesetzt, der Innenabstand nach oben eingestellt. Mit text-align:center wird der Text zentriert. #footer .inside { margin:0;

171

172

K apite l 7

padding:10px 0 0 0; text-align:center; font-size:0.63em; color:#26A3CF; letter-spacing:0.05em; }

Die Inhalte der CSS-Datei navigation.css (Listing 7.19): Listing 7.19 CSS-Definitionen­ navigation.css

/* Erste Navigation - Level 1 */

Die Hauptnavigation wird in der Kopfzeile mit einer festen Breite sowie einem Abstand von oben positioniert. Ein overflow:hidden verhindert die Scrollbalken (IE 6). Ein Außenabstand nach links positioniert die Navigation. Für die Hauptnavigation wird eine Schriftenliste sowie eine Hintergrundgrafik definiert. #header .mod_navigation { width:840px; top:100px; position:absolute; overflow:hidden; margin:0 0 0 120px; font-family:"Lucida Sans","Lucida Grande",Verdana,Arial sans-serif; background:url(tl_files/glossy-nav.png) repeat-x top left; }

Für die unsortierte Liste werden Innen- und Außenabstände auf Null gesetzt sowie die Auflistungspunkte abgeschaltet. #header .mod_navigation ul { margin:0; padding:0; list-style-type:none; }

Für die Listenelemente wird eine feste Breite definiert und die Innen- und Außenabstände werden auf Null gesetzt. Die Eigenschaft float:left platziert die Listenelemente nebeneinander. Der Text wird als zentriert definiert. #header .mod_navigation li { width:120px; float:left; margin:0; padding:0; text-align:center; }

Aufbau einer Website mit T YPO light

Für die Links und Pseudoklassen wird durch display:block der klickbare Bereich auf die gesamte Breite der Listenelemente gesetzt. Ein Innenabstand nach oben und unten und die Schriftgröße und -farbe werden definiert. Die Linkunterstreichung wird abgeschaltet. #header .mod_navigation a, #header .mod_navigation a:link, #header .mod_navigation a:visited, #header .mod_navigation a:focus { display:block; padding:8px 0; text-decoration:none; font-size:1.6em; color:#fff; }

Für den Hover-Zustand der Links wird eine andere Schriftfarbe sowie eine andere Hintergrundgrafik definiert. #header .mod_navigation a:hover { color:#26A3CF; background:url(tl_files/glossy-nav-hover.png) repeat-x top left; }

Für den Zustand der aktuellen Seite im Navigationsmenü wird die Klasse active mit der gleichen Breite der Listenelemente definiert. Ein Innenabstand nach oben und unten, Schriftgröße und -farbe sowie die Hintergrundgrafik werden eingestellt. #header .mod_navigation li.active { width:120px; padding:8px 0; font-size:1.6em; color:#26A3CF; background:url(tl_files/glossy-nav-hover.png) repeat-x top left; }

Die Klasse .trail a wird definiert, damit der übergeordnete Menüpunkt gekennzeichnet wird, wenn eine Unterseite aufgerufen wurde. Die feste Breite entspricht wieder der Breite der Listenelemente; ein Innenabstand nach oben und unten, die Schriftgröße und -farbe wird definiert. Der Schriftfarbe wird der Zusatz !important beigefügt, der dafür sorgt, dass diese Definition eine höhere Priorität erhält. Außerdem wird eine Hintergrundgrafik zugewiesen. #header .mod_navigation .trail a { width:120px; padding:8px 0; font-size:1.6em;

173

174

K apite l 7

color:#26A3CF !important; background:url(tl_files/glossy-nav-hover.png) repeat-x top left; }

Die Unternavigation wurde durch ein zweites Modul Navigationsmenü erreicht. Da die Unternavigation nur auf der Portfolioseite sichtbar ist, wird diese durch eine feste Breite sowie einen Außenabstand nach links linksbündig zum Listenelement des Menüpunktes Portfolio positioniert. Die Positionierung von oben wird so eingestellt, dass die Unternavigation unter der Hauptnavigation angezeigt wird. Ein overflow:hidden verhindert auch hier die Scrollbalken (IE 6) und setzt die float-Definition in standardkonformen Browsern zurück. Die Schrift wird durch die Schriftenliste vorgegeben; eine Hintergrundgrafik wird definiert. Da zwei Module vom Typ Navigationsmenü in der Kopfzeile platziert werden, erhält die Unternavigation zur unabhängigen Formatierung die Klasse sub. /* Zweite Navigationsleiste - Level 2 */ #header .mod_navigation.sub { width:600px; top:135px; position:absolute; overflow:hidden; margin:0 0 0 360px; font-family:"Lucida Sans","Lucida Grande",Verdana,Arial sans-serif; background:url(tl_files/glossy-nav.png) repeat-x top left; }

Alle weiteren Elemente erhalten die gleichen Definitionen wie die Hauptnavigation, da beide optisch identisch sind; lediglich der Klassenname sub wird allen Elementen angefügt. #header .mod_navigation.sub ul { margin:0; padding:0; list-style-type:none; } #header .mod_navigation.sub li { width:120px; float:left; margin:0; padding:0; text-align:center; } #header .mod_navigation.sub a, #header .mod_navigation.sub a:link, #header .mod_navigation.sub a:visited, #header .mod_navigation.sub a:focus

Aufbau einer Website mit T YPO light

{ display:block; padding:8px 0; text-decoration:none; font-size:1.6em; color:#fff; } #header .mod_navigation.sub a:hover { color:#26A3CF; background:url(tl_files/glossy-nav-hover.png) repeat-x top left; } #header .mod_navigation.sub li.active { width:120px; padding:8px 0; font-size:1.6em; color:#26A3CF; background:url(tl_files/glossy-nav-hover.png) repeat-x top left; }

175

8 Arbeiten mit Rastern (Grids)

178

K apite l 8

Raster begegnen Ihnen nahezu täglich, ohne dass Sie dies vielleicht bewusst wahrnehmen. Zum Beispiel die Tageszeitung, die Sie am Morgen aus dem Briefkasten holen, ist auf Rastersystemen aufgebaut. Rastersysteme helfen beim strukturierten Aufbau und der Gliederung von Inhalten – auch auf Websites. Ein Rastersystem ermöglicht Ihnen zum einen, eine klare Struktur Ihrer Inhalte zu erstellen und zum anderen die einfache Anordnung der Inhalte in Spalten. Bekannte CSS-Frameworks mit Rastersystemen für das Internet sind zum Beispiel YAML 1, Yahoo YUI 2 oder das 960 GS (GridSystem) 3. Für die künftigen CSS3Definitionen wurde eine Spezifikation für Mehrspaltigkeit vorgesehen.4 CSSFrameworks stellen eine Basis für den Aufbau von Websites dar. Viele bekannte Unzulänglichkeiten bezüglich der Standardkonformität und bekannter Browserfehler werden durch solche CSS-Frameworks abgefangen und erleichtern den Aufbau von Websites mitunter erheblich.

CD

Sie finden die Stylesheet-Dateien hier zum Download 5 und auch auf der beiliegenden CD-ROM.

Anlässlich des 2. TYPOlight-Usertreffens 2009 stellte Leo Feyer seine Versionen des durchdachten Gridsystems für das TYPOlight-CSS-Framework vor. Durch den Einsatz des Grid-Systems in TYPOlight können Sie auf einfache Weise die Inhaltselemente einer Website strukturiert an einem Raster ausrichten. Dieses Grid-System besteht aus zwei, eigentlich drei CSS-Dateien: Einem Reset-Stylesheet, welches wie der Name schon anklingen lässt, die wesentlichen Elemente zurücksetzt sowie einem pixel- oder prozentbasiertem Stylesheet, mit dem sich die Darstellung der Inhalte in Spalten erreichen lässt.5 Ich habe Ihnen eine Beispielseite mit dem pixelbasierten CSS-Dokument aufgebaut, die die Anwendung von Grids verdeutlicht. In diesem Kapitel lernen Sie neben der Anwendung des Rastersystems auch noch das Nachrichtenmodul kennen. Zudem erfahren Sie, wie Sie eine editierbare Fußzeile durch die Verwendung von Insert-Tags mit Artikelinhalten erstellen können.

8.1

Aufbau und Konzept des Rastersystems

Das Rastersystem basiert auf einer Seitenbreite von 960 Pixel. Mit der Verwendung der CSS-Datei gridpx.css stehen 12 Spalten zur Verfügung, jeweils 60 Pixel breit und mit einem Außenabstand nach links und rechts von 10 Pixel. Ergo: 12 Spalten mit 80 Pixel Breite ergibt die Gesamtbreite von 960 Pixel. Für jede Spaltenbreite existieren Klassen, die Sie auf die Inhaltselemente anwenden können. Die Klassen 1 http://www.yaml.de 2 http://developer.yahoo.com/yui 3 http://960.gs 4 http://www.w3.org/TR/2007/WD-css3-grid-20070905 5 http://www.typolight.org/herunterladen.html

Arbeiten mit Rastern (Grids)

179

sind mit g1 bis g12 gekennzeichnet. g12 steht für 12 Spalten, g6 für 6 Spalten etc. Abbildung 8.1 veranschaulicht dies:

Abbildung 8.1 Grid-Klassen

In Abbildung 8.1 sehen Sie die Aufteilung einer Webseite in 12 Spalten. Wenn Sie nun ein Inhaltselement über eine Breite von 3 Spalten anordnen möchten, so geben Sie diesem Inhaltselement die CSS-Klasse g3. Um unschöne Umbrüche zu vermeiden, fügen Sie Inhaltselementen in der Summe der Gesamtspaltenbreite maximal 12 Spalten als CSS-Klasse hinzu. Zum Beispiel in folgenden Kombinationen: Gleichmäßige Kombinationen wie: g3 + g3 + g3 + g3 oder g4 + g4 + g4, g6 + g6 oder g12.

Ungleichmäßige Kombinationen wie: g6 + g3 + g3 oder g2 + g4 + g4 + g2, g5 + g5 + g2 oder g3 + g4 + g5.

Entscheiden Sie anhand des Inhaltes über die Spaltenbreite – in der Regel können Sie, wie auch im Beispiel gezeigt, die Nachrichten in einer Breite von 3 oder 4 Spalten anzeigen lassen. Für größere Textmengen ist unter anderem aufgrund der besseren Lesbarkeit eine Breite von 4 bis 8 Spalten sinnvoll. Vorab ein Blick (Abbildung 8.2) auf die Website wie sie später einmal aussieht:

CD

Sie finden die Browser­ abbildung mit den Grids sowie ein Gridbogen zum Einsatz bei einem Brainstorming oder bei der gemeinsamen Ideenfindung mit Kunden als PDF-Dokumente zum Ausdrucken auf der beiliegenden CDROM. Sie können auch die Browservorlage zum ersten Skizzieren von Ideen verwenden.

180

K apite l 8

Abbildung 8.2 Website mit CSS-Grid

Wenn Sie die folgende Beschreibung des Aufbaus der Webseite überspringen möchten, dann importieren Sie gleich das Template und vollziehen die Schritte der Anwendung der CSS-Grids in Unterkapitel 8.7 nach. Zunächst erläutere ich Ihnen die weiteren Schritte für den Aufbau der Website. In der Kopfzeile wird das Modul Zufallsbild verwendet. Für alle weiteren Inhaltselemente wird das Raster angewendet.

8.2

Seitenstruktur anlegen

Erstellen Sie die Seitenstruktur wie in Abbildung 8.3 abgebildet. Abbildung 8.2 Seitenstruktur TYPOgrid

Arbeiten mit Rastern (Grids)

Für die editierbaren Einträge in der Fußzeile wird die Seitenstruktur veröffentlicht, jedoch die Option Im Menü verstecken aktiviert. Die gleiche Einstellung nehmen Sie für die Seite vor, die später das Modul für den Nachrichtenleser enthält: TYPOgrid – Nachrichten. Anschließend erstellen Sie die benötigten Module wie in Abbildung 8.4 zu sehen ist.

8.3

Module für die Website erstellen

Für diese Beispielseite werden folgende Module benötigt und angelegt: ◆◆ ein Modul für die Kopfzeile ◆◆ ein Modul für die Fußzeile ◆◆ ein Modul für die Zufalls-Anzeige von Bildern ◆◆ ein Modul für das Auflisten von Nachrichten

181

Warum verwenden Sie hier einen Querverweis auf den Artikelinhalt, anstatt den Inhalt direkt im Modul einzugeben? Der wesentliche Vorteil besteht darin, dass später alle Inhalte wie ein normaler Artikel in der Artikelübersicht erscheint und dort bearbeitet werden können. Dies ermöglicht den Redakteuren später ohne HTMLKenntnisse Inhalte in der Fußzeile zu ändern. Zudem können Sie dann als Administrator den Zugriff auf die Module für Redakteure sperren.

◆◆ ein Modul zum Anzeigen einer einzelnen Nachricht Abbildung 8.4 Module für die Website

182

K apite l 8

8.3.1 Das Modul Zufallsbild einrichten Definieren Sie zuerst das Modul Zufallsbild wie in Abbildung 8.5 zu sehen. Abbildung 8.5 Modul Zufallsbild

Geben Sie dem Modul einen passenden Namen und wählen unter der Rubrik Dateien und Ordner dann den Ordner kopfbilder aus, der die Bilder enthält, die Sie per Zufall anzeigen lassen möchten. Der Name des Verzeichnisses ist nicht festgelegt und kann beim Anlegen in der Dateiverwaltung von Ihnen frei benannt werden. Speichern und schliessen Sie dann das Modul. Als nächsten Schritt erstellen Sie die Module für die Kopf- und Fußzeile.

8.3.2 Modul für die Kopfzeile erstellen Die Kopfzeile enthält in diesem Beispiel lediglich eine Überschrift, die mit h1 ausgezeichnet wird. Erstellen Sie ein Modul mit dem Modultyp Eigener HTMLCode.

Arbeiten mit Rastern (Grids)

Abbildung 8.6 Modul Kopfzeile

Im Anschluss erstellen Sie das Modul für die Fußzeile.

8.3.3 Modul für die Fußzeile erstellen Erstellen Sie ein weiteres Modul mit dem Modultyp Eigener HTML-Code. Abbildung 8.7 Modul Fußzeile

183

184

K apite l 8

Hier wird ein Insert-Tag 6 verwendet, welches den Inhalt des Artikels mit der ID 2 im Frontend ausgibt. Die ID ist ein Platzhalter für den Artikel, der später eingefügt wird, wenn Sie den Artikel erstellt haben. Die ID des Artikels ermitteln Sie, indem Sie den Mauszeiger in der Artikelansicht über das blaue Icon mit dem kleinen i bewegen. Kurz danach wird Ihnen die Artikel-ID angezeigt (Abbildung 8.8). Abbildung 8.8 Artikel-ID anzeigen

8.4

Anlegen eines Nachrichtenarchivs

Auf der Website sollen Nachrichten angezeigt werden. Nachrichten unterscheiden sich in der Regel von Artikeln – die Nachrichtenüberschrift und ein oder zwei kurze Sätze machen auf die gesamte Nachricht aufmerksam. Ein Klick auf einen Weiterlesen-Link leitet dann den Besucher auf den gesamten Nachrichtenbeitrag. Nachrichtenarchive lassen sich archivieren und bieten zudem die Option, aus den Nachrichtenbeiträgen RSS-Feeds7 zu generieren. Mit Nachrichtenarchiven haben Sie eine weitere – andere – Möglichkeit, Informationen auf Ihrer Website darzustellen. Um Nachrichten erstellen und verwalten zu können, legen Sie in TYPOlight ein Nachrichtenarchiv an (Abbildung 8.9). Zum Anlegen eines Nachrichtenarchivs klicken Sie im Backend von TYPOlight auf Inhalte → Nachrichten und erstellen ein Neues Archiv. Abbildung 8.9 Anlegen eines Nachrichtenarchivs

6 http://www.typolight.org/typolight-insert-tags.html 7 http://de.wikipedia.org/wiki/RSS

Arbeiten mit Rastern (Grids)

185

Geben Sie unter Titel und Weiterleitung einen Titel und die Weiterleitungsseite an (Abbildung 8.10), die für die Ausgabe der Nachrichten zuständig ist (TYPOgrid – Nachrichten). Abbildung 8.10 Weiterleitungsseite festlegen

Speichern und schliessen Sie das Nachrichtenarchiv. Um die Nachrichten im Frontend anzuzeigen, werden noch zwei Module benötigt: Eines für die Auflistung der Nachrichten (Nachrichtenliste) – hier werden die Überschrift der Nachricht, ein Teasertext und ein Weiterlesen-Link angezeigt – und eines für die Anzeige der gesamten Nachricht (Nachrichtenleser).

8.4.1 Das Modul Nachrichtenliste anlegen Wechseln Sie im Backend in Layout → Module und klicken auf Neues Modul. Geben Sie einen Titel und eine Überschrift ein und wählen Sie als Modultyp Nachrichtenliste aus. Unter Modul-Konfiguration wählen Sie nun das eben erstellte Nachrichtenarchiv aus. Für das Beispiel stellen Sie die Gesamtzahl der Beiträge auf 2 ein. Unter Template-Einstellungen aktivieren Sie das Feld Datum. Als Nachrichtentemplate wählen Sie das Nachrichtentemplate news_latest aus. Mit dieser Einstellung werden auf der Webseite dann die letzten zwei aktuellen Nachrichten angezeigt (Abbildung 8.11).

186

K apite l 8

Abbildung 8.11 Modul Nachrichtenliste erstellen

Speichern und schliessen Sie das Modul.

8.4.2 Das Modul Nachrichtenleser anlegen Für die Anzeige der kompletten Nachricht im Frontend benötigen Sie nun noch ein Modul Nachrichtenleser. Wechseln Sie dazu wieder in Layout → Module und klicken auf Neues Modul. Geben Sie einen Titel ein und wählen als Modultyp Nachrichtenleser aus. Bei Modul-Konfiguration wählen Sie wieder das Nachrichtenarchiv TYPOgrid – News aus. Bei den Template-Einstellungen aktivieren Sie bei Meta-Felder Datum und wählen für das Nachrichtentemplate news_full aus (Abbildung 8.12).

Arbeiten mit Rastern (Grids)

187

Abbildung 8.12 Modul Nachrichtenleser erstellen

8.4.3 Nachrichtentemplates anpassen Wenn Sie die Standardtemplates für die Nachrichten verwenden, werden Ihnen entsprechend der Angaben in den Einstellungen Datum und Uhrzeit einer erstellten Nachricht sowie die Nachrichten-Überschrift und ein Weiterlesen-Link auf der Website angezeigt. Durch die nachfolgend gezeigten Änderungen der Templates für die Nachrichten wird nur noch das Datum der Nachricht angezeigt, die Verlinkung der Nachrichten-Überschrift entfernt und der Weiterlesen-Link angezeigt. Passen Sie nun die beiden Nachrichtentemplates an. Wechseln Sie im Backend in Layout → Templates und klicken auf Neues Template. Wählen Sie im Menü Originaltemplates zunächst das Template news_latest .tpl aus dem Bereich news aus und klicken dann auf Template erstellen.

Wenn Sie auf diese Weise die Templates ändern und den Namen des Templates nicht verändern, übernimmt TYPOlight diese Änderungen updatesicher und speichert die geänderten Templates im Ordner templates ab. Sie können den Namen der Templates auch ändern: Achten Sie darauf, dass Sie für den Namen immer den vorangestellten Namen (bei Nachrichten news) und als Endung immer .tpl verwenden. Durch diese Konvention weiß TYPOlight, welche Templates wo zu verwenden sind. Beispiel: news_latest_typogrid.tpl. Eigens benannte Templates werden Ihnen dann in den jeweiligen Modulen angezeigt. Wenn Sie eigene Namen für Ihre geänderten Templates verwenden, müssen Sie diese neu benannten Templates in den Modulen bei Nachrichtentemplate auswählen.

188

K apite l 8

Abbildung 8.13 Bearbeiten der Templates

Bei der Bearbeitung von Templates – wie hier die Nachrichtentemplates – finden Sie eine Mischung aus HTML- und PHP-Code vor. Sie müssen hierbei kein Experte in PHP sein, um diese Änderungen vorzunehmen. Wenn Sie umfangreichere Änderungen an den Templates vornehmen möchten, sollten Sie dazu tiefer in das TYPOlightFramework einsteigen 8.

Listing 8.1 Template news_latest.tpl

Für das Nachrichtentemplate news_full.tpl verfahren Sie wie oben beim Nachrichtentemplate news_latest. Öffnen Sie das Template news_latest .tpl durch Klick auf das Bearbeiten-Icon (Abbildung 8.13).

8

Der Template-Editor zeigt Ihnen dann den Inhalt des Nachrichtentemplate news_latest.tpl an (Listing 8.1):

Ersetzen Sie nun zwei Stellen: Zum einen die Ausgabe des Datums und zum anderen das Entfernen der Verlinkung im Nachrichtentitel. Das geänderte Template sieht dann so (Listing 8.2) aus: Listing 8.2 Angepasstes Template news_latest.tpl



Durch die Ersetzung von date; ?> durch parseDate("d.m.Y", $this->timestamp); ?> erreichen Sie die Ausgabe des Datums ohne Uhrzeit und können hier auch individuelle Datumsformate9 – unabhängig von den Angaben in den Einstellungen – angeben. Die Methode parseDate() ist Bestandteil des TYPOlight-Frameworks; Details dazu finden Sie in der API-Dokumentation10 und im Offiziellen TYPOlight-Handbuch von Leo Feyer (ISBN 978-3-8273-2913-2). Für die Aufhebung der Verlinkung des Nachrichtentitels ersetzen Sie linkHeadline; durch newsHeadline;. Wenn Sie z. B. die Verlinkung des Nachrichtentitels beibehalten und den Weiterlesen-Link entfernen möchten, dann entfernen Sie die Zeile

more; ?>

oder kommentieren diese aus:

Für das Nachrichtentemplate news_full.tpl ändern Sie nur die Ausgabe des Datums wie oben beschrieben. Speichern und schliessen Sie das Template. Wenn Sie die Templates nicht umbenannt haben, sehen Sie jetzt im Frontend die Ausgabe des Datums und den Weiterlesen-Link.11

9 http://www.php.net/date 10 http://api.typolight.org 11 http://www.typolight-community.de

Wenn Sie Template­ anpassungen vornehmen möchten und wenig PHPKenntnisse haben, scheuen Sie sich nicht, im Forum11 der TYPOlight-Community nach bestehenden Lösungen zu suchen. Wenn Sie trotz intensiver Suche zu Ihrem Problem keine Lösung finden, fragen Sie nach. Dank der überaus freundlichen und hilfsbereiten Mitglieder der TYPOlight-Community werden Sie Anregungen, Lösungswege und auch Lösungen finden.

190

K apite l 8

8.5

Aufbau des Seitenlayouts

Wie Sie in Kapitel 7, Aufbau einer Website mit TYPOlight, schon gelesen haben, benötigen Sie noch ein Seitenlayout, um die Module und Inhalte zu platzieren. Öffnen Sie dazu im Backend Layout → Seitenlayouts und klicken auf Neues Layout. Abbildung 8.14 Erstellen des Seitenlayouts Spaltenkonfiguration

Übernehmen Sie die Einstellungen wie in Abbildung 8.14 gezeigt. Für die Beispielseite mit Rastern benötigen Sie nur die Hauptspalte und aktivieren daher unter Spaltenkonfiguration die erste Option aus Kopfzeile, Hauptspalte und Fußzeile.

Arbeiten mit Rastern (Grids)

191

Abbildung 8.15 Erstellen des Seitenlayouts – Einbinden von Modulen

Unter der Rubrik Frontend-Module binden Sie nun die erstellten Module, wie in Abbildung 8.15 zu sehen ist, ein. Unter Statisches Layout definieren Sie die Gesamtbreite auf 960 Pixel und die Ausrichtung auf Zentriert. Die Gesamtbreite von 960 Pixel ist für das Rastersystem wichtig, da es auf einer Breite von 960 Pixel basiert. Speichern und schliessen Sie das Seitenlayout.

8.6

Grid-Stylesheets importieren

Nachdem Sie alle wichtigen Vorarbeiten und damit das Grundgerüst der Webseite erstellt haben, werden nun die beiden CSS-Dateien basic.css und gridpx.css importiert und in das Seitenlayout eingebunden. Für den Import kopieren Sie die beiden CSS-Dateien über ein FTP-Programm oder die Dateiverwaltung in den Ordner tl_files. Öffnen Sie dann im Backend Layout → Stylesheets und klicken auf CSS-Import.

Das Raster wurde, basierend auf einer Breite von 960 Pixel, berechnet und erstellt. Wenn Sie eine andere Gesamtbreite für Ihr Seitenlayout definieren, müssen Sie die Werte für die einzelnen CSS-Klassen entsprechend anpassen. Ansonsten werden die Inhalte Ihrer Website fehlerhaft dargestellt.

192

K apite l 8

Abbildung 8.16 Grid-CSS-Dateien i­mportieren

Wählen Sie nun die beiden CSS-Dateien basic.css und gridpx.css aus und klicken auf CSS-Import (Abbildung 8.16). Bestätigen Sie die Sicherheitsabfrage mit OK. Die beiden CSS-Dateien wurden somit in die Datenbank von TYPOlight importiert und stehen nun im Stylesheet-Editor zum Bearbeiten zur Verfügung. Damit die importierten CSS-Dateien auch auf den Seiten wirksam werden, müssen Sie diese noch im Seitenlayout auswählen. Öffnen Sie dazu im Backend Layout → Seitenlayouts und wählen das Standardlayout durch Klick auf das EditierIcon aus. Selektieren Sie in der Rubrik Head-Bereich die beiden CSS-Dateien und Speichern und schliessen das Seitenlayout (Abbildung 8.17). Abbildung 8.17 CSS-Dateien im Seitenlayout auswählen

Die CSS-Datei basic.css setzt alle relevanten Inhaltselemente zurück – insbesondere die Außen- und Innenabstände; die CSS-Datei gridpx.css liefert das Raster mit den einzelnen Spaltendefinitionen. Für alle anderen Definitionen (Schriften, Farben etc.) erstellen Sie noch eine weitere CSS-Datei und benennen diese – in diesem Beispiel TYPOgrid.css. Verknüpfen Sie dann auch diese CSS-Datei im Seitenlayout und Speichern und schliessen Sie dieses (Abbildung 8.18). Abbildung 8.18 CSS-Datei TYPOgrid.css in das Seitenlayout einbinden

Nun können Sie damit beginnen, die einzelnen Seiten mit Inhalten zu füllen.

Arbeiten mit Rastern (Grids)

8.7

193

CSS-Grid anwenden

Um das Grid anzuwenden und die Artikelinhalte in Spalten anzuordnen, müssen Sie nun jedem Inhaltselement die entsprechende CSS-Grid-Klasse zuweisen. Öffnen Sie dazu im Backend Inhalte → Artikel und klicken zum Bearbeiten des Artikels Startseite auf das Editier-Icon. Abbildung 8.19 Artikel Startseite bearbeiten

Sie sehen alle Inhaltselemente innerhalb dieses Artikels. Ohne die Zuweisung einer CSS-Datei werden alle Inhalte untereinander angezeigt, wie in Abbildung 8.20 zu sehen ist.

194

K apite l 8

Abbildung 8.20 Frontendansicht ohne CSS

Öffnen Sie für die Zuweisung einer CSS-Grid-Klasse die einzelnen Inhaltselemente durch Klick auf das Editier-Icon (Abbildung 8.21).

Arbeiten mit Rastern (Grids)

195

Abbildung 8.21 Zuweisen der CSS-GridKlasse

Weisen Sie dem Inhaltselement unter der Rubrik Experten-Einstellungen die CSS-Klasse g9 zu. Dieses Inhaltselement wird nun in einer Breite von neun Spalten dargestellt. Speichern und schliessen Sie das Inhaltselement. Damit das auch für den Internet Explorer funktioniert, fügen Sie nach jeder Reihe gefloateter Inhaltselemente ein nicht sichtbares Clearing-Element ein (Listing 8.3):

Vereinfachen Sie die Vergabe der CSS-Klassen, indem Sie innerhalb des Artikels oben Mehrere bearbeiten auswählen (Abbildung 8.22). Aktivieren Sie anschließend die Option Alle auswählen und klicken Sie auf Bearbeiten. Aktivieren Sie dann die Checkboxen Elementtyp und CSS-ID/Klasse und klicken Sie auf ­Weiter.

Listing 8.3 Clearing-Element für den Internet Explorer

196

K apite l 8

Abbildung 8.22 CSS-Grid-Klassen allen Inhaltselementen zuweisen

Sie sehen im Frontend, dass den einzelnen Inhaltselementen unterschiedliche CSS-Grid-Klassen zugeteilt wurden und die Inhaltselemente in Spalten angezeigt (Abbildung 8.23) werden.

Arbeiten mit Rastern (Grids)

197

Abbildung 8.23 Frontendansicht mit Zuweisung der CSS-GridKlassen

Für die Gestaltung der einzelnen Elemente tragen Sie dann in der CSS-Datei TYPOgrid.css weitere CSS-Definitionen ein. Mit dieser zusätzlichen CSS-Datei sieht die Seite im Frontend folgendermaßen aus (Abbildung 8.24):

198

K apite l 8

Abbildung 8.24 Frontendansicht mit allen CSS-Dateien

Arbeiten mit Rastern (Grids)

199

Abbildung 8.25 Frontendansicht mit sichtbar gemachten CSS-GridKlassen

In Abbildung 8.25 sehen Sie die den Inhaltselementen zugewiesenen CSS-GridKlassen noch einmal veranschaulicht. Durch die Vergabe der CSS-Grid-Klassen auf die einzelnen Inhaltselemente lässt sich so auch die Reihenfolge der Spalteninhalte/Inhaltselemente definieren.

8.7.1 Mehrere Inhaltselemente in einer Spalte anordnen Da jedem Inhaltselement in der Regel eine CSS-Grid-Klasse zugewiesen wird, würden diese nebeneinander gefloatet dargestellt werden. Durch einen Trick können Sie mehrere Inhaltselemente in einer Spalte zusammenfassen und ausgeben (Abbildung 8.26). Legen Sie dazu ein div mit der CSS-Klasse der gewünschten

200

K apite l 8

Spaltenbreite um alle Inhaltselemente, die innerhalb einer Spalte angezeigt werden sollen. Den Inhaltselementen innerhalb des div weisen Sie dann keine CSS-GridKlassen zu. Abbildung 8.26 CSS-Grid-Klassen für mehrere Inhaltselemente

Erstellen Sie dazu zunächst ein Inhaltselement vom Typ Eigener HTML-Code und platzieren Sie dieses Inhaltselement vor dem ersten Inhaltselement, welches in dieser Spalte angeordnet werden soll. Schreiben Sie in das Inhaltselement Eigener HTML-Code den Code für das öffnende Div und die CSS-Grid-Klasse (Listing 8.4): Listing 8.4 Eigenen HTML-Code eingeben – öffnendes Div und Klasse



Die Ansicht im Backend in der Artikelansicht sehen Sie nachfolgend (dargestellt für die Elemente der rechten Spalte mit der CSS-Grid-KLasse g6 – Abbildung 8.27):

Listing 8.5 Eigenen HTML-Code ­eingeben – schließendes div

Abbildung 8.27 Artikelansicht mit Inhaltselementen HTML

Somit werden nun alle Inhaltselemente innerhalb des div mit einer Breite von sechs Spalten untereinander angeordnet. Durch die „Drag&Drop“-Funktion – das Verschieben der Inhaltselemente mit der Maus – innerhalb eines Artikels können Sie nun sehr einfach und schnell die einzelnen Inhaltselemente in ihrer Reihenfolge verschieben und in der Frontendansicht die Veränderungen sehen. Der Vorteil: Redakteure müssen nicht die Vergabe der CSS-Klasse bei den Inhalts­ elementen beachten. Weiter gedacht, können Sie diese Inhaltselemente auch als Module anlegen und im Seitenlayout einbinden, damit die Spaltenanordnung für alle Seiten gilt.

201

9 Suchmaschinen­ optimierung

204

K apite l 9

In diesem Kapitel erfahren Sie mehr über die Einstellungen von TYPOlight hinsichtlich der Suchmaschinenoptimierung. TYPOlight bietet als Basis einen suchmaschinenoptimierten Aufbau hinsichtlich Struktur und semantischem Code – ergänzen Sie nun noch weitere Angaben und Einstellungen. Wie Sie eine aus TYPOlight erstellte Sitemap-Datei bei Google anmelden und mithilfe der Google Webmaster Tools Ihre Website auswerten und optimieren können, lesen Sie auch in diesem Kapitel. Zudem erhalten Sie Empfehlungen für Erweiterungen, die für die Optimierung von Suchmaschineneinträgen relevant sind.

9.1

Suchmaschinenrelevante Einstellungen

In den Einstellungen im Backend sind einige Einträge relevant für Suchmaschinen. TYPOlight bietet Ihnen für die suchmaschinenrelevanten Angaben die Möglichkeit, neben einem Seitentitel auch Schlüsselwörter (keywords) und Seitenbeschreibungen (descriptions) anzulegen.

9.1.1 Seitentitel und Beschreibung der Seite Den Seitentitel legen Sie in der Regel durch den Namen der Seite innerhalb der Seitenstruktur fest (Abbildung 9.1). Abbildung 9.1 Festlegen des Seitentitels

Suchmaschinenoptimierung

Wenn Sie in der Rubrik Meta-Information einen Seitentitel eingeben, wird dieser Text als Seitentitel anstatt des Namens der Seite verwendet. Innerhalb der gleichen Rubrik können Sie die Beschreibung der Seite (description) hinzufügen. Die Beschreibung sollte exakt den Inhalt dieser Seite beschreiben. Nehmen Sie diese Beschreibung für jede Seite einzeln und mit individuellem Text vor.

9.1.2 Schlüsselworte vergeben Die Schlüsselworte (keywords) spielen schon seit längerem – speziell bei Google – eine kaum noch entscheidende Rolle für die Optimierung von Websites. Dennoch kann die Eintragung von Schlüsselwörtern, speziell für die Startseite einer Website, für andere Suchmaschinen sinnvoll sein. Die Schlüsselworte definieren Sie in jedem Artikel im Kopfbereich. Öffnen Sie dazu im Backend von TYPOlight Inhalte → Artikel und klicken auf das Editier-Icon zum Bearbeiten der Artikel­ einstellungen eines Artikels (Abbildung 9.2). Abbildung 9.2 Artikeleinstellungen ­bearbeiten

In der Rubrik Layoutbereich und Suchbegriffe können Sie nun die Schlüsselwörter (keywords) im Feld Suchbegriffe eingeben. In der Regel empfiehlt es sich, wenige, aber dafür den Artikelinhalt treffende, Schlüsselwörter zu verwenden (Abbildung 9.3). Nehmen Sie dies für alle Artikel vor und geben Sie die Schlüsselworte für jeden Artikel individuell ein. Die Reihenfolge sollte vom wichtigsten zum weniger wichtigen Schlüsselwort eingegeben werden.

205

206

K apite l 9

Abbildung 9.3 Eingabe von Schlüssel­ wörtern im Feld Suchbegriffe

9.2

Auszeichnungen überprüfen

Überprüfen Sie die Auszeichnungen bei Überschriften und Modulen und achten Sie darauf, dass Sie eine Gewichtung durch den Einsatz von Auszeichnungen wie h1–h6 vornehmen. Verwenden Sie für Zwischenüberschriften nicht eine Textauszeichnung fett, sondern setzen dafür z. B. eine h2- oder h3-Auszeichnung ein. Ändern Sie dann mit CSS die Darstellung einer solchen Zwischenüberschrift in fett ab.

9.3

URLs umschreiben

In den Einstellungen unter der Rubrik Frontend-Einstellungen finden Sie die Option URLs umschreiben, was in Verbindung mit der Webserver-Funktion (Apache) mod_rewrite1 dafür sorgt, dass die Links Ihrer Website nicht kryptisch ausgegeben werden, sondern bei aktiviertem mod_rewrite für lesbare URLs sorgt. Die Option Keine Seitenaliase verwenden sollte nicht aktiviert sein, da die URLs sonst anstatt der Verwendung des Seitenalias die numerische ID der Seite verwenden.

1 http://www.modrewrite.de

Suchmaschinenoptimierung

Beispiel ohne Verwendung der Option Keine Seitenaliase verwenden: ◆◆ ohne mod_rewrite : http://www.meinedomain.tld/index.php/­ seitenalias.php

◆◆ mit mod_rewrite: http://www.meinedomain.tld/seitenalias.html Beispiel mit Verwendung der Option Keine Seitenaliase verwenden: ◆◆ ohne mod_rewrite : http://www.meinedomain.tld/index.php/ index.php?id=24

◆◆ mit mod_rewrite: http://www.meinedomain.tld/index.php?id=24 Verwenden Sie immer die Version ohne die Option Keine Seitenaliase verwenden in Kombination mit der Option URLs umschreiben, wenn die Funktion mod_rewrite auf dem Server zur Verfügung steht.

9.4

Eine Sitemap in TYPOlight erzeugen

Um eine Sitemap im XML-Format zu erstellen, öffnen Sie im Backend Layout → Seitenstruktur und klicken die Website, die als Startpunkt einer Website definiert ist, zum Bearbeiten durch Klick auf das Editier-Icon an. In der Rubrik XML-Sitemap aktivieren Sie die Option Eine XML-Sitemap erstellen und tragen im darauf erscheinenden Feld den Namen der Sitemap ohne die Endung .xml ein. Im Beispiel fotograf-haenk-hueperle. TYPOlight generiert darauf die XML-Sitemap-Datei fotograf-haenk-hueperle.xml im Wurzelverzeichnis der TYPOlight-Installation (Abbildung 9.4). Abbildung 9.4 XML-Sitemap-Datei im Wurzelverzeichnis

207

208

K apite l 9

Die Sitemap-Datei wird von TYPOlight einmal täglich oder bei Änderungen an der Seitenstruktur neu erstellt. Zudem können Sie die Sitemap im Backend unter System → Systemwartung manuell neu erstellen.

9.5

Die Sitemap bei Google anmelden

Sie können die von TYPOlight generierte Sitemap-Datei bei Google mit den Google Webmaster Tools 2 anmelden. Sie benötigen dazu ein kostenloses Google-Konto. Abbildung 9.5 Google Webmaster Tools

Wenn Sie ein Google-Konto erstellt haben, können Sie sich bei den Google Webmaster Tools anmelden (Abbildung 9.5) und die von TYPOlight erstellte SitemapDatei einreichen. Melden Sie die neue Domain an und folgenden Sie den Hinweisen der Google Webmaster Tools. Oft wird eine Sitemap-Datei und damit auch die URL durch die Webmaster Tools schneller im Google-Index erfasst, als nur eine Anmeldung der URL. Abbildung 9.6 XML-Sitemap anmelden

2 http://www.google.com/webmasters/tools/?hl=de

Suchmaschinenoptimierung

209

Ist die angemeldete Website dann einige Zeit online und wird von den GoogleSuchrobotern besucht, werden immer mehr Daten im Dashboard für die angemeldete Website sichtbar (Abbildung 9.7). Abbildung 9.7 Übersicht (Dashboard) Google Webmaster Tools

In der linken Spalte der Rubrik Die häufigsten Suchanfragen sehen Sie die am häufigsten eingegebenen Suchworte in Google, gefolgt von der Position. Aufgelistet werden die Suchworte, unter denen Ihre Website in den Suchergebnisseiten gefunden wurde und der Link von Benutzern angeklickt wurde. Die Nummer in der Spalte Position bedeutet, an welcher Position der Suchergebnisse Ihre Seite in den Suchergebnisseiten von Google mit dem Suchwort aufgelistet ist. In der Regel werden immer zehn Suchergebnisse auf einer Suchergebnisseite von Google angezeigt. Sprich: Ist die Position kleiner gleich 10, wird Ihre Website auf der ersten Seite der Suchergebnisseite aufgelistet. Um das einmal zu überprüfen, suche ich bei Google mit dem Suchbegriff old­ timertreffen hahnweide und erhalte folgendes Suchergebnis (Abbildung 9.8):

210

K apite l 9

Abbildung 9.8 Google Suchergebnisse und Position

Mit dieser Suche wird die Seite an dritter Position der ersten Suchergebnisseite angezeigt. Bei knapp 75.000 Treffern eine gute Positionierung. Ebenso zeigen die Webmaster Tools auch die gefundenen Keywords der Website an. Anhand dieser Auflistung lassen sich weitere Optimierungen vornehmen. Hilfreich ist der Menüpunkt Diagnose, dabei speziell der Unterpunkt HTML-Vorschläge (Abbildung 9.9). Abbildung 9.9 HTML-Vorschläge der Google Webmaster Tools

Hier erhalten Sie Tipps und Hinweise zur Meta-Beschreibung und dem Titel-Tag. Anhand dieser Vorschläge können Sie die Website erneut überprüfen und optimieren. Die Webmaster Tools finden in diesem Beispiel 30 doppelte Meta-Beschreibungen – dies betrifft (Abbildung 9.10) zum Teil das Nachrichtenarchiv.

Suchmaschinenoptimierung

Abbildung 9.10 Analyse der doppelten ­Meta-Beschreibungen

Die doppelten Meta-Beschreibungen entstehen dadurch, dass für die Seite, die das Modul Nachrichtenleser beinhaltet, der Eintrag Detaillierte Nachrichten von planepix in der Seitenbeschreibung steht. Da alle Nachrichteneinträge mit dem gleichen Modul Nachrichtenleser aufgerufen werden, entsteht diese „Doppelung“.

9.6

Empfohlene Erweiterungen

9.6.1 Die Erweiterung Keywords Wenn Sie Ihre TYPOlight-Website für Suchmaschinen weiter optimieren möchten, dann schauen Sie sich die Erweiterung Keywords 3 von Dirk Weimar an. Die Erweiterung ermöglicht die Eingabe der Meta-Tags keywords und descriptions für diese Module: ◆◆ Artikel ◆◆ Kalender ◆◆ Mini-Kalender ◆◆ Eventlisten ◆◆ Eventleser ◆◆ Nachrichtenarchive ◆◆ Nachrichtenlisten und ◆◆ Nachrichtenleser

3 http://www.typolight.org/erweiterungsliste/view/keywords.10010039.de.html

211

212

K apite l 9

Die Suchbegriffe und Beschreibungen werden im Backend in neue Felder eingegeben. Alternativ generiert das Modul automatisch Keywords und Beschreibungen. Mit diesem Modul können Sie also die oben genannten Module mit Schlüsselwörtern (keywords) und Seitenbeschreibungen (descriptions) verfeinern und die Ausgabe Ihrer Webseiten suchmaschinenoptimierter beeinflussen.

9.6.2 Die Erweiterung Google Sitemap Eine weitere Erweiterung möchte ich Ihnen im Zusammenhang mit der Suchmaschinenoptimierung empfehlen: die Erweiterung Google Sitemap Erweiterung 4 von Andreas Schempp. Diese Erweiterung ergänzt reguläre Seiten um zusätzliche Felder für die Sitemap und erlaubt die Definition einer Startseite. Gemäß den Empfehlungen von Google, werden einer Sitemap die Optionen für Priorität, Häufigkeit der Änderung sowie das Änderungsdatum hinzugefügt. Um das Änderungsdatum einer Seite aktuell zu halten, kann in den Einstellungen von TYPOlight dies als Option aktiviert werden. Beim Speichern von Inhaltselementen und Artikeln wird nun nachgefragt, ob das Änderungsdatum aktualisiert werden soll. Sie können in den Einstellungen auch eine sofortige Aktualisierung aktivieren, sodass die Nachfrage entfällt. Dateien in den Inhaltselementen Download, Downloads sowie der zusätzlichen Erweiterung Download-Archiv 5 werden in die XML-Datei aufgenommen und von Google indexiert und besser gefunden. Weiterhin wird regulären Seiten im Backend eine Option hinzugefügt, eine Seite als „Erste Seite“ zu markieren. Ist diese Option für eine Seite aktiviert, werden Links auf diese Seite im Navigationsmenü und in der Google Sitemap-Datei ohne Seitenalias generiert. Anstatt www.example.com/ index.html, wird dann www.example.com/ ausgegeben.

9.7

Webstatistiken

Nutzen Sie Webstatistiken. Ganz gleich, ob Sie Google Analytics oder ein anderes Webstatistik-Skript (z. B. Piwik 6) verwenden: Die Einbindung eines Analyse-Skriptes hilft Ihnen bei der Auswertung und Optimierung der Inhalte Ihrer Websites.

9.7.1 Google Analytics in TYPOlight verwenden Für Google Analytics ist TYPOlight vorbereitet. Tragen Sie Ihre Google AnalyticsID (UA-XXXXXX-XX) im Seitenlayout in der Rubrik Experten-Einstellungen im 4 http://www.typolight.org/erweiterungsliste/view/googlesitemap.10010009.de.html 5 http://www.typolight.org/erweiterungsliste/view/downloadarchive.10000009.de.html 6 http://piwik.org

Suchmaschinenoptimierung

Feld Google Analytics-ID ein (Abbildung 9.11). Die Google Analytics-ID wird erst auf Ihrer Website integriert, wenn Sie sich aus dem Backend von TYPOlight abgemeldet haben. Alternativ testen Sie mit einem anderen Browser, ob die Google Analytics-ID korrekt eingetragen wurde, indem Sie die Quelltextansicht (Abbildung 9.12) öffnen. Abbildung 9.11 Google Analytics-ID im Seitenlayout eintragen

Wenn Sie für Ihre Website mehrere Seitenlayouts verwenden, tragen Sie die Google Analytics-ID in jedes Seitenlayout ein. Nur so werden alle Webseiten erfasst. Abbildung 9.12 Quelltextansicht – Einbindung der Google Analytics-ID

9.7.2 Piwik in TYPOlight verwenden Wenn Sie anstatt Google Analytics das Open Source-Skript Piwik verwenden möchten, so finden Sie dazu die Erweiterung Piwik-Tracking-Tag 7, geschrieben von Torben Stoffer, in der TYPOlight Erweiterungsliste. Die Erweiterung PiwikTracking-Tag sorgt für die einfache Eingabe des Tracking-Tags, um die Aufrufe auf Ihrer Website zu erfassen. Piwik kann mehrere Websites erfassen und auswerten. Piwik wird eigenständig auf Ihrem Server installiert – z. B. in ein Unterverzeichnis. Details zur Installation von Piwik finden Sie auf der Website http://piwik.org. Nach der Installation der Erweiterung lässt sich der Tracking-Tag der Piwik-Installation komfortabel im Seitenlayout in der Rubrik Piwik eintragen (Abbildung 9.13). Abbildung 9.13 Einbinden des PiwikTracking-Tags im Seitenlayout

7 http://www.typolight.org/erweiterungsliste/view/PiwikTrackingTag.20000069.de.html

213

10 Veröffentlichung einer Website – Checkliste

216

K apite l 1 0

In diesem Kapitel erfahren Sie mehr über notwendige und sinnvolle Schritte zur Veröffentlichung einer Website. Eine Checkliste erleichtert Ihnen die Kontrolle.

10.1 TYPOlight in einem Unterverzeichnis Haben Sie TYPOlight während der Entwicklung der Website in einem Unterverzeichnis auf dem Server betrieben? Und nun möchten Sie, dass die Website direkt unter der Hauptdomain im Wurzelverzeichnis aufgerufen werden kann? Ich habe mir angewöhnt, bis zur Veröffentlichung einer Website diese in einem Unterverzeichnis zu installieren, z. B. /tl. Somit wird eine bestehende Website nicht in ihrer Funktion beeinträchtigt und Sie können die neue Website in Ruhe aufsetzen und entwickeln. Wenn Sie Hyperlinks in Inhaltselementen vom Typ Eigener HTML-Code verwenden, schreiben Sie diese am besten unter Verwendung des Insert-Tags {{link_url::ID}}, um nach dem Verschieben der TYPOlight-Installation aus dem Unterverzeichnis in das Wurzelverzeichnis die Hyperlinks nicht anpassen zu müssen. Auch nach einer Änderung eines Seitenalias werden Sie so weiterhin korrekt funktionierende Hyperlinks erhalten (Listing 10.1): Listing 10.1 Verwendung des Insert-Tags {{link_url::ID}}

Impressum

An Stelle des Platzhalters ID setzen Sie die Nummer der Seite ein, auf die Sie verlinken. Ermitteln Sie die ID der Seite, indem Sie im Backend Layout → Seitenstruktur aufrufen und den Mauszeiger über das i-Icon positionieren. Tragen Sie dann diese Nummer in den Insert-Tag ein. Das Beispiel (Listing 10.2) würde dann vollständig so lauten (Die ID der Seite Impressum hat die ID 5.):

Listing 10.2 Verwendung des InsertTags {{link_url::ID}} mit eingefügter Seiten-ID

Impressum

10.2 Anpassung in den Einstellungen und der .htaccess-Datei Bei einer Installation in einem Unterverzeichnis passen Sie den relativen Pfad unter System – Einstellungen an. Den Pfad für das Unterverzeichnis legen Sie bereits bei der Installation fest. Wenn Sie nachträglich die Installation in ein Unterverzeichnis verschieben möchten, dann können Sie so vorgehen:

Ve r ö f f e n t l i c h u n g e i n e r We b s i t e – C h e c k l i s t e

217

Abbildung 10.1 Relativer Pfad zum TYPOlight-Verzeichnis

Tragen Sie bei Globale Einstellungen den relativen Pfad zum TYPOlight-Verzeichnis ein, hier im Beispiel /tl. Wenn Sie auch während der Entwicklung der Website mit suchmaschinenfreundlichen URLs arbeiten möchten, definieren Sie ebenfalls in den Einstellungen unter Frontend-Einstellungen die Option URLs umschreiben und speichern die Einstellungen. Wenn Sie nun die Frontendansicht wechseln oder den Link Frontend-Vorschau anklicken, wird Ihnen die Webseite nicht korrekt angezeigt, da Sie zwar im Backend in den Einstellungen die Option URLs umschreiben aktiviert haben, es jedoch zur korrekten Ausgabe und Anzeige der Seiten noch eines weiteren Schrittes bedarf. Im Wurzel-Verzeichnis der TYPOlight-Installation befindet sich eine Datei ._htaccess. Ab Version 2.8 von TYPOlight lautet die Datei .htaccess.default. Laden Sie sich diese Datei vom Server lokal auf Ihren Rechner und öffnen Sie diese Datei mit einem UTF-8-fähigen Texteditor, z. B. PSPad (Open Source).1 Sie finden ziemlich am Anfang der Datei folgende Zeilen (Listing 10.3): # Rewrite base ## RewriteEngine On RewriteBase /

Listing 10.3 Anpassen der RewriteBase in der .htaccess-Datei

Bei RewriteBase schreiben Sie nun den Verzeichnisnamen hinter den Schrägstrich; hier im Beispiel lautet dann dieser Eintrag (Listing 10.4): # Rewrite base ## RewriteEngine On RewriteBase /tl

Speichern Sie die Datei und ändern dabei den Dateinamen von ._htaccess bzw. .htaccess.default in .htaccess ab. Laden Sie danach die Datei .htaccess wieder in das Wurzel-Verzeichnis der TYPOlight-Installation auf den Server.

1 http://www.pspad.com/de/

Listing 10.4 Anpassen der RewriteBase in der .htaccess-Datei auf das Unterverzeichnis /tl

218

K apite l 1 0

Durch den Eintrag und das Entfernen des Unterstriches bzw. der Ergänzung .default im Dateinamen ist die Funktion nun aktiv und eine suchmaschinenfreundliche Ausgabe aller Seiten ist gegeben. Die Funktion zum Umschreiben von URLs nennt sich modRewrite und funktioniert nur auf Apache-Servern. Wenn die Website zur Veröffentlichung ansteht und diese direkt im Wurzel-Verzeichnis des Servers aufgerufen werden soll, passen Sie den relativen Pfad zum TYPOlight-Verzeichnis sowie den Eintrag für die RewriteBase in der Datei .htaccess an. Anschließend verschieben Sie alle Ordner und Dateien aus dem Unterverzeichnis tl in das Wurzelverzeichnis des Servers. Alternativ können Sie den Eintrag auch in der Datei localconfig.php vornehmen. Diese Datei befindet sich im Verzeichnis system/config/. Ändern Sie den relativen Pfad in dieser Zeile (Listing 10.5): Listing 10.5 Anpassen des relativen Pfads zur TYPOlight-Installation in der Datei localconfig.php

Nur das Ändern des relativen Pfad zum TYPOlight-Verzeichnis reicht nicht aus, wenn Sie Ihre TYPOlight-Installation in einem Unterverzeichnis erstellt haben. Sie müssen dann, wie oben beschrieben, immer noch manuell die Pfadangabe in der Datei .htaccess anpassen. Ohne diese Anpassung werden Sie sowohl im Backend (Dateiverwaltung) als auch im Frontend (falsche Seitenaufrufe) Darstellungsund Funktionsprobleme bekommen.

$GLOBALS['TL_CONFIG']['websitePath'] = '/tl';

10.3 Suchmaschinenrelevante Einträge vorgenommen? TYPOlight bietet Ihnen für die suchmaschinenrelevanten Angaben die Möglichkeit, neben einem Seitentitel auch Schlüsselwörter (keywords) und Seitenbeschreibungen (descriptions) anzulegen. Überprüfen Sie, ob Sie dies schon vorgenommen haben. Sie können diese Angaben auch nach der Veröffentlichung einer Website vornehmen; jedoch profitieren Sie davon, diese Angaben schon vor Veröffentlichung der Website einzutragen. Die Suchroboter der Suchmaschinen können diese Angaben dann gleich erfassen und auswerten. Später hinzugefügte Angaben, also nach der Veröffentlichung der Website, werden dementsprechend auch wesentlich später durch die Suchroboter erfasst und aktualisiert.

10.3.1 Seitentitel und Beschreibung der Seite Die detaillierte Beschreibung zur Definition von Seitentitel, Seitenbeschreibung und Schlüsselwörtern finden Sie im vorherigen Kapitel 9, Suchmaschinenoptimierung.

Ve r ö f f e n t l i c h u n g e i n e r We b s i t e – C h e c k l i s t e

219

10.4 Sprachen-Fallback eingerichtet? Damit Besucher Ihrer Website aus einem anderen Land oder mit einem anderssprachigen Browser die Webseiten auch ansehen können, bietet TYPOlight die Möglichkeit eines Sprachen-Fallbacks an. Diese Funktion steht Ihnen immer dann zur Verfügung, wenn Sie als Seitentyp Startpunkt einer Website verwenden. Auch bei einer einsprachigen Website müssen Sie als erste Seite eine Seite vom Seitentyp Startpunkt einer Website anlegen, um die Sprachen-Fallback-Funktion nutzen zu können. Die Einstellung des Sprachen-Fallbacks definieren Sie innerhalb des Seitentyps Startpunkt einer Website in der Rubrik DNS-Einstellungen. Abbildung 10.2 Definition des SprachenFallbacks

10.5 Validieren des Quellcodes und der CSS-Dateien Zu einer professionellen Website gehört das Validieren der einzelnen Seiten sowie der CSS-Dateien als Service dazu. Zum Glück erleichtern Onlinedienste 2 diese Aufgabe und geben Hinweise auf Fehler. Wenn Sie das Firefox-AddOn Web Developer Toolbar installiert haben, rufen Sie unter dem Menü Extras den Menüpunkt HTML validieren auf; ein neues Browserfenster öffnet sich und überprüft und validiert die aktuelle Webseite. Das Ergebnis erhalten Sie im gleichen Browserfenster. Im gleichen Menü finden Sie auch den Menüpunkt CSS validieren, mit dem Sie die Stylesheets überprüfen können. Anhand der Anzeige der Fehler bzw. Warnungen erhalten Sie Hinweise, was zu ändern ist. Sinnvoll ist es, die zuerst genannten Fehler zu korrigieren, da die weiteren Fehler oft Folgefehler sind.

2 http://validator.w3.org/

Gewöhnen Sie sich beim Erstellen einer Websitestruktur gleich an, zuerst immer eine Seite mit dem Seitentyp Startpunkt einer Website anzulegen und alle Inhaltsseiten darin anzulegen. Suchmaschinen und Suchmaschinencrawler sind in der Regel englischsprachig und würden Ihre Website ohne aktiven Sprachen-Fallback nicht erfassen. Auch Besucher, die zum Beispiel mit einem englischsprachigen Browser aus Deutschland auf Ihre Website zugreifen, werden ohne SprachenFallback lediglich den Hinweis No pages found. angezeigt bekommen. Vermeiden Sie also, dass Sie interessierte Besucher Ihrer Website verlieren.

220

K apite l 1 0

10.6 Interne und externe Links überprüfen Nichts ist ärgerlicher, als ein nicht funktionierender Link – ganz besonders auf der eigenen Seite, aber auch bei Links, die zu externen Websites führen. Überprüfen Sie daher schon während der Entwicklung einer Website die Links. Für den FirefoxBrowser gibt es das AddOn LinkChecker 3, mit dem Sie einfach alle Links auf einer Seite überprüfen können.

10.7 E-Mail-Adressen im Backend kontrollieren Überprüfen Sie auch die Einstellungen der E-Mail-Adressen im Backend von TYPOlight. Während der Entwicklung setze ich in der Regel immer eine eigene E-Mail-Adresse ein, damit evtl. Fehler oder bei Verwendung von Formularen die E-Mails für Funktionstests nicht an den Kunden gehen, sondern quasi intern in der eigenen Mailbox landen. Sie finden die Einstellungen der E-Mail-Adressen im Backend von TYPOlight unter Einstellungen (Abbildung 10.3) und auch unter dem Seitentyp Startpunkt einer Website (Abbildung 10.4). Wenn Sie dort eine andere E-Mail-Adresse eintragen als in den Einstellungen, wird diese E-Mail-Adresse für Systemnachrichten wie z. B. neu registrierte Benutzer oder gesperrte Konten verwendet. Abbildung 10.3 E-Mail-Adresse des Systemadministrators

3 http://www.kevinfreitas.net/extensions/linkchecker/

Ve r ö f f e n t l i c h u n g e i n e r We b s i t e – C h e c k l i s t e

221

Abbildung 10.4 E-Mail-Adresse des Webseiten-Administrators

10.8 Testen der Webseiten mit den gängigsten Browsern Alle Inhalte sind eingepflegt, alle Nachrichten sind angelegt und einem Stapellauf der neuen Website steht nichts mehr im Weg. Sie haben die Entwicklung mit dem Firefox-Browser gemacht, um möglichst einen modernen und standardkonformen Browser zu verwenden. Alles passt und sieht so aus, wie Sie sich das in Ihrem Entwurf gedacht haben. Nun schicken Sie die URL der neuen Website einigen Kollegen und Freunden – zumindest ist dies eine kluge Entscheidung – und erhalten dann Rückmeldungen, dass hier und da etwas verrutscht dargestellt wird. Sie haken nach: „Welchen Browser verwendest Du?“. Sie kennen dieses Szenario? Sie starten den Internet Explorer (speziell die Version 6) und entdecken die von Ihren Kollegen gefundenen „Veränderungen“. Kurzum: Testen Sie die von Ihnen realisierten Websites vor einer Veröffentlichung gewissenhaft mit den gängigsten Browsern – sowohl auf visuelle Darstellung als auch auf Funktionen wie z. B. bedienbare Navigationen. Sie sollten die Website unter Windows-Systemen für folgende Browser testen: ◆◆ Internet Explorer 6 bis 8 ◆◆ Opera 9 ◆◆ Safari 4

222

K apite l 1 0

Dazu gehört mit Sicherheit in Kürze auch Google Chrome. Wenn Sie auch auf dem Apple Macintosh testen können, sollten Sie die Websites unter Firefox und Safari testen. Neben Onlinediensten empfiehlt sich unter Windows die Installation von VirtualPC, das Sie jeweils für den Internet Explorer 6, 7 und 8 konfigurieren können. Sie können auch nur die Versionen für den Internet Explorer 6 und 8 installieren und im Internet Explorer 8 auf den Kompatibilitätsmodus schalten und damit den Internet Explorer 7 simulieren. Nichts ist ärgerlicher, als eine Website veröffentlicht zu haben und dann sehr schnell Korrekturen und Tests starten zu müssen – ggf. sind Sie dann schon mitten im nächsten Projekt. Kalkulieren Sie also von vornherein genügend Zeit für eine ausgiebige Testphase der von Ihnen entwickelten Websites ein. Die folgenden Websites leisten bei Ihren Browsertests gute Dienste: ◆◆ Browsershots.org – www.browsershots.org ◆◆ Netrenderer – http://meineipadresse.de/netrenderer ◆◆ IE-Tester – www.my-debugbar.com/wiki/IETester/HomePage ◆◆ Multiple Ies – http://tredosoft.com/Multiple_IE ◆◆ Adobe Browserlab – https://browserlab.adobe.com ◆◆ VirtualPC – www.microsoft.com/windows/virtual-pc

10.9 Workflow zum Abschluss eines Projektes Nach dem Freischalten einer Website führen Sie noch einmal eine komplette Sicherung der Daten und der Datenbank durch und übergeben dann die Website an den Kunden. Je nach Angebot und gewünschten Leistungen führen Sie eine Schulung für Redakteure oder Administratoren durch, erstellen eine Projektdokumentation oder betreuen Ihre Kunden durch Updates und Aktualisierungen der Erweiterungen der TYPOlight-Installation.

Ve r ö f f e n t l i c h u n g e i n e r We b s i t e – C h e c k l i s t e

10.10 Code-Snippets Sammlung Im Laufe vieler Projekte mit TYPOlight werden Sie immer wiederkehrende Funktionen oder Stylesheets verwenden können. Erstellen Sie sich in unregelmäßigen Abständen eine Sammlung von Code-Snippets, die Sie dann wieder für Ihre neuen TYPOlight-Projekte einsetzen können. Dazu zählen angepasste Templates wie für die Nachrichtentemplates oder CSS-Definitionen für eine horizontale oder vertikale Navigation. So haben Sie bei Projektstart schon einen Teil zur Verfügung und fangen nicht bei Null an.

223

11 Tipps & Tricks zu TYPOlight

226

K apite l 1 1

In diesem Kapitel gebe ich Ihnen noch Tipps & Tricks an die Hand, die aus der Erfahrung und der Arbeit mit TYPOlight über die Jahre gesammelt wurden. Schauen Sie auch immer wieder in die Communityforen, wenn Sie eine Lösung zu einem Problem suchen. Stellen Sie dort Ihre Fragen, nachdem Sie vorher das Forum nach einer Lösung Ihres Problems durchsucht haben. Die Community ist sehr hilfsbereit, Sie bei Ihren Fragen zu unterstützen. ◆◆ Deutsches TYPOlight-Forum – www.typolight-community.de ◆◆ Internationales TYPOlight-Forum – www.typolight-community.org

11.1 Einzelne Sprachlabels anpassen Hin und wieder ist es sinnvoll oder gewünscht, Sprachlabels updatesicher anzupassen. Wenn Sie die Sprachlabels direkt in den jeweiligen PHP-Dateien der einzelnen Module ändern, so werden diese bei einem Systemupdate überschrieben. Sprachanpassungen tragen Sie daher immer updatesicher in der Datei langconfig .php im Ordner system/config ein.

11.1.1 Weiterlesen-Link verändern Sie möchten bei Nachrichten anstatt Weiterlesen... den Text Den gesamten Artikel lesen verwenden? Tragen Sie dazu in der Datei langconfig.php vor dem schließenden PHP-Tag ?> Folgendes ein (Listing 11.1): Listing 11.1 Sprachlabel Weiterlesen anpassen

$GLOBALS['TL_LANG']['MSC']['more'] = 'Den gesamten Artikel lesen';

11.1.2 Sprachabhängige Bezeichnungen definieren Wenn Sie eine mehrsprachige Website erstellen, laden Sie sich das entsprechende Sprachpaket von der Website www.typolight.org1 herunter und installieren dieses. Wenn Sie dennoch andere Bezeichnungen verwenden möchten als die in der Übersetzung vorgeschlagenen, dann können Sie durch Eintragung in der langconfig.php die Werte updatesicher überschreiben. Beispiel: Für die Ausgabe einzelner Werte in einer serbischen Website definieren Sie in der Datei langconfig.php vor dem schließenden PHP-Tag ?> folgenden Eintrag (Listing 11.2):

1 http://www.typolight.org/herunterladen.html

T i p p s & Tr i c k s z u T Y P O l i g h t

## Manuelle Anpassungen der Sprache Serbisch if ($GLOBALS['TL_LANGUAGE'] == 'sr'){ ## weiterlesen $GLOBALS['TL_LANG']['MSC']['more'] = 'više informacija'; ## Captcha und Sicherheitsfragen $GLOBALS['TL_LANG']['ERR']['captcha'] = 'Molimo Vas odgovorite na siguronosno pitanje'; $GLOBALS['TL_LANG']['SEC']['question1'] = 'Koliki je zbir brojeva %d i %d.'; $GLOBALS['TL_LANG']['SEC']['question2'] = 'Molimo Vas saberite %d i %d?'; $GLOBALS['TL_LANG']['SEC']['question3'] = 'Molimo Vas saberite %d plus %s.'; ## Nachrichten zurueck-Link $GLOBALS['TL_LANG']['MSC']['goBack'] = 'nazad'; ## Pflichtfelder $GLOBALS['TL_LANG']['ERR']['mandatory'] = 'Molimo Vas unesite "%s"!'; }

227

Listing 11.2 Sprachlabel anpassen

Wichtig ist dabei, dass Sie das Sprachenkürzel­ – im Beispiel sr für Serbisch – innerhalb der Seitenstruktur auf allen serbischsprachigen Seiten eingetragen haben. Ist dies bei einer Seite vergessen worden, wird dort dann die Ausgabe des Textes – basierend auf dem des Sprachpaketes – ausgegeben.

11.2 Einzelne DCA-Werte anpassen TYPOlight verwendet sogenannte Data Container Arrays zur Speicherung von Tabellen-Metadaten. Die Konfiguration der einzelnen DCAs sind in den dcaOrdnern der verschiedenen Module hinterlegt. Sie können einzelne Werte updatesicher überschreiben, indem Sie diese Änderungen in der Datei dcaconfig.php im Ordner system/config eintragen.

11.2.1 HTML-Tags im Seitentitel erlauben Hin und wieder ist es hilfreich, HTML-Tags wie einen Umbruch in einem Seitentitel zu verwenden. Tragen Sie dazu in der Datei dcaconfig.php vor dem schließenden PHP-Tag ?> Folgendes ein (Listing 11.3): $GLOBALS['TL_DCA']['tl_page']['fields']['title']['eval']['allowHtml'] = true;

11.2.2 HTML-Tags in Überschriften erlauben

Listing 11.3 HTML-Tags in Seitentitel erlauben

Auch in Überschriften kann es hilfreich sein, HTML-Tags zu verwenden. Tragen Sie dazu in der Datei dcaconfig.php vor dem schließenden PHP-Tag ?> Folgendes ein (Listing 11.4): $GLOBALS['TL_DCA']['tl_content']['fields']['headline']['eval'] ['allowHtml'] = true;

Listing 11.4 HTML-Tags in Überschriften erlauben

228

K apite l 1 1

11.2.3 Felder der Mitgliederregistrierung anpassen Genauso können Sie auch Felder in der Mitgliederregistrierung zu Pflichtfeldern machen oder das Pflichtfeld aufheben. Tragen Sie dazu in der Datei dcaconfig .php Folgendes ein (Listing 11.5): Listing 11.5 Sprachlabel Weiterlesen Felder der Mitgliederregistrierung anpassen

$GLOBALS['TL_DCA']['tl_member']['fields']['company']['eval'] ['mandatory'] = true; $GLOBALS['TL_DCA']['tl_member']['fields']['street']['eval'] ['mandatory'] = true; $GLOBALS['TL_DCA']['tl_member']['fields']['city']['eval'] ['mandatory'] = true; $GLOBALS['TL_DCA']['tl_member']['fields']['phone']['eval'] ['mandatory'] = false; $GLOBALS['TL_DCA']['tl_member']['fields']['postal']['eval'] ['mandatory'] = true; $GLOBALS['TL_DCA']['tl_member']['fields']['gender']['eval'] ['mandatory'] = true;

Sie können z. B. das Feld für Telefon phone nicht als Pflichtfeld definieren, wenn Sie anstatt des Wertes true den Wert false einsetzen.

11.3 WYSIWYG-Editor auch für Teasertexte Um auch innerhalb des Feldes Teasertext den WYSIWYG-Editor nutzen zu können, tragen Sie diesen Code in die Datei dcaconfig.php im Verzeichnis /system/config ein (Listing 11.6): Listing 11.6 WYSIWYG-Editor auch für Teasertexte verwenden

## Artikel $GLOBALS['TL_DCA']['tl_article']['fields']['teaser']['inputType'] = 'textarea'; $GLOBALS['TL_DCA']['tl_article']['fields']['teaser']['eval'] = array('rte'=>'tinyMCE'); ## Nachrichten $GLOBALS['TL_DCA']['tl_news']['fields']['teaser']['inputType'] = 'textarea'; $GLOBALS['TL_DCA']['tl_news']['fields']['teaser']['eval'] = array('rte'=>'tinyMCE'); ## Kalender und Events $GLOBALS['TL_DCA']['tl_calendar_events']['fields']['teaser'] ['inputType'] = 'textarea'; $GLOBALS['TL_DCA']['tl_calendar_events']['fields']['teaser']['eval'] = array('rte'=>'tinyMCE');

T i p p s & Tr i c k s z u T Y P O l i g h t

11.4 Individuelle WYSIWYGEditoreinstellungen Oft ist es hilfreich, den verschiedenen Benutzergruppen unterschiedliche WYSIWYG-Funktionen zur Verfügung zu stellen. Geben Sie Redakteuren den Zugriff auf die wesentlichen Werkzeuge zur Textauszeichnung mit Fett, Kursiv, Sonderzeichen, jedoch z. B. nicht auf die Auszeichnungsformate H1–H6. So stellen Sie etwa sicher, dass nicht plötzlich Texte in bunten Farben auf der Website zu sehen sind. Wenn Sie bereits eine Benutzergruppe angelegt haben, können Sie die ID dieser Benutzergruppe durch Klicken auf das i-Icon erfahren oder indem Sie den Mauszeiger über das i-Icon bewegen – kurz darauf sehen Sie (Abbildung 11.1) die ID. Abbildung 11.1 Benutzergruppen-ID ­ermitteln

Notieren oder merken Sie sich diese ID. Erstellen Sie eine Kopie der Datei tinyMCE.php im Ordner system/config und benennen Sie diese in tiny_MCE_redakteure.php um. Öffnen Sie nun diese Datei und passen diese Zeilen an (Listing 11.7): theme_advanced_buttons1 : "anchor,separator,typolinks,unlink,separator, image,typobox,separator,sub,sup,separator,abbr,acronym,separator, removeformat,cleanup,separator,code", theme_advanced_buttons2 : "bold,italic,underline,separator,justifyle ft,justifycenter,justifyright,justifyfull,separator,bullist,numl ist,indent,outdent,separator,blockquote,separator,charmap,separa tor,help", theme_advanced_buttons3 : ""

Eine detaillierte Übersicht der Konfigurationsmöglichkeiten finden Sie auf der Website von TinyMCE 2. Speichern Sie nun die Datei tiny_MCE_redakteure.php ab und laden diese via FTP in das Verzeichnis system/config hoch. Damit diese Konfigurationsdatei für die Benutzergruppe Redakteure funktioniert, ergänzen Sie noch einen Eintrag in der Datei dcaconfig.php. Öffnen Sie die Datei dcaconfig.php im Ordner system/config und fügen die folgenden Zeilen vor dem schließenden PHP-Tag ?> ein (Listing 11.8):

2 http://tinymce.moxiecode.com/examples/full.php

Listing 11.7 Anpassung individuelle TinyMCE-Konfiguration

229

230

K apite l 1 1

Listing 11.8 Abfrage des BackendUser und Aufruf der individuellen TinyMCE-Konfiguration

/* WYSIWYG _ Editor Redakteure */ $this->import('BackendUser', 'User'); if ($this->User->isAdmin) { $GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyMCE'; } elseif ($this->User->isMemberOf(1)) { $GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyMCE_redakteure'; }

Mit diesem Eintrag wird überprüft, ob ein Backend-Benutzer als Administrator oder als Benutzer einer bestimmten Benutzergruppe angemeldet ist und einer dieser Benutzergruppen zugeordnet ist. In diesem Beispiel gibt es eine Benutzergruppe Redakteure mit der ID 1, sodass die ID mit dem Wert elseif ($this->­ User->isMemberOf(1))eingetragen wird. Für diese Benutzergruppe wird nun die Konfigurationsdatei tinyMCE_redakteure geladen. Loggen Sie sich zunächst als Administrator ein und gehen im Backend auf Inhalte → Artikel und wählen dann einen Artikel durch Klick auf das Editier-Icon aus. Wählen Sie anschließend durch Klick auf das Editier-Icon ein Inhaltselement Text aus und betrachten die Bedienpalette des WYSIWYG-Editors. Anschließend wechseln Sie in den Redakteuraccount und rufen zum Vergleich den gleichen Artikel auf. Abbildung 11.2 Ansicht WYSIWYG-Editor als Administrator

T i p p s & Tr i c k s z u T Y P O l i g h t

231

Abbildung 11.3 Ansicht WYSIWYG-Editor als Redakteur

Wenn Sie mehrere Benutzergruppen angelegt haben, können Sie die Abfrage natürlich erweitern und für jede Benutzergruppe eine eigene WYSIWYG-EditorKonfiguration anlegen.

11.5 Fußzeile über die gesamte Browserbreite verwenden Wenn Sie ein Design umsetzen möchten, bei dem die Fußzeile über die gesamte Breite des Browserfensters angezeigt werden soll, dann können Sie dies durch eine Anpassung der Seitenvorlage fe_page.tpl erreichen. Die Seitenvorlage der Standard-Seitenvorlage ist schematisch so (Listing 11.9) aufgebaut:

Listing 11.9 Schematischer Aufbau der Seitenvorlage fe_page

232

K apite l 1 1

Das Div #footer ist innerhalb des Divs #wrapper eingebunden und damit maximal so breit wie das Div #wrapper. Um nun die gesamte Breite des Browserfensters ausnutzen zu können, wird das DIV #footer außerhalb und nach dem Div #wrapper platziert – vor den schließenden body-Tag (Listing 11.10): Listing 11.10 Ändern der Reihenfolge in der Seitenvorlage fe_page.tpl



Dazu bearbeiten Sie die Seitenvorlage fe_page.tpl, indem Sie im Backend Layout → Template auswählen und auf den Link Neues Template klicken. Wählen Sie dann aus dem Menü Originaltemplates aus der Rubrik Frontend das Template fe_page.tpl aus und klicken auf Template erstellen. Nun können Sie das Template fe_page.tpl bearbeiten und die Position der Fußzeile ändern. Der geänderte Template-Code sollte dann so (Listing 11.11) aussehen: Listing 11.11 Veränderte Seitenvorlage fe_page.tpl

doctype; ?> <meta http-equiv="Content-Type" content="text/html; charset=charset; ?>" /> <meta name="description" content="description; ?>" /> <meta name="keywords" content="keywords; ?>" /> robots; ?> framework; ?> stylesheets; ?> <script type="text/javascript" src="plugins/mootools/mootools.js"> <script type="text/javascript" src="plugins/slimbox/js/slimbox. js">head; ?> class): ?> class=" class; ?>"onload): ?> onload="onload; ?>">

T i p p s & Tr i c k s z u T Y P O l i g h t

footer): ?> urchinId): ?> <script type="text/javascript" src="urchinUrl; ?>"> <script type="text/javascript"> urchinId; ?>");

233

Wenn Sie innerhalb einer Website mehrere Seitenlayouts verwenden, achten Sie darauf, dass Sie eine angepasste Seitenvorlage dann am besten mit einem neuen Namen abspeichern, z. B. fe_ customfooter_page .tpl, und diese Seitenvor-

lage dann speziell einem Seitenlayout zuweisen. Belassen Sie die Standardbezeichnung jedoch auf fe_page.tpl, wird diese Seitenvorlage auf alle Seitenlayouts angewendet, denen keine spezifische Seitenvorlage zugeordnet ist. Achten Sie auch auf die richtige Bezeichnung der neuen Seitenvorlage. Für eine Seitenvorlage beginnt die Bezeichnung immer mit fe_ und endet mit .tpl. Die Bezeichnung my_page.tpl funktioniert nicht – fe_mypage.tpl können Sie dagegen verwenden. TYPOlight erkennt anhand der Bezeichnung, wofür ein Template zuständig ist und wo es eingebunden wird.

234

K apite l 1 1

pageTracker._trackPageview(); } catch(err) {} //-->

Wenn Sie nun eine Seite im Frontend mit dieser geänderten Seitenvorlage aufrufen, wird – entsprechend den CSS-Definitionen – die Fußzeile über die gesamte Breite des Browserfensters angezeigt (Abbildung 11.4). Abbildung 11.4 Frontendansicht der durchlaufenden Fußzeile

Durch Änderungen der Seitenvorlage fe_page.tpl lässt sich TYPOlight auch an ausgefallene Designs und Anforderungen anpassen.

Stichwortverzeichnis Symbole

C

960 Gridder 37 .htaccess-Datei 216

CacheStatus 35 CDATA 103 CMYK 18 Collage 16 Color Scheme Designer 19 ColorZilla 38 Conditional Comments 155 Content Management Systeme 8 Copy Plain Text 38 Corporate Identity 16 CounterText 137 CSS Dateien 106 Definitionen 33, 44, 74, 82, 197 Dokumente bearbeiten 43 Dokument in Echtzeit bearbeiten 31 Frameworks 41–42, 178 Grid anwenden 193 IDs 31, 45 Import 45 Klassen 31, 45 Cufón 154 CyberStudio 8

A Abnahme 13 Abstraktionsebene 22 AddOns 3, 32 Alternativtext 125 Anforderungen 12 Antialiasing 17 Anzeigen 16 Arbeiten mit Rastern (Grids) 177 Artikel anlegen 116 Aufbau der Website 20 Aufbau einer Website mit TYPOlight 87 Auszeichnungen überprüfen 206 Axure 23

B Backend 92 Balsamiq 23, 24 Benutzergruppen 229 Beratung 8 Bestätigungsseite 142 Betreffzeile 144 Bibliothek 22 Bildbearbeitungsprogramm 72 Bildergalerien 90 Bildüberblendungen 160 body class 82 Bookmarklet 38 Briefing 12 Browsercache 35 Budget 12

D Dateiverwaltung 191 Dateiverzeichnis 45 Datenbank 45 Datenformat 144 Datum 93 Datumsformat 114 dcaconfig.php 227 DCA-Werte anpassen 227 Designentwürfe 13

Stichwortverzeichnis

236

Designer 8 Designvarianten 13 Diaschau 160 digitales Composing 16 Digitale Vorlagen 22 Drag&Drop 201 Dreamweaver 8 Dynamische Schriftersetzung 156

E E-Mail-Adressen im Backend kontrollieren 220 E-Mail-Programm 149 Eigener HTML-Code 182 Einbinden 107 Eingabeprüfung 147 Einstellungen von TYPOlight 92 Einfügen 119 Entscheidungskompetenzen 14 Entscheidungsprozess 12, 16 Entwickler 2 Entwicklung einer Website 28 Entwicklungsprozess 3, 13 Entwurfsmethoden 12 Entwurfsprozess 38 Erscheinungsbild 16 Erweiterungen 28, 211 CssEditor 47 EFG 152 Google Sitemap 212 Keywords 211 MetaCreator 142 Slideshow2 160 Liste 152 Extension Repository 48, 152 Externe CSS-Dateien 45 in die Seitenvorlage ­einbinden 46

F Farbe 16 Farbkombinationen 18 Farb- und Schriftauswahl 17 Farbwert 39 fe_page 42

fe_page.tpl 231 Firebug 32, 47, 138 Firefox-Browser 28 Fireshot 38 Fireworks 22 Flackern 73 FlairBuilder 23 Formularfunktionen 152 Freigaben 13, 14 Frontend-Ansicht 194 Frontend-Module 104 Funktionsbereiche 22 Fußzeile 231 erstellen 113

G Gesamtstruktur 23 Gestaltung 8 Gestaltungsprozess 12 Gliffy 23 Golive 8 Google Analytics 212 ID 212 Google-Bildersuche 125 Google-Konto 208 Google Webmaster Tools 204, 208 Grafikdateien 17 GridFox 37 Grid-Stylesheets importieren 191 Grundgerüst 42

H Haftetiketten 21 Hard Limit 64 Hauptnavigation 64 Hexadezimal 18 Hintergrundgrafik 75 Horizontale Navigation 54 HTML Help 39 HTML Tags im Seitentitel 227 Tags in Überschriften 227 Validator 36

Stichwortverzeichnis

I Ideenfindungsphase 20 Ideensammlung 38 Image Replacement-Technik 154 Im Menü verstecken 144, 181 Individuelle Navigation 52 Inhaltselemente 31, 119 duplizieren 126 untersuchen 30 Inline-Style 103 Insert-Tags 84, 114 installiert 92 Interner CSS-Editor 45 Interne und externe Links überprüfen 220 iPlotz 23

J JavaScript 137 JPG 17

K Kalender 109 Kalkulation 13 Kantenglättung 17 Karten 21 Kombination von horizontaler und vertikaler Navigation 64 Kommunikation 20 Kommunikationsdesign 8 Kontaktformular 142 Konzept 12 Konzeptionsphase 8, 23 Konzeption und Planung der Website 11 Kopfzeile 182 Kosten-Nutzen-Faktor 25 Kreativbranche 16 Kuler 18

L Ladezeiten 34 Länderkürzel 141 langconfig.php 226

Logo 16 Look-and-Feel 16 Lösungsansätze 25

M MeasureIt 36 Mediabox 136 Mehrere bearbeiten 195 Mehrere Inhaltselemente 199 in einer Spalte ­anordnen 199 Mehrspaltigkeit 178 Mehrsprachige Website 13 Meilensteine 13 Menüpunkt 73 Meta-Datei 133 Methoden 14 Mitgliederregistrierung 228 Mockingbird 24 Mockupscreens 23 mod_rewrite 206 Module 112, 181 erstellen 109 Entwickler 5 Moodboards 16 MooTools Script 134 Templates 134 Multimediale Inhalte 13

N Nachrichten 109 Nachrichtenarchiv 184 Nachrichtentemplates anpassen 187 Nachrichtentitel 188 Namensbezeichnungen 131 Navigationen 52, 109 in TYPOlight erstellen 51 Navigationsmenü 52, 77 Navigationspfad 52

237

Stichwortverzeichnis

238

O OmniGraffle 23 Online-Werkzeug 24 Organisation 20 Orientierung 52 Originaltemplates 46, 187

P PageMill 8 Palette Grabber 35 Pencil 24, 25 Pfeiltasten 136 Pflichtenheft 12 Pflichtfeld 147 Photoshop 17, 22 PHP 137 Kenntnisse 189 Pidoco 23 Piwik 213 Plattformübergreifend 17 Schriften 72 Platzhalter 42 Plugin 136 PNG 17 Grafiken 154 Präsentationen 16 Präsentationskartons 16 Präsentationsmittel 16 Programme 23 ProtoShare 23 Prototyping 20 Prozess 12 Prozessablauf 14

Q Quellcode 28, 67 Quicklink 52, 57 Quick Locale Switcher 35 Quicknavigation 52

R Raster 23 Rastersysteme 178

Rasterung 17 Registerhaltigkeit 37 Relativer Pfad 217 Reset-Stylesheet 178 Ressourcensparend 14 RewriteBase 217 RGB 18 Root-Verzeichnis 45 RSS-Feeds 184

S Schlagschatten 139 Schlüsselwörter 204, 205 Schrift 16, 17 Schriftarten 157 Schriftdarstellung 17 Schriftgrafiken 72 Schulungen 8 Screendesign 91 Seite veröffentlichen 97 Seitenalias 84, 95 Seitenaufrufe 72 Seitenbeschreibungen 204 Seitenelemente untersuchen 33 Seiteninhalte 52 Seitenlayouts 20, 42, 85, 102, 190 Seitenstruktur 94, 180 Seitentitel 204 Seitentyp 95 Seitenvorlagen 20, 42, 231 Serifenlose Schriften 17 Sicherheitsabfrage 142 Signet 16 Sitemap 207 bei Google anmelden 208 Skizzen 14 Skizzenbuch 15 Skizzentechnik 21 Spaltenaufteilungen 42 Spaltenkonfiguration 42, 103, 190 Sprachabhängige Bezeichnungen 226 Sprachen-Fallback 35, 96, 219 Sprachlabels 226

Stichwortverzeichnis

Spritegrafiken 3 Standardkonform 28 Standardkonformität 178 Standardlayout 102 Startlevel 64 Startpunkt einer Website 95 Stoplevel 64 Struktur 52 Suchfunktion 109 Suchmaschinenoptimierung 203

T Tastenkombination 141 Teasertexte 228 Template 42 Editor 46, 188 System 2 Testen der Webseiten 221 text-indent 75 tinyMCE.php 229 Tipps & Tricks zu TYPOlight 225 Titel der Website 93 Transparente Hintergrundgrafiken 154 TYPOlight Cronjob 45 CSS-Framework 178 Erweiterungsliste 213 in einem Unterverzeichnis 216 Usertreffen 2

U Uhrzeit 93 Umfang der an der Entwicklung beteiligten ­Personen/Gruppen 12 Umfang einer Website 13 Umlaut- und Sonderzeichenprobleme 140 Umsetzungsbeispiele 2 Unternavigation 64 Unterverzeichnis 92 Updatesicher 46 URLs umschreiben 206, 217 UTF-8-Format 140

V Validieren 219 Validität 28 Varianten 14, 23 Veröffentlichung 13 einer Website 215 Vertikale Navigation 60 Verzeichnisstruktur vorbereiten 130 Visualisieren 14 Visuelle Darstellung 22 Vorschaubilder 138

W W3C 28 Webbrowser 28 Webdesigns 42 Web Developers Toolbar 28 Webentwickler 8, 28 Webseitenlayouts 103 Websites 23 Webstatistiken 212 Webtechnologien 2 Weiterleitungsseite 145 Weiterlesen-Link 226 Wireframes 12, 20 Workflow 47 Workshops 8, 12 WYSIWYG-Editor 228

X XML-Sitemap 207

Z Zeitschriften 16 Zeitzone 93 Zielgruppen 12, 13 Zoomfunktion 39 Zufallsbild 180 Zugänglichkeit 125 Zuweisen 104

239

Dieses Buch erklärt Redakteuren, wie sie mit TYPOlight Webinhalte erstellen und vewalten. Es kann zum Selbststudium, als Schulungsgrundlage oder als Nachschlagewerk bei der täglichen Arbeit eingesetzt werden. Autorin Nina Gerling erklärt ausdrücklich nicht-technisch, welches die für Redakteure wichtigen TYPOlight-Bestandteile und -Funktionen sind und wie man mit ihnen arbeitet. Sie beschreibt genau und auch für Laien verständlich, was unter TYPOlight “Seiten”, “Artikel” und “Elemente” sind, welche Elementtypen es gibt, wie man mit dem Editor arbeitet, wieviel HTML man können muss u.v.a.m. Ein eigenes Kapitel ist dem Erstellen barrierefreier Inhalte gewidmet.

Nina Gerling ISBN 978-3-8273-2893-9 24.80 EUR [D]

www.addison-wesley.de

TYPOlight-Entwickler Leo Feyer beschreibt von der Installation des CMS über dessen Funktionen bis hin zur Entwicklung eigener Seitenlayouts und Erweiterungen alle Aspekte der Arbeit mit TYPOlight. Für die Neuauflage hat er das Buch aktualisiert und um wertvolle Informationen für Administratoren und Entwickler eigener Module ergänzt. Neben einer ausführlichen Beschreibung aller Entwicklungsschritte für ein Modul erläutert er auch das TYPOlight-Framework, das dem Programmierer mit eigenen Funktionen hilft. Die CD enthält neben TYPOlight selbst auch XAMPP für Windows und Mac sowie eine exklusive Version des TYPOlight-Templates “WebConsulting”.

Leo Feyer ISBN 978-3-8273-2913-4 39.80 EUR [D]

www.addison-wesley.de

Wer heute anspruchsvolle Webseiten erstellen will, kommt um Themen wie Barrierefreiheit, Mehrsprachenfähigkeit, Personalisierbarkeit und suchmaschinenfreundliche URLs nicht herum. Genau hierin liegt eines der Erfolgsgeheimnisse des CMS TYPOlight. Dieses Video-Training macht Sie mit der Grundidee von TYPOlight vertraut und führt Sie von der Installation des Systems über die verschiedenen Möglichkeiten der Inhaltsdarstellung bis hin zur Implementierung und Konfiguration komplexerer Modulkombinationen.

video2brain; Harry Boldt ISBN 978-3-8273-6252-0 39.80 EUR [D]

www.addison-wesley.de

Copyright Daten, Texte, Design und Grafiken dieses eBooks, sowie die eventuell angebotenen eBook-Zusatzdaten sind urheberrechtlich geschützt. Dieses eBook stellen wir lediglich als persönliche Einzelplatz-Lizenz zur Verfügung! Jede andere Verwendung dieses eBooks oder zugehöriger Materialien und Informationen, einschliesslich •

der Reproduktion,

•

der Weitergabe,

•

des Weitervertriebs,

•

der Platzierung im Internet, in Intranets, in Extranets,

•

der Veränderung,

•

des Weiterverkaufs

•

und der Veröffentlichung

bedarf der schriftlichen Genehmigung des Verlags. Insbesondere ist die Entfernung oder Änderung des vom Verlag vergebenen Passwortschutzes ausdrücklich untersagt! Bei Fragen zu diesem Thema wenden Sie sich bitte an: [email protected] Zusatzdaten Möglicherweise liegt dem gedruckten Buch eine CD-ROM mit Zusatzdaten bei. Die Zurverfügungstellung dieser Daten auf unseren Websites ist eine freiwillige Leistung des Verlags. Der Rechtsweg ist ausgeschlossen. Hinweis Dieses und viele weitere eBooks können Sie rund um die Uhr und legal auf unserer Website

http://www.informit.de herunterladen