Grundlagen und Template-Entwicklung mit TemplaVoilà · Seit der Version 6.0.0 wird TYPO3 Version 6.0.6+ für die Installation der Erweiterung benötigt. Für TYPO3 in der Version

W E B D E V E L O P E R G R A D E 1

TYPO3 Grundlagen und Template-Entwicklungmit TemplaVoilà . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Offizielles Curriculum des Europäischen Webmasterverbandes

Art.-Nr. 011896869Version 1.8.1 vom 30.05.2014Autoren: Marco Emrich, Jan Teriete

© webmasters akademie Nürnberg GmbH, Nürnberg, GermanyDas vorliegende Schulungsskript ist urheberrechtlich geschützt. Alle Rechte vorbehalten.Die Verwendung der Texte und Abbildungen, auch auszugsweise, ist ohne schriftlicheGenehmigung der webmasters akademie GmbH urheberrechtswidrig und daher straf-bar. Dies gilt insbesondere für die Vervielfältigung, Übersetzung oder Verwendung inelektronischen Systemen sowie für die Verwendung in Schulungsveranstaltungen.Die Informationen in diesem Schulungsskript wurden mit größter Sorgfalt erarbeitet.Trotzdem können Fehler nicht vollständig ausgeschlossen werden. Autoren und Heraus-geber übernehmen keine juristische Verantwortung oder irgendeine Haftung für eventu-ell verbliebene fehlerhafte Angaben und deren Folgen.

W E B D E V E L O P E R G R A D E 1

TYPO3Grundlagen und Template-Entwicklungmit TemplaVoilà . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Inhaltsverzeichnis

1 Allgemeine Einführung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71.1 Voraussetzungen für dieses Lernheft . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

1.2 Einrichten der TYPO3-Umgebung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

2 Was ist TYPO3? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82.1 Content Management Systeme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

2.2 Arten von Content Management Systemen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

2.2.1 Community/Social CMS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

2.2.2 Enterprise CMS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

2.2.3 CMS als Plugin/Komponente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

2.3 Warum TYPO3? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

3 Versionen und Pakete . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143.1 TYPO3-Versionen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

3.2 TYPO3-Pakete . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

4 TemplaVoilà . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164.1 Manuelle Installation über das TYPO3 Extension Repository . . . . . . . . . . . . . . . . . . . . . 16

4.1.1 Installationsvorbereitungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

4.1.2 Installation von TemplaVoilà . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

5 Beispielprojekt Weingut Traubner . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225.1 Der Zauberer von Templatanien . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

5.1.1 TemplaVoilà-Wizard ausführen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

5.1.2 TemplaVoilà-Wizard erneut ausführen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

6 Page Tree . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376.1 Löschen des bestehenden Page Trees . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

6.2 Umsetzen der Informationsarchitektur als Page Tree . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

6.3 Konfigurieren der Startseite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

7 Inhalte einpflegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 447.1 Arbeiten mit Content Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

7.1.1 Erstellen von Content Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

7.1.2 Kopieren von Content Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

8 Einführung in TypoScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 548.1 TypoScript-Grundlagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

8.1.1 TypoScript editieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

8.1.2 Kommentare in TypoScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

8.2 Das Hauptmenü in TypoScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

8.2.1 Menüelemente im Zustand: normal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

8.2.2 Menüelemente im Zustand: aktiv . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

8.3 Besonderheiten im Umgang mit HTML5 und UTF-8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

8.3.1 Die Zeichenkodierung festlegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

8.3.2 Den DOCTYPE auf HTML5 umstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

8.4 Refactoring: Confinement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

9 Das Metamenü . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 699.1 Der Seitentyp Folder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

9.2 Ein eigenes Data Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

9.3 Das Metamenü in TypoScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

9.4 TypoScript Extension-Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

10 Anhang 1: Lokale TYPO3-Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7410.1 Passwörter für die TYPO3-Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

10.1.1 Das Datenbank-Passwort . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

10.1.2 Das Installations-Passwort . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

10.1.3 Das TYPO3 Admin-Passwort . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

10.2 Installation unter Microsoft Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .75

10.3 Installation unter Apple Mac OS X . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .80

10.4 Installation unter Ubuntu-Linux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84

