TYPO3 Redaktion / TU BS / 20.02.2025

Topics:

• Orientierungsphase, Seminarthemen, Teilnehmerthemen kennenlernen/koordinieren
• Seminarzeiten / Pausen  - ungefährer Fahrplan für "Übungen + Pausen + Seminarende":
  09.00 - 10.30 | Pause | 10.45 - 12.15 | Mittagspause
  12.45 - 14.15 | Pause | 14.30 - 15.50 | Feedback | bis Seminarende 16.00 Uhr
• Roter Faden / Schwerpunkt
  Nutzung des CMS TYPO3 als "Redaktionssystem" für das Einpflegen von Inhalten in die TU BS Website
• Links / Adressen / Ansprechpartner an der TU Braunschweig
  Zentrale Personalentwicklung: https://www.tu-braunschweig.de/zpe
  Webredaktion der TU Braunschweig bzw. Stabsstelle Presse und Kommunikation
  siehe Website TU BS www.tu-braunschweig.de und Matrix Messenger (TYPO3-Web-CMS)
• TYPO3 Dokumentation TU Braunschweig (Login TU BS notwendig)
  ausführliche Dokumentation zu der technischen TYPO3 Umgebung für die Redakteure inklusive Mailing-Liste für regelmäßige Infos

Basisworkshop Webseiten in TYPO3 erstellen

Ausschreibung des Seminars

In dieser Tages-Schulung haben Sie die Möglichkeit das Content Management System (CMS) der TU Braunschweig kennen zu lernen oder bestehende Kenntnisse zu vertiefen. Im Schulungsbereich der Webseiten können Sie – nach theoretischem Input – eine eigene Webseite erstellen und Ihr gelerntes Wissen direkt anwenden. Wenn Sie lieber direkt auf den Webseiten Ihres Instituts oder Ihrer Einrichtung arbeiten wollen, ist dies natürlich auch möglich.

Nach dieser Schulung können Sie bestehende Inhalte aktualisieren und neue Webseiten erstellen. Kerninhalte der Schulung sind:

• Erste Schritte in TYPO3 (Navigation, Vorschau)
• Seiten anlegen/bearbeiten
• Objekte hochladen
• Bilder und Links einfügen
• Veröffentlichen von Seiten

Das Angebot wurde von den MA der TU BS bei der Webredaktion der TU Braunschweig initiiert und über die Zentrale Personalentwicklung ausgeschrieben.

Als "Ehemaliger" der TU, als langjähriger Partner für Seminare an der TU in verschiedenen Bereichen und natürlich nicht zuletzt als TYPO3-Fan freue ich mich auf unsere Seminare.

Roter Faden

Diesen Begriff hört man in meinen Seminaren häufiger ;-). Gemeint ist hier: Das grundsätzliche Verständnis der fraglichen IT-Techniken. Am Besten gleich so, dass man auch nach einer Zeit ohne Beschäftigung mit diesen Techniken sehr schnell wieder in Fahrt kommt.

Unter einem roten Faden versteht man ein Grundmotiv, einen leitenden Gedanken, einen Weg oder auch eine Richtlinie. „Etwas zieht sich wie ein roter Faden durch etwas“ bedeutet beispielsweise, dass man darin eine durchgehende Struktur oder ein Ziel erkennen kann.

Quelle: Wikipedia - Roter Faden

TYPO3 Extrasite

Weitere TYPO3 Inhalte und Themen im Rahmen meiner TYPO3-Seminare und Interessen finden Sie als RestructuredText Dokumente unter typo3.joe-brandes.de. Diese Ausarbeitung ist zu Corona-Zeiten entstanden und war als Basis für ein Fachbuch (zu TYPO3 v11) angelegt - quasi eine technische Beschäftigungsmaßnahme für mich in den damaligen Zeiten.

Die Ausarbeitung richtet sich eher an den technisch interessierten Trainee und zeigt vorrangig die administrative und programmatische Sicht auf das CMS TYPO3.

Mal sehen wo die Reise mit dieser Unterlage noch hingeht... Aktuell plane ich für den Sommer eine Auffrischung der Unterlage mit TYPO3 v13 - wie gesagt: schauen wir mal.

Topics Webredaktion TU:

• Seminarinfo Webredaktion TU Braunschweig / Topics für Seminar
• Erfolgsgeschichte TYPO3

Topics Trainer Joe B.:

• TYPO3 Inhaltselemente - Content Elements (CE)
• Bilder mit TYPO3

Wie erwähnt haben die KollegInnen der Webredaktion diese Seminarform viele Jahre erfolgreich betreut und wir wollen auf diesen Inhalten und Erfahrungen aufbauen..

Seminartopics im Überblick (Groblernziele)

Die Kollegen der Webredaktion pflegen eine Präsentation mit den folgenden Topics:

• Einführung in TYPO3 und Hochschulseiten
  Was ist TYPO3 und wofür wird es an der Hochschule verwendet?
  Überblick über die verschiedenen Hochschulseiten und deren Zweck
