WEB DEVELOPER GRADE 1 TYPO3. Grundlagen und Template-Entwicklung mit TemplaVoilà ... Offizielles Curriculum des Europäischen Webmasterverbandes

Transkript

1 WEB DEVELOPER GRADE 1 TYPO3 Grundlagen und Template-Entwicklung mit TemplaVoilà Offizielles Curriculum des Europäischen Webmasterverbandes

2

3 WEB DEVELOPER GRADE 1 TYPO3 Grundlagen und Template-Entwicklung mit TemplaVoilà Art.-Nr Version vom Autoren: Marco Emrich, Jan Teriete webmasters akademie Nürnberg GmbH, Nürnberg, Germany Das vorliegende Schulungsskript ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung der Texte und Abbildungen, auch auszugsweise, ist ohne schriftliche Genehmigung der webmasters akademie GmbH urheberrechtswidrig und daher strafbar. Dies gilt insbesondere für die Vervielfältigung, Übersetzung oder Verwendung in elektronischen 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 Herausgeber übernehmen keine juristische Verantwortung oder irgendeine Haftung für eventuell verbliebene fehlerhafte Angaben und deren Folgen.

4

5 Inhaltsverzeichnis 1 Allgemeine Einführung Voraussetzungen für dieses Lernheft Einrichten der TYPO3-Umgebung Was ist TYPO3? Content Management Systeme Arten von Content Management Systemen Community/Social CMS Enterprise CMS CMS als Plugin/Komponente Warum TYPO3? Versionen und Pakete TYPO3-Versionen TYPO3-Pakete Einführung in TemplaVoilà Installation von TemplaVoilà Manuelle Installation von TemplaVoilà über das TYPO3 Extension Repository Beispielprojekt Weingut Traubner Der Zauberer von Templatanien TemplaVoilà-Wizard ausführen TemplaVoilà-Wizard erneut ausführen Page Tree Löschen des bestehenden Page Trees Umsetzen der Informationsarchitektur als Page Tree Konfigurieren der Startseite Inhalte einpflegen Arbeiten mit Content Elements Erstellen von Content Elements Kopieren von Content Elements Einführung in TypoScript TypoScript-Grundlagen TypoScript editieren Kommentare in TypoScript Das Hauptmenü in TypoScript Menüelemente im Zustand: normal Menüelemente im Zustand: aktiv Besonderheiten im Umgang mit HTML5 und UTF Die Zeichenkodierung festlegen Den DOCTYPE auf HTML5 umstellen Refactoring: Confinement Anhang 1: Lokale TYPO3-Installation Passwörter für die TYPO3-Installation Das Datenbank-Passwort Das Installations-Passwort Das TYPO3 Admin-Passwort

6 9.2 Installation unter Microsoft Windows Installation unter Apple Mac OS X Installation unter Ubuntu-Linux Upgrade unter Ubuntu-Linux Quellen und Literaturhinweise APA-Style Referenzen Empfehlungen Lösungen

7 16 4 EINFÜHRUNG IN TEMPLAVOILÀ 4 Einführung in TemplaVoilà In dieser Lektion lernen Sie: was eine Template-Engine ist. wie Sie die Erweiterung TemplaVoilà installieren. wie Sie mit dem TemplaVoilà-Wizard eine Website erstellen. 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 haben Sie in TYPO3 aber die Qual der Wahl. Die erste und vielleicht wichtigste Entscheidung ist die Wahl einer so genannten Template-Engine. Diese ermöglicht Ihnen, Inhalte und Layout einer Website zusammenzubringen. 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ürlich 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 jede einzelne Seite nachbearbeiten müssen. Außerdem können z.b. Designer und Texter völlig isoliert an einer 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, fortschrittlichste und bequemste unter den TYPO3-Template-Engines gilt: TemplaVoilà. [ ] TemplaVoilà is highly recommended for its flexibility and more advanced templating techniques [ ] 4.1 Installation von TemplaVoilà Bisher ist TemplaVoilà aber noch kein fester Bestandteil von TYPO3 selbst. Deswegen müssen Sie es erst als Erweiterung installieren. Zum Glück bietet TYPO3 hier einen relativ einfachen Mechanismus Manuelle Installation von TemplaVoilà über das TYPO3 Extension Repository TYPO3 verwaltet seine Erweiterungen zentral im so genannten TYPO3 Extension Repository (TER). Sie können theoretisch aus dem TYPO3-Backend heraus darauf zugreifen. Doch dies ist bei wenigen zu installierenden Erweiterungen meist zeitintensiver als eine manuelle Installation. Deswegen werden Sie im Folgenden den manuellen Weg über die Repository-Website kennenlernen. 17. siehe Sarvell (2008),