10.4.1 Upgrade unter Ubuntu-Linux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88

11 Quellen und Literaturhinweise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9011.1 APA-Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90

11.2 Referenzen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90

11.3 Empfehlungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

Lösungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93

16 4 TEMPLAVOILÀ

4 TemplaVoilà

TemplaVoilà will let any moron design fairly complex web pages with some dynamic bindings. It’s one of the most

advanced internet applications I’ve seen so far […]. But as with all things TYPO3 it will take some time to learn.

(Henrik Sarvel)17

Ihr Ziel besteht darin, eine schicke und funktionstüchtige Website in TYPO3 zu erstellen. Dabei habenSie in TYPO3 aber die Qual der Wahl. Die erste und vielleicht wichtigste Entscheidung ist die Wahl einerso genannten Template-Engine. Diese ermöglicht Ihnen, Inhalte und Layout einer Website zusammen-zubringen. Gleichzeitig bewahren Sie dabei stets eine saubere Trennung.

Klingt das paradox? Keine Sorge, das ist es nicht. Der Besucher Ihrer Website möchte jede Seite natür-lich im Ganzen betrachten. Sie aber möchten die Möglichkeit haben, das Layout vom Inhalt zu trennen.Damit kann z.B. ein Designer jederzeit Änderungen am Layout vornehmen, ohne dass Sie nachher jedeeinzelne Seite nachbearbeiten müssen. Außerdem können z.B. Designer und Texter völlig isoliert aneiner Seite arbeiten, ohne sich ständig gegenseitig Änderungen zu überschreiben.

Bei der Wahl der Template-Engine kann ich helfen. Nehmen Sie einfach die, die als die modernste, fort-schrittlichste und bequemste unter den TYPO3-Template-Engines gilt: TemplaVoilà.

[…] TemplaVoilà is highly recommended for its flexibility and more advanced templating techniques […]

4.1 Manuelle Installation über das TYPO3 Extension Repository

Bisher ist TemplaVoilà aber noch kein fester Bestandteil von TYPO3 selbst. Deswegen müssen Sie es erstals Erweiterung installieren. Zum Glück bietet TYPO3 hier einen relativ einfachen Mechanismus.

TYPO3 verwaltet seine Erweiterungen zentral im so genannten TYPO3 Extension Repository (TER). Siekönnen theoretisch aus dem TYPO3-Backend heraus darauf zugreifen. Doch dies ist bei wenigen zuinstallierenden Erweiterungen meist zeitintensiver als eine manuelle Installation. Deswegen werden Sieim Folgenden den manuellen Weg über die Repository-Website http://typo3.org/extensions/ kennenler-nen.

In dieser Lektion lernen Sie:

� was eine Template-Engine ist.� wie Sie die Erweiterung TemplaVoilà installieren.

17. siehe Sarvell (2008), www.prodevtips.com/2008/03/15/comparing-typo3-joomla-drupal-and-modx

4.1 MANUELLE INSTALLATION ÜBER DAS TYPO3 EXTENSION REPOSITORY 17

4.1.1 Installationsvorbereitungen

1. Rufen Sie zunächst die Website in einem Browser Ihrer Wahl auf.

Geben Sie im Suchfeld den Erweiterungsschlüssel templavoila (1) ein. Starten Sie danach die Suchemit dem Button Search (2) und klicken Sie auf der Ergebnisseite den Link TemplaVoila! (3) an.

2. Sie landen nun auf der Detailseite der Erweiterung.

Prüfen Sie zunächst, welche Version aktuell ist (1). Die Version 1.8.0 ist mit TYPO3 Version 4.5 kom-patibel. Sollten Sie eine neuere Version angezeigt bekommen, so ist es sinnvoll, in der Versionsge-schichte unter dem Reiter Download zu prüfen, ob diese Version für TYPO3 4.5 geeignet ist.Woran Sie dies erkennen, erfahren Sie gleich.

Leider können Sie nicht direkt mit der Installation von TemplaVoilà beginnen, da diese Erweiterungeine Abhängigkeit (2) zu einer anderen, noch nicht installierten Erweiterung mit dem Erweite-rungsschlüssel static_info_tables hat. Die Erweiterung mit dem Schlüssel lang hingegen ist bereitsstandardmäßig installiert. Sie müssen also zunächst die noch benötigte Abhängigkeit installieren.

