Dedizierte Systeme Templa Voilá Universität zu Köln SS 2009 IT Zertifikat der Philosophischen Fakultät Dozentin: Susanne Kurz M.A. Referenten: Ulrike Henny, André Streicher Dedizierte Systeme – Templa Voilá –

Dedizierte Systeme Templa Voilá – Gliederung – – Gliederung – Einführung in Templa Voilá Installation Erstellung eines Templates

Dedizierte Systeme Templa Voilá Einführung in Templa Voilá

Dedizierte Systeme Templa Voilá TemplaVoilà - Einführung Was ist TemplaVoilà? Eine Erweiterung für TYPO3, die von Kasper Skårhøj und Robert Lemke entwickelt wurde TemplaVoilà is an alternate templating engine offering a new way of creating and working with design elements.

Dedizierte Systeme Templa Voilá TemplaVoilà - Einführung Was ist TemplaVoilà? TemplaVoilà dient dem Mapping: HTML- Designvorlage TemplateInhalte Zusammenführen von Inhalt und Design

Dedizierte Systeme Templa Voilá TemplaVoilà - Einführung Welche Vorteile hat TemplaVoilà? Ziel: Handhabung von Dokumentvorlagen vereinfachen Flexiblere Seitenstrukturen erstellen traditionelles templating auf der Inhaltsebene integriert Flexiblere Technik beim templating

Dedizierte Systeme Templa Voilá TemplaVoilà - Einführung Was heißt das konkret? VORHER: spezielle Markierungen bei HTML- Designvorlagen notwendig Subparts und Marker = Platzhalter für dynamische Inhalte TypoScript-Befehle des Templates suchen nach den Platzhaltern

Dedizierte Systeme Templa Voilá TemplaVoilà - Einführung VORHER: … ###MENUE### ###INHALT### …

Dedizierte Systeme Templa Voilá TemplaVoilà - Einführung VORHER: Seitenaufbau und Ausgabe von Inhalten mit TypoScript definieren: hoher Aufwand daher: mitgelieferte statische Templates aber: geringe Flexibilität dieser Templates

Dedizierte Systeme Templa Voilá TemplaVoilà - Einführung JETZT: keine Marker und Subparts in der HTML-Vorlage Bereiche der Designvorlage, die Inhalte aufnehmen sollen, können per Point & Click markiert werden geringerer Aufwand: weniger Verwendung von TypoScript nötig

Dedizierte Systeme Templa Voilá TemplaVoilà - Einführung JETZT:

Dedizierte Systeme Templa Voilá Höhere Flexibilität: Modul zur Erstellung von Seiteninhalten an Vorlage angepasst (Headline, Spalten, etc.) Datenstruktur (DS): Welche Bereiche für Inhalte soll es geben? (z.B. linke Spalte, rechte Spalte) Template Objekt (TO): Wo sollen die Inhalte im HTML-Dokument stehen? JETZT: TemplaVoilà - Einführung

Dedizierte Systeme Templa Voilá TemplaVoilà - Einführung Wie wird TemplaVoilà installiert? Wie funktioniert TemplaVoilà?

Dedizierte Systeme Templa Voilá Installation

Dedizierte Systeme Templa Voilá TemplaVoilà - Installation Achtung: erhebliche Änderungen durch TemplaVoilà! Die Erweiterung möglichst bei einer frischen TYPO3- Installation vornehmen.

Dedizierte Systeme Templa Voilá TemplaVoilà - Installation Schritt 1: Installation der Erweiterung Static Info Tables Static Info Tables stellt länderspezifische Informationen, z.B. zur Währung, zur Verfügung. TemplaVoilà ist von Static Info Tables abhängig.

Dedizierte Systeme Templa Voilá TemplaVoilà - Installation das Modul Admin-Werkzeuge > Erweiterungsmanager auswählen im Dropdown-Menü Settings auswählen In der Box Security Settings bei "Enable extensions without review (basic security check)" ein Häkchen setzen (dieser Schritt ist nötig, damit TYPO3 die aktuellsten Versionen der Erweiterungen importieren kann)

Dedizierte Systeme Templa Voilá TemplaVoilà - Installation im Dropdown-Menü Import extensions auswählen bei Klick auf den Button Retrieve/Update wird eine Liste der verfügbaren Erweiterungen erstellt Suchen von "static_info_tables" über Suchfeld und Look up-Button Importieren der aktuellsten Version (hier 2.1.0) durch Klick auf den Button mit dem roten Pfeil

