Schwerpunkte des Handouts sind die Einführung in das TYPO3 System und die für die Fachhochschule Potsdam entwickelten Zusatzfunktionen.

Transkript

1 Schwerpunkte des Handouts sind die Einführung in das TYPO3 System und die für die Fachhochschule Potsdam entwickelten Zusatzfunktionen. Themenschwerpunkte: Einführung in TYPO3 Backend und Frontend Aufbau des Backend: Navigation, Seitenbaum, Editorbereich Anlegen der vers. Seitentypen Anlegen von Inhaltselementen Konfigurieren von Seiten Designspezifische Besonderheiten und Elemente Standard Inhaltselemente Angepasste u. vordefinierte Inhaltselemente Plug-Ins Module und Pool-Konzept 1

2 1.1. BACKEND / FRONTEND Aufbau Backend Backendnavigation Seitenbaum Editorbereich Eingeschränkte Sichten aufgrund der Zugriffsbeschränkungen und Rollen der FH Potsdam ERSTELLEN VON Seiten Ordnern Spacern Verweisen Inhaltselementen KONFIGURIEREN VON SEITEN Seitenlayout Kopfbilder & Banderole Metadaten Navigation (Flyout- & Content-Navigation) ARBEITEN MIT INHALTSELEMENTEN Standard Inhaltselemente Rich Text Editor Reduzierte Inhaltselemente MEHRFACHE INHALTSELEMENTE Mehrspaltigkeit (2 Spalten) Tabulator Akkordeon BILDERGALERIE VIDEOS POOL-INHALTE AM BEISPIEL VON EVENTS Events Datensätze im Pool anlegen Plug-Ins für die Ausgabe anlegen und konfigurieren

3 Als Backend bezeichnet man das TYPO3 System, in dem Sie als Redakteur arbeiten. Das Frontend bezeichnet die Ansicht der Website, auf der die Änderungen erscheinen. Daher sollten beim Arbeiten immer zwei Tabs im Browser geöffnet sein: Die Backend- & die Frontend-Ansicht Ihrer Website. So können Sie einfach und schnell sehen und nachvollziehen, was Ihre eingefügten Änderungen für eine Auswirkung auf der Website haben. In TYPO3 arbeiten Sie von links nach rechts. Dies bedeutet: Sie legen zuerst fest, was Sie bearbeiten möchten. Sie definieren anschließend, in welchem Bereich der Website Sie arbeiten möchten. Die inhaltliche Arbeit erfolgt erst dann im Editor-Bereich. 3

4 Folgende Auswahlmöglichkeiten stehen Ihnen zur Verfügung: In dieser Ansicht arbeiten Sie als Redakteur am meisten. Sie sehen nach Auswahl einer Seite im Seitenbaum die auf dieser Seite angelegten Inhalte im Editor-Bereich. Die Darstellung im Backend orientiert sich dabei strukturell an der Ausgabe im Frontend. Hier sehen Sie eine Übersicht aller Inhaltselemente, die sich auf der ausgewählten Seite befinden. Dies wird vor allem bei der Bearbeitung von Modulen (z.b. News-Modul) und den so genannten Pool-Inhalten genutzt. Hier können Sie außerdem Elemente kopieren, einfügen oder auch mehrere Elemente gleichzeitig bearbeiten. Hier laden Sie Bilder und Dokumente hoch, die auf der Website zum Einsatz kommen sollen. Achten Sie bitte hierbei von Anfang an auf eine sinnvolle Sortierung. Die Ordner sollten nach Ihrem jeweiligen Bereich benannt werden. Wenn Sie einen Ordner in der Dateiliste erstellen oder Bilder und PDF's erstellen und anschließend in die Dateiliste hochladen, ist die Schreibweise für Dateinamen zu beachten: Erlaubt ist: "abcdefghijklmnopqrstuvwxyz_ ". Nicht erlaubt sind: Sonderzeichen und Leerzeichen in Dateinamen. Verwenden Sie möglichst auch keine Großbuchstaben und reduzieren Sie die Länge auf maximal 25 Zeichen. Ändern Sie hier bei Bedarf die Sprache des Backend, Ihr Zugangspasswort und weitere Benutzereinstellungen, die nur für Ihren persönlichen TYPO3-Zugang greifen. Der Seitenbaum bildet die Seiten Ihrer Website ab. Ein Klick auf das Icon im Seitenbaum öffnet das Kontextmenü und ruft die Funktionen auf, die Sie mit der jeweiligen Seite oder dem Ordner ausführen möchten. Die Funktionen aus dem Kontextmenü finden Sie auch an anderer Stelle wieder. Das Kontextmenü ist ein sehr schnelles Werkzeug, mit dem Sie zum Beispiel eine Seite mit einem Mausklick ausblenden können. Sie können hier Seiten neu erstellen, löschen, kopieren und ausschneiden. Nach dem Auswählen einer Seite bzw. eines Ordners im Seitenbaum, können Sie auf dieser Seite bzw. diesem Ordner Inhaltselemente erstellen oder bearbeiten. Aufgrund der hohen Informationsdichte, den unterschiedlichen Zuständigkeiten auf der Website und auch zur Verringerung der Komplexität gibt es verschiedene Redaktionsrollen und damit verbundene Zugriffsbeschränkungen. Dies kann sich in allen vorgestellten Backend-Bereichen auswirken, so dass es Redakteure geben wird, die im Seitenbaum ausschließlich Zugriff auf die eigene Fachbereichsseite haben. Insbesondere bei der inhaltlichen Pflege der Website wird dieser Umstand deutlich, so dass entsprechend der Rolle nur bestimmte Funktionen zur Verfügung stehen und nur ausgewählte Inhaltselemente auf der Website eingebunden werden können. 4