Doch zuvor laden Sie die Erweiterung als t3x-Datei auf Ihren Rechner herunter (3).

Abb. 4-1: TemplaVoilà Installation: Erweiterung suchen

Abb. 4-2: TemplaVoilà Installation: Detailseite

18 4 TEMPLAVOILÀ

3. Schauen Sie sich nun unter der URL http://typo3.org/extensions/repository/view/static_info_tablesim Reiter Download die Versionsgeschichte der Abhängigkeit an.

Seit der Version 6.0.0 wird TYPO3 Version 6.0.6+ für die Installation der Erweiterung benötigt. FürTYPO3 in der Version 4.5 benötigen Sie also die vorherige Version 2.3.2 der Erweiterung. Laden Sieauch diese Erweiterung als t3x-Datei herunter.

4. Nun müssen Sie die Abhängigkeit über den so genannten Extension Manager auf den WebserverIhrer TYPO3-Installation laden. Rufen Sie hierzu das TYPO3-Backend in Ihrem Webbrowser auf.

Den Extension Manager erreichen Sie über Admin Tools � Extension Manager im TYPO3-Menü(links).

5. Sie befinden sich nun im TYPO3 Extension Manager, mit dem Sie Erweiterungen installieren, ent-fernen und aktualisieren können.

Wählen Sie im oberen Dropdownmenü Import extensions und klicken Sie dann auf den ButtonDurchsuchen.

Abb. 4-3: TemplaVoilà Installation: Versionsgeschichte der Erweiterung static_info_tables

Abb. 4-4: TemplaVoilà Installation: Admin Tools

Abb. 4-5: TemplaVoilà Installation: Erweiterung importieren


6. Wählen Sie nun die Datei static_info_tables_2.3.2.t3x aus Ihrem Download-Ordner aus. Das eigent-liche Hochladen beginnen Sie durch einen Klick auf den Button Upload extension file.

7. Sobald die Erweiterung hochgeladen wurde, erscheint eine Meldung, dass diese erfolgreichimportiert wurde.

Die Erweiterung befindet sich nun zwar auf dem Webserver, muss aber noch installiert werden.Beginnen Sie die eigentliche Installation mit dem Button Install extension.

8. Im Verlauf der Installation müssen auch Daten in die Datenbank von TYPO3 importiert werden.

Es erscheint eine sehr sehr lange Informationsseite. Scrollen Sie ganz nach unten und klicken Sieauf den Button Make updates, um den Import zu starten.

Abb. 4-6: TemplaVoilà Installation: Erweiterung hochladen

Abb. 4-7: TemplaVoilà Installation: Abhängigkeit erfolgreich importiert

Abb. 4-8: TemplaVoilà Installa-tion: Datenbank-Import

20 4 TEMPLAVOILÀ

9. Sobald die Erweiterung erfolgreich installiert ist, was eine ganze Weile dauern kann, sollten Sienachfolgende Seite sehen.

Damit ist die Abhängigkeit installiert, und Sie können zur eigentlichen Installation von TemplaVoilà

übergehen. Auch hier müssen Sie die Erweiterung TemplaVoilà erst importieren (bzw. hochladen) unddann installieren.

4.1.2 Installation von TemplaVoilà

1. Klicken Sie erneut auf Admin Tools � Extension Manager links im Menü. Import extensionssollte automatisch ausgewählt sein, da immer die letzte Auswahl angezeigt wird.

2. Laden Sie nun die Datei templavoila_1.8.0.t3x (oder neuer) auf den Webserver Ihrer TYPO3-Installa-tion hoch.

3. Im nächsten Schritt können dann Sie wieder die eigentliche Installation mit einem Klick auf Installextension starten.

4. Auch bei dieser Erweiterung müssen Daten in die Datenbank importiert werden.

Abb. 4-9: TemplaVoilà Installation: Abhängigkeit installiert

Abb. 4-10: TemplaVoilà Installation: Installation TemplaVoilà beginnen

Abb. 4-11: TemplaVoilà Installa-tion: Datenbank-Import