Dedizierte Systeme Templa Voilá TemplaVoilà - Installation Klick auf Install extension zur Installation der Erweiterung Meldung: "Database needs to be updated"; zum Update der Datenbank (Anlegen neuer Tabellen und Felder) auf Make updates klicken Meldung: "The extension is installed (loaded and running)"

Dedizierte Systeme Templa Voilá TemplaVoilà - Installation Die Installation von Static Info Tables ist nun abgeschlossen. Wenn man im Dropdown-Menü des Erweiterungsmanagers Loaded extensions auswählt, erscheint eine Übersicht der installierten Erweiterungen.

Dedizierte Systeme Templa Voilá TemplaVoilà - Installation Schritt 2: Installation der Erweiterung TemplaVoilà TemplaVoilà dient dem Mapping (Einbinden von HTML-Dokumentvorlagen): Design und Inhalte werden so zusammengeführt.

Dedizierte Systeme Templa Voilá TemplaVoilà - Installation Vorgehen wie oben: im Erweiterungsmanager im Dropdown- Menü Import extensions auswählen Im Suchfeld templavoila oder nur templa eingeben; auf Look up klicken Importieren der aktuellsten Version (hier 1.3.7) über den Button mit dem roten Pfeil

Dedizierte Systeme Templa Voilá TemplaVoilà ist nun installiert. Zum Abschluss folgt noch ein kleiner Schritt. TemplaVoilà - Installation Klick auf Install extension zur Installation Meldung: Database needs to be updated; auf Make updates klicken Meldung: The extension is installed (loaded and running)

Dedizierte Systeme Templa Voilá TemplaVoilà - Installation Schritt 3: Cache leeren Der Cache ist ein Zwischenspeichersystem und sollte bei Veränderung der Konfiguration des Systems geleert werden.

Dedizierte Systeme Templa Voilá TemplaVoilà - Installation Cache leeren: Klick auf gelben Blitz rechts oben im Hauptfenster Auswahl von: Alle Caches löschen Ausloggen Neu einloggen Damit ist die Installation von TemplaVoilà vollständig abgeschlossen.

Dedizierte Systeme Templa Voilá TemplaVoilà - Installation Resultat: Ein erweitertes Backendmenü! Ein eigenes Modul TemplaVoilà Das Modul Seite ist zu TemplaVoilà- Seite geworden

Dedizierte Systeme Templa Voilá Erstellung eines Templates

Dedizierte Systeme Templa Voilá – Erstellung eines Templates– 1. Schritt: Theoretischer Entwurf eines Design Gestaltung einer HTML- Designvorlage => Vorbereitete Designvorlage von der HKI- Seite herunterladen

Dedizierte Systeme Templa Voilá – Erstellung eines Templates– 2. Schritt: Einbindung der HTML- Designvorlage in Typo3 Unter Datei den Menüpunkt Dateiliste wählen Rechtsklick auf fileadmin und Neu auswählen Einen neuen Ordner anlegen mit dem Namen: - VoilaTemplates -

Dedizierte Systeme Templa Voilá Rechtsklick auf den neu angelegten Ordner und Dateien hochladen auswählen DropDown- Formular über Anzahl der Dateien auf 5 Dateien setzen Die 5 Dateien aus dem heruntergeladenen Ordner von der HKI- Seite Hochladen – Erstellung eines Templates–

Dedizierte Systeme Templa Voilá 3. Schritt: Anlegen einer neuen Website Unter Web den Menüpunkt Seite wählen Rechtsklick auf die Weltkugel und Neu auswählen Eine neue Seite als root- Element anlegen (auf der gleichen Ebene wie die anderen root- Seiten) -> Name: Voilaroot – Erstellung eines Templates–

Dedizierte Systeme Templa Voilá 4. Schritt: Anlegen eines Systemordners Unter Web den Menüpunkt Seite wählen Rechtsklick auf die Voilaroot und Neu auswählen Eine neue Seite als Unterseite von Voilaroot anlegen -> Name: Templates – Erstellung eines Templates–

Dedizierte Systeme Templa Voilá Unter Web den Menüpunkt Seite wählen Die Seite Templates auswählen Die Seite bearbeiten mit Klick auf das Stiftsymbol Im Dropdown- Menü für den Seitentyp den Typ SysOrdner auswählen und speichern – Erstellung eines Templates–

