TYPO3 / Version Manual für NTB Redakteure

Transkript

1 TYPO3 / Version Manual für NTB Redakteure Stand: Dezember 2011 / seer

2 Inhaltsverzeichnis Vorwort... 3 Login Backend... 3 Arbeitsoberfläche Die Modulleiste Die Navigationsleiste Die Detailansicht Neuer Datensatz einfügen Datensatz bearbeiten Elemente der Datensatzbearbeitung... 8 Text... 8 Bilder Bestehende Seite verschieben / kopieren Neue Seite hinzufügen Navigationstitel einfügen LINK auf weiterführende Seiten setzen Seiteninhalte mehrfach verwenden (z.b. Adressblock usw.) Powermail erstellen Eigene Notizen Tipps zur Gestaltung der Webseiten Hinweis: TYPO3 ist ein weit verbreitetes System, und auch wenn die offiziellen (deutschen) Dokumentationen meist etwas hinter dem aktuellen Stand der Software nachhinken gibt es viele Informationsquellen wie Fachbücher, Websites, Anwenderforen usw. Hier ein paar wichtige Quellen: Die deutsche TYPO3-Portalseite Die Original-Website 2

3 Vorwort Typo3 ist ein Online-Redaktionssystem und in der NTB seit 2009 im Einsatz. Als Arbeitsmittel (Client) wird ein üblicher Browser verwendet mit dem man im Internet surfen kann. Da das Content- Management-System auf einem Server im Internet liegt, können von jedem Ort mit Online-Zugang zeitunabhängig Veränderungen an der Web-Site vorgenommen werden. Das Konzept der NTB-Website sieht vor, dass der jeweilige Fachbereich (Schule, Institute, etc.) von den dafür bestimmten Typo3- Redakteuren bearbeitet wird. Dies beinhaltet z.b. das Anpassen und Aktualisieren von Text und Bild, den Upload von Videos oder das Erstellen von neuen Sites oder das bereitstellen eines Powermails. Dieses Konzept hat sich grundsätzlich bewährt, auch wenn die Qualität und Aktualität der Beiträge naturgemäss etwas unterschiedlich ist. Login Backend Um mit Typo3 Backend arbeiten zu können ist eine Anmeldung im System notwendig. Geben Sie in der Eingabezeile des Browsers die Web-Adresse ein: Geben Sie Ihren Benutzernamen ein (identisch mit dem Login ins NTB-Intranet) Geben Sie Ihr Passwort ein (identisch mit dem Login ins NTB-Intranet) 4. Wählen Sie die Oberfläche «Backend» 5. Anschliessen auf den Button «Anmelden» klicken

4 Arbeitsoberfläche Die Arbeitsoberfläche von Typo3 ist in drei Hauptbereiche unterteilt: Die Modulleiste - sie dient als oberste Ebene zur Auswahl des jeweiligen Modules, in welchen Sie arbeiten möchten. Die Navigationsleiste - sie zeigt die Struktur (den Seitenbaum) der Website (ähnlich dem Explorer). Die Detailansicht - stellt den eigentlichen Arbeitsbereich für den Nutzer dar. Hier werden die Inhalte der ausgewählten Site angepasst Auf der Oberfläche sind darüber hinaus immer präsent: 4. Abmelden - wenn Sie eine Arbeitssitzung beenden möchten, melden Sie sich mit dem Button ab. Typo3 speichert Ihre letzte Arbeitsposition und kehrt beim nächsten Einloggen an die Stelle zurück. 5. Benutzer - es wird immer der aktuell angemeldete Benutzer angezeigt. 6. Suchfunktion - über das Feld «Suchen» haben Sie die Möglichkeit schnell eine gewünschte Seite zur Bearbeitung aufzurufen. 4