• Backend-Oberfläche und Navigation
  Überblick über das Backend von TYPO3
  Navigation und Struktur der Hochschulseiten im Backend
• Erstellen und Bearbeiten von Seiten
  Erstellen neuer Seiten
• Verwendung von Inhaltselementen
  Einbinden von Texten, Bildern, Dateien usw.
• Arbeiten mit dem Medienpool:
  Hochladen und Verwalten von Bildern, Videos und anderen Medieninhalten
  Einbinden von Medien in Seiten und Beiträge
• Verwendung von Metadaten und SEO
  Hinzufügen von Meta-Tags Beschreibung
  Optimierung der Seiten für Suchmaschinen (SEO)

Die TYPO3 Nutzung an der TU Braunschweig erstreckt sich auf die folgenden Umsetzungen:

• Darstellung der außenwirksamen Inhalte:
  Studierendenwerbung, Präsentation der Forschung und der Marke, Präsentation der Fakultäten und Institute
• Möglichkeit zur Ablage von Medienobjekten: Bilder, PDF, etc.
• Anm.: aktuell keine Nutzung im Intranet

Erfolgsgeschichte TYPO3

Das CMS TYPO3 hat sich in über 20 Jahren eine führende Position im Bereich der Content Management Systeme erarbeitet. Wir wollen ein paar der wichtigsten Gründe kennenlernen:

• Open-Source-Content-Management-System (CMS) zur Erstellung und Verwaltung von Websites
• Flexible und erweiterbare Plattform für die Entwicklung von Webanwendungen
• TYPO3 ermöglicht die einfache Verwaltung von Inhalten, Layout und Funktionen einer Website durch eine Trennung von Inhalt, Struktur und Design.
• TYPO3 basiert auf der Skriptsprache PHP und nutzt eine Datenbank.
• Das CMS wird von einer großen Community entwickelt und unterstützt. Dadurch gibt es regelmäßige Updates, Erweiterungen und einen umfangreichen Support.
• TYPO3 ist eines der beliebtesten CMS der Welt! Das CMS wird u.a. von Universitäten, Unternehmen und Organisationen eingesetzt.

Sie wollen mehr wissen?

• TYPO3 Delivers Blazingly Fast, Flexible Websites 
• Features TYPO3 

TYPO3 Inhaltselemente - Content Elements (CE)

Das CMS TYPO3 organisiert die Inhalte in Form eines Seitenbaums. Dieser Baum bildet im Grunde die Struktur der ausgelieferten TYPO3-Website - also z.B. auch die Navigationsstrukturen der Website. Wenn man später - als T3-Admin - tiefer in die Verwaltung und Administration einsteigen würde, dann findet man hierfür noch viele "Schalter und Konfigurationen", aber wir wollen uns auf die Sicht des TYPO3-Redakteurs - also des Nutzers - konzentrieren.

Wie füge ich Inhalte in TYPO3 ein?

Über das Modul "Web" kann man für eine Seite (Page) verschiedene Inhaltselemente (CE) einfügen.

Bitte achten Sie von Anfang an auf die Hierarchie der beteiligten Techniken:

• Seitenbaum (Tree)
  • Einzelne Seite (Page)
    • Inhaltsobjekte auf dieser Seite (CE - Content Element)

Technisch stellen die Inhaltselemente (CE) Einträge in der TYPO3-Datenbank dar. Die Ersteller der TYPO3 Website haben für die Positionierbarkeit von Inhalten technische Positionen verdrahtet. Die Positionen werden im TYPO3 Backend über sogenannte Layouts für den Redakteur verfügbar gemacht. Im Besten Fall werden diese Layouts auch sauber dokumentiert und mit Beispielen erläutert, damit der Redakteur besser die Wirkung, das Erscheinungsbild und die Position auf der Website versteht.

Eine der Übungsansätze für unsere Redaktionsschulung ist die Durchsicht, Übung und Anwendung der verfügbaren Inhaltselemente.

Bilder mit TYPO3

Problem: bei Bildern aus den aktuellen digitalen Bildaufnahmegeräten (Smartphone, iPad / Tablets, Kompaktkameras, Digitalen Spiegelreflexkameras, ..) kommen nicht webtaugliche Bildmaterialien!
Beispielhafte Werte: 1600 x 1200 Pixel oder 6000 x 4000 Pixel (24 MegaPixel) oder gerne noch mehr Megapixel in Datei-Größen von mehreren Megabytes!

TYPO3 hat wie immer eine professionelle Lösung: wir dürfen ausnahmsweise (;-) die Bilder auch in den "großen Größen" in den Fileadmin legen! Diese werden mit Serverseitigen Grafiktools (ImageMagick oder GraphicsMagick) automatisch auf useree gewünschte Dimensionen oder absoluten Pixelmaße "_processed_". Das kann man sich mit Beispielbildern auf TYPO3-Webseiten einfach per Rechter Maus anzeigen lassen: Grafikeigenschaften anzeigen lassen oder in neuem Tab anzeigen lassen. Die Webprofis greifen zu den Code-Inspektoren der verschiedenen Browser. Das wird in den Seminaren immer auf Anfrage und nach Interesse gezeigt, Im Grunde kann sich der TYPO3-Redakteur auch entspannt zurücklehnen: TYPO3 haut die Bilder immer webtauglich und passen raus! Super!

