Dedizierte Systeme Templa Voilá Universität zu Köln SS 2009 IT Zertifikat der Philosophischen...

53
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 Dedizierte Systeme Templa Voilá – Templa Voilá –

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!