Dedizierte Systeme Templa Voilá 5. Schritt: Zuordnung der Systemordner als Templatedatensatz für unsere root- Page Unter Web den Menüpunkt Seite wählen Voilaroot auswählen und bearbeiten Unter den Menüpunkt Optionen wechseln Im Formularfeld Allgemeine Datensätze den Systemordner Templates auswählen und speichern – Erstellung eines Templates–

Dedizierte Systeme Templa Voilá 6. Schritt: Einbinden von TemplaVoilà ins Typoscript- Template Unter Web den Menüpunkt Template wählen Create Template for new site auswählen und somit ein Root- Template erschaffen Stiftsymbol bei Setup wählen zum Bearbeiten – Erstellung eines Templates–

Dedizierte Systeme Templa Voilá Das Default- Script folgendermaßen ändern: # Default PAGE object: page = PAGE page.typeNum = 0 page.10 = USER page.10.userFunc = tx_templavoila_pi1->main_page ….speichern nicht vergessen! – Erstellung eines Templates–

Dedizierte Systeme Templa Voilá Außerdem: Unter Web den Menüpunkt Template wählen Den Dialog >>Click here to edit whole template record<< öffnen Menüpunkt Enthält auswählen Unter Statische Templates einschließen das statische Objekt CSS Styled Content einschließen und speichern – Erstellung eines Templates–

Dedizierte Systeme Templa Voilá 7. Schritt: Mapping der Dokumentenvorlage Unter Datei den Menüpunkt Dateiliste wählen Den Ordner - VoilaTemplates – auswählen Klick auf das Icon des HTML- Vorlage TemplaVoila.html und im aufklappenden Kontextmenü den Menüpunkt TemplaVoilà wählen – Erstellung eines Templates–

Dedizierte Systeme Templa Voilá Dem Root Bereich soll nun der Body-Tag zugewiesen werden Dazu ein Klick auf den Button Map Auswahl des Body- Tag in der Voransicht des Dokuments-> In der Präsentationsansicht befinden sich sichtbare Tags Im Action- Dialog Auswahl der Option INNER (Das Element befindet sich nun innerhalb des Tag) -> Klick auf Set um den Vorgang abzuschließen

Dedizierte Systeme Templa Voilá 7.1. Schritt: Weitere Bereiche erstellen Im Eingabefeld unter der ROOT- Definition einen neuen Bezeichner Namens: field_headline eingeben und auf ADD klicken – Erstellung eines Templates–

Dedizierte Systeme Templa Voilá Die nun erscheinende Eingabemaske ausfüllen: Mapping Type als Element belassen Im Title einen Titel eingeben In Mapping Instrutcions eine Mapping Anweisung In Sample Data einen Platzhalter eingeben Und in Editing Type den Typ: TypoScript Object Path…. Klick auf ADD – Erstellung eines Templates–

Dedizierte Systeme Templa Voilá 7.2. Schritt: Den Bereich einem HTML- Container zuweisen: Klick auf den Button Map Auswahl des Div Containers mit der id= headline => Action auf INNER belassen und Set klicken – Erstellung eines Templates–

Dedizierte Systeme Templa Voilá Bei einem Klick auf Preview sehen wir unseren Platzhalter im Headline Bereich Analog zu dem Headline Bereich ebenfalls den Bereich field_nav mit dem Container hinzufügen Editing Type bleibt bei TypoScript Object Path – Erstellung eines Templates–

Dedizierte Systeme Templa Voilá Weiteren Bereich mit dem Namen field_inhalt erstellen Diesmal den Editing Type Content Elements zuweisen Den Bereich Mappen mit dem Inhaltscontainer Analog den Bereich field_spalte_rechts mit dem Container hinzufügen – Erstellung eines Templates–

Dedizierte Systeme Templa Voilá – Typen von Editing Types– Eine kurze aber doch ausreichende Beschreibung für alle Editing Types finden Sie auf: templavoila/mapping.html

Dedizierte Systeme Templa Voilá 7.3. Schritt: Speichern! Klick auf den Button Save as Title of DS/TO mit voila1 bezeichnen In Store in PID den angelegten Systemordner Templates auswählen => Mit dem Button CREATE TO AND DS speichern – Erstellung eines Templates–

Dedizierte Systeme Templa Voilá 8. Schritt: Object Path für Dynamisierung zuweisen Unter Web den Menüpunkt Liste wählen Unseren Systemordner Templates anwählen Klick auf das DS- Objekt und im Kontextmenü Bearbeiten auswählen XML- Struktur anschauen!!! – Erstellung eines Templates–

