VOBS Typo3-Templates | Quickstart-Guide

Vorarlberger Standardschulinstallation
Verfasser: Kuno Sandholzer und Alex Zoppel

1 Einleitung

Um Schulen und schulnahen Organisationen ein sinnvolles Werkzeug für die Gestaltung ihres Webauftrittes zur Verfügung stellen zu können, beschäftigen wir uns seit 2005 mit TYPO3.

TYPO3 ist ein CMS ("Content Management System") und ist sehr vielseitig einsetzbar. Es deckt die meisten Features, die eine moderne Webseite bieten soll, ab.

Content-Management-Systeme trennen Inhalt, Struktur und Layout von Dokumenten und integrieren die Bearbeitung und Pflege von Dokumenten in einen definierten Arbeitsablauf (Workflow). Das hat für Redakteure den Vorteil, dass sie sich ganz auf die Pflege und Aktualisierung von Texten konzentrieren können, ohne sich um das Layout, die Einbindung in ihre Seite oder andere technische Aspekte kümmern zu müssen.

Die folgende Anleitung bietet einen grundlegenden Einblick in die wichtigsten Funktionen von Typo3. Dieses Skript bezieht sich im Wesentlichen auf die vom VOBS bereitgestellten Templates.

CHECKLISTE FÜR EINE VOBS-VORLAGE AN DEINER SCHULE: https://vobs.at/cms

1. TEMPLATE	2. FORMULARE	3. WEBPLATZ
Du hast für deine Schule bereits eines unserer Templates (Webseiten-Vorlage für das CMS – Content Management System TYPO3) ausgesucht?	Du hast bereits die beiden notwendigen Formulare unterzeichnet und an unseren Webmaster (webmaster@vobs.at) retourniert?	Nach einer kurzen Einrichtungszeit erhältst du von unserem Webmaster einen Web-Platz mit Zugangsdaten inklusive deines gewünschten Templates.

Dein Web-Platz ist temporär und nur für dich einsehbar. Du kannst dir mit der Bearbeitung also so lange Zeit lassen, wie du benötigst. Wenn deine Schule bereits eine (alte?) Seite am Laufen hat, bleibt diese so lange bestehen, bis du die neue Webseite aktivieren lässt.

2 Typo3: Aufbau und Benutzeroberfläche

2.1 Anmeldung / Login

Der Zugriff ist nur berechtigten Personen (Administratoren, Webautoren und Redakteuren) gestattet. Sie benötigen einen Benutzernamen und ein Passwort mit einer entsprechenden TYPO3-Berechtigung.

Ein gutes Passwort
• mindestens 12 Zeichen
• Groß- und Kleinbuchstaben
• Sonderzeichen und Ziffern
• sollte nicht in Wörterbüchern vorkommen
• beinhaltet keine Namen oder Tastaturmuster

Die Anmeldung in das Backend von Typo3 erfolgt über meinedomain.at/typo3

Backend
meinedomain.at/typo3
Im Backend von TYPO3 („hintere Seite“) können Webseiten erstellt und bearbeitet sowie Inhalte eingepflegt und bearbeitet werden.

Frontend
meinedomain.at
Im Frontend von TYPO3 („vordere Seite“) wird die Webseite dem Betrachter angezeigt.

2.2 Backend

2.2.1 Benutzerleiste

Anpassung Ihres eigenen Benutzerkontos: Sprache, Ansichten, persönliche Daten und Passwort ändern.

Ein- und Ausklappen der Modulleiste

Frontend- und Gesamtcache leeren (Zwischenspeicher leeren um Änderungen im Frontend zu sehen)

2.2.2. Modulleiste

Für Redakteure sind vor allem die Modulgruppen „Web“ und „Datei“ wichtig:

Modulgruppe Web

Das Modul „Seite“

Hier können Sie Seiten und Seiteninhalte anlegen, bearbeiten oder löschen. Die Anordnung der Inhaltselemente entspricht der Ausgabe im Frontend.

Das Modul „Liste“

Zeigt alle Inhalte einer Seite in einer Listenansicht. Anlegen von Spezialinhalten (z. Bsp. News, Termine, etc…)

Modulgruppe Datei

Das Modul „Dateiliste“

Das Dateiverwaltungsmodul bietet Zugriff auf die freigegebenen Ordner und Dateien. Hier können Dateien (z.B. Bilder, PDFs) auf den Webserver hochgeladen werden. Diese können dann kopiert, verschoben, umbenannt, ersetzt, gelöscht und bearbeitet werden.

2.2.3 Navigationsleiste (Seitenbaum)

In der mittleren Spalte stellt das Backend die Struktur der Website dar. Die Struktur ist als Baum aufgebaut.

Beim Überfahren mit der Maus von Seiten und Ordnern, wird die Seiten-ID Nummer angezeigt. Diese dient zur eindeutigen Identifizierung und ist stets bei SupportAnfragen anzugeben.

Über dem Seitenbaum befinden sich Symbole:

(1) Neue Seite – Drag and Drop
(2) Backend Benutzer
(3) Neue Seite mit Verweis
(4) Einstiegspunkt
(5) Seite mit Link zu externer URL
(6) Neuer Ordner (Bsp: News-Datenbank)
(7) Trennzeichen für Menü