5 Für das Erstellen von Seiten oder Inhaltselementen steht Ihnen der jeweilige Backend-Bereich zur Verfügung. So können Sie z.b. über das Kontextmenü im Seitenbaum (vgl ) neue Seiten und Ordner erstellen. Im Editorbereich (vgl ) können Sie wiederum Inhaltselemente anlegen. Mittels Kontextmenü oder den ausklappbaren Auswahlbuttons oberhalb des Seitenbaums können Seiten, Ordner, Spacer und Verweise erstellt werden. Was das im Detail bedeutet, beschreiben die folgenden Abschnitte. Seiten werden zur Darstellung von Inhalten auf der Website verwendet. Sie werden in der Navigation der Website ausgegeben, wie z.b. der Flyout-Navigation, der Content-Navigation und in der Breadcrumb. Sie haben somit strukturelle Aufgaben für die Organisation der Inhalte auf der Website und dienen natürlich auch der Darstellung von Informationen. Jede erstellte Seite erhält eine im System einmalige ID und kann über diese gesucht und identifiziert werden. Die ID der Seite wird Ihnen angezeigt, wenn Sie mit dem Cursor über das Symbol der Seite im Seitenbaum gehen ohne darauf zu klicken. Dies kann sowohl bei der redaktionellen Arbeit im Team, als auch bei Supportanfragen sehr hilfreich sein, um bestimmte Seiten sofort ausfindig zu machen. Mittels Klick auf das Filtersymbol (oberhalb des Seitenbaums) öffnet sich ein Suchfeld, in welchem nach einer Seiten-ID und auch einem Seitentitel gesucht werden kann. Im Gegensatz zu Seiten dienen Ordner nicht unmittelbar der Ausgabe von Inhalten sondern nur als Speicher für selbige. Dies kann große Vorteile bei der Nutzung von Inhalten an mehreren Stellen auf der Website haben. So kann ein Inhaltselement in einem Ordner abgelegt werden und auf vielen verschiedenen Seiten auf der Website eingebunden werden. Gibt es nun Änderungen an diesem Inhaltselement, so werden diese zentral im Ordner getätigt, wirken sich aber auf allen Seiten aus, wo das Inhaltselement eingebunden wurde. Dieses Konzept heißt Pool-Inhalte und wird in der täglichen Arbeit mit TYPO3 eine große Rolle spielen. 5