5. Nach dem Aktualisieren der Datenbank bekommen Sie die Meldung, dass TemplaVoilà installiertist.

Jetzt müssen Sie die Grundeinstellungen von TemplaVoilà durch einen Klick auf den ButtonUpdate speichern.

6. Abschließend müssen Sie den Zwischenspeicher18 von TYPO3 leeren. Klicken Sie oben rechts inder Symbolleiste auf den gelben Blitz und dann auf Clear all caches. Sie bekommen keineBestätigung nach dem Leeren des Zwischenspeichers..

�Ohne das Speichern der Grundeinstellungen funktionert TemplaVoilà nicht!

18. Auch Cache genannt.

�1. Erweiterungen für TYPO3 können Abhängigkeiten zu anderen Erweiterungen haben, wel-

che selbst wieder Abhängigkeiten haben können. Erst wenn alle abhängigen Erweiterun-gen installiert sind, kann die eigentliche Erweiterung (z.B. TemplaVoilà) installiert undgenutzt werden.

2. Erweiterungen müssen erst importiert werden, bevor sie installiert werden können.

Abb. 4-12: TemplaVoilà Installation: Leeren des Zwischen-speichers

22 5 BEISPIELPROJEKT WEINGUT TRAUBNER

5 Beispielprojekt Weingut Traubner

Na wunderbar – nachdem Sie nun mit TemplaVoilà eine hervorragende Template-Engine installierthaben, kann es losgehen. Stellen Sie sich den fiktiven Kunden Herrn Traubner vor. Herr Traubner hatdas Weingut seines Vaters übernommen und möchte nun eine Website, mit der er für seine Weine wer-ben kann. Aber reden Sie doch selbst mit ihm:

Seine Anforderungen sind optimale Bedingungen für den Einsatz von TYPO3! Nachdem Sie ihn kurzüber TYPO3 und CMS-Systeme im Allgemeinen aufgeklärt haben, ist er begeistert von Ihrer Idee. Sofortbeginnen Sie mit der Umsetzung.

In dieser Lektion lernen Sie:

� wie Sie mit dem TemplaVoilà-Wizard eine Website erstellen.

Herr Traubnera: Die Website soll im Wesentlichen aus statischen Texten beste-hen.

Mir ist aber vor allem wichtig, dass ich die Texte der Site später selbst pflegenkann. Leider hab' ich keine Zeit, mich in komplexe Internettechnologien wieHTML und – wie hieß das doch gleich? – ach ja, CSS einzuarbeiten.

a. Bildquelle: www.flickr.com/photos/russelljsmith/4238262939/sizes/l/in/photostream

Abb. 5-1: HTML-Template für die Website Weingut Traubner

http://www.flickr.com/photos/russelljsmith/4238262939/sizes/l/in/photostream

5.1 DER ZAUBERER VON TEMPLATANIEN 23

Nachdem Sie die üblichen konzeptionellen und designerischen Tätigkeiten für eine erste Version derWebsite durchgeführt haben, liegen Ihnen nun folgende Dinge vor:19

� Ein Layout, bestehend aus HTML und CSS für die Startseite und alle Unterseiten

� Die vorläufige Informationsarchitektur in Form einer Sitemap

� Texte im odt-Format.20

5.1 Der Zauberer von Templatanien

Wenn Sie beginnen, eine neue Website mit TYPO3 zu erstellen, so sind anfangs eine Reihe von Routine-tätigkeiten durchzuführen. Dazu gehören z.B.:

� Das Anlegen einer Benutzergruppe mit Editier-Rechten

� Das Anlegen eines Benutzers mit Editier-Rechten

� Das Erzeugen einer Page-Struktur

� Das Zuweisen der Haupttemplates

� Das Schreiben von TypoScript zum Einbinden von Menüs.

Das meiste davon ist leider nicht gerade sonderlich spannend. Deswegen hat TemplaVoilà einen sogenannten Wizard21 integriert, der Ihnen einen Großteil der Routinetätigkeiten abnehmen kann. EinWizard oder Assistent ist dabei eine Oberfläche, die Sie durch eine Reihe von Dialogen führt und somitdie Durchführung eines komplexen Prozesses deutlich vereinfacht.22 Der TemplaVoilà-Zauberer kannsogar noch mehr. Er übernimmt die langweiligen Teile, wie das Anlegen von Benutzern und Gruppenund die aufwändigen wie das Schreiben von TypoScript für Menüs.