Seiten / Ordner ausklappen
Seiten und Ordner können mit dem Pfeil-Symbol ein- und ausgeklappt werden, wenn sich darunter Ordner oder Unterseiten befinden.

Seiten / Ordner verschieben
Per Drag & Drop können Sie Seiten und Ordner verschieben. Klicken und Ziehen Sie mit gedrückter Maustaste dazu die Seite oder den Ordner an die gewünschte Position und lassen dann los. Wenn Sie die STRG-Taste während des Verschiebens gedrückt halten, wird die Seite kopiert.

Weitere Optionen
Wenn Sie mit der rechten Maustaste auf eine Seite oder einen Ordner klicken (oder mit der linken Maustaste auf das Icon), erhalten Sie folgende Optionen: Ansehen, Bearbeiten, Info, Verlauf / Rückgängig, Seitenaktionen

2.2.4 Arbeitsfläche / Detailansicht

Aufbau der Web-Seite. Details siehe → 2.2.8 Inhalte verwalten

2.2.5 Dateien verwalten

Es gibt grundsätzlich zwei Möglichkeiten, Dateien hochzuladen:

Inhaltsbezogene Uploads (user_upload): Bilder und/oder Dokumente werden direkt beim Anlegen eines Inhalts hochgeladen. Typo3 sichert diese Dateien dann in einem Unterordner des Ordners user_upload.
Wichtig: Diese Variante wird NICHT empfohlen!
Geplanter Upload in expliziter Dateistruktur vor Anlegen eines Inhaltselements. Um größtmögliche Transparenz bei mehreren oder zukünftigen Redakteuren zu gewährleisten, wird diese Variante empfohlen:
Dateiliste → Ordnerstruktur → Dateien hochladen oder erstellen (entweder über Dateien hochladen oder Drag&Drop) oder Ordner erstellen

2.2.6 Exkurs: Stapelbearbeitung von Bildern mit Irfanview

Dateigrößen
Fotos und Dokumente sollten vor dem Upload „webtauglich“ gemacht werden.
Empfehlung für Fotos: Lange Seite: zw. 1200px und 1600px, Empfehlung für Bilder ganze Breite (Bsp. Header): 2000px
Maximale Dateigröße: < 200kb
Dokumente (Bsp. pdf): Speichern für Webansicht (Bilder werden so komprimiert)

„Irfanview“ ist ein mächtiges Bildbearbeitungs-Tool. Die Funktion „Stapelbearbeitung“ bietet die Möglichkeit Bilder und Fotos sehr schnell, einfach und effizient umzuwandeln.

Beispiel: Umbenennen und Größenänderung mehrerer Fotos

Ordner mit Bildern auswählen
„Alle hinzufügen“ oder Bilder auswählen und „Hinzufügen“
Verzeichnis zum Speichern der bearbeiteten Bilder auswählen
Beispiel: „Aktuelles Verzeichnis verwenden“ und in diesem den Unterordner „_bearb“ anlegen.
Passenden Namen geben?! ### wird durch Nummerierung ersetzt.
Spezial-Optionen setzen

In diesem Beispiel:
- Sechs „zu große“ Fotos werden umgewandelt
- Über die Spezial-Option „Größe ändern“ wird die lange Seite auf 1200px gesetzt, die Seiten bleiben „Proportional“ im richtigen Verhältnis
- Die Fotos werden über Name
- Workshop_Carmen_### alle gleich umbenannt und nummeriert (_001, _002,…)
- „Starten“: Die Fotos werden umgewandelt und im Unterordner „_bearb“ gesichert.
Batch-Bearbeitung starten

2.2.7 Dokumente

Empfehlung:

PDF anstatt Word-Dokumente
PDF für Web (auf Dateigröße achten)

2.2.8 Inhalte verwalten

Beim Pflegen von Inhalten empfiehlt es sich, Backend und Frontend in zwei Tabs offen zu halten. Noch komfortabler sind zwei Bildschirme, wobei auf dem einem das Backend und auf dem anderen das Frontend dargestellt wird.

Tab 1 bzw. Bildschirm 1: Backend

Tab 2 bzw. Bildschirm 2: Frontend

Nach gespeicherten Änderungen im Backend (und anschließendem Löschen des Caches) kann im Frontend-Tab mit der Taste F5 bzw. der Tastenkombination SHIFT+F5 die Seite aktualisiert werden.

Nach einem Klick auf die zu bearbeitende Seite werden alle Inhaltselemente angezeigt.

Ein Mouse-Over auf das Icon des Inhaltselements zeigt die ID des Inhaltselements
Ein Klick auf das Icon zeigt das Kontextmenü an
Stift: Inhaltselement bearbeiten
Schieberegler: Inhaltselement aktivieren (im Frontend sichtbar) / deaktivieren (im Frontend unsichtbar)

Über den Button "Neuen Inhalt erstellen" oder über das Kontextmenü "+Neu" können neue Inhaltselemente an der gewünschten Position erstellt werden.

Mit Drag&Drop können Inhaltselemente an eine andere Position verschoben werden