6 Spacer sind Elemente, die ausschließlich für die Flyout-Navigation und die Footer-Navigation verwendet werden. Sie dienen der zusätzlichen Strukturierung der Navigation und enthalten keinerlei Inhaltselemente. Verweise ermöglichen die Weiterleitung von einer Seite auf eine andere. Sie werden z.b. in der Footer-Navigation verwendet, um von den im Footer angelegten Seiten direkt in die entsprechenden Fachbereichsseiten zu springen. Dies dient vor allem der Vermeidung von redundanten Inhalten und der Vereinfachung der redaktionellen Arbeit. Inhaltselemente werden nicht über den Seitenbaum, sondern im Editorbereich erstellt und bearbeitet. Zunächst wird im Seitenbaum aber die Seite bzw. der Ordner ausgewählt, wo Änderungen durchgeführt werden sollen. Abhängig davon, ob wir uns in der Backend-Navigation in der Seite -Ansicht oder der Liste -Ansicht befinden, stehen uns im Editorbereich Buttons bereit, um neue Inhaltselemente anzulegen. Befinden wir uns in der Seite - Ansicht, so spiegelt der Editorbereich die Ausgabe auf der Website wieder. So finden wir die zur Verfügung stehenden Spalten und falls bereits vorhanden, auch die in den Spalten angelegten Inhaltselemente. Über die im Screenshot markierten Buttons können neue Inhaltselemente an gewünschter Position angelegt werden. 6

7 Für jede Seite gibt es eine Reihe von Einstellungen, die entweder das gesamte Layout der Seite verändern können, nur den Kopfbereich anders darstellen oder die Ausgabe der jeweiligen Seite in der Navigation beeinflussen. Auf diese Besonderheiten wird in den folgenden Abschnitten konkret eingegangen. Die Einstellungen lassen sich verändern, in dem die Seite (z.b. mittels Kontextmenü im Seitenbaum) bearbeitet wird. Im Reiter Erscheinungsbild kann das Layout für die aktuelle Seite und bei Bedarf auch für die darunter liegenden Seiten verändert werden. Dabei stehen die folgenden Layouts zur Verfügung: Die Startseite hat mit der zusätzlichen Teaser-Spalte ein besonderes Layout. Auf Unterseiten kann dieses Layout nicht verwendet werden. Die Seite wird mit einem blauen Navigationsband und einer weißen Banderole unterhalb des Kopfbildes ausgegeben. Die Seite wird mit einem weißen Navigationsband und einer blauen Banderole über dem Kopfbild ausgegeben. Diese Layouts entsprechen den zuvor beschrieben Darstellungen jedoch ohne Marginalspalte. Verwendet werden diese Layouts für Seiten der Projekt-Datenbank. Auf solchen Seiten befinden sich in der Marginalspalte projektbezogene Informationen, die vollautomatisch ausgegeben werden. Für den User ist hier also kein Unterschied sichtbar aber für die Ausgabe der Projekt-Datenbank ist es notwendig dieses Layout zu verwenden. Auf jeder Seite wird ein Kopfbild dargestellt, welches über die Spalte Kopfbild im Editorbereich gepflegt werden kann. Dabei vererben sich dort eingebundene Bilder auch auf alle vorhandene Unterseiten, so dass nicht auf jeder Seite explizit ein eingebunden werden muss, sondern automatisch das der höheren Ebene verwendet wird, sollte in der Spalte Kopfbild kein Bild hinterlegt sein. Abhängig von der Navigationsebene gibt es Besonderheiten bei der Höhe den Kopfbildern. So wird in den Navigationsebenen 1 3 ein Headerbild mit den Maßen 865 Pixeln x 190 Pixeln ausgegeben. Ab der 4. Ebene beträgt die Höhe des Headerbildes nur noch 100 Pixel. Dieses Designkonzept verlangt bei der Pflege von bestehenden Seiten bzw. beim Anlegen von neuen Seiten, das ein passendes Bild eingebunden wird. Alternativ kann im Reiter Seiten Konfiguration mittels der Option großes Headerbild (Höhe: 190px) auch auf tieferen Ebenen ein Bild mit 190 Pixel Höhe verwendet werden. Die Banderole über bzw. unterhalb des Kopfbildes wird ebenfalls in den Seiteneigenschaften gepflegt. Im Reiter Metadaten kann im Feld Inhaltsangabe der Text gepflegt werden. Auch hier wird der Text auf Unterseiten vererbt, so dass die Banderole nicht auf jeder Seite neu eingegeben werden muss. Im Reiter Metadaten kann wie eben beschrieben der Text für die Banderole definiert werden. Daneben gibt es Möglichkeiten, die jeweilige Seite für Suchmaschinen zu optimieren. Hier angegebene Informationen erscheinen nicht unmittelbar auf der Website, sondern sind nur im Quellcode hinterlegt und für Suchmaschinen lesbar. 7