Probieren Sie diese Magie doch mal aus!

Als erstes müssen Sie das Layout in TYPO3 hinterlegen. Kopieren Sie dazu Ihr komplettes Layout, inklu-sive HTML, CSS und Bildern (d.h. den kompletten Ordner weingut_traubner_vorlage) nach filead-min/templates in Ihrem TYPO3-Ordner. Sollte der templates-Ordner nicht existieren, so erstellen Sie ihnbitte vorher. Nutzen Sie zum Anlegen des Ordners und zum Transferieren der Daten einen FTP-Client(z.B. FileZilla), sofern sich nicht mit einer lokalen TYPO3-Installation arbeiten.

19. Sie finden diese Dateien im Begleitmaterial dieses Lernhefts

20. odt: das OpenOffice/LibreOffice-Dateiformat

21. engl. Zauberer

22. siehe http://en.wikipedia.org/wiki/Wizard_(software)

�Damit Sie keine Probleme mit Sonderzeichen bekommen, sollten die Dateien (z.B. HTML, CSSund JavaScript) im Charset UTF-8 vorliegen.a

a. UTF-8 ist bei den meisten modernen Editoren Standard.

Abb. 5-2: Darstellungsfehler von Sonderzeichen

http://en.wikipedia.org/wiki/Wizard_(software)


5.1.1 TemplaVoilà-Wizard ausführen

Klicken Sie nun auf Web � TemplaVoilà und starten Sie den Wizard mit dem Button Start wizardnow!

Der Wizard unterteilt den Prozess in mehrere Schritte:

Schritt 1: Wählen Sie die HTML-Datei

Hier präsentiert Ihnen der Wizard alle HTML-Dateien im template-Verzeichnis. In Ihrem Fall ist das dieindex.html. Da alle Seiten unserer Website das Design der index.html haben sollen, wählen wir genaudiese als Designvorlage aus.

� Achtung!

Sie werden in den nächsten Schritten immer wieder Buttons zum Starten oder Bestätigen vonAktionen benutzen. Der TemplaVoilà-Wizard gibt Ihnen während der Ausführung dieser Aktio-nen keine Statusrückmeldung!

Manche dieser Aktionen können mehrere Minuten dauern. Wundern Sie sich also nicht, wennSie einen Button klicken und im ersten Moment nichts weiter passiert.

Klicken Sie auf keinen Fall die Buttons mehrmals, dadurch würde der TemplaVoilà-Wizarddie Schritte doppelt ausführen!

Abb. 5-3: TemplaVoilà-Wizard: Starten des Wizards


1. Wählen Sie fileadmin/templates/weingut_traubner_vorlage/index.html, indem Sie den Link [Chooseas Template] dahinter anklicken.

Schritt 2: Geben Sie die Vorgabewerte für die neue Website ein

Sie sehen eine Voransicht des Templates. Darunter befinden sich eine Reihe von Formularfeldern. Hiersehen Sie die Vorgabewerte:

Name Inhalt Bedeutung

Name of the site (1)

Weingut Traubner Das ist der Name der Website. Er wird an verschiedenen Stellen verwendet, z.B. als Titel (<title>-Tag) für die Startseite.

URL of the website vorerst leer lassen Wenn Sie schon wissen, unter welcher URL die Website später online gehen soll, können Sie sie hier schon eintra-gen. Für dieses Beispielprojekt macht es aber mehr Sinn, das Feld leer zu lassen.

Editor username (2)

traubner Der Benutzername des Redakteurs der Website. Dieser hat die Berechtigung, neue Seiten anzulegen und zu ver-walten. Er ist für die Inhalte zuständig, benötigt aber keine technischen Fähigkeiten.Er hat das Passwort: password.Erinnern Sie sich: TYPO3 trennt die Seitenstruktur und die Inhalte.

Tabelle 5-1: Vorgabewerte

Abb. 5-4: TemplaVoilà-Wizard: Template auswählen


1. Scrollen Sie ganz nach unten, füllen Sie die Formularfelder wie angegeben aus und klicken Sie denButton Create new site (3). Das Erstellen kann einige Sekunden dauern.