8 4.1 INSTALLATION VON TemplaVoilà 17 1.Rufen Sie zunächst die Website in einem Browser Ihrer Wahl auf. Abb. 4-1: TemplaVoilà Installation: Erweiterung suchen Geben Sie im Suchfeld den Erweiterungsschlüssel templavoila (1) ein. Starten Sie danach die Suche mit dem Button Search (2) und klicken Sie auf der Ergebnisseite den Link TemplaVoila! (3) an. 2.Sie landen nun auf der Detailseite der Erweiterung. Abb. 4-2: TemplaVoilà Installation: Detailseite Prüfen Sie zunächst, welche Version aktuell ist (1). Die Version ist mit TYPO3 Version 4.5 kompatibel. Sollten Sie eine neuere Version angezeigt bekommen, so ist es sinnvoll, in der Versionsgeschichte unter demreiter 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 Erweiterung eine Abhängigkeit (1) zu einer anderen, noch nicht installierten Erweiterung mit dem Erweiterungsschlüssel static_info_tables hat. Die Erweiterung mit dem Schlüssel lang hingegen ist bereits standardmäß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).

9 18 4 EINFÜHRUNG IN TEMPLAVOILÀ 3.Schauen Sie sich nun unter der URL im Reiter Download die Versionsgeschichte der Abhängigkeit an. Abb. 4-3: TemplaVoilà Installation: Versionsgeschichte der Erweiterung static_info_tables Seit der Version wird TYPO3 Version für die Installation der Erweiterung benötigt. Für TYPO3 in der Version 4.5 benötigen Sie also die vorherige Version der Erweiterung. Laden Sie auch diese Erweiterung als t3x-datei herunter. 4.Nun müssen Sie die Abhängigkeit über den so genannten Extension Manager auf den Webserver Ihrer TYPO3-Installation laden. Rufen Sie hierzu das TYPO3-Backend in Ihrem Webbrowser auf. Abb. 4-4: TemplaVoilà Installation: Admin Tools 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, entfernen und aktualisieren können. Abb. 4-5: TemplaVoilà Installation: Erweiterung importieren Wählen Sie im oberen Dropdownmenü Import extensions und klicken Sie dann auf den Button Durchsuchen.

10 4.1 INSTALLATION VON TemplaVoilà 19 6.Wählen Sie nun die Datei static_info_tables_2.3.2.t3x aus Ihrem Download-Ordner aus. Das eigentliche Hochladen beginnen Sie durch einen Klick auf den Button Upload extension file. Abb. 4-6: TemplaVoilà Installation: Erweiterung hochladen 7.Sobald die Erweiterung hochgeladen wurde, erscheint eine Meldung, dass diese erfolgreich importiert wurde. Abb. 4-7: TemplaVoilà Installation: Abhängigkeit erfolgreich importiert 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. Abb. 4-8: TemplaVoilà Installation: Datenbank-Import Es erscheint eine sehr sehr lange Informationsseite. Scrollen Sie ganz nach unten und klicken Sie auf den Button Make updates, um den Import zu starten.