5 4. Die Modulleiste Die Modulleiste dient zur Auswahl des jeweiligen Arbeitsbereiches. Für den Redakteur werden hier die Bereiche «Web» und «Medien» arbeitsrelevant sein. Der Screenshot zeigt Ihnen die, in der Modulleiste aufgeführten Modul-Bereiche: «Web», «Medien» und «Benutzerwerkezuge». Innerhalb des jeweiligen Modul-Bereiches werden die dazugehörigen Module angezeigt. In unserem Bespiel werden für den Modul-Bereich «Web» folgende Module angezeigt: Web «Seite» Web «Anzeigen» Web «Liste» Web «Info» 5. Die Navigationsleiste Haben Sie ein Modul (z.b. «Web -> Seite») durch einen Klick mit der linken Maustaste gewählt, steht Ihnen in der Navigationsleiste das dazugehörige Menü zu Verfügung. Im Modul-Bereich «Web» ist es der Seitenbaum der Anwendung. Für das Modul «Medien -> Datei» ist es ein Baum von Ordnern, in denen Bilder, PDF etc. abgelegt sind und für «Benutzerwerkzeuge -> Aufgaben» bekommen Sie ein weiteres Menü u.a. mit Ihren persönlichen Einstellungen. Da Redakteure am häufigsten das Modul «Web» verwenden, wird exemplarisch der Seitenbaum der Navigationsleiste vorgestellt. Die Ansicht gibt die Struktur der Website baumartig wieder. Ganz oben steht die Rootseite. Sie stellt die Hauptseite der Homepage dar. Von ihr zweigen sich die einzelnen Ebenen ab. In unserem Beispiel wäre «NTB Homepage» die Rootseite, «NTB Homepage» die erste Ebene, «Intranet» die zweite Ebene «Die NTB» die dritte Ebene usw. Einzelne Ebenen können Sie einblenden oder ausblenden Durch Klicken auf Seiten- oder Dateinamen erhalten Sie in der Detailansicht den dazugehörigen Bearbeitungmodus 5

6 6. Die Detailansicht Im Bereich der Detailansicht liegt das zentrale Arbeitsfeld von Typo Hier werden die Informationen und Bearbeitungsmöglichkeiten für das von Ihnen ausgewählten Element (z.b. einer Seite) abgebildet. In unserem Beispiel navigierten wir über das Modul «Web -> Seite» und der Auswahl der Seite «Die Schule» in der Navigationsliste. Im Bereich der Detailansicht erscheint der Seiteninhalt für diese Seite. Die Detailansicht gliedert sich in 4 Bereiche (Links, Normal, Rechts, Rand) von denen für die Bearbeitung einzig die 3 Bereiche Links, Normal und Rechts relevant sind. Die Spaltenaufteilung ist auch im Frontend der Website ersichtlich. Die Wahl der Spalte ist beim Anlegen eines neuen Datensatzes entscheidend. Im Kopf der Detailansicht und in den Bereichen sind verschiedene Symbolen erkennbar: => Neue Seite anlegen; mit einem Klick auf dieses Symbol oberhalb des Seitenbaumes können Sie einfach neue Seiten anlegen => Neuen Datensatz anlegen; mit einem Klick auf dieses Symbol legen Sie einen neuen Datensatz an => Bearbeiten; mit einem Klick auf das Bleistiftsymbol können bestehende Inhalte einfach bearbeitet werden => Seite verschieben; Mit einem Klick auf dieses Symbol lassen sich Seiten verschieben => Einblenden; Ein versteckter Inhalt erhält ein Glühbirnen-Symbol. Bei Klick wird der Inhalt wieder sichtbar gemacht. => Löschen; Mit einem Klick auf den Papierkorb können Inhalte und Seiten gelöscht werden. Diese gehen aber nie ganz verloren, sondern bleiben in der Datenbank erhalten 6

7 7. Neuer Datensatz einfügen Um einen neuen Datensatz hinzuzufügen wird zuerst definiert, in welchem Bereich (Links, Normal oder Rechts) die Seite angelegt werden soll. Anschliessend kann dieser mit Klick auf das Symbol erstellt werden Aus den Inhaltselementen muss ein Seiteninhaltstyp definiert werden. Dies kann ein Text, Aufzählungen, Tabellen etc. sein 4. Bei der Auswahl «Text» öffnet sich die Maske für die Texteingabe mit Überschrift und Fliesstext Datensatz bearbeiten Ein bestehender Datensatz kann mit dem Symbol bearbeitet werden Beim Anklicken öffnet sich der Seiteninhalt im Bearbeitungsmodus 7