Schritt 3: Mapping beginnen

Mappen bedeutet zuordnen. Beim Template Mapping ordnen Sie bestimmten Bereichen aus IhremHTML-Template Inhalte der Website zu.

1. Der Wizard erklärt das Mapping in einem kleinen Video. Klicken Sie, unter dem Video, auf den But-ton Start the mapping process.

Bevor Sie mit dem Mapping weiter machen, sollten Sie prüfen, ob Ihr HTML valide23 ist. Sie können dasdirekt in TYPO3 prüfen.

23. syntaktisch Richtig.

Abb. 5-5: TemplaVoilà-Wizard: Vorgabewerte für Website

Abb. 5-6: TemplaVoilà-Wizard: Mapping beginnen


2. Klicken Sie im Reiter Information auf den Link validate template file.

3. Es öffnet sich ein neues Fenster, in dem das Layout auf der W3C Webseite validiert wird.

�Sollte sich bei Ihnen kein neues Fenster öffnen, schalten Sie bitte den PopUp-Blocker IhresBrowsers aus.

Abb. 5-7: TemplaVoilà-Wizard: Mapping-Über-sicht

Abb. 5-8: TemplaVoilà-Wizard: W3C-Validierung des Layouts


4. Kehren Sie zu TYPO3 zurück und wählen Sie den letzten Reiter Mapping aus. Nun sehen Sie fol-gende Tabelle:

Das Data Element ist ein logischer Bereich aus TYPO3, den Sie zuordnen möchten. Der Wizard bietet hierfolgende vier Bereiche an:

� ROOT

� Main Content Area

� Main menu

� Sub menu

Das ROOT-Element ist bereits dem <body>-Tag Ihres Templates zugeordnet.

Das ist eine sinnvolle Vorgabe – es besteht keine Notwendigkeit, sie zu ändern. Als nächstes gilt es, denHauptinhaltsbereich (Main Content Area) zuzuordnen.

Abb. 5-9: TemplaVoilà-Wizard: Mapping-Tabelle

Abb. 5-10: TemplaVoilà-Wizard: Data Element

Abb. 5-11: TemplaVoilà-Wizard: ROOT-Element auf body-Tag gemappt


5. Klicken Sie dazu den Button Map in der Action-Spalte an.

Hier zeigt sich die Stärke der Template-Engine. TemplaVoilà blendet eine Grafische-Ansicht Ihres Tem-plates ein und überlagert sie mit den Tags aus dem HTML-Code.

Noch übersichtlicher wird das Ganze, wenn Sie zur Quellcode-Ansicht wechseln.

Abb. 5-12: TemplaVoilà-Wizard: Main Content Area-Element mappen

Abb. 5-13: TemplaVoilà-Wizard: Mapping in der Grafischen-Ansicht


6. Wählen Sie dazu aus dem Dropdownmenü unterhalb der Überschrift Mapping Window denMode: HTML Source aus.

Hier können Sie die Tags direkt aus dem Quellcode bestimmen.

7. Klicken Sie das <div> mit der id content an. Dessen Inhalt, bestehend aus Beispielüberschriftenund Lorem Ipsum-Texten, soll später von TYPO3 ausgetauscht werden.

8. Wählen Sie auf der folgenden Seite INNER (Exclude tag) (1) aus der Dropdown-Liste und klickenSie auf Button Set (2).

Abb. 5-14: TemplaVoilà-Wizard: Mapping in der Quellcode-Ansicht

Abb. 5-15: TemplaVoilà-Wizard: Main Content Area auf <div> mappen


Jetzt sehen Sie wieder die Mapping-Tabelle mit der neu gemappten Main Content Area.

9. Mappen Sie nun das Main menu. Dazu können Sie die <ul>-Liste mit der id navi verwenden undauch hier wählen Sie wieder INNER (exclude tag).

Das Submenü müssen Sie vorerst nicht mappen.

10. Sobald Sie mit dem Mapping fertig sind, klicken Sie auf den Button Save and Return unten links,um zum nächsten Schritt zu gelangen.

Abb. 5-16: TemplaVoilà-Wizard: Mapping-Tabelle mit Main Content Area-Mapping