11 20 4 EINFÜHRUNG IN TEMPLAVOILÀ 9.Sobald die Erweiterung erfolgreich installiert ist, was eine ganze Weile dauern kann, sollten Sie nachfolgende Seite sehen. Abb. 4-9: TemplaVoilà Installation: Abhängigkeit installiert 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) und dann installieren. 1. Klicken Sie erneut auf Admin Tools Extension Manager links im Menü. Import extensions sollte 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-Installation hoch. 3. Im nächsten Schritt können dann Sie wieder die eigentliche Installation mit einem Klick auf Install extension starten. Abb. 4-10: TemplaVoilà Installation: Installation TemplaVoilà beginnen 4. Auch bei dieser Erweiterung müssen Daten in die Datenbank importiert werden. Abb. 4-11: TemplaVoilà Installation: Datenbank-Import

12 4.1 INSTALLATION VON TemplaVoilà Nach dem Aktualisieren der Datenbank bekommen Sie die Meldung, dass TemplaVoilà installiert ist. Jetzt müssen Sie die Grundeinstellungen von TemplaVoilà durch einen Klick auf den Button Update speichern. Ohne das Speichern der Grundeinstellungen funktionert TemplaVoilà nicht! 6. Abschließend müssen Sie den Zwischenspeicher 18 von TYPO3 leeren. Klicken Sie oben rechts in der Symbolleiste auf den gelben Blitz und dann auf Clear all caches. Sie bekommen keine Bestätigung nach dem Leeren des Zwischenspeichers.. Abb. 4-12: TemplaVoilà Installation: Leeren des Zwischenspeichers 1. Erweiterungen für TYPO3 können Abhängigkeiten zu anderen Erweiterungen haben, welche selbst wieder Abhängigkeiten haben können. Erst wenn alle abhängigen Erweiterungen installiert sind, kann die eigentliche Erweiterung (z.b. TemplaVoilà) installiert und genutzt werden. 2. Erweiterungen müssen erst importiert werden, bevor sie installiert werden können. 18. Auch Cache genannt.

13 BEISPIELPROJEKT WEINGUT TRAUBNER Beispielprojekt Weingut Traubner Na wunderbar nachdem Sie nun mit TemplaVoilà eine hervorragende Template-Engine installiert haben, kann es losgehen. Stellen Sie sich den fiktiven Kunden Herrn Traubner vor. Herr Traubner hat das Weingut seines Vaters übernommen und möchte nun eine Website, mit der er für seine Weine werben kann. Aber reden Sie doch selbst mit ihm: Herr Traubnera: Die Website soll im Wesentlichen aus statischen Texten bestehen. Mir ist aber vor allem wichtig, dass ich die Texte der Site später selbst pflegen kann. Leider hab' ich keine Zeit, mich in komplexe Internettechnologien wie HTML und wie hieß das doch gleich? ach ja, CSS einzuarbeiten. a. Bildquelle: Abb. 5-1: Startseite der Website Weingut Traubner