Dedizierte Systeme Templa Voilá Auszeichnungssprache zur Darstellung hierarchisch strukturierter Daten in Form von Textdaten In unserem Fall: Die hierarchische Struktur der Page bzw. des Templates Jedes XML Dokument hat eine Beschreibung in Form einer DTD, die die Struktur vorgibt Jedes XML Dokument hat eine Wurzel, in unserem Fall das T3DataStructure Element – Was ist XML?–

Dedizierte Systeme Templa Voilá Unser eben gemapptes ROOT Element findet sich als Tag wieder Unser weiteren geschaffenen Elemente field_headline, field_spalte_rechts, field_inhalt und field_nav finden sich ebenfalls als Tags wieder Unter field_headline und field_nav findet sich jeweils der Tag Bei field_headline tragen wir dort lib.headline ein und bei field_nav: lib_nav …speichern! – Erstellung eines Templates–

Dedizierte Systeme Templa Voilá 9. Schritt: Einbinden der Stylsheetdatei Unter Web den Menüpunkt Liste wählen Unseren Systemordner Templates anwählen Klick auf das TO-Objekt und im Kontextmenü TemplaVoilà auswählen In das Menü Header Parts wechseln – Erstellung eines Templates–

Dedizierte Systeme Templa Voilá Häckchen an die Checkboxen von Meta- Tags und des Stylesheet- Links setzen Klick auf Set und Save Die Headerparts mit dem Stylesheet sind nun eingebunden! – Erstellung eines Templates–

Dedizierte Systeme Templa Voilá 10. Schritt: Zuweisung der TemplaVoilà- Datenstruktur an die Startseite Unter Web den Menüpunkt Seite wählen Unsere Rootpage Voilaroot anwählen und bearbeiten In das Menü Erweitert wechseln – Erstellung eines Templates–

Dedizierte Systeme Templa Voilá In dem Pulldown- Menü von Seiten- Datenstruktur die im SysOrdner Templates abgelegte TemplaVoilà Datenstruktur voila1 auswählen Dem nun erscheinenden Feld Benutze Vorlagendesign ebenfalls im Pulldown- Menü voila1 zuweisen Analog die Zuweisung für Unterseiten- Seiten- Datenstruktur und Unterseiten Benutze Vorlagendesign…. Speichern! – Erstellung eines Templates–

Dedizierte Systeme Templa Voilá 11. Schritt: Verwendung des Headline- Bereichs Unter Web den Menüpunkt Template wählen Bearbeiten des Setup- Feldes – Erstellung eines Templates–

Dedizierte Systeme Templa Voilá Eingabe folgender Zeilen in das Setup: lib.headline = TEXT lib.headline.value = {page:title} lib.headline.insertData = 1 lib.headline.wrap = | ….speichern! – Erstellung eines Templates–

Dedizierte Systeme Templa Voilá 12. Schritt: Einbinden des Menüs Unter Web den Menüpunkt Template wählen Bearbeiten des Setup- Feldes – Erstellung eines Templates–

Dedizierte Systeme Templa Voilá Eingabe folgender Zeilen in das Setup: lib.nav = HMENU lib.nav.1 = TMENU lib.nav.1 { expAll = 1 wrap = | NO.wrapItemAndSub = | } lib.nav.2 = TMENU lib.nav.2 { expAll = 1 wrap = | NO.wrapItemAndSub = | } …speichern! Wichtig: obere Zeilenanordnung einhalten – Erstellung eines Templates–

Dedizierte Systeme Templa Voilá 13. Schritt: Anlegen weiterer Seiten Unter Web den Menüpunkt Funktionen wählen Root- Seite Voilaroot wählen und mehrere Seiten erzeugen Jeweils noch Unterseiten analog erstellen – Erstellung eines Templates–

Dedizierte Systeme Templa Voilá 14. Schritt: Inhalte einfügen Unter Web den Menüpunkt Seite wählen Beliebige Seite wählen und entweder in der Option Inhalt oder Spalte_rechts Inhalt einfügen Ins Frontend wechseln und sein Werk bestaunen – Erstellung eines Templates–

Dedizierte Systeme Templa Voilá Fragen?! ???????? ? ? ?

Dedizierte Systeme Templa Voilá Herzlichen Dank!