Abb. 5-17: TemplaVoilà-Wizard: Mapping speichern


Schritt 4: Mapping der Header-Elemente

1. Nach Betrachtung des kurzen Erklärungsvideos starten Sie das Header-Mapping mit dem ButtonSelect HTML header parts.

2. Wählen Sie den Reiter Header Parts(1) an. Auch hier geht es um Mapping. Sie haben die Möglich-keit auszuwählen, welche Elemente TYPO3 aus dem <head> des Templates übernimmt. Seien Sienicht wählerisch. Aktivieren Sie einfach alle Häkchen(2) in der Spalte Include. Hier sind alle vorge-schlagenen Elemente sinnvoll, da Sie das CSS benötigen. Bei anderen Layouts müssen Sie evtl.abwägen, was Sie benötigen. Ein weitere Klick auf den Button Save and Return(3) bringt Sie zumletzten Schritt des Wizards.

Schritt 5: Dynamisches Menü

Um ein dynamisches Menü zu erzeugen, das automatisch Ihre Sitemap verwendet, ist normalerweiseetwas TypoScript-Code erforderlich. Der Wizard hilft Ihnen aber auch hier, indem er den nötigen Codebereits vorgeneriert. Dieser generierte Code ist meistens nicht perfekt, er ist aber eine gute Ausgangs-

Abb. 5-18: TemplaVoilà-Wizard: Mapping der Header-Elemente beginnen

Abb. 5-19: TemplaVoilà-Wizard: Mapping der Header-Elemente


basis für gezielte Anpassungen. Dadurch, dass Sie den initialen Code nicht schreiben müssen, verrin-gert sich der Aufwand schon erheblich.

Um die Anpassungen am TypoScript können Sie sich später noch kümmern.

3. Schließen Sie den Vorgang zunächst einmal ab, indem Sie den generierten Code mit einem Klickauf den Button Write main menu TypoScript code (ganz unten) akzeptieren.

4. Klicken Sie auf der Folgeseite noch auf den Button Write sub menu Typoscript code, um dieGenerierung des Submenüs zu bestätigen.

Abb. 5-20: TemplaVoilà-Wizard: Vorgenerier-ter Code für das dynamische Menü

Abb. 5-21: TemplaVoilà-Wizard: Vorgenerierten Code für das dynamische Hauptmenü bestätigen

Abb. 5-22: TemplaVoilà-Wizard: Vorgenerierten Code für das dynamische Submenü bestätigen


5. Jetzt sehen Sie die Abschlussmeldung. Klicken Sie auf den Button Finish Wizard!, um den Vor-gang abzuschließen.

TYPO3 öffnet die fertige Website in einem neuen Fenster bzw. Browsertab.

Wie Sie sehen, hat der Wizard die Menüeinträge zum Leben erweckt. Allerdings stammen die Inhalteder Seiten Products, Content Elements, Visions, About Us und Contact noch aus einer Beispiel-Sitemap,die der Wizard angelegt hat. Sie erhalten bald die Gelegenheit, das zu ändern.

5.1.2 TemplaVoilà-Wizard erneut ausführen

Wenn man den Wizard mehrfach ausführt, um beispielsweise zwei verschiedene Websites mit TYPO3 zupflegen, so gibt es einen kleinen Bug bei der Zuweisung des Templates zu den Websites.

Sehen Sie statt Ihrer Website diese oder eine ähnliche Fehlermeldung, so tritt der Bug bei Ihnen defini-tiv auf. Es kann jedoch auch sein, dass der Bug auftritt, ohne sofort sichtbar zu sein. Führen Sie die näch-sten beiden Schritte also immer aus, wenn Sie mehr als eine Website mit dem Wizard angelegt haben.

Abb. 5-23: TemplaVoilà-Wizard: Wizard beenden

Abb. 5-24: TemplaVoilà-Wizard: Eingebundene Seite mit Beispiel-Sitemap

Abb. 5-25: TemplaVoilà-Bug in Version 1.6.1


1. Editieren Sie die root Page Weingut Traubner, indem Sie Edit aus dem Kontextmenü der Seite auf-rufen.