14 5.1 DER ZAUBERER VON TEMPLATANIEN 23 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. Sofort beginnen Sie mit der Umsetzung. Nachdem Sie die üblichen konzeptionellen und designerischen Tätigkeiten für eine erste Version 19 der Website durchgeführt haben, liegen Ihnen nun folgende Dinge vor: 20 Ein Layout, bestehend aus HTML und CSS für Start- und alle Unterseiten Die vorläufige Informationsarchitektur in Form einer Sitemap Texte und Bilder in psd- und odt-format Der Zauberer von Templatanien Wenn Sie beginnen, eine neue Website mit TYPO3 zu erstellen, so sind anfangs eine Reihe von Routinetä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 so genannten Wizard 22 integriert, der Ihnen einen Großteil der Routinetätigkeiten abnehmen kann. Ein Wizard oder Assistent ist dabei eine Oberfläche, die Sie durch eine Reihe von Dialogen führt und somit die Durchführung eines komplexen Prozesses deutlich vereinfacht. 23 Der TemplaVoilà-Zauberer kann sogar noch mehr. Er übernimmt die langweiligen Teile, wie das Anlegen von Benutzern und Gruppen und die aufwendigen, 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, inklusive HTML, CSS und Bildern (d.h. den kompletten Ordner weingut_traubner_vorlage) nach fileadmin/templates in Ihrem TYPO3-Ordner. Sollte der templates-ordner nicht existieren, so erstellen Sie ihn bitte 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. Damit Sie keine Probleme mit Sonderzeichen bekommen, sollten die Dateien (z.b. HTML, CSS und JavaScript) im Charset UTF-8 vorliegen. a Abb. 5-2: Darstellungsfehler von Sonderzeichen a. UTF-8 ist bei den meisten modernen Editoren Standard. 19. Wenn Sie mehr über den Entstehungsprozess von Websites erfahren möchten, so empfehle ich Ihnen das Lernheft Web Interface Design & Usability aus dem Webmasters Europe-Curriculum Sie finden diese Dateien im Begleitmaterial dieses Lernhefts 21. psd: das Photoshop-Dateiformat, odt: das OpenOffice/LibreOffice-Dateiformat 22. engl. Zauberer 23. siehe

15 24 5 BEISPIELPROJEKT WEINGUT TRAUBNER TemplaVoilà-Wizard ausführen Klicken Sie nun auf Web TemplaVoilà und starten Sie den Wizard mit dem Button Start wizard now! Abb. 5-3: TemplaVoilà-Wizard: Starten des Wizards Achtung! Sie werden in den nächsten Schritten immer wieder Buttons zum Starten oder Bestätigen von Aktionen benutzen. Der TemplaVoilà-Wizard gibt Ihnen während der Ausführung dieser Aktionen keine Statusrückmeldung! Manche dieser Aktionen können mehrere Minuten dauern. Wundern Sie sich also nicht, wenn Sie einen Button klicken und im ersten Moment nichts weiter passiert. Klicken Sie auf keinen Fall die Buttons mehrmals, dadurch würde der TemplaVoilà-Wizard die Schritte doppelt ausführen! 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 die unterseite.html. Da alle Seiten unserer Website das Design der unterseite.html haben sollen, wählen wir genau diese als Designvorlage aus.

16 5.1 DER ZAUBERER VON TEMPLATANIEN Wählen Sie fileadmin/templates/weingut_traubner_vorlage/unterseite.html, indem Sie den Link [Choose as Template] dahinter anklicken. Abb. 5-4: TemplaVoilà-Wizard: Template auswählen 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. Hier sehen 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 eintragen. 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 verwalten. 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 für Website

17 26 5 BEISPIELPROJEKT WEINGUT TRAUBNER 1. Scrollen Sie ganz nach unten, füllen Sie die Formularfelder wie angegeben aus und klicken Sie den Button Create new site (3). Das Erstellen kann einige Sekunden dauern. Abb. 5-5: TemplaVoilà-Wizard: Vorgabewerte für Website Schritt 3: Mapping beginnen Mappen bedeutet zuordnen. Beim Template Mapping ordnen Sie bestimmten Bereichen aus Ihrem HTML-Template Inhalte der Website zu. 1. Der Wizard erklärt das Mapping in einem kleinen Video. Klicken Sie, unter dem Video, auf den Button Start the mapping process. Abb. 5-6: TemplaVoilà-Wizard: Mapping beginnen Bevor Sie mit dem Mapping weiter machen, sollten Sie prüfen, ob Ihr HTML valide 24 ist. Sie können das direkt in TYPO3 prüfen. 24. syntaktisch Richtig.

18 5.1 DER ZAUBERER VON TEMPLATANIEN Klicken Sie im Reiter Information auf den Link validate template file. Abb. 5-7: TemplaVoilà- Wizard: Mapping-Übersicht 3. Es öffnet sich ein neues Fenster, in dem das Layout auf der W3C Webseite validiert wird. Abb. 5-8: TemplaVoilà-Wizard: W3C-Validierung des Layouts Sollte sich bei Ihnen kein neues Fenster öffnen, schalten Sie bitte den PopUp-Blocker Ihres Browsers aus.

