universität zu köln ss 2009 it zertifikat der philosophischen fakultät
DESCRIPTION
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. – Gliederung – Einführung in Templa Voilá Installation Erstellung eines Templates. - PowerPoint PPT PresentationTRANSCRIPT
Dedizierte Systeme
Templa Voilá
Universität zu Köln SS 2009
IT Zertifikat der Philosophischen FakultätDozentin: Susanne Kurz M.A.
Referenten: Ulrike Henny, André Streicher
Dedizierte SystemeDedizierte Systeme
– – Templa Voilá –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á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
Template Inhalte
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:
<html>…
<body>…
<table>###MENUE###</table>
<table>###INHALT###</table>…
</body>
</html>
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á
InstallationInstallation
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 TemplatesErstellung eines Templates
Dedizierte Systeme
Templa Voilá
– – Erstellung eines Templates–Erstellung eines Templates–
1. 1. Schritt:Schritt:• Theoretischer Entwurf eines Design
• Gestaltung einer HTML- Designvorlage
=> Vorbereitete Designvorlage von der HKI- Seite herunterladen
Dedizierte Systeme
Templa Voilá
– – Erstellung eines Templates–Erstellung eines Templates–
2. 2. Schritt: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–Erstellung eines Templates–
Dedizierte Systeme
Templa Voilá
3. 3. Schritt: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–Erstellung eines Templates–
Dedizierte Systeme
Templa Voilá
4. 4. Schritt: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–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–Erstellung eines Templates–
Dedizierte Systeme
Templa Voilá
5. 5. Schritt: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–Erstellung eines Templates–
Dedizierte Systeme
Templa Voilá
6. 6. Schritt: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–Erstellung eines Templates–
Dedizierte Systeme
Templa Voilá
Das Default- Script folgendermaßen ändern:# Default PAGE object:
page = PAGEpage.typeNum = 0page.10 = USERpage.10.userFunc = tx_templavoila_pi1->main_page
….speichern nicht vergessen!
– – Erstellung eines Templates–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–Erstellung eines Templates–
Dedizierte Systeme
Templa Voilá
7. 7. Schritt: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–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: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–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–Erstellung eines Templates–
Dedizierte Systeme
Templa Voilá
7.2. Schritt: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–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 <div id=“nav“> hinzufügen
Editing Type bleibt bei„ TypoScript Object Path“
– – Erstellung eines Templates–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 <div id=“inhalt“>
Analog den Bereich field_spalte_rechts mit dem Container <div id=“spalte_rechts“> hinzufügen
– – Erstellung eines Templates–Erstellung eines Templates–
Dedizierte Systeme
Templa Voilá
– – Typen von Editing Types–Typen von Editing Types–
Eine kurze aber doch ausreichende Beschreibung für alle Editing Types
finden Sie auf:
http://www.t3net.de/dokumentation/yaml-fuer-templavoila/mapping.html
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?–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 <TypoScriptObjPath>
Bei field_headline tragen wir dort lib.headline ein und bei field_nav: lib_nav …speichern!
– – Erstellung eines Templates–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–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–Erstellung eines Templates–
Dedizierte Systeme
Templa Voilá
Eingabe folgender Zeilen in das Setup:
lib.headline = TEXTlib.headline.value = {page:title}lib.headline.insertData = 1lib.headline.wrap = <h1> | </h1>
….speichern!
– – Erstellung eines Templates–Erstellung eines Templates–
Dedizierte Systeme
Templa Voilá
Eingabe folgender Zeilen in das Setup:
lib.nav = HMENUlib.nav.1 = TMENUlib.nav.1 {expAll = 1wrap = <ul id="mainnav">|</ul>NO.wrapItemAndSub = <li>|<li>}lib.nav.2 = TMENUlib.nav.2 {expAll = 1wrap = <ul>|</ul>NO.wrapItemAndSub = <li>|<li>} …speichern!
Wichtig: obere Zeilenanordnung einhalten
– – Erstellung eines Templates–Erstellung eines Templates–
Dedizierte Systeme
Templa Voilá
Fragen?!Fragen?!??
??? ? ? ?? ?
Dedizierte Systeme
Templa Voilá
HerzlicheHerzlichen Dank!n Dank!