Beispielbilder mit uneingeschränkten Lizenznutzungen: (bitte trotzdem immer genau auf Hinweise zu Lizenzen achten!)

• unsplash.com 
• Pexels  
• Pixabay

Hinweis für Backends mit eigentlich nicht mehr gewünschten Extras: Bilder lassen sich über BE-Konfiguration für "Text & Bilder" auch "positionieren/stylen" - z.B. Bild im Text links fließend

Tipp/Hinweis: bitte immer manuelle Formatierungschalter - sofern überhaupt verfügbar - vermeiden! Das Styling muss zentral über das sogenannte CSS (Cascading Style Sheet) erfolgen.

Topics:

• SEO - Search Engine Optimization
• Was macht eine gute Website aus?

Optimierung der Seiten für Suchmaschinen (SEO)

Wir starten mit ein paar Optimierungen, die wir für SEO nutzen sollten.

• Verbesserung der Ladezeiten:
  Minimieren der Anzahl der HTTP-Anfragen, verwenden effizienter Caching-Techniken und hosten der Website auf schnellen Servern.
• Mobile Optimierung:
  Da immer mehr Menschen mobil im Internet surfen, ist es wichtig, dassWebseiten für verschiedene Geräte, insbesondere für Smartphones und Tablets, optimiert sibd. Responsives Webdesign ist ein wichtiger Aspekt, der sicherstellt, dass unsere Webseiten auf allen Bildschirmgrößen gut aussieht und benutzerfreundlich ist.
• Nutzung von Meta-Tags:
  Der Name der Seite entspricht dem Seitentitel und wird zur Generierung der URL genutzt - siehe auch SEF (Search Engine Friendly URL)

Wie können die Redakteure helfen?

• Keywords: Definiert relevante Keywords für Eure Webseite integriert diese in den Text, die Überschriften, die Meta-Beschreibungen und die URLs. Aber nicht zu viel!
• Optimierung der Seitenstruktur: Sorgt dafür, dass Eure Webseite gut strukturiert ist. Verwendet klare Überschriften, Absätze und Listen. Dies hilft nicht nur den Benutzern, den Inhalt leichter zu erfassen, sondern vereinfacht auch den Suchmaschinen die Indexierung des Inhalts.
• Verbesserung der Ladezeiten: Langsame Ladezeiten können sich negativ auf die Auffindbarkeit von Webseiten auswirken. Optimiert die Dateigröße Eurer Bilder.
• Linkbuilding: Versucht hochwertige Backlinks von anderen vertrauenswürdigen Webseiten zu erhalten.
• Nutzung von Meta-Tags: Verwendet aussagekräftige Meta-Beschreibungen und Meta-Titel-Tags, um Suchmaschinen und Nutzern einen kurzen Überblick über den Inhalt der Seite zu geben. Diese Informationen werden häufig in den Suchergebnissen angezeigt und können die Klickrate auf Ihre Website erhöhen.
• Regelmäßige Aktualisierung von Inhalten: Aktualisiert regelmäßig den Inhalt der Webseiten, um Suchmaschinen zu signalisieren, dass Eure Seite relevant und aktuell ist.

Was macht eine gute Website aus?

Die folgende Liste natürlich ohne Anspruch auf Vollständigkeit ;-)

• Benutzerfreundlichkeit:
  Eine gute Webseite ist einfach zu navigieren und intuitiv zu bedienen. Die Inhalte sollten schnell und unkompliziert abrufbar sein, sodass Besucher ihre gewünschten Informationen problemlos finden können.
• Attraktives Design:
  Eine ästhetisch ansprechende Gestaltung ist ein wichtiger Faktor für eine gute Webseite. Farben, Schriftarten und Grafiken sollten harmonisch aufeinander abgestimmt sein, um eine positive Nutzererfahrung zu gewährleisten.
• Hochwertiger Inhalt:
  Eine gute Webseite bietet hochwertige, relevante und gut strukturierte Inhalte. Die Informationen sollten klar verständlich, aktuell und gut recherchiert sein. Fehlerfreie Texte und aussagekräftige Bilder tragen ebenfalls zur Qualität des Inhalts bei.
• Schnelle Ladezeit:
  Eine gute Webseite lädt schnell, da langsame Ladezeiten Besucher frustrieren und dazu führen können, dass sie die Seite vorzeitig verlassen. Optimierungstechniken wie Komprimierung von Bildern und der Einsatz von Caching helfen dabei, die Ladezeit zu minimieren.
• Responsives Design:
  In der heutigen mobilen Welt ist es wichtig, dass eine Webseite auf verschiedenen Geräten und Bildschirmgrößen gut dargestellt wird. Eine gute Webseite passt sich automatisch an die verschiedenen Bild