8 9. Elemente der Datensatzbearbeitung 4. a-d 5. Text Unter Inhaltselemente «Typ» stehen verschiedene Inhaltstypen zur Verfügung von denen die Meisten selbsterklärend sind. In den meisten Fällen ist es sinnvoll «Text mit Bild» zu wählen, auch wenn im Moment noch kein Bild zur Verfügung steht. Dieses kann auch noch zu einem späteren Zeitpunkt eingefügt werden Bei der Spaltenauswahl wird bestimmt, ob der Datensatz in rechts, normal (in der Mitte) oder links angelegt werden soll Bei der Sprachenauswahl kann zwischen Standard (Deutsch) und Englisch ausgewählt werden 4. Unter «Überschrift» wird der Text eingegeben, welcher als Rubriken- / Zwischentitel (H2) im Inhaltsfenster erscheinen soll. Beim obersten Datensatz einer Seite ist es meist sinnvoll, den Titeltyp «verborgen» zu wählen, da sonst zweimal derselbe Titel aufgeführt ist. Der Titel soll auf jeden Fall ausgeblendet werden, wenn der Rubrikentitel identisch ist mit dem Seitentitel 5. Für die Textbearbeitung den Reiter «Text» anklicken und im Editor den gewünschten Text erstellen. Normalerweise lassen sich die Texte auch sehr gut aus anderen Websites oder Textprogrammen (Word usw.) kopieren und einfügen. Einzig die Formatierung muss manuell angepasst werden: a) Normaler Fliesstext sollte als «Absatz» formatiert werde b) Manuelle Zeilenumbrüche sind sofern nicht zwingend und sinnvoll zu entfernen, da die Zeilenumbrüche je nach Browser unterschiedlich ausfallen c) Haupttitel mit «Überschrift 1» markieren und formatieren d) Untertitel mit «Überschrift 2» 8

9 Bilder Bilder lassen sich am einfachsten im Typ «Text und Bilder» integrieren. Im Register «Bilder» auf das Ordner-Symbol klicken und anschliessend ein Bild aus einem geeigneten Bilderverzeichnis (images) hochladen. Dokumente sind unter dem Ordner «Dokumente/pdf» zu finden Das Bild anschliessend unter «Beschriftung» mit einer Bildlegende versehen 4. Soll das Bild beim Anklicken vergrössert werden genügt es, die Option «Verhalten Bei Klick vergrössern» zu aktivieren 4. 9

10 Es ist nicht notwendig, das Bild zu verkleinern. Unter «Erscheinungsbild» können die Bilder mit der Angabe der Bildmasse automatisch skaliert werden. Die Breite der Bilder soll immer durch 100 teilbar sein. 6. Die Bildausrichtung bietet die Möglichkeit das Bild entsprechend zu positionieren Für eine optimale Bilddarstellung sollten folgende Punkte geprüft werden: Ist das Bild scharf, kontraststark? Ist das Bild prägnant (viele Bilder gewinnen durch eine Ausschnittvergrösserung)? 10

11 10. Bestehende Seite verschieben / kopieren Die Ansicht «Liste» zeigt in der Detailansicht einen Überblick der Seiten-Hierarchie Die Seiten können mit drei unterschiedlichen Methoden verschoben und / oder auch kopiert werden: a) Durch Anklicken des Buttons (Seite verschieben) oder (Seite kopieren) b) Durch Auswählen der gewünschten Seite in der Navigationsleiste mit der linken Maustaste, Taste gedrückt halten und Datei an gewünschte Position ziehen c) Ein Klick mit der rechten Maustaste zeigt eine breite Palette von Möglichkeiten auf 1 Neue Seite hinzufügen Eine neue Seite wird in der Navigationsliste mit Klick auf das Symbol (Neue Seite anlegen) erstellt. Dann das Seitensymbol links unten anwählen und mit gedrückter Maustaste im Seitenbaum an die Position ziehen, an welcher eine neue Seite erstellt werden soll Die neue Seite trägt standardmässig den Namen «Standard-Titel«und ist mit einem roten Einbahn»- Symbol gekennzeichnet. Die Seite ist jetzt noch leer und ausgeblendet (deshalb dieses rote Symbol) 4. Doppelklicken auf dieses Symbol öffnet sich ein Bearbeitungsfenster in dem ganz rechts die neue ID-Nummer angezeigt wird 5. Nun kann ein neuer Datensatz eingefügt werden -> siehe Beschreibung «Neuer Datensatz einfügen»