8 Hier kann ein bis zu 70 Zeichen langer aussagekräftiger Titel für die aktuelle Seite vergeben werden. Hier können kommagetrennt Schlagworte eingetragen werden, die sich mit dem Inhalt der Seite decken sollten. Ermöglicht eine maximal 150 Zeichen lange Beschreibung für die aktuelle Seite. Hier sollte möglichst kurz und prägnant der Inhalt zusammengefasst werden. Die Flyout-Navigation wird automatisch aus den sichtbaren Seiten erzeugt. Ist eine Seite deaktiviert oder die Option Im Menüs verbergen gesetzt, so wird diese Seite in keiner Navigation angezeigt. In der Content-Navigation werden die Ebenen zwei, drei und vier der Website dargestellt. Um dieses Verhalten für Seiten zu beeinflussen die tiefer in der Navigationsstruktur liegen, gibt es im Reiter Seiten Konfiguration die Option Landingpage. Ist die Option aktiviert, werden von der aktuellen Seite ausgehend bis zu drei Unterebenen in der Content-Navigation angezeigt. Darüber hinaus kann die gesamte Content-Navigation im Reiter Seiten Konfiguration versteckt werden. Diese Option kann z.b. dann genutzt werden, wenn die Unterseiten nur über die im Content-Bereich verlinkten Inhalte erreichbar sein sollen und die Aufmerksamkeit des Users direkt auf den Inhaltsbereich gelenkt werden soll. Da in der Content-Navigation der horizontal verfügbare Platz stark begrenzt ist, wurde zum einen die Option geschaffen eine Seite komplett in der Content-Navigation zu verbergen (Reiter Seiten Konfiguration Seite nicht in Content-Navigation ausgeben ). Zusätzlich kann bei Bedarf ein separater Seitentitel nur für die Content- Navigation definiert werden (Reiter Allgemein Kurztitel für Content-Navigation ). Auf diese Weise können aussagekräftige Titel in der Flyout-Navigation vergeben werden, in der Content-Navigation kann dagegen auf Abkürzungen und Kurztitel zurückgegriffen werden. Das Anlegen von Inhaltselementen wurde bereits beschrieben (vgl ). Nachfolgend gehen wir auf die Arbeit mit solchen Inhaltselementen ein, welche Typen zur Verfügung stehen und wann auf welche zurückgegriffen werden sollte. Zu den von TYPO3 bereitgestellten Inhaltselementen gehören Text, Text und Bild, nur Bild und Überschrift. Bereits beim Anlegen eines Inhaltselements entscheidet Sie sich für einen der Typen. Daneben gibt es die Möglichkeit ein Inhaltselement vom Typ Inhaltselement einfügen anzulegen. Dieser Typ wird für das in Kapitel beschriebene Konzept der Pool-Inhalte verwendet. Zentral abgelegte Inhaltselemente können also mittels Inhaltselement einfügen auf eine Seite eingebunden werden. Der Rich-Text-Editor (RTE) ist das Schreibprogramm von TYPO3. Hier können Sie Ihre Texte eingeben und formatieren. Auf der Webseite werden die Texte so ausgegeben, wie sie im RTE angezeigt werden. HTML-Kenntnisse sind nicht notwendig. Über den Schalter rechts neben dem Eingabefeld können Sie den RTE in der vergrößerten 8

