Dedizierte Systeme Templa Voil Universitt zu Kln SS 2009 IT
Zertifikat der Philosophischen Fakultt Dozentin: Susanne Kurz M.A.
Referenten: Ulrike Henny, Andr Streicher Dedizierte Systeme Templa
Voil
Folie 2
Dedizierte Systeme Templa Voil Gliederung Gliederung Einfhrung
in Templa Voil Installation Erstellung eines Templates
Folie 3
Dedizierte Systeme Templa Voil Einfhrung in Templa Voil
Folie 4
Dedizierte Systeme Templa Voil TemplaVoil - Einfhrung Was ist
TemplaVoil? Eine Erweiterung fr TYPO3, die von Kasper Skrhj und
Robert Lemke entwickelt wurde TemplaVoil is an alternate templating
engine offering a new way of creating and working with design
elements.
Folie 5
Dedizierte Systeme Templa Voil TemplaVoil - Einfhrung Was ist
TemplaVoil? TemplaVoil dient dem Mapping: HTML- Designvorlage
TemplateInhalte Zusammenfhren von Inhalt und Design
Folie 6
Dedizierte Systeme Templa Voil TemplaVoil - Einfhrung Welche
Vorteile hat TemplaVoil? Ziel: Handhabung von Dokumentvorlagen
vereinfachen Flexiblere Seitenstrukturen erstellen traditionelles
templating auf der Inhaltsebene integriert Flexiblere Technik beim
templating
Folie 7
Dedizierte Systeme Templa Voil TemplaVoil - Einfhrung Was heit
das konkret? VORHER: spezielle Markierungen bei HTML-
Designvorlagen notwendig Subparts und Marker = Platzhalter fr
dynamische Inhalte TypoScript-Befehle des Templates suchen nach den
Platzhaltern
Dedizierte Systeme Templa Voil TemplaVoil - Einfhrung VORHER:
Seitenaufbau und Ausgabe von Inhalten mit TypoScript definieren:
hoher Aufwand daher: mitgelieferte statische Templates aber:
geringe Flexibilitt dieser Templates
Folie 10
Dedizierte Systeme Templa Voil TemplaVoil - Einfhrung JETZT:
keine Marker und Subparts in der HTML-Vorlage Bereiche der
Designvorlage, die Inhalte aufnehmen sollen, knnen per Point &
Click markiert werden geringerer Aufwand: weniger Verwendung von
TypoScript ntig
Dedizierte Systeme Templa Voil Hhere Flexibilitt: Modul zur
Erstellung von Seiteninhalten an Vorlage angepasst (Headline,
Spalten, etc.) Datenstruktur (DS): Welche Bereiche fr Inhalte soll
es geben? (z.B. linke Spalte, rechte Spalte) Template Objekt (TO):
Wo sollen die Inhalte im HTML-Dokument stehen? JETZT: TemplaVoil -
Einfhrung
Folie 13
Dedizierte Systeme Templa Voil TemplaVoil - Einfhrung Wie wird
TemplaVoil installiert? Wie funktioniert TemplaVoil?
Folie 14
Dedizierte Systeme Templa Voil Installation
Folie 15
Dedizierte Systeme Templa Voil TemplaVoil - Installation
Achtung: erhebliche nderungen durch TemplaVoil! Die Erweiterung
mglichst bei einer frischen TYPO3- Installation vornehmen.
Folie 16
Dedizierte Systeme Templa Voil TemplaVoil - Installation
Schritt 1: Installation der Erweiterung Static Info Tables Static
Info Tables stellt lnderspezifische Informationen, z.B. zur Whrung,
zur Verfgung. TemplaVoil ist von Static Info Tables abhngig.
Folie 17
Dedizierte Systeme Templa Voil TemplaVoil - Installation das
Modul Admin-Werkzeuge > Erweiterungsmanager auswhlen im
Dropdown-Men Settings auswhlen In der Box Security Settings bei
"Enable extensions without review (basic security check)" ein
Hkchen setzen (dieser Schritt ist ntig, damit TYPO3 die aktuellsten
Versionen der Erweiterungen importieren kann)
Folie 18
Dedizierte Systeme Templa Voil TemplaVoil - Installation im
Dropdown-Men Import extensions auswhlen bei Klick auf den Button
Retrieve/Update wird eine Liste der verfgbaren 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
Folie 19
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)"
Folie 20
Dedizierte Systeme Templa Voil TemplaVoil - Installation Die
Installation von Static Info Tables ist nun abgeschlossen. Wenn man
im Dropdown-Men des Erweiterungsmanagers Loaded extensions auswhlt,
erscheint eine bersicht der installierten Erweiterungen.
Folie 21
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 zusammengefhrt.
Folie 22
Dedizierte Systeme Templa Voil TemplaVoil - Installation
Vorgehen wie oben: im Erweiterungsmanager im Dropdown- Men Import
extensions auswhlen 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
Folie 23
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)
Folie 24
Dedizierte Systeme Templa Voil TemplaVoil - Installation
Schritt 3: Cache leeren Der Cache ist ein Zwischenspeichersystem
und sollte bei Vernderung der Konfiguration des Systems geleert
werden.
Folie 25
Dedizierte Systeme Templa Voil TemplaVoil - Installation Cache
leeren: Klick auf gelben Blitz rechts oben im Hauptfenster Auswahl
von: Alle Caches lschen Ausloggen Neu einloggen Damit ist die
Installation von TemplaVoil vollstndig abgeschlossen.
Folie 26
Dedizierte Systeme Templa Voil TemplaVoil - Installation
Resultat: Ein erweitertes Backendmen! Ein eigenes Modul TemplaVoil
Das Modul Seite ist zu TemplaVoil- Seite geworden
Folie 27
Dedizierte Systeme Templa Voil Erstellung eines Templates
Folie 28
Dedizierte Systeme Templa Voil Erstellung eines Templates 1.
Schritt: Theoretischer Entwurf eines Design Gestaltung einer HTML-
Designvorlage => Vorbereitete Designvorlage von der HKI- Seite
herunterladen
Folie 29
Dedizierte Systeme Templa Voil Erstellung eines Templates 2.
Schritt: Einbindung der HTML- Designvorlage in Typo3 Unter Datei
den Menpunkt Dateiliste whlen Rechtsklick auf fileadmin und Neu
auswhlen Einen neuen Ordner anlegen mit dem Namen: - VoilaTemplates
-
Folie 30
Dedizierte Systeme Templa Voil Rechtsklick auf den neu
angelegten Ordner und Dateien hochladen auswhlen 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
Folie 31
Dedizierte Systeme Templa Voil 3. Schritt: Anlegen einer neuen
Website Unter Web den Menpunkt Seite whlen Rechtsklick auf die
Weltkugel und Neu auswhlen Eine neue Seite als root- Element
anlegen (auf der gleichen Ebene wie die anderen root- Seiten) ->
Name: Voilaroot Erstellung eines Templates
Folie 32
Dedizierte Systeme Templa Voil 4. Schritt: Anlegen eines
Systemordners Unter Web den Menpunkt Seite whlen Rechtsklick auf
die Voilaroot und Neu auswhlen Eine neue Seite als Unterseite von
Voilaroot anlegen -> Name: Templates Erstellung eines
Templates
Folie 33
Dedizierte Systeme Templa Voil Unter Web den Menpunkt Seite
whlen Die Seite Templates auswhlen Die Seite bearbeiten mit Klick
auf das Stiftsymbol Im Dropdown- Men fr den Seitentyp den Typ
SysOrdner auswhlen und speichern Erstellung eines Templates
Folie 34
Dedizierte Systeme Templa Voil 5. Schritt: Zuordnung der
Systemordner als Templatedatensatz fr unsere root- Page Unter Web
den Menpunkt Seite whlen Voilaroot auswhlen und bearbeiten Unter
den Menpunkt Optionen wechseln Im Formularfeld Allgemeine Datenstze
den Systemordner Templates auswhlen und speichern Erstellung eines
Templates
Folie 35
Dedizierte Systeme Templa Voil 6. Schritt: Einbinden von
TemplaVoil ins Typoscript- Template Unter Web den Menpunkt Template
whlen Create Template for new site auswhlen und somit ein Root-
Template erschaffen Stiftsymbol bei Setup whlen zum Bearbeiten
Erstellung eines Templates
Folie 36
Dedizierte Systeme Templa Voil Das Default- Script
folgendermaen 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
Folie 37
Dedizierte Systeme Templa Voil Auerdem: Unter Web den Menpunkt
Template whlen Den Dialog >>Click here to edit whole template
record
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
Prsentationsansicht 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 abzuschlieen
Folie 40
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
Folie 41
Dedizierte Systeme Templa Voil Die nun erscheinende
Eingabemaske ausfllen: 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
Folie 42
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
Folie 43
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
hinzufgen Editing Type bleibt bei TypoScript Object Path Erstellung
eines Templates
Folie 44
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 hinzufgen Erstellung
eines Templates
Folie 45
Dedizierte Systeme Templa Voil Typen von Editing Types Eine
kurze aber doch ausreichende Beschreibung fr alle Editing Types
finden Sie auf: http://www.t3net.de/dokumentation/yaml-fuer-
templavoila/mapping.html
Folie 46
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 auswhlen =>
Mit dem Button CREATE TO AND DS speichern Erstellung eines
Templates
Folie 47
Dedizierte Systeme Templa Voil 8. Schritt: Object Path fr
Dynamisierung zuweisen Unter Web den Menpunkt Liste whlen Unseren
Systemordner Templates anwhlen Klick auf das DS- Objekt und im
Kontextmen Bearbeiten auswhlen XML- Struktur anschauen!!!
Erstellung eines Templates
Folie 48
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?
Folie 49
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
Folie 50
Dedizierte Systeme Templa Voil 9. Schritt: Einbinden der
Stylsheetdatei Unter Web den Menpunkt Liste whlen Unseren
Systemordner Templates anwhlen Klick auf das TO-Objekt und im
Kontextmen TemplaVoil auswhlen In das Men Header Parts wechseln
Erstellung eines Templates
Folie 51
Dedizierte Systeme Templa Voil Hckchen 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
Folie 52
Dedizierte Systeme Templa Voil 10. Schritt: Zuweisung der
TemplaVoil- Datenstruktur an die Startseite Unter Web den Menpunkt
Seite whlen Unsere Rootpage Voilaroot anwhlen und bearbeiten In das
Men Erweitert wechseln Erstellung eines Templates
Folie 53
Dedizierte Systeme Templa Voil In dem Pulldown- Men von Seiten-
Datenstruktur die im SysOrdner Templates abgelegte TemplaVoil
Datenstruktur voila1 auswhlen Dem nun erscheinenden Feld Benutze
Vorlagendesign ebenfalls im Pulldown- Men voila1 zuweisen Analog
die Zuweisung fr Unterseiten- Seiten- Datenstruktur und Unterseiten
Benutze Vorlagendesign. Speichern! Erstellung eines Templates
Folie 54
Dedizierte Systeme Templa Voil 11. Schritt: Verwendung des
Headline- Bereichs Unter Web den Menpunkt Template whlen Bearbeiten
des Setup- Feldes Erstellung eines Templates
Folie 55
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
Folie 56
Dedizierte Systeme Templa Voil 12. Schritt: Einbinden des Mens
Unter Web den Menpunkt Template whlen Bearbeiten des Setup- Feldes
Erstellung eines Templates
Dedizierte Systeme Templa Voil 13. Schritt: Anlegen weiterer
Seiten Unter Web den Menpunkt Funktionen whlen Root- Seite
Voilaroot whlen und mehrere Seiten erzeugen Jeweils noch
Unterseiten analog erstellen Erstellung eines Templates
Folie 59
Dedizierte Systeme Templa Voil 14. Schritt: Inhalte einfgen
Unter Web den Menpunkt Seite whlen Beliebige Seite whlen und
entweder in der Option Inhalt oder Spalte_rechts Inhalt einfgen Ins
Frontend wechseln und sein Werk bestaunen Erstellung eines
Templates