19 28 5 BEISPIELPROJEKT WEINGUT TRAUBNER 4. Kehren Sie zu TYPO3 zurück und wählen Sie den letzten Reiter Mapping aus. Nun sehen Sie folgende Tabelle: Abb. 5-9: TemplaVoilà-Wizard: Mapping-Tabelle Das Data Element ist ein logischer Bereich aus TYPO3, den Sie zuordnen möchten. Der Wizard bietet hier folgende vier Bereiche an: ROOT Main Content Area Main menu Sub menu Abb. 5-10: TemplaVoilà-Wizard: Data Element Das ROOT-Element ist bereits dem <body>-tag Ihres Templates zugeordnet. Abb. 5-11: TemplaVoilà-Wizard: ROOT-Element auf body-tag gemappt Das ist eine sinnvolle Vorgabe es besteht keine Notwendigkeit, sie zu ändern. Als nächstes gilt es, den Hauptinhaltsbereich (Main Content Area) zuzuordnen.

20 5.1 DER ZAUBERER VON TEMPLATANIEN Klicken Sie dazu den Button Map in der Action-Spalte an. Abb. 5-12: TemplaVoilà-Wizard: Main Content Area-Element mappen Hier zeigt sich die Stärke der Template-Engine. TemplaVoilà blendet eine Grafische-Ansicht Ihres Templates ein und überlagert sie mit den Tags aus dem HTML-Code. Abb. 5-13: TemplaVoilà-Wizard: Mapping in der Grafischen-Ansicht Noch übersichtlicher wird das Ganze, wenn Sie zur Quellcode-Ansicht wechseln.

21 30 5 BEISPIELPROJEKT WEINGUT TRAUBNER 6. Wählen Sie dazu aus dem Dropdownmenü unterhalb der Überschrift Mapping Window den Mode: HTML Source aus. Abb. 5-14: TemplaVoilà-Wizard: Mapping in der Quellcode-Ansicht 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überschriften und 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 klicken Sie auf Button Set (2). Abb. 5-15: TemplaVoilà-Wizard: Main Content Area auf <div> mappen

22 5.1 DER ZAUBERER VON TEMPLATANIEN 31 Jetzt sehen Sie wieder die Mapping-Tabelle mit der neu gemappten Main Content Area. Abb. 5-16: TemplaVoilà-Wizard: Mapping-Tabelle mit Main Content Area-Mapping 9. Mappen Sie nun das Main menu. Dazu können Sie die <ul>-liste mit der id Navi verwenden und auch 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-17: TemplaVoilà-Wizard: Mapping speichern

23 32 5 BEISPIELPROJEKT WEINGUT TRAUBNER Schritt 4: Mapping der Header-Elemente 1. Nach Betrachtung des kurzen Erklärungsvideos starten Sie das Header-Mapping mit dem Button Select HTML header parts. Abb. 5-18: TemplaVoilà-Wizard: Mapping der Header-Elemente beginnen 2. Wählen Sie den Reiter Header Parts(1) an. Auch hier geht es um Mapping. Sie haben die Möglichkeit auszuwählen, welche Elemente TYPO3 aus dem <head> des Templates übernimmt. Seien Sie nicht wählerisch. Aktivieren Sie einfach alle Häkchen(2) in der Spalte Include. Hier sind alle vorgeschlagenen 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 zum letzten Schritt des Wizards. Abb. 5-19: TemplaVoilà-Wizard: Mapping der Header-Elemente Schritt 5: Dynamisches Menü Um ein dynamisches Menü zu erzeugen, das automatisch Ihre Sitemap verwendet, ist normalerweise etwas TypoScript-Code erforderlich. Der Wizard hilft Ihnen aber auch hier, indem er den nötigen Code bereits vorgeneriert. Dieser generierte Code ist meistens nicht perfekt, er ist aber eine gute Ausgangs-