12 1 Navigationstitel einfügen /5. 4. «Standard-Titel» mit rechter Maustaste anklicken und aus dem Drop-Down das Symbol Bearbeiten auswählen; in der Detailansicht öffnet sich die Bearbeitungsmaske Die Benennung im Seitentitel ist für die Platzierung in Google Suchresultaten extrem wichtig. Der Titel soll deshalb aussagekräftig sein auch wenn die Seite aus dem Kontext gerissen wird. Also z.b. «Weiterbildung Optik Master» statt nur «Weiterbildung» oder «Optik» Unter «Alternativer Navigationstitel» kann dann der Seitentitel eingegeben werden, der in der Navigation erscheinen soll. Dies ist sinnvoll, wenn der Seitentitel, aufgrund der Google-Vorteile, zu lang ist 4. Einen Untertitel nur eingeben, falls notwendig 5. Die Einstellungen lassen sich jederzeit durch das Symbol Bearbeiten anpassen und verändern 12

13 1 LINK auf weiterführende Seiten setzen 4. Gewünschten Linktext in Dokument platzieren z.b. «weiter» Text anklicken und Funktion «Link setzen» aufrufen Im Register «Seite» wenn gewünscht den Stil auf «internal-link-symbol» setzten; dann die aktuelle Seite anwählen und den orangen Pfeil rechts vom Seitentitel anklicken 4. Es öffnet sich eine Übersicht der vorhandenen Haupttitel (mit H1 formatiert). Den gewünschten Titel als Ziel für den Link auswählen 14. Seiteninhalte mehrfach verwenden (z.b. Adressblock usw.) Einer der Vorteile von Typo3 ist es, dass Inhalte mehrfach verwendet und nur noch einmal verwaltet werden müssen. So lassen sich z.b. in der rechten Spalte Kontaktadressen oder Listen mit Download- Dokumenten platzieren, welche nur in einer Version erstellt werden. An gewünschter Stelle (z.b. Spalte rechts) «neuen Datensatz» erstellen 13

14 Im Register «Allgemein» das Inhaltselement «Typ» anwählen und in der Rubrik SPEZIAL die Option «Datensatz einfügen» auswählen Es folgt der Hinweis Mit OK bestätigen 14

15 Im nun neu angezeigten Register «Datensatz einfügen» auf das kleine Ordnersymbol klicken 5. Zur Datei mit dem gewünschten Datensatz navigieren, in der rechten Fensterhälfte werden die vorhandenen Datensätze dieser Seite angezeigt. 6. Den gewünschten Datensatz mit Mausklick auswählen 15. Powermail erstellen Powermail eignet sich hervorragend dafür, um den Webbesucher ein individuelles Kontaktformular zur Verfügung zu stellen. Schnell und einfach können Eingabefelder und Auswahlboxen erstellt werden. Zudem lassen sich automatisch Antwortmails generieren, welche zur Bestätigung die gesendeten Daten erhalten. An gewünschter Stelle (meist unter Spalte «normal») einen neuen Datensatz» erstellen Als neues Inhaltselement «Powermail» bestimmen Seiteninhalt öffnet sich 15

16 4. Unter dem Register «Formulardaten» Ordner anwählen um die eingehenden s zu speichern. Der Ordner entspricht meist der Site, wo das Powermail angelegt wurde im exemplarischen Beispiel ist dies die Site «Standard-Titel». 5. Im Register «Felder» werden die Inhalte des Powermails definiert. Als erstes wird ein Fieldset (beinhaltet alle Felder) definiert. Dazu auf «Neu anlegende Formularseiten» klicken und einen Titel eingeben. 6. In unserem Beispiel nennen wir das Fieldset «Test». Innerhalb des Sets können nun die Formularfelder durch «Neu anlegen» definiert werden. Zur Bestimmung der Feldeigenschaften stehen eine Reihe Auswahlmöglichkeiten zur Verfügung. 7. Wurde das Feld mit einem Namen bezeichnet und entsprechend definiert, so speichern Sie die Eingabe. Das Ergebnis wird im Vorschaufenster angezeigt

