Universität zu Köln SS 2009 IT Zertifikat der Philosophischen Fakultät

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á


Was ist TemplaVoilà?

• TemplaVoilà dient dem Mapping:

HTML-Designvorlage

Template Inhalte

Zusammenführen von Inhalt und Design

Dedizierte Systeme

Templa Voilá


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á


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á


VORHER:

<html>…

<body>…

<table>###MENUE###</table>

<table>###INHALT###</table>…

</body>

</html>

Dedizierte Systeme

Templa Voilá


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á


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á


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:


Dedizierte Systeme

Templa Voilá


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á


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á


• 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á


• 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á


• 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á


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á


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á


• 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.


• 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á


Schritt 3: Cache leeren

Der Cache ist ein Zwischenspeichersystem und sollte bei Veränderung der Konfiguration des Systems geleert werden.

Dedizierte Systeme

Templa Voilá


• 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á


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á


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


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


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


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


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


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


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!


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


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


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


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


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


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“


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


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!


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!


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!


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!


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


Dedizierte Systeme

Templa Voilá

Fragen?!Fragen?!??

??? ? ? ?? ?

Dedizierte Systeme

Templa Voilá

HerzlicheHerzlichen Dank!n Dank!

Documents

Universität zu Köln SS 2009 IT Zertifikat der Philosophischen Fakultät