1 / 53

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ät Dozentin: Susanne Kurz M.A. Referenten: Ulrike Henny, André Streicher. – Gliederung – Einführung in Templa Voilá Installation Erstellung eines Templates.

tazanna-chan
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. – Gliederung – • Einführung in Templa Voilá • Installation • Erstellung eines Templates

  3. Einführung in Templa Voilá

  4. Was ist TemplaVoilà? TemplaVoilà - Einführung • 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.“

  5. Was ist TemplaVoilà? HTML-Designvorlage Template Inhalte TemplaVoilà - Einführung • TemplaVoilà dient dem Mapping: Zusammenführen von Inhalt und Design

  6. Welche Vorteile hat TemplaVoilà? TemplaVoilà - Einführung • Ziel: Handhabung von Dokumentvorlagen vereinfachen • Flexiblere Seitenstrukturen erstellen • traditionelles „templating“ auf der Inhaltsebene integriert • Flexiblere Technik beim „templating“

  7. Was heißt das konkret? VORHER: TemplaVoilà - Einführung • spezielle Markierungen bei HTML-Designvorlagen notwendig • Subparts und Marker = Platzhalter für dynamische Inhalte • TypoScript-Befehle des Templates suchen nach den Platzhaltern

  8. VORHER: TemplaVoilà - Einführung <html>… <body>… <table>###MENUE###</table> <table>###INHALT###</table>… </body> </html>

  9. VORHER: TemplaVoilà - Einführung • Seitenaufbau und Ausgabe von Inhalten mit TypoScript definieren: hoher Aufwand • daher: mitgelieferte statische Templates • aber: geringe Flexibilität dieser Templates

  10. JETZT: TemplaVoilà - Einführung • 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

  11. JETZT: TemplaVoilà - Einführung

  12. TemplaVoilà - Einführung JETZT: • 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?

  13. TemplaVoilà - Einführung Wie wird TemplaVoilà installiert? Wie funktioniert TemplaVoilà?

  14. Installation

  15. TemplaVoilà - Installation Achtung: erhebliche Änderungen durch TemplaVoilà! Die Erweiterung möglichst bei einer frischen TYPO3-Installation vornehmen.

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

  17. 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)

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

  19. 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)"

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

  21. TemplaVoilà - Installation Schritt 2: Installation der Erweiterung TemplaVoilà TemplaVoilà dient dem Mapping (Einbinden von HTML-Dokumentvorlagen): Design und Inhalte werden so zusammengeführt.

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

  23. 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)” TemplaVoilà ist nun installiert. Zum Abschluss folgt noch ein kleiner Schritt.

  24. TemplaVoilà - Installation Schritt 3: Cache leeren Der Cache ist ein Zwischenspeichersystem und sollte bei Veränderung der Konfiguration des Systems geleert werden.

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

  26. TemplaVoilà - Installation • Resultat: • Ein erweitertes Backendmenü! • Ein eigenes Modul TemplaVoilà • Das Modul Seite ist zu TemplaVoilà-Seite geworden

  27. Erstellung eines Templates

  28. – Erstellung eines Templates– 1. Schritt: • Theoretischer Entwurf eines Design • Gestaltung einer HTML- Designvorlage => Vorbereitete Designvorlage von der HKI- Seite herunterladen

  29. – Erstellung eines Templates– 2. 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 -

  30. – Erstellung eines Templates– • 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

  31. – Erstellung eines Templates– 3. 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

  32. – Erstellung eines Templates– 4. 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

  33. – Erstellung eines Templates– • 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

  34. – Erstellung eines Templates– 5. 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

  35. – Erstellung eines Templates– 6. 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

  36. – Erstellung eines Templates– • 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!

  37. – Erstellung eines Templates– 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

  38. – Erstellung eines Templates– 7. 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

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

  40. – Erstellung eines Templates– 7.1. Schritt: • Weitere Bereiche erstellen • Im Eingabefeld unter der ROOT- Definition einen neuen Bezeichner Namens: „field_headline“ eingeben und auf ADD klicken

  41. – Erstellung eines Templates– • 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

  42. – Erstellung eines Templates– 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

  43. – Erstellung eines Templates– • 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“

  44. – Erstellung eines Templates– • 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

  45. – 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

  46. – Was ist XML?– • 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

  47. – Erstellung eines Templates– • 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!

  48. – Erstellung eines Templates– • 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!

  49. – Erstellung eines Templates– • 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!

  50. – Erstellung eines Templates– • Eingabe folgender Zeilen in das Setup: lib.headline = TEXT lib.headline.value = {page:title} lib.headline.insertData = 1 lib.headline.wrap = <h1> | </h1> ….speichern!

More Related