17 8. Im Register «Absender» werden Informationen für das automatische Antwortmail gespeichert. 9. Und das Register «Empfänger» wird mit allen relevanten Daten versorgt, die für die Empfänger wichtig sind In der Endversion und im Frontend könnte ein Powermail analog dem Beispiel aussehen

18 16. Eigene Notizen 18

19 17. Tipps zum Gestalten der Webseiten oder Design follows function 1) Die Website der Fachhochschule und ihre Besucher Benutzerfreundlich aufgearbeitete Informationen und ein stimmiges Layout sind Voraussetzung dafür, dass die Besucher für die Inhalte der Website interessieren. Einige Stichpunkte zur Gestaltung der NTB Website: - Für einen Websitebesucher müssen Informationen einfach zu finden sein - Lange Wartezeiten bei grossen Datenmengen nerven den Besucher - Bilder sagen oft mehr als Tausend Worte - aber nur, wenn sie aussagekräftig sind. 2) Webgerechte Informationsaufbereitung Strukturieren Sie Ihre Dokumente. Überzeugen Sie sich, was Sie mit der Seite Aussagen wollen und machen Sie zur Hilfe mit Papier und Bleistift eine kurze Skizze. Wild verstreute Sprungmarken, Verweise, Bilder, Tabellen erschweren die Orientierung und verursachen Ratlosigkeit und Missmut auf Seiten der Besucher Denken Sie vernetzt. Das Internet bietet die Möglichkeit gedankliche Assoziationen zu visualisiere: Das Zauberwort heisst Hyperlink. Bevor Sie also sämtliche Informationen auf eine Seite packen wägen Sie ab, ob es nicht sinnvoller wäre, das entsprechende Schlagwort mit einer weiteren Information zu verknüpfen. Dasselbe gilt für Bilder und Downloads. Stapeln Sie immer schön tief. Bunte, blinkende, überladene Websites gibt es schon genug. Trotz der überwältigenden Gestaltungsmöglichkeiten sollte man sich in Minimalismus üben, die Netzhaut der Besucher schonen und die Ladeszeit der Seite nicht unnötig vergrössern. Vermeiden Sie Überflüssiges, Veraltetes und Wiederholungen. Das Internet ist ein schnelles Medium. Sie sollten zwar genügend Orientierungshilfen anbieten, aber die Informationen und Inhalte nicht an allen Ecken und Enden wiederholen. Ein klares Donßt: veraltete Hinweise auf die Aktualität. Lernen Sie Standards lieben. Die Orientierung an gewohnten Standards der Webseitengestaltung erleichtert den Besuchern die Orientierung. Optimieren Sie die Auffindbarkeit der Seiten in Suchmaschinen. Suchmaschinen lieben aussagekräftige Seitentitel. Es kann deshalb sinnvoll sein, statt EINER grossen Seite mit DREI Themen (und EINEM Seitentitel) die jeweiligen Themen einzeln als Seite aufzubereiten, versehen mit dem passenden Titel. Und eine Einstiegsseite zu gestalten, welche den Überblick über das Thema verschafft. Ein guter Titel lautet z.b. Weiterbildung Optik oder Weiterbildung Mechatronik oder Weiterbildung Master of Advanced Studies in Mechatronik anstelle von Mechatronik alleine. 3) Navigation Inhalte und Navigation sind logisch und thematisch gegliedert. Alle Inhalte sollen prinzipiell am Grundschema einer hierarchisch-selektiven, themenorientierten und einer linearen Logik folgenden Struktur festhalten. 19

20 4) Textgestaltung Schrifttyp und Farbe sind durch Typo3 weithingehend festgehalten. Wenn Sie im Rich Text Editor arbeiten ist eine kleine Auswahl an Schriftgestaltungsmöglichkeiten (wie fett, kursiv, Farbe) und Textstrukturierungsmöglichkeiten (wie Überschrift) möglich. Durch den sinnvollen Einsatz der vorgegebenen Gestaltungsmöglichkeiten können Sie dazu beitragen, eine gute Orientierung auf Ihren Seiten zu gewährleisten. Verwenden Sie für Titel die offiziellen und standardisierten Definitionen H1- H6. Dies bewirkt nicht nur eine einheitliche Darstellung, sondern bereitet die Struktur der Seite optimal für die Nutzung durch E-Book-Reader usw. vor. 20