24 5.1 DER ZAUBERER VON TEMPLATANIEN 33 basis für gezielte Anpassungen. Dadurch, dass Sie den initialen Code nicht schreiben müssen, verringert sich der Aufwand schon erheblich. Abb. 5-20: TemplaVoilà-Wizard: Vorgenerierter Code für das dynamische Menü 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 Klick auf den Button Write main menu TypoScript code (ganz unten) akzeptieren. Abb. 5-21: TemplaVoilà-Wizard: Vorgenerierter Code für das dynamische Menü bestätigen 4. Klicken Sie auf der Folgeseite noch auf den Button Next..., um die Generierung eines Submenüs zu überspringen Abb. 5-22: TemplaVoilà-Wizard: Das Erstellen des Submenüs überspringen

25 34 5 BEISPIELPROJEKT WEINGUT TRAUBNER 5. Jetzt sehen Sie die Abschlussmeldung. Klicken Sie auf den Button Finish Wizard!, um den Vorgang abzuschließen. Abb. 5-23: TemplaVoilà-Wizard: Wizard beenden 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 Inhalte der 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. Abb. 5-24: TemplaVoilà-Wizard: Eingebundene Seite mit Beispiel-Sitemap TemplaVoilà ERROR Sehen Sie statt Ihrer Website diese oder eine ähnliche Fehlermeldung, so sehen Sie sich das Kapitel 5.1.2»TemplaVoilà-Wizard erneut ausführen«an. Abb. 5-25: TemplaVoilà-Wizard: Fehlermeldung TemplaVoilà-Wizard erneut ausführen In der akuellen Version von TemplaVoilà (1.6.1), gibt es einen gravierenden Bug: Wenn Sie den Wizard ein weiteres mal ausführen, bekommen Sie am Ende eine Fehlermeldung (siehe obenstehende Hinweisbox»TemplaVoilà ERROR«). In diesem Fall gehen Sie folgendermaßen vor:

26 5.1 DER ZAUBERER VON TEMPLATANIEN Editieren Sie die root Page Wingut Traubner, indem Sie Edit aus dem Kontextmenü der Seite aufrufen. Abb. 5-26: Kontextmenü: Editieren einer Seite 2. Im Reiter Appearance(1) wählen Sie aus den beiden Dropdownmenüs Main Template [Template] (2+3) aus. Abb. 5-27: Auswählen des Main Template 3. Schließen Sie den Vorgang ab, in dem Sie die Änderungen durch einen Klick auf das Disketten- Icon speichern. 4. Überprüfen Sie nun ob Ihre Website funktioniert. Verwenden Sie dazu die Funktion Show aus dem Kontextmenü. Abb. 5-28: Anzeigen der

27 9.4 INSTALLATION UNTER UBUNTU-LINUX Sie werden sofort mit einer dicken roten Fehlermeldung begrüßt, die Sie freundlich darauf hinweist, doch auch dieses Passwort gleich zu ändern. Klicken Sie also auf Edit this account (direkt in der Box) und ändern Sie Ihr Passwort. Abb. 9-30: Linux-Installation: Erste Anmeldung am TYPO3-Backend 15. Die Änderungen können Sie über das Disketten-Symbol oben links speichern Abb. 9-31: Linux-Installation: Ändern des Passworts für den Admin-Account von Typo Upgrade unter Ubuntu-Linux Je nach Version Ihrer Ubuntu-Installation kann es vorkommen, dass Ihre TYPO3-Version nicht der aktuellen 4.5 LTS entspricht. In dem Fall sollten Sie nun noch ein Upgrade auf die neuste Typo3-4.5.X durchführen. Das lässt sich zum Glück mit ein paar wenigen Konsolenbefehlen bewerkstelligen:

