Fragen

dieser Text aus der Tischvorlage vom Workshop Ende Februar 2017 ist z.Zt. via sankt-clemens-hiltrup.de/homepage-intern oder sankt-clemens-hiltrup.de/635 abrufbar.

 

Fragen an
Karl Huesmann

karl.huesmann@web.de

Ruf: 02501-70634

TYPO3 Aufbau Redakteursoberfläche

In der oberen Zeile steht

  • der "Stern" für "Übersicht der privaten Lesezeichen"
  • der "Blitz" für "Cache leeren" (manchmal beim Entwickeln sinnvoll)
  • die "3 Balken" für "weiteren Benutzer erstellen"(nur mit Absprache sinnvoll)
  • das "?" für die eingebaute Hilfe zu Typo3
  • der "Kopf" für die Möglichkeit sich Abzumelden
  • die "Lupe" für die Suche nach Wörtern oder Seiten-IDs

Die Modulleiste enthält Module (Seite, Anzeigen, Liste,...) in Modulgruppen (Web, Datei).
Über das Pfeil-Symbol rechts neben den Gruppennamen lassen sich die Modulgruppen ein- und ausklappen.

 

Die Modulgruppe „WEB“

Das Modul „Seite“ -- Hier legen wir Seiten und Seiteninhalte an, bearbeiten oder löschen. Die Anordnung der Inhaltselemente entspricht der Ausgabe beim Benutzer

Das Modul „Anzeigen“ stellt den Inhalt der Seite in der rechten Spalte („Detailansicht“) dar. Dabei können verschiedene Auflösungen und Geräte simuliert und die Ausgabe auf diesen getestet werden.

Das Modul „Liste“ zeigt alle Inhalte einer Seite in einer Listenansicht.
Mit der Option „Erweiterte Ansicht“ (unten auf der Seite), erweitert TYPO3 die Listendarstellung um die Funktions-Icons: Sperren, Zeitsteuerung, Umsortieren, Löschen, Duplizieren, Bearbeiten, Ausschneiden oder Kopieren ...

 

Das Modul „Arbeitsumgebung“ bietetuns derzeit keine Funktionen.

 

Das Modul „Powermail“ zeigt die E-Mails und die genutzen E-Mail-Formulare im Überblick an (ganz oben "Formular-Übersicht" auswählen).

 

Die Modulgruppe „DATEI“

Das Modul „Dateiliste“ bietet Zugriff auf die freigegebenen Ordner und Dateien. Hier können Dateien (z.B. Bilder, PDFs) auf den Webserver hochgeladen, kopiert, verschoben, umbenannt, ersetzt und gelöscht werden.

Hochladen neuer Dateien

Hier sind die Schritte zusammengefasst, die am Besten zum Hochladen neuer Dateien ins Verzeichnius "Aktuelles" (Wocheninformationen) genutzt werden:

 

Schritt 1: Modulgruppe „Datei“
Das Modul „Dateiliste“ auswählen -- Hier legen wir Seiten und Seiteninhalte an, bearbeiten oder löschen. Die Anordnung der Inhaltselemente entspricht der Ausgabe beim Benutzer

Schritt 2: "Seitenbaum"
Das Verzeichnis "Aktuelles" auswählen

Schritt 3: "Detailansicht"

oben das mittlere Piktogramm "Hochladen" anklicken


Schritt 4: es erscheint der Windows Dateimanager ...dort wählt man die hochzuladende Datei aus.

 

 

Wichtig: Vor weiteren Aktionen warten, bis diese Datei zu 100% hochgeladen wurde.

Änderung der Wocheninformationen

Hier sind die Schritte zusammengefasst, die zur Änderung der Wocheninformationen hinführen:

 

Screenshot 1

 

Schritt 1: Modulgruppe „WEB“
Das Modul „Seite“ auswählen -- Hier legen wir Seiten und Seiteninhalte an, bearbeiten oder löschen. Die Anordnung der Inhaltselemente entspricht der Ausgabe beim Benutzer

