Transcript of Dedizierte Systeme Templa Voilá Universität zu Köln SS 2009 IT Zertifikat der Philosophischen...
- Folie 1
- 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
- Folie 8
- Dedizierte Systeme Templa Voil TemplaVoil - Einfhrung VORHER:
###MENUE### ###INHALT###
- Folie 9
- 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
- Folie 11
- Dedizierte Systeme Templa Voil TemplaVoil - Einfhrung
JETZT:
- Folie 12
- 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
- Folie 57
- 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
- Folie 58
- 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
- Folie 60
- Dedizierte Systeme Templa Voil Fragen?! ???????? ? ? ?
- Folie 61
- Dedizierte Systeme Templa Voil Herzlichen Dank!