28 84 9 ANHANG 1: LOKALE TYPO3-INSTALLATION 1. Laden Sie dazu die aktuelle Source.tar.gz unter herunter. 2. Kopieren die Datei nach /usr/share/typo3 und loggen sich als root ein. Anschließend entpacken Sie die Datei dort: 35 tar xfv typo3_src tar.gz 3. Löschen Sie die alte Installation oder benennen Sie sie um, z.b.: mv typo3_src-4.5 typo3_src-4.5_old 4. Legen Sie jetzt einen symbolischen Link für den neuen Quellcode an: ln -s typo3_src typo3_src Stellen Sie sicher, dass die Rechte richtig gesetzt sind: chmod ug+xr -R typo3_src chown www-data:www-data typo3_src R 6. Als letztes müssen Sie noch einen Restart des Apache-Servers durchführen: /etc/init.d/apache2 restart Herzlichen Glückwunsch! Sie haben es geschafft und sind nun stolzer Besitzer einer kompletten TYPO3- Installation. 35. Die Versionsnummer müssen Sie noch anpassen.

29 10.1 APA-STYLE Quellen und Literaturhinweise 10.1 APA-Style Zum Aufzeigen von Referenzen, Quellen und weiterführender Literatur verwende ich den sogenannten APA-Style. Der APA-Style ist unter anderem ein System zum Kennzeichnen von Referenzen. Entwikkelt wurde dieses System von der American Psychological Association (APA). Unter en.wikipedia.org/wiki/apa_style können Sie sich noch genauer informieren. Eine APA-Style- Referenz besteht meist aus Nachname und Jahreszahl. Hier sehen Sie zwei Beispiele. Beispiel siehe Sarvell (2008) Neben mir empfiehlt sie z.b. auch J. Greenawalt (2011), der Experte für TYPO3-Templates. In beiden Fällen beziehen sich die Angaben auf Quellen aus dem Referenzteil. Wenn Sie etwas weiter hinten im Referenzteil nachschlagen, finden Sie Folgendes: Sarvell H. (2008, 15. März). Comparing TYPO3, Joomla, Drupal and MODx. von der ProDevTips Website, Aufgerufen am unter Greenawalt, J. (2010). TYPO3 Templates. Packt Publishing. Die erste Referenz ist eine Internetquelle, die zweite ein Buch. Bei Internetquellen gebe ich Ihnen im Text oder in einer Fußnote meist nochmal die URL an oder verzichte sogar auf den Apa-Style-Verweis. Dadurch können Sie die Seite direkt besuchen, ohne erst nachschlagen zu müssen. Außerdem lagere ich Quellenangaben oft vollständig in die Fußnote aus, um den Textfluss nicht zu stören (wie im ersten Beispiel). Was Sie in diesem Lernheft ebenfalls sehr häufig finden, sind Verweise auf Wikipedia. Diese sind der Einfachheit halber nicht im APA-Style. Stattdessen finden Sie immer gleich den Link auf Seite mit der Begriffserklärung Referenzen AOEmedia. (n.d.). AOEmedia, the open web company. Aufgerufen am unter Bongers, F., Stöckl, A. (2011). Einstieg in TYPO Auflage. Galileo Press. Bonn. siehe Cohen, R. (2005). Large Scale TYPO3 Deployment Methodologies. Sept Karlsruhe: TYCON3. von TYPO3 User Group Austria Website: tuga.at/index.php?id=645 Greenawalt, J. (2010). TYPO3 Templates. Packt Publishing. Meyer R. (2011). Praxiswissen TYPO3. 5. Auflage. O'Reilly Verlag Köln. siehe Osipov, D. (2010). TYPO3 Scalability for high traffic Websites. Presentation on Slide Share. Aufgerufen am unter Sarvell H. (2008, 15. März). Comparing TYPO3, Joomla, Drupal and MODx. von der ProDevTips Website, Aufgerufen am unter