Dokumentation Typo3 der Jugendpresse Deutschland Bearbeitungsstand: 31.08.2009 Inhaltsverzeichnis Dokumentation Typo3 der Jugendpresse Deutschland... 1 1. Einführung: Grundsätzliches zu Typo3... 2 2. Termine auf jp.de veröffentlichen... 4 3. Eine neue Seite anlegen... 7 4. Eine leere Seite füllen: Der Teaser... 8 5. Eine leere Seite füllen: Text mit Bild... 11 6. Fotos hochladen... 12
1. Einführung: Grundsätzliches zu Typo3 Typo3 ist ein sogenanntes Content-Management-System, kurz CMS. Diese Software, die auf den Servern der Jugendpresse läuft, kann mit jedem modernen Browser bedient werden. Man unterscheidet zwei sichtbare Ebenen von Typo3: Das Frontend und das Backend. Mit Frontend ist die jp.de-webseite gemeint, wie sie für den normalen Internetnutzer sichtbar ist. Das Backend ist die eigentliche Software im Hintergrund, die das Aussehen und die Inhalte des Frontends verwaltet. Damit sich das Frontend, sprich die eigentliche jp.de-seite, verändert, müssen wir die Änderungen im Backend vornehmen. Dafür musst du dich erst einmal anmelden unter: http://neu.jugendpresse.de/typo3 Danach kann es schon losgehen mit der Arbeit. Ohne ins Detail zu gehen, solltest du aber etwas grob technisches Wissen über die Prinzipien von Typo3 besitzen. Außerdem klären wir ein paar Begriffe, die nachfolgend u.a. verwendet werden. Die Funktion der Seitennavigation Abbildung 1: [1a,1b] sollte klar sein. Der Seiteninhalt Abbildung 1:[ 2] besteht aus einer Überschrift und einem Fließtext. Beides können noch durch einen Teaser oder durch Bilder ergänz werden. Der Teaser ist der erste Absatz, der besonders formatiert ist, damit er den Besucher schnell in den Inhalt der Seite einführt. Die rechte Spalte Abbildung 1: [3] beinhaltet zumeist Termine und das Newsletterformular. Um eine neue Seite zu gestalten ist der folgende Grundsatz wichtig: Nur der Seiteninhalt muss erstellt werden. Alles andere, wie die recht Spalte, die Seitennavigation usw. werden von Typo3 automatisch rund um den Seiteninhalt erzeugt. Dann unterscheidet sich Typo3 von Textverarbeitungsprogrammen wie MS Office oder OpenOffice in seiner Arbeitsweise. Im Gegensatz zu Office haben wir kein großes Eingabefeld, wo Text, Überschriften, Bilder und Links einfach eingetippt, platziert und formatiert werden. Typo3 verwendet Inhaltselemente. Stell dir vor du hast verschiedene Papierschnipsel: Schnipsel 1 beinhaltet Text, Schnipsel 2 beinhaltet ein Bild und Schnipsel 3 ein Youtube-Video. Diese Schnipsel können wir auf dem Tisch mit den Fingern verschieben und so Reihenfolge und Platzierung zueinander verändern. In Typo3 werden die Schnipsel durch Inhaltselemente repräsentiert. Wir legen also unter Typo3 kein großes Feld an, wo Text, Bilder usw. willkürlich drin landen. Wir legen Inhaltselemente (also Papierschnipsel) an, deren Position und Formatierung wir jeweils getrennt ändern können. Das erhöht zwar etwas den Arbeitsaufwand und zugegeben erschwert es den Einstieg in die Arbeit mit Typo3 etwas, aber es lässt uns auch sehr flexibel arbeiten. Während der eine noch das Inhaltselement 1 bearbeitet, indem er den Text redigiert und die Formatierung überprüft, kann der andere schon im Inhaltselement 2 die Bildergalerie zusammenstellen und der dritte im Inhaltselement 3 einen Text mit Youtube-Videos erstellen. Danach kann einer der Dreien oder ein Vierter die Reihenfolge der Inhaltselemente auf der Seite bestimmen. Außerdem ermöglicht uns Typo3 die Zugriffsrechte auf bestimmte Typen von Inhaltselementen zu beschränken oder sogar nur die Bearbeitung aber nicht die Erstellung solcher zu erlauben.
Abbildung 1
2. Termine auf jp.de veröffentlichen Hier soll s am Ende stehen: Abbildung 2 Auf geht s zum ersten Schritt: 1. Nachdem du dich im Typo3 unter http://neu.jugendpresse.de/typo3 angemeldet hast, wirst du von folgendem, einladend unübersichtlichem Menü begrüßt. Wähle dort Web -> Seite. Abbildung 3
2. In der Unternavigation Abbildung 4: [1] scrollst du nun soweit herunter, bis du den Punkt News und Termine findest und Termine Abbilung 4: [2] wählen kannst. Auf der rechten Seite hast du nun die Möglichkeit einen neuen Termin-Datensatz anzulegen, indem du das kleine, graue Symbol mit dem grünen Plus anklickst Abbildung 4: [3]. Beachte: Falls du erweiterte Zugriffsrechte hast, kannst du mehrere dieser Symbole erkennen. Die rot durchgestrichenen erstellen ganz andere Datensätze. Diese solltest du meiden, falls du nicht weißt, was sie bewirken! Abbildung 4 3. Nun kannst du die Daten deines Termins eingeben. Der Titel Abbildung 5: [1] sollte nicht zu lang sein, aber auch nicht zu allgemein. JPN: Mitgliederversammlung ist aber besser als nur Mitgliederversammlung. Datum und Uhrzeit Abbildung 5: [2] werden im Format hh:mm tt-mm-jjjj angegeben: 12:30 3-1-2010 beispielsweise. Hier sollte logischerweise der Tag des Termins rein. Bei einem Seminar o.ä. über mehrere Tage dann der erste Tag. Beachte: Dieses Eingabefeld für Datum/Uhrzeit ist aber nur für interne Zwecke. Die Daten die darin stehen werden genutzt, um alle Termine chronologisch zu ordnen und in der richtigen Reihenfolge auszugeben. Als Autor Abbildung 5: [3] trägst du deinen Namen und den Landesverband ein. Also z.b. JPB, Max Mustermann. Die Bezeichnung Untertitel Abbildung 5: [4] ist etwas verwirrend: Hier kommt das Datum und der Ort des Termins rein. Die Form sieht so aus: 03.01.2009, Berlin oder 03.01. 07.01.2009, Bonn. Beachte: Warum so kompliziert und zweimal das Datum eintragen? Typo3 möchte gern chronologisch ordnen, kann jedoch mit einem Datensatz wie 03.01.2009, Berlin nicht viel anfangen, weil da eben mehr als das Kriterium Datum drin steht. Deshalb tragen wir das Datum für interne Zwecke in Datum/Uhrzeit ein und dann nochmal für die Ausgabe auf der JP- Seite unter Untertitel. Im Textfeld, kannst du nun eine Beschreibung für den Termin formulieren. Das sollte drin sein: Worum geht s, Ort, evtl. Anfahrt, Kosten, Zeit, Anmeldefrist, Anmeldekriterien, Ansprechpartner mit Email/Telefon, Web-Link zur Webseite des Landesverbands. Die ersten Zeilen des Textes werden verkürzt auf der JP-Startseite dargestellt. Wähle also dort schon möglichst treffende Worte und keinen allzu allgemeinen und nichts sagenden Einstieg. Wie immer gilt auch hier das Prinzip der großen Ws und der Nachrichtenpyramide.
Abbildung 5
3. Eine neue Seite anlegen 1. Du musst dich immer noch im Frontend-Menü Web->Seite befinden. Wähle in der Seitennavigation die übergeordnete Seite oder Menükategorie, in der du die neue Seite anlegen möchtest. Im Folgenden werden wir eine Seite Test im Bereich Presse einrichten. 2. In der rechten Hauptspalte von Typo3 klickst du auf das kleine Symbol, mit dem man neue Seiten anlegen kann. Beachte: Leider gibt es im Typo3-Interface viele kleine, grüne Plussymbole. Aber keine Angst, wenn du ausversehen das falsche wählst, dann merkst du das schnell. Klicke dann einfach zurück. Abbildung 6 3. Danach werden dir verschiedene Platzierungsmöglichkeiten für die neue Seite vorgeschlagen. Wähle dort den richtigen Platz für die Seite, indem du auf einen der grauen Pfeile klickst Abbildung 7. An dieser Stelle erstellen wir die Seite Test hinter Mediadaten. 4. Im folgenden Fenster geben wir den Seitentitel ein. Außerdem wählen wir die Option Seite verbergen, da ansonsten die leere Seite schon auf dem Frontend zu sehen ist. Unfertige Seiten soll ein Besucher eben noch nicht sehen. Anschließend speichern wir die Seite durch Klicken auf das Disketten-Symbol mit dem X: Speichern und Beenden. Abbildung 7 Abbildung 8
4. Eine leere Seite füllen: Der Teaser Eine neue Seite will gefüllt werden. Wir beginnen mit dem Teaser-Element. Der Teaser ist ein fett geschriebener Absatz, der den Inhalt einer Seite einleitet. Um die Formatierung brauchst du dir keine Gedanken machen, die wird einheitlich und automatisch erstellt. Das Inhaltselement Teaser benötigt folgende Eingaben: Überschrift, den Teasertext (also das die fette Schrift) und den Fließtext. Abbildung 9 1. Die eben erstellte Seite Test unter Presse wollen wir nun mit einem Teaser-Element füllen. (Normalerweise wird das Teaser-Element nur auf der Startseite verwendet, aus Beispielszwecken nehmen wir es aber auch mal hier!) Dazu klicken wir auf das kleine Symbol Neuen Datensatz erstellen in der Hauptspalte Abbildung 10. Die Linke Spalte ist für die Arbeit momentan irrelevant. Die Rechte Spalte beinhaltet wie oben schon erwähnt das Newsletterformular und Termine. Da diese aber automatisch erzeugt werden, müssen wir sie nicht für jede Seite einzeln anlegen. Relevant ist also nur die Hauptspalte für den Seiteninhalt.
Abbildung 10 2. In der darauffolgenden Auswahl der Inhaltselemente klickst du auf Normaler Text. Abbildung 11 3. Danach kann das Inhaltselement bearbeitet werden oder der Typ des Inhaltselements kann nachträglich noch geändert werden. Dies machst du nun. Unter Spezial findest du das Element JP Teaser. Beachte: Warum nicht gleich JP Teaser auswählen? Es steht dort, im ersten Fenster Abbildung 11, nicht zur Auswahl. Deshalb musst du den Umweg gehen, erst ein beliebiges Inhaltselement anzulegen, das du daraufhin gleich in einen JP-Teaser änderst.
4. Fülle nun alle nötigen Felder aus. Unter dem Reiter Text stellt das erste Textfeld Abbildung 12: [1] den eigentlichen Teaser-Absatz dar. Das darauffolgende große Textfeld Abbildung 12: [2] ist für den Fließtext verantwortlich. Abbildung 12 5. Unter Medien kannst du Bilder hochladen oder vorhandene Bilder aus dem Webarchiv auswählen, die angezeigt werden sollen. Möchtest du ein Bild als Banner zwischen dem fetten Absatz und dem darauffolgenden Fließtext einfügen, so wähle ein Bild aus und nutze eine Position, die Oben ist. Unten lässt das Bild nach dem Fließtext erscheinen. Beachte: Bitte lade unter Medien möglichst keine Bilder hoch, sondern verwende Bilder, die schon im Webarchiv vorhanden sind. Bilder, die hochgeladen werden, müssen mit Urheber, Titel und Beschreibung ausgestattet sein. Das einfache Hochladen im Reiter Medien ermöglicht dies nicht. Daher lade Bilder manuell hoch, wie im Kapitel Fotos hochladen beschrieben und wähle sie dann danach aus dem Archiv.
5. Eine leere Seite füllen: Text mit Bild Abbildung 13 Eine typische jp.de-unterseite nutzt das Inhaltselement Text mit Bild, das eine Überschrift (hier: Die Schule ), ein oder mehrere Bilder (hier: die Tafel) und einen Fließtext anbietet. 1. Führe dazu die ersten beiden Schritte aus dem vorigen Kapitel durch, lege also ein neues Inhaltselement Text mit Bild in der Hauptspalte an. 2. Trage unter Allgemein die Überschrift Abbildung 14 ein. 3. Im Reiter Text kannst du den Fließtext eintragen und formatieren. 4. Der Reiter Medien ist nun für die Bilder verantwortlich, ähnlich wie es schon im Inhaltselement Teaser so war. Abbildung 14 5. Die Positionen sind mit Skizzen erklärt. Ein Bildlink ermöglicht es dir, ein Bild mit der URL einer Webseite zu verknüpfen.
6. Fotos hochladen 1. Für den Upload von Bildern müssen wir in das Menü Media->Datei Abbildung 15: [1] von Typo3. In der Unternavigation rechts davon können wir durch das Dateisystem des Webarchivs navigieren. Bilder, die auf den jp.de-seiten verwendet werden, landen in der Regel in fileadmin/extern/jugendpresse/images. Abbildung 15 2. Um eine oder mehrere Dateien hochzuladen klickst du oben auf das Dateisymbol mit dem grünen Pfeil oder wählst aus dem Dropdown-Menü Hochladen. Abbildung 16 3. Nun kannst du die maximale Anzahl der hochzuladenden Dateien auswählen. Das sind 5, 10 oder 15 Dateien. Du musst aber nicht soviel hochladen. Es kann auch nur eine sein. Nachdem du die Datei ausgewählt hast, klickst du auf Hochladen. Bitte versichere dich, dass kein Haken bei Vorhandene Dateien überschreiben ist, sonst könntest du eine schon vorhandene Datei, die zufällig denselben Dateinamen hat, überschreiben. Sollte Typo3 eine Datei mit gleichem Namen finden, wird es ohne Haken einfach den Namen der neuen Datei verändern. Abbildung 17
4. Hier im Beispiel haben wird ein Foto mit dem Namen Alexandra.jpg hochgeladen. Wähle dies nun im folgenden Menü aus und klicke dann auf Ausgewählte Dateien bearbeiten. Abbildung 18 5. Nun müssen wir einige Felder ausfüllen. Unter dem Reiter Übersicht erhalten wir u.a. eine kleine Vorschau des Bildes sowie die Informationen, wo die Datei liegt, welche Maße sie hat und wie groß sie ist Abbildung 19: [1]. Abbildung 19 Der Titel sollte aussagekräftig sein (nicht so unklar, wie in diesem Beispiel) Abbildung 19: [2]. Die Beschreibung erklärt die Umstände des Fotos, evtl. Hintergründe und sollte nicht nur beschreiben, wie es hier der Fall ist Abbildung 19: [3]. Gerade für Pressefotos, aber auch allgemein, sind die Ortsangaben nicht zu vergessen Abbildung 19: [4]. Als Bildunterschrift kann die Beschreibung verwendet werden, insofern sie nicht zu lang ist. Ansonsten eben eine verkürzte Fassung der Beschreibung Abbildung 20: [1]. Datei Quelle ist interessant, falls die Originale später gebraucht werden könnten. Hier könnte man eintragen Fotograf Max Mustermann, Foto-CD Nr. 12, falls der Fotograf seine Fotos Abbildung 20: archiviert oder Jugendmedientage Presse-CD usw [2]. Als Kategorie sollte die passende ausgewählt werden. Im Zweifel geht die Kategorie Jugendpresse Abbildung 20: [3]. Abbildung 20
5. Wichtig ist außerdem der Reiter Urheber. Das Textfeld Urheber sollte mit dem Fotografen oder Grafikdesigner gefüllt werden, der es erstellt hat. Die Angabe ist sehr wichtig für Pressefotos, aber damit keine Urheberrechtsprobleme auftauchen eben allgemein von Bedeutung. 6. Nachdem alle Daten eingegeben wurde, abschließend den Bearbeitungsprozess noch speichern und beenden. Abbildung 21