9 Darstellung nutzen: Die anderen Reiter des Elements werden ausgeblendet und der RTE erscheint in voller Seitenbreite. Über "Dokument Speichern und Schließen" gelangen Sie wieder in den ursprünglichen Modus. Hinweis: Wenn Sie Text aus einem Worddokument oder dem Internet verwenden wollen, muss als Zwischenschritt ein Editor (Zu finden auf Windows Computern unter Alle Programme >> Zubehör >> Editor) oder das Zaubertool (Besensymbol im RTE) verwendet werden. Sonst übernehmen Sie ungewollt Formatierungen und bei der Ausgabe treten Fehler auf. Mit den reduzierten Inhaltselementen stehen drei weitere Elemente zur Verfügung, bei denen die Auswahlmöglichkeiten stark eingeschränkt sind. Dies hat den Vorteil, dass z.b. für die Fachbereichsredaktion die Komplexität von oft wiederkehrenden Inhaltselementen stark reduziert wurde. So werden Fehlerquellen vermieden und die redaktionelle Arbeit beschleunigt. Ähnlich wie im beim Inhaltselement Text und Bild steht beim reduzierten Inhaltselement Teaser der RTE zur Verfügung, es können Bilder hinzugefügt und ein Link eingetragen werden. Allerdings sind alle nicht zwingend notwendigen Felder ausgeblendet und bereits vordefiniert, so dass tatsächlich nur vier Felder ausgefüllt werden müssen. Der eingetragene Link wird z.b. automatisch auf das Bild, die Überschrift und einen Weiterlesen -Link angewandt. Die Positionierung des Bildes muss nicht angegeben werden und auch die Bildgröße ist für eine einheitliche Ausgabe vordefiniert. Der folgende Screenshot zeigt zwei Inhaltselemente vom Typ Teaser. Diese Darstellung hätte auch mit dem Inhaltselement Text und Bild erzeugt werden können, hier wäre der der redaktionelle Aufwand aber entsprechend höher gewesen. 9

10 Um die häufig wiederkehrenden Linklisten zu erstellen, steht das Inhaltselement vom Typ Link Liste bzw. Link Liste (Aufklappelement) bereit. Auch hier wurden alle unnötigen Felder entfernt und der notwendige redaktionelle Aufwand stark vereinfacht. Neben den von TYPO3 bereitgestellten und reduzierten Inhaltselementen gibt es noch weitere Elemente für ganz besondere Anwendungsfälle. Diese können Sie beim Anlegen eines neuen Inhaltselements im Reiter Plug-Ins aufrufen. Um Texte innerhalb der Hauptspalte noch weiter zu strukturieren, können Sie das Plug-In Mehrfache Inhaltselemente nutzen. Dabei können Sie nach dem Anlegen des Plug-Ins wählen, ob Sie die zu strukturierenden Inhaltselemente unmittelbar im Plug-In anlegen möchten (Option View Inline content ) oder ob Sie auf einen 10

11 zentralen Pool-Ordner (Option View Contents ) zugreifen möchten. Anschließend wählen Sie die Strukturierungsart (Option Anzeige 2 Spalten, Tabulator oder Akkordeon ). 11

12 Für eine größere Anzahl von Bildern bietet es sich an eine eigene Galerie einzubinden. Dies ist über das Plug-In Galleria für TYPO3 möglich. Nach dem Anlegen des Plug-Ins muss nur noch ein Ordner in der Dateiliste angegeben und die entsprechen Beschreibungstexte für die einzelnen Bilder eingetragen werden. Die Bilder sollten also bereits vor dem Anlegen des Galerie Plug-Ins in einem extra Ordner in der Dateiliste abgelegt werden. Auch für Videos steht ein besonderes Plug-In JW Player - Video bereit. Hiermit können sowohl einzelne Videos als auch Video-Playlisten erstellt werden. Hierzu muss wie gewohnt zunächst das Plug-In angelegt werden. Im Plug-In können Sie dann ein oder mehrere Movie Items erstellen. Anschließend muss die Videodatei hinzugefügt bzw. ein Link zur Datei eingefügt werden. Es besteht die Möglichkeit einen Beschreibungstext für das Video zu hinterlegen und ein Preview-Bild zuzuordnen. Neben den Plug-Ins stehen noch Module zur Verfügung, die einzig für die FH Potsdam entwickelt bzw. zugeschnitten wurden. Diese Module nutzen das bereits beschriebene Pool-Konzept und sorgen für eine effektive Arbeit mit dem System und die Vermeidung von redundanten Inhalten. Anhand des Event-Moduls werden wir in den folgenden Abschnitten die prinzipielle Arbeit mit den Modulen vorstellen. Das Vorgehen bei anderen Modulen wie der Projekt- und Personendatenbank oder den Neuigkeiten ist dabei sehr ähnlich. Grundsätzlich werden in einem zentralen Ordner die Datensätze z.b. ein einzelnes Event abgelegt und mit bestimmten Informationen bestückt. Die Ausgabe solcher Datensätze erfolgt dann über ein entsprechendes Plug-In auf der gewünschten Seite. Die Konfiguration des Plug-Ins bestimmt, welche Events auf der Website ausgegeben werden. Zum Anlegen eines Event-Datensatzes wechseln wir in der Backend-Navigation in die Liste -Ansicht. Im Seitenbaum wird der gewünschte Ordner ausgewählt, in dem der Event-Datensatz gespeichert werden soll. Für Events sind bereits Ordner für alle Fachbereiche und ein Ordner für die fachbereichsübergreifenden Events angelegt. Im Editorbereich kann dann wie gewohnt ein neues Element angelegt werden. In unserem Fall ist dies ein Datensatz vom Typ Events. 12