Schritt 2: "Seitenbaum"
Die Seite "Startseite" auswählen

Schritt 3: "Detailansicht"
ggfs 1x Blättern, damit "Aktuelle Wocheninformation und Termine" erscheint.
Dort entweder "Bearbeiten" auswählen oder Doppelklick auf den Text

Schritt 4: es erscheint der Editor ..

 

Screenshot 2

 

Zuerst im Editor den Text anpassen, z.B. mit "Kopieren" (Strg+C) und "Einfügen" (Strg+V).

 

Schritt 1: den Teil, der einen Link auf das Aktuell bekommen soll markieren

 

Schritt 2: die "Weltkugel" auswählen

 

Schritt 3: im neuen Dialog "Link auswählen" den Tab "Datei" auswählen

 

Schritt 4: im Verzeichnisbaum "Aktuelles" auswählen

 

Schritt 5: die gewünschte Datei auswählen

 

Die Änderungen dann oben "Speichern".  Fertig!

Aktuelles -> News -- erste Seite der Homepage

Beim Einpflegen der Inhalte wird zwischen Elementen und News unterschieden.

  • Bei Elementen sollte mit der Seitenansicht (ganz links im Modul "Seite" in Modulgruppe "Web") gearbeitet werden.

  • News werden unter "Aktuelles -> News" erfasst und müssen in der Listenansicht (ganz links Modul "Liste") erstellt/geändert werden. Mit News sind die aktuellen Nachrichten gemeint. von denen die ersten 7 automatisch auf der Startseite auftauchen. News soll der Leser schnell erfassen können und ändern sich häufiger.
    News werden nach Datum & Uhrzeit (siehe "Bild 1") sortiert (das 'Älteste" ist oben). Will man die Reihenfolge ändern, muss man dies Datum verändern. Am Tag "Archiv" werden die Artikel automatisch ins Archiv verschoben.

    News sind in typo3 mit Plug-ln "Nachrichten-System" (News) umgesetzt. Die Anzahl der angezeigten "News" (aktuell: 7) kann geändert werden: Startseite > Plug-ln
    "Aktuelles" bearbeiten > Reiter .. Plug-ln" > Reiter .,Weitere Einstellungen">
    Maximale Anzahl anzuzeigender Datensätze

Bilder in "News" und "Veranstaltungen" haben das Format 1280 x 849px oder die Hälfte davon 640 x 425px. 

Dazu Foto z.B. in pixlr.com/editor (siehe diese Anleitung) laden, dort in der 2. Zeile "Constraints" "Output Size" auswählen und die "Höhe" 1280 und "Breite" 849 angeben.

Dann Ausschnitt wählen, Doppelklick und Sichern z.B. als xyz-small.jpg.

 

Das Ergebnis zuletzt mit Typo3 Modul "Dateiliste" in den Ordner "Aktuelles" hochladen.

In der "Liste" "News" wird dann (siehe Bild 2) unter "Relationen" dies Bild zugefügt. Bitte das Häkchen in "Vorschau Ansicht" nicht vergessen.

 

Kostenlose Bilder bekommt man z.B. via Pixabay oder z.B.  Pfarrbriefservice.de

Blldgrößen

Hinweis: Bevor die Bilder auf die Internetseite gesetzt werden. müssen diese vorher mit einem
Bildbearbeitungsprogramm in die entsprechende Größe gebracht werden!!

Siehe unten einie Details zum Programm "Pixlr" (im Browser) und XnView (Windows Installation).


Bilder können generell in 1.280 x 849 Pixel bearbeitet werden (für die Klickvergrößerung z.B. in der Fotogalerie).  das entspricht einem Seitenverhältnis von 3:2.

 

Anmerkung: Soll das Foto klein dargestellt werden (Bild links oder rechts neben Text) muss die Breite des Bildes auf 210 Pixel beschränkt werden (in TYPO3 - Erscheinungsbild - Breite)

 

Slider (nur auf der Startseite verwenden!) haben das Format Breite 800 x Höhe 256 Pixel.

 

Hochladen von Bildern/Dateien (Dokumente)

Wenn Sie über den Reiter "Medien" (im lnhaltselement) eine " Mediendatei hinzufügen" - bitte im Verzeichnisbaum NIEMALS den Pfad "Dateien: secure user_upload" oder "Dateien: geschützt" auswählen. (Dateien in diesem Pfad kann nur jemand mit Userid + Password sehen.)


Bitte wählen Sie einen Ordner vom Pfad "Dateien: Pfarrei" aus.

 

Diese Ordner existieren heute (Stand Januar 2018):

Für den Tab "Aktuelles und Veranstaltungen"
- Aktuelles  -- hier sind die Bilder für die "News" abgelegt
- Fotos  -- Fotostrecken

- Videos

- slider -- Eingangsseite

Kirchen-Einrichtungen

Seelsorge-Verwaltung

Gruppen-Vereine
Rat-Hilfe

Glauben-ErLeben

 

Weiter gibt es
- Homepage-intern

- socialbuttons

- logos

 

Für die bessere Übersicht ist es manchmal ratsam, Unterordner anzulegen. Neue Unterordner können in der ganz linken Spalte (schwarz hinterlegt) Mit dem Modul "Dateiliste" hinzugefügt werden. In diesem Modul können Dateien auch mittels Ausschneiden (Schere) und Einfügen in andere Ordner verschoben werden.

Einpflegen der Inhalte / Editor

Alle Nicht-News-Inhalte werden über Inhaltselemente (ganz links in der Modulgruppe "Web" das Modul "Seite") eingefügt. Das sind eher Seiten die einmal erstellt werden und dann nicht so häufig abgeändert werden. Dafür hat man hier viel mehr Möglichkeiten die Anordnung von Text und Bildern etc. zu bestimmen.
ln der jeweiligen Seite (Seitenansicht) kann man direkt bestimmen, wo der Inhalt erscheinen soll.

  • Unter der Subnavigation: Inhalte erscheinen unter den Unternavigationspunkten auf der linken Seite. Achtung: u.a. auf dem Smartphone fehlt diese Spalte
  • Fließtext: Dieses sind die Hauptinhalte/Hauptexte der jeweiligen Seite.
  • Marginalspalte: rechte Spalte der Seite, zu nutzen vor allem für "Schaufenster''.

Über den Button "+Inhalt" anwählen. wo neuer Inhalt eingefügt werden soll.
ln den meisten Fällen dann "Text+Medien" als "Typischer Seiteninhalt" auswählen.

 

Bei Inhalten in der Marginalspalte empfiehlt sich unter dem Reiter "Erscheinungsbild" über Layout das Dropdown "Hintergrund kräftig" oder "Hintergrund dezent" auszuwählen.

 

Längere Texte mit mehreren Bildern auf einer Seite müssen mit mehreren Elementen zusammengebaut werden.

 

Dies kleine PDF erklärt etwas den genutzten "Editor". Mit dem Symbol "4 Pfeile" (rechts) bekommt der Editor den ganzen Bildschirm. Nach "Speichern" erhält man durch die erneute Auswahl im Seitenbaum wieder die noirmale Anzeige.

 

Tipp: Oft bleiben trotz markiertem Text die Symbole grau (z.B. das "B" für Fettschrift). Hier hilft es, wenn bei der Markierung die Cursortasten (zumindest für 1 Zeichen) mitbenutzt werden.

Überschriften

Die Artikel kennen diese 4 Typen von Überschriften:

  • Überschrift 1 (H1 ): große Seitenüberschrift in Großbuchstaben, nur einmal pro Seite verwenden
  • Überschrift 2 (H2): mittelgroße Seitenüberschrift in Großbuchstaben
  • farbig hinterlegt: Die Überschrift wird in einem blauen Balken angezeigt
  • verborgen: Die Überschrift wird auf der Internetseite nicht angezeigt

Newsletter

Falls ein Newsletter gewünscht ist, bitte bei kampanile melden. Dann passen wir dies entsprechend an.

Akkordeon

Akkordeon bitte nur im Modul "Seite" bearbeiten

  • Überschrift eintragen > Typ "Verborgen"
  • Speichern und schließen
  • Im Element Akkordeon auf den Button "Inhalt" unter "Akkordeonelemente" klicken
  • Strukturelemente "Akkordeonreiter''
  • Akkordeon-Überschrift eintragen; Typ "Überschrift 2''
  • Speichern und schließen
  • Im Element Akkordeonreiter auf den Button "Inhalt" unter .,Inhalt'' klicken
  • Typischer Seiteninhalt "Text & Medien" auswählen und dort entsprechend alles eintragen.

Freies Fotobearbeitungsprogramm "Pixlr"

Auf dem Workshop Ende Februar 2017 wurde auch diese Tischvorlage "Freies Fotobearbeitungsprogramm für die Aufbereitung der Fotos für die Hornepage" verteilt.

 

Der Editor öffnet sich im Browser (Firefox, Internet Explorer, etc) durch pixlr.com/editor und benötigt den Adobe Flash Player. Falls Ihre Browsereinstellungen diesen nicht erlauben (oder er nicht installiert ist), kann "Pixlr" nicht starten.

 

 

 

Fotogalerie

  • Fotos in der Größe 1.280 px x 849 Pixel (px) bearbeiten und in einem Ordner im Modul "Dateiliste" (ganz links in der Modulgruppe "Datei") hochladen
  • Seite erstellen > Zugriff: Häkchen bei Seite Deaktivieren rausnehmen und bei "ln Menüs verbergen" setzen > Speichern und schließen
  • Auf die Seite im Seitenbaum klicken, Seiteninhalt erstellen (lnhaltselement "Text&Medien")
  • Im Reiter "Medien" die bearbeiteten Fotos aus der Dateiliste heraus hinzufügen
  • "Beschreibung (Bildunterschrift)" erscheint auf der Gesamtübersicht in der Hauptspalte
  • "Titel" erscheint in der Klickvergrößerung
  • Im Reiter "Erscheinungsbild" die Anzahl der Spalten (nicht mehr als 4 Spalten nutzen) auswählen und die "Breite jedes Elements" wie folgt anpassen:
    o 2 Spalten: 224 px
    o 3 Spalten: 146 px
    o 4 Spalten: 107 px
  • Unter "Erscheinungsbild" die "Position und Ausrichtung" auf "Oben mittig" stellen.
  • Unter "Fotos" nochmal einen kurzen "Teaser" erstellen und zu der Fotogalerie verlinken

(Option) Fotogalerie vorbereiten mit XnView (Windows, Linux)

Es gibt viele freie Fotobearbeitungs-Software am Marlt: Picasa von Google, IrfanView, Paint.Net, Gimp2 usw.

Unter Windows kann man mit XnView ganz gut die Fotos zum Upload vorbereiten. Die Arbeitsschritte (Windows)

  1. die Fotos in ein Verzeichnis auf dem Windows-Rechner laden
  2. die Fotos in die Form 1280 x 849 Pixel bringen und dabei in einem neuen Verzeichnis speichern
  3. die Fotos nach dem Datum im Foto (EXIF) umbenennen

Im TYPO3 geht man nun in das Modul "Dateiliste" (Modulgruppe "Datei"). Dort

  1. legt man ein neues Unterverzeichnis von "Fotos" an
  2. lädt man die mit XnView umbenannten Fotos aus dem Windows Verzeichnis auf einen Schlag ins TYPO3-Verzeichnis. Nun wartet man, bis alle Dateien hochgeladen wurden.

Nun wechselt man ins TYPO3 Modul "Seite" (Modulgruppe "Web"). Siehe dazu oben unter "Fotogalerie"