2. Gehen Sie in den Reiter Appearance und prüfen Sie, ob der Bug bei Ihnen vorliegt.

3. Im Reiter Appearance(1) wählen Sie dann aus den beiden Dropdownmenüs Main Template[Template] (2+3) aus.

4. Schließen Sie den Vorgang ab, in dem Sie die Änderungen durch einen Klick auf das Disketten-Icon speichern.

Abb. 5-26: Kontextmenü: Editieren einer Seite

Abb. 5-27: Bug vorhanden

Abb. 5-28: Auswählen des Main Template


5. Überprüfen Sie nun ob Ihre Website funktioniert. Verwenden Sie dazu die Funktion Show aus demKontextmenü.

6. Es öffnet sich ein neues Browserfenster oder ein neuer Browsertab. Die Fehlermeldung sollte ver-schwunden sein.

Übung 1: Open Source Layouts im Wizard

Ein effizienter erster Schritt zur neuen Website ist der Wizard. In dieser Übung können Sie dasnun selbst ausprobieren. Laden Sie sich dazu ein einspaltiges Layout von einer der folgendenSeiten herunter:

� www.oswd.org

� www.opendesigns.org

� www.openwebdesign.org

Diese Seiten bieten lizenzfreie bzw. Open Source-Designs an, die Sie verwenden dürfen. AchtenSie darauf, dass das Layout mindestes valides XHTML 1.0 oder HTML5 aufweist und über eineNavigation verfügt.

Binden Sie das Layout dann mit dem Wizard ein und mappen Sie Main Content Area und MainMenu.

Abb. 5-29: Anzeigen der

http://www.oswd.org

http://www.opendesigns.org

http://www.openwebdesign.org

INDEX 95

Index

AAbsatzformate 47Admin-Passwort 75Alfresco 9–10APA-Style 90Apple Mac OS X 80

BBackend 10–11, 16, 43, 48

CCMS 8Community Content Mana-

gement Systeme 9Confinement 66Content Elements 44Content Management Syste-

me 8

DData Element 69Datenbank-Management-Sy-

stem 15Datenbank-Passwort 74DOCTYPE 65Doctype 65Drupal 9, 13, 90Dynamisches Menü 32

EEinzeilige Kommentare 56Enterprise Content Manage-

ment Systeme 10

FFolder 69Frontend 55

GGrafische-Ansicht 29Grafisches Menü 59

HHauptmenü 57Header-Elemente 32HTML4-DOCTYPE 65HTML5 62, 65

IInformationsarchitektur 23,

37– 38Installations-Passwort 74Install-Tool 74

JJoomla 9–10, 13, 90

KKommentare in TypoScript 56Komponenten 11Konstruktor 57

LLiferay Portal 10Linux 84Long Time Support 14LTS 14

MMapping 26Mehrzeilige Kommentare 57Menüelemente 59Metamenü 69, 71Microsoft Windows 75

NNavigation 38, 41, 43, 61

OObjekt 57–58, 66Objekteigenschaft 57Objekttyp 57Open Source 11Operator 66

PPage Tree 37Passwörter 74

QQuellcode-Ansicht 29

RRefactoring 66–68, 71Refinery 11Rekursives Löschen 37Repository 12, 16Rich Text Editor 12, 45–46RTE 45, 47Ruby-on-Rails 11

96 INDEX

SSeitentyp 41, 69Shortcut 41Shortcut-Mode 42Sitemap 23, 32Social Content Management

Systeme 9stable 14Startseite 23, 25, 38, 40

TTemplate Mapping 26Template-Engine 16, 22, 29TER 16Textmenü 59TYPO3 Extension Repository

16TypoScript 23, 32, 54–55, 57,

71– 72

UUbuntu 84Update-Assistenten 74Upgrade 88UTF-8 23, 62

VValidierung 27Variablen 57

WW3C-Validierung 27Weiterleitung 42Wizard 23Wordpress 10, 13WYSIWYG 9

XXHTML 65

ZZeichenkodierung 62–63Zuweisungsoperator 57

Documents

Grundlagen und Template-Entwicklung mit TemplaVoilà · Seit der Version 6.0.0 wird TYPO3 Version 6.0.6+ für die Installation der Erweiterung benötigt. Für TYPO3 in der Version