13 Beim Anlegen eines Events ist darauf zu achten, dass eine passende Event-Kategorie vergeben wird. Diese ist bei der Ausgabe durch das Plug-In wieder relevant. Weiterhin wird ein Titel und Datum vergeben und der Ort des Events definiert. Es kann ein ausführlicher Beschreibungstext mit den relevanten Informationen hinterlegt und bei Bedarf eine Kontaktperson zugeordnet werden. Nach dem Speichern ist der Event-Datensatz angelegt, erscheint aber nur auf der Website bei entsprechender Konfiguration der Plug-Ins. Sollen Events auf einer Seite ausgegeben werden, so geschieht das über das Plug-In vom Typ Events. Im Plugin wird sowohl die Darstellung definiert, die Reihenfolge der ausgegebenen Events und die vom System zu berücksichtigenden Event-Kategorien. Im Reiter Other Settings wird konfiguriert, welche Ordner bei der Ausgabe nach passenden Events durchsucht werden sollen. Bei den Modulen ist weiterhin zu beachten, dass es häufig eine Listenansicht für die übersichtliche Ausgabe vieler Datensätze gibt. Möchte der User sich nun ein Event oder eine Neuigkeit im Detail ansehen, so kann dieser i.d.r. auf einen Weiterlesen -Link klicken und gelangt so zur Einzelansicht. Für diese Einzelansicht wird ebenfalls ein Plug-In benötigt. Es muss als ggf. eine neue Seite erstellt und auf In Menü verbergen gesetzt werden und ein entsprechendes Plug-In für die Detailansicht konfiguriert werden. Detailseiten werden immer im Menü verborgen, da diese nicht in der Navigation auftauchen sollen und nur direkt über eine Listenansicht aufgerufen werden sollen. 13

14 Backend: Frontend: Seite: Seiteninhalt: Modul: Editor (RTE): Verwaltungsoberfläche = TYPO3 Website (Useransicht) Konzept zur Inhaltsumfassung Element zur Darstellung Bearbeitungsmöglichkeit Word-ähnliche Oberfläche zur Textauszeichnung Schnellnavigation zur Seite mit globaler Suche (Lupe oben rechts) Trichterfunktion im Seitenbaum (oben links) Lesezeichen-Funktion (Aufruf mit kleiner Stern oben rechts) Seitenbaumdarstellung: Minimieren, Einklappen, Teilbereichsfunktionen mit Rechtsklick auf Seitensymbol Vergrößern des Editor-Bereiches Benennung der Inhaltselemente mit Überschriften Von Beginn an: Logische Sortierung der Dateiliste (nach Bereichen/Themen) Ansehen und überprüfen der angelegten Inhalte im Frontend Kein Kopieren aus Word Editor oder Zaubertool als Zwischenschritt benutzen Mehrere Inhaltselemente erstellen (dadurch mehr Auswahl bei der Gestaltung) Zwischenlinien bei unterschiedlichen Themen verwenden Pool-Elemente verwenden TYPO3-Handbuch für Redakteure Verlag: O'Reilly; Auflage: 3. Auflage. (4. November 2011) Sprache: Deutsch ISBN-10: ISBN-13: