Infosite von Joe Brandes
Eine Website von Trainer Joe Brandes. Infos zu IT-Seminaren von A bis Z.
Das klassische PCS Zertifikat
Von der Hardware und Netzwerktechnik bis zu den den Betriebssystemen Windows, Windows Server und Linux
Ich biete diese Module an!
Zertifikat CMSOD
Module Basiszertifikat
Module Specialist
Ready for Tech Deep Dives...
Bitte gerne ihre gewünschten Seminarinhalte anfragen!
Für alle Interessierten aus dem Bereich des "CMS Online Designer (VHS)" findet ab dem 10.02.2025 das Modul "CMS Joomla" bei VHS Braunschweig als Bildungsurlaub statt.
In diesem CMS-Workshop wollen wir uns alle notwendigen Fähigkeiten von der Joomla-Installation bis zur ausgebauten Website erarbeiten. Das Seminar orientiert sich dabei an den aktuellen Leitfäden des Online-Zertifikats (VHS) aber natürlich vor Allem auch an den Bedürfnissen der Teilnehmer im Seminar.
Wir konzentrieren uns in aktuellen Joomla-Seminaren auf die Version 5.2.x von Joomla!
Hier die Rahmendaten unseres Seminars:
Ort: VHS Braunschweig, Heydenstraße 2, Raum 2.11Zeiten: Mo, 10.02. - Fr, 14.02.2025; jeweils 08.30 - 16.00 UhrDownloads: OneDrive (Trainer Joe Brandes) - siehe Screenshots der Seminartage (nach Sem)
Ich werde unser Seminar an dieser Stelle - wie gewohnt - ausführlich begleiten...Ihr Trainer Joe Brandes
Allgemeine Infos / Intro:
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
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
Eine sehr grundsätzliche Erfahrung in der IT ist, dass sich natürlich die IT modernisiert. ABER: keine Entwicklergemeinschaft setzt sich dauernd hin und erfindet das Rad neu. Wir werden uns also erarbeiten, wie unser CMS tickt und dann profitieren wir einfach mal ein paar Jahrzehnte davon ;-).
Die Themen und Schwerpunkte im Groben:
Und natürlich schauen wir vor Allem auch, dass wir Ihre Topics im Seminar klären.
Hier mal ein paar Zahlen von der joomla.org-Website (Stand: Februar 2025)
Das sind beeindruckende Zahlen! Aber wie immer gilt natürlich nicht nur der Blick auf Quantität sondern auch auch auf die Qualität der erzeugten Code-Basis und der zu Grunde liegenden Community. Und auch da ist Joomla absolute Spitze!
Wichtig: Lassen Sie sich zu Beginn des Seminars nicht von der Fülle an Infos in diesem Seminarbeitrag erschlagen. Es handelt sich auch um viel Zusatzinfos und Infos zu unserer Entwicklungsumgebung XAMPP-CMSOD, die sich im Laufe des Seminars immer wieder mal nachschlagen und nutzen lassen.
Die Inhalte der Seminarewoche sind auch nicht nur bereits über die Seminartage/Seminarabschnitte aufbereitet, sondern ebenfalls oft mit Zusatzinfos versehen. Und natürlich ergeben sich ja nach Seminarverlauf leichte Abweichungen. Am Ende des Seminars sind dann alle Infos der Seminarwoche für Sie komplett.
Topics:
Wir müssen unsere Arbeitsplatzrechner optimal für die Umsetzungen mit Content Management Systemen (CMS oder auch anderen Online-Techniken) vorbereiten.
Die Ansicht für den Standard-Dateimanager Window Explorer (Win + E) einstellen: wir müssen die Windows Einstellungen - Dateierweiterungen einblenden.
Grund für die Konfiguration: Dateien heißen bild.jpg oder bild.jpeg oder bild.JPG - wir müssen das vollständig wissen!
bild.jpg
bild.jpeg
bild.JPG
Die Windows Desktops sind eine sehr gute Möglichkeit sehr schnell zwischen verschiedenen Arbeitsschwerpunkten hin- und herschalten zu können. Diese Techniken sind auch für das Home-Office im Kontext von Online-Meetings oder Schulungen sehr zu empfehlen.
Aktuell experimentiere ich gerne auch mit TWM (Tiling Window Manager wie GlazeWM - inkl. Polybar-Alternative Zebar) für ein effizentes Window-Management. Ich kann so meinen Desktop-Workflow über die OS gleich halten (siehe WM i3 unter Linux-OSen).
Als beispielhaftes Szenario habe ich im folgenden einmal vier Desktops erstellt und genutzt:
Mehr zu den Windows Desktops gerne auch in einem speziellen Beitrag auf diesem Portal zum Thema "Shortcuts (Tastatur) - Desktops".
Für eine vollständigere Übersicht siehe auch Beitrag Toolsammlung auf diesem Portal. In Kürze:
Bei häufigeren Einrichtungen von Entwicklungsumgebungen möchte man das gerne noch effizienter gestalten. Das führt uns (oft) zum Paketmanagement mit Chocolatey oder auch Tool Winget unter Microsoft Windows.
Microsoft stellt mit winget ein Basistool für paketorientierte Softwareverwaltung bereit. Als Techniker auf Systemen mag ich on-Board Technik. Ich versuche also ohne extra Softwareinstallationen auszukommen.
Auf aktuellen Windows 11 (oder auch aufgefrischten Windows 10 Systemen) sollte winget funktionsfähig zur Verfügung stehen - sonst bitte mal Store aktualisieren oder ggf. Internet Recherche bei Problemchen.
Schnellanleitung für Paketinstallationen mit winget Paketmanagement:
# ====================================================================== # Winget CLI nutzen/testen # ====================================================================== winget list winget search docker winget show --id Git.Git # ====================================================================== winget install --id Docker.DockerDesktop winget install --id Mozilla.Firefox winget install --id eloston.ungoogled-chromium winget install --id ONLYOFFICE.DesktopEditors winget install --id Notepad++.Notepad++ winget install --id Microsoft.VisualStudioCode winget install --id Git.Git winget install --id 7zip.7zip winget install --id Microsoft.PowerToys winget install --id Microsoft.PowerShell # winget install --id IDRIX.VeraCrypt (bitte in Admin-Console in Admin-Account) winget install --id KeePassXCTeam.KeePassXC winget install --id FastStone.Viewer winget install --id VideoLAN.VLC
Die Intallationen lassen sich als Einzeiler umsetzen: winget install Git.Git 7zip.7zip Mozilla.Firefox Notepad++.Notepad++
winget install Git.Git 7zip.7zip Mozilla.Firefox Notepad++.Notepad++
WICHTIG: man sollte auf einem System immer nur einen Paketmanager nutzen.
Profitool / Enterprise: Chocolatey zur Installation der gewünschten Tools / Software
Hier: Schnellanleitung Softwareinstallationen mit Chocolatey PaketmanagementAnm.: wir entscheiden uns für die systemweite Nutzung der Installationen!Das bedeutet, dass wir die PowerShell (Konsole) für Chocolatey Befehle hier mit Adminrechten nutzen.
# Chocolatey bereitstellen: # ====================================================================== # in Admin-PowerShell Copy&Paste von Chocolatey Seite # https://chocolatey.org/install # einfach die Copy&Paste Zeile mit Maus anklicken und in der # PowerShell Konsole mit rechter Maus wieder einfügen # ====================================================================== # Chocolatey nutzen/testen # ====================================================================== choco outdated choco list --local-only # https://community.chocolatey.org/packages # Wichtig: Admin-PowerShell nutzen # mit Schalter -y keine Rückfragen beim Installieren # ====================================================================== choco install docker-desktop -y choco install microsoft-windows-terminal choco install firefox chromium opera choco install notepadplusplus choco install vscode choco install 7zip choco install powertoys choco install git choco install jq choco install nodejs choco install python3
Der Clou: die gesamte gewünschte Software ließe sich auch mit einem Einzeiler installieren (oder natürlich per Skript).
Und natürlich installiert man sich nur die wirklich benötigte Software. Für die Softwareverwaltung reichen dann einfache Befehle choco /? | choco list | choco list -l | install | install /? | outdated | upgrade ... mit der Windows PowerShell.
choco /? | choco list | choco list -l | install | install /? | outdated | upgrade ...
Wir erarbeiten unsere Seminar-Projekte lokal an unserem Windows-System. Die nötigen Services laufen ebenfalls auf dem lokalen System:
Die gesamte Serverumgebung ist also bereits fix & fertig vorbereitet - praktische Anleitungen erfolgen im Seminar!
(OPTIONALE) Windows hosts Datei
Anm.: der Einsatz von hosts-Technik(en) ist normalerweise nur in den CMSOD TYPO3-Seminaren zwingend von Nöten. Die TYPO3 Sites (Fachbegriff T3) und die entsprechenden Server "Rewrites" funktionieren oft nur mit diesen sauberen URL-Umsetzungen mit Hilfe von VHosts auf den Webservern.
Aber vielleicht möchten wir diese Technik (Anm.: sehr nah am späteren Hosting) auch mit unserem CMS umsetzen.
Es fehlen hierzu auf der Client-Seite noch wenige Zusatzkonfigurationen, damit wir unsere Projekte auch mit sauberen URLs nutzen können.
WICHTIG: Die folgenden Konfigurationen bitte mit Adminrechten umsetzen (Windows - Als Administrator ausführen / Benutzerkontensteuerung/UAC)
Hinweis: beispielhafte hosts-Datei wird von Trainer verteilt und ist auch in den XAMPP-CMSOD enthalten. Hier folgt ein abgespecktes Beispiel für eigene Erweiterungen!Pfad für etc-Hosts Datei auf Windows Systemen: C:\Windows\System32\drivers\etc\hosts
C:\Windows\System32\drivers\etc\hosts
Einträge für die gewünschten VHosts erstellen:
# den lokalen CMSOD-XAMPP per Domainname ansprechen können: 127.0.0.1 cmsod.local www.cmsod.local # Konfigurationen - hier: # Beispiele für joomla Site # ------------------------------------------------- # Domain: joomla-demo.local # Alias: www.joomla-demo.local # Webserver: C:\xampp-cmsod\htdocs\joomla\www.joomla-demo.local # Datenbank: joomla_demo # Einsatz: eine Umsetzung wie für das TYPO3-Seminar vorgeschlagen bzw. beim Hoster hier auch für Joomla 127.0.0.1 joomla-demo.local www.joomla-demo.local # am Besten auch gleich für weitere Seminarseite den VHost eintragen: 127.0.0.1 joomla-seminar.local www.joomla-seminar.local
Diese virtuellen Hosts (VHosts) müssen dann noch auf Serverseite (Apache Webserver) entsprechend passend konfiguriert sein! Siehe C:\xampp-cmsod\apache\conf\extra\httpd-vhosts.conf
C:\xampp-cmsod\apache\conf\extra\httpd-vhosts.conf
Kommen wir jetzt zu den nötigen Infos, Techniken und Anleitungen für die Inbetriebnahme unserer Serverumgebung XAMPP-CMSOD.
WWW - World Wide Web: Internet "Dienstleistung / Service / engl. Daemon - siehe angehängtes "d" bei httpd für Apache-Server-Software - wir benötigen und nutzen:
Zusammenspiel des Client-Server-Prinzips: es funktioniert wie eine KopiermaschineClient fragt nach Webdokument (REQUEST) - Server bereitet Daten (hier mit PHP) auf und kopiert an Client (RESPONSE)
Wichtig: unsere (serverseitigen) PHP-Dokumente müssen immer über eine Url im Browser aufgerufen werden und die Dokumente sollten immer über die Dateiendung *.php verfügen.
Wo bekommen wir unsere Serverumgebung technisch her? Da gibt es viele Möglichkeiten und natürlich auch (leichte bis größere) Unterschiede je nach Betriebssystem.
Für die beispielhafte Installation eines kompletten Linux AMP Servers mit der Fähigkeit jedwede CMS-Technik zu unterstützen habe ich auf diesem Portal einen Kurzbeitrag erstellt. Die größten technischen Herausforderungen der drei CMS Joomla, WordPress und TYPO3 hat hier TYPO3 - es kann aber eben auch technisch mehr.
Übersicht über das Trainingssystem basierend auf dem WAMP System der Apachefriends:
XAMPP für Windows - eine maßgeschneiderte Seminar-Version basierend auf XAMPP mit aktueller PHP Version:
Hier eine kleine Übersicht / Zusammenfassung zur genutzten AMP-Umgebung:
httpd.conf
extra/httpd-vhosts.conf
my.ini
php.ini
Im Seminar werden einfache Konfigurationsbeispiele dargestellt.
Bei Hostern: klassisches LAMP-System (Linux - Apache - MySQL/MariaDB - PHP)
Alternative mit Windows: als WAMP mit reinen Microsoft Servern: Windows Server Betriebssystem Basis plus IIS (Internet Information Server) als Webserver und MSSQL-Server als Datenbankserver!
Kurzbeschreibungen und Vorgehensweise im Windows-basierten Seminar mit XAMPP-CMSOD Archiv für Windows:
Ich stelle als Trainer ein fertiges selbstentpackendes XAMPP-7z-Archiv (exe-Datei) bereit, das bereits für die CMS Joomla, WordPress, TYPO3 und die anderen CMSOD-Seminare vorkonfiguriert ist.
Tipp: Umschalten-Taste und Rechte Maus im Ordner zeigt PowerShell im Kontextmenü. Beispielhafter Aufruf im Ordner des Archivs:
$a = Get-FileHash -Path .\xampp-cmsod-40-7.4.14-TEILNEHMER-20210124-1454.exe -Algorithm SHA256 $a.Hash
Die aktuellen Seminare sind an PHP 8.2 angelehnt, da hier über alle CMS und Traininigsinhalte die (aktuell 2025) größte Schnittmenge besteht (siehe jeweilige Roadmaps und Technical Requirements).
Infos zum XAMPP-CMSOD mit PHP 8.2 für meine Seminare:
Die Prüfsummen können in der PowerShell evaluiert werden.
Infos zum XAMPP-CMSOD mit PHP 8.1 für meine Seminare:
Die Prüfsummen können wieder in der PowerShell evaluiert werden.
VORVERSION: Infos zum XAMPP-CMSOD mit PHP 7.4 für Seminare:
Die Prüfsummen können immer in der PowerShell evaluiert werden.
Die Trainer-XAMPP-Archive werden immer nur bei Notwendigkeit (siehe z.B. früher bei XAMPP PHP-Version 7.4 für notwendiges PHP Update für TYPO3 v11 oder aktuell in 2025 für PHP 8.2 für größte Schnittmenge CMS) aktualisiert.
Die eingebauten Techniken (s.u. Grafiktools, ...) könnten stets auch selber aktualisiert werden oder natürlich in komplett anderen Entwicklungsumgebungen umgesetzt werden.
Hier folgt die Kurzanleitung für die Bereitstellung (Installation bedeutet hier ja einfaches Entpacken in Zielordner) und Nutzung unserer XAMPP-CMSOD Serverumgebung.
Schritte für die Inbetriebnahme de XAMPP-CMSOD:
C:\xampp-cmsod
C:\xampp
xampp-control.exe
localhost
http://
Hier mal eine Übersicht nach dem "Auspacken/Installieren":
Die vorbereitete Umgebung in einer kleinen Übersicht:
C:\xampp-cmsod\
C:\xampp-cmsod\htdocs\joomla\...
C:\xampp-cmsod\apache\conf\httpd.conf
C:\xampp-cmsod\php\php.ini
Bei Tests auf frischen Windows 10 Installationen (1909 bzw.19H2, 2004/20H1, 20H2, 21H1, 22H2) wird (ggf.) ein Fehler beim Starten des XAMPP Controlcenter (xampp-control.exe) angezeigt: "httpd.exe - Systemfehler (...Code kann nicht fortgesetzt werden, da VCRUNTIME140.dll nicht gefunden ...)"
VCRUNTIME140.dll
Unter Windows 11 - sofern bereits auch einige Standardtools installiert wurden - konnten diese Meldungen nicht mehr festgestellt werden. Das soll aber nichts heißen ;-).
Die nervigen Fehler-Popups müssen dann mit mehrfachen ESC weggeklickt werden.
Es muss die "Microsoft Visual C++ Redistributable für Visual Studio 2015, 2017 und 2019" Laufzeitumgebung installiert werden. Die nötige Installationsdatei (aktuell: VC_redist.x64.exe in Version 14.29.30037.0) kann leicht mit Suche nach "vc_redist.x64 2019" gefunden werden bzw. wird von mir mit dem XAMPP-CMSOD zusammen bereitgestellt. Die Installation muss mit Adminrechten durchgeführt werden (Neustart empfohlen).
VC_redist.x64.exe
Seit kurzem gibt es sogar einen MS-Shortlink für den direkten Download: https://aka.ms/vs/17/release/vc_redist.x64.exe (Nutzung auf eigene Gewähr)[Status: Feb 2025] Ebenfalls als Problemlösung für aktuelles Windows 11 System nötig gewesen und funktionstüchtiger Download!
Hinweis: beispielhafte httpd-vhosts-Datei ist bereits in dem vorbereitetem XAMPP-CMSOD vorhanden!
VHost-Konfigurationsdatei für den Apache: C:\xampp-cmsod\apache\conf\extra\httpd-vhosts.conf
Jetzt noch einen nötigen Eintrag für die gewünschte VHost-Domain www.joomla-demo.local bereitstellen:Tipp: Vorlage des VHost-Abschnitts für www.joomla-demo.local kopieren und anpassen für eigene Projekte
www.joomla-demo.local
VirtualHost *:80> ServerAdmin webmaster @ cmsod.local DocumentRoot "C:/xampp-cmsod/htdocs/joomla/www.joomla-demo.local" ServerName joomla-demo.local ServerAlias www.joomla-demo.local ... </VirtualHost>
Anm.: hier nicht alle Zeilen dargestellt; die Kommentarzeilen wurden weggelassen.
Für Technik- und CMSOD-Zertifikat-Interessierte befindet sich unter (URL) http: //localhost/cmsod-overview eine Website mit Infos rund um den CMSOD und die genutzten Techniken und Konfigurationen.
(URL) http: //localhost/cmsod-overview
Vorkonfigurierter Admin-Zugriff auf den XAMPP-Datenbankserver:
In der aktuellen XAMPP-CMSOD Version habe ich bereits drei Demo-Installationen für die CMS mit Grundinstallationen und Konfigurationen integriert.
/etc/hosts
Für die Trainingsumgebungen sind jeweils mit Bezeichnern "Testing" und "Seminar" weitere Server-Ordner und Datenbanken vorbereitet.
Die XAMPP-Ordner lassen sich auch komplett als selbstentpackendes 7z-Archiv sichern. Die Trainer-Version wird den TN ebenfalls als "Digitale Seminarunterlage" bereitgestellt. WICHTIG: Bitte vor dem Sichern alle Zugriffe (Dienste) beenden.
Hinweis/Erinnerung: vor dem Archivieren bitte erst alle Zugriffe und Dienste beenden und beim Entpacken bitte den notwendigen Basispfad C:\xampp-cmsod einhalten!
Screenshot der Joomla Website:
Links / URLs / Infosites:
Und natürlich viele weitere Online- (und Offline-) Quellen für das sehr beliebte und verbreitete Joomla-CMS
Infolinks:
Wir beginnen mit einem kurzen Rückblick.
Joomla basierts als Fork auf einem Company-driven CMS namens Mambo. Version 1.0 - konnte noch mit PHP4 eingesetzt werden, hat sehr viele Sicherheitslücken durch Grundmodi wie register_globals=On
Alte Herangehensweise mit LTS-Versionen (Long Term Support - ca. 3 Jahre; alternative Bezeichnung: LTR - Long Term Release):
Version 1.5 - bitte keinesfalls mehr einsetzen, Betrieb bitte ohne Legacy-Modus, inoffizielle erste LTS-Version seit Januar 2008! O-Ton von joomla.org: Support für diese Version von Joomla! endete am 31. Dezember 2012!Nachfolger Version 1.5 - 1.6 - 1.7 - 2.5 (man wollte nach Abstimmung die .5er-Nummern als LTS einprägsam machen)
Version 2.5 - bitte keinesfalls mehr einsetzen, seit Januar 2012 offizielle LTS-Version mit Nummer 2.5 Plan bei joomla.org: alle .5er sollten dann in der Folgezeit dann die LTS-Varianten mit gut 3 Jahren Support werden, die Joomla Version 2.5 wurde bis Ende 2014 supportet und ist somit ebenfalls "überaltert"O-Ton von joomla.org: Support für diese Version von Joomla! endete am 31. Dezember 2014!
Aktuelles Verständnis zu LTS bei Joomla: Joomla ist 2014 von LTS/LTR abgerückt und entwickelt nun kontinuirlich (engl./fachdeutsch: Continuous Development w/ Rolling Updates) weiter.
Version Joomla 3 (unterstützt bis 17. August 2023)
Kommen wir zum Joomla 3.x-Zweig bzw. einer Roadmap zu den Joomla 3 Versionen (bis 17. August 2023):
Und jetzt kommen wir zu den Joomla 4 Versionen:
Die Folgeversion Joomla 4 wurde (als Entwicklerversion) bereits 2017 veröffentlicht und war eigentlich schon für Ende 2018 / Anfang 2019 angekündigt.
Durch diverse Zusatzarbeiten und Verbesserungen am 3er-Zweig (s.a. GDPR/DSGVO Technik) verzögert sich der offizielle Launch für Joomla 4 bis auf Weiteres (Ende 2019? Nein - es wurde 2021).
Den Statusartikel zur Roadmap von Joomla findet man auf deren Infoportal. Dort gibt es dann auch weiterführende Darstellungen zum Thema Updates/Upgrades.
Anm. zu Literatur [Status 2025] - keine Literatur zu aktuellesten Joomla Entwicklungen und Versionen verfügbar
Links / Beiträge zu Joomla 4
Wir haben in früheren Seminaren dann auch mal ein Upgrade von 3.10.x auf Joomla 4 durchgespieltt. Hier wurden Betrachtungen zu Erweiterungen sehr wichtig. Joomla Kern-Technik (Joomla Core) zu aktualisieren ist garantiert möglich. Wie es bei bestimmten Joomla-Extensions und deren Joomla 4 (bzw. Nachfolge-Nummer) Tauglichkeit bestellt ist, das ist eine völlig andere Frage!
Die aktuelle Joomla 5 Version wurde zeitgleich mit Version 4.4 am 17. Oktober 2023 eingeführt.
Anmerkungen zu Technikaktualisierungen:
So weit in Kürze zu der Historie und den Joomla Versionen über die Jahrzehnte! Kommen wir nun zur Technik, die wir für Joomla benötigen und durch Joomla erhalten.
Vorweg wieder ein paar historische Anmerkungen zu den Techniken, die wir mit Joomla erhalten haben.
Neu mit Joomla 4: (Auswahl von Topics)
Tipp: Testen von Barrierefreiheit und vor Allem Responsive und Mobile Technik mit dem Code Inspector von Mozilla Firefox oder anderen Browsern:Tastenkombination Umschalten + Strg + M (bzw. Menü - Webentwickler - Bildschirmgrößen testen)
Wir entpacken im Webdokument-Ordner unseres XAMPP-Servers an passender/gewünschter Stelle das Install-Archiv der Joomla Entwicklergemeinschaft.Anm.: Download bzw. Bereitstellung der aktuellen Version 5.2.x von joomla.org bzw. aus lokal in Seminarumgebung
Tipp: wenn Sie die Joomla-interne Update-/Upgrade-Technik ausprobieren wollen, dann können Sie später gerne auch Vorgängerversionen nutzen.
C:\xampp-cmsod\htdocs\joomla\joomla-bu
http://localhost/joomla/joomla-bu
joomla_bu
Ein Aufruf der Webadresse zeigt uns die Installationroutine für Joomla. Tipp: Installation der Beispieldaten "Joomla! erlernen" in der Auswahl des Installationsassistenten
Hinweis zur Umsetzung mit Online-Hosting-Technik: für die Komplettierung der Installation direkt bei einem Hoster sollte (bzw. muss) vorher eine Datenbank mit DB-Tool des Hosters (oft: phpMyAdmin) auf Ihrem MySQL-Datenbankserver angelegt werden!
XAMPP-Datenbank-Zugangsdaten: (Übersicht siehe auch Datei password.txt im XAMPP-Hauptverzeichnis)
password.txt
Anm.: CMS-(Vor-)Installationen meines XAMPP-CMSOD haben folgende Zugangsdaten:
Für eine beispielhafte Installation mit Anmerkungen zum Thema "XAMPP (lokal) vs. HOSTER (online)" siehe folgenden Screenshot mit Anmerkungen:
Wichtig.: saubere Joomla-Installationen - insbesondere für Mehrsprachen-Sites - müssen als "leere" Installationen durchgeführt werden - also ohne Beispielbeiträge!Das werden wir als Wiederholungsübung dann durchspielen und über die Seminartage als Joomla-CMS sauber mit Inhalten füllen und pflegen!
Alles direkt zu Joomla gehörige wird als Joomla-Kern (Joomla Core) bezeichnet.
Joomla CMS basiert auf dem Joomla Framework (https://developer.joomla.org/framework.html). Dieses Framwork hält alle grundlegenden Joomla-Techniken bereit.Fremde Erweiterungen (z. B. Komponenten, Module, Plugins, Templates) werden als 3rd Party bezeichnet und können das Framework nutzen.
Wichtige Vorteile von reiner Joomla Core Technik (ohne Fremderweiterungen): wird immer sauber gepflegt und für kommende Versionen aktualisiert und die Datenübernahmen (Updates) werden "garantiert"
... resultieren aus folgenden Joomla-Techniken
index.php
com_content
Übungen: FE und BE aufrufen und Testen des BE-Zugangs (Adresse der Site plus Ordner/URL ./administrator )Web (BE): http: // localhost / joomla / joomla-bu / administrator
./administrator
http: // localhost / joomla / joomla-bu / administrator
Über Menüpunkt Extensions - Language(s) die Sprache "german" nachinstallieren und dann für Site (FE) und Administrator (BE) als Standard (Default) einstellen Wirkung: siehe Suchbox "Search..." wird zu "Suchen..." und Link "Back to Top" wird zu "Nach oben"
Technische Spezialität mit RTL-HTML-Ausgaben (hier RTL: Right-To-Left https://manual.joomla.org/docs/building-extensions/templates/rtl/):Sprache Arabic - das ergibt in der Site eine RTL-Darstellung (Right-To-Left) - Joomla unterstützt über 70 Sprachen![Status 2025 mit Joomla 5] Für diverse Sprachunterstützungen sind wohl die automatisierten Erstellungen über Crowdin (siehe https://joomla.crowdin.com/cms) eingeschlafen. Das führt dazu, dass nicht mehr alle Sprachen direkt über die hier dargestellte Standard-Installation von Sprachen verfügbar sind.Lösung: Zugriff auf alte Sprachversionen wie z.B. über Link https://downloads.joomla.org/language-packs/translations-joomla4/downloads/joomla4-arabic-unitag/ für Arabic (Stand: August 2021!). Man bekommt ein Paket mit den Site- und Administrator-Sprachen und eine RTL Arabisch Unterstützung. Auf Testumgebungen gerne einfach ausprobieren (no Risk!) und für das Deinstallieren einfach das Paket Arabic auswählen.
Das Backend am Besten mit einer einmaligen Ab-/Anmeldung testen/aktualisieren.Die Benutzer können sich Ihre Spracheeinstellungen später individuell einstellen.
(Ordner, Technik, Overrides)
Neue Sprachen werden installiert und als Standard für Site (Frontend) eingestellt: z.B. Danish (da-DK), Arabic (ar-AA)
Templatetechnik: das RTL (Right-To-Left) fähige Template Cassiopeis (bei Joomla 3: Protostar) zeigt für Arabic gleich eine Rechts-Nach-Links gestylte Seite!
Übung: in Sprachdatei zum Template "protostar" ./language/de-DE/de-DE.tpl_protostar.inikann die Sprachkonstante des Templates TPL_PROTOSTAR_BACKTOTOP geändert werden!
./language/de-DE/de-DE.tpl_protostar.ini
Anm.: in der index.php des Templates Protostar wird diese Joomla-Sprach-Variable mittels JText::_('TPL_PROTOSTAR_BACKTOTOP') als Platzhalter mittels eines PHP-Skriptblocks eingefügt!
JText::_('TPL_PROTOSTAR_BACKTOTOP')
Weitere Übungen / Sprachanpassungen
Tipp: man kann alle übersetzten Stellen im FE/BE mittels Aktivierung des "Sprachen - Debug"-Modus in der Konfiguration aktivieren. Dann lassen sich alle übersetzten Stellen mit **...** erkennen!
Problem: man ändert Dateien im Standard-Language-Ordner von Joomla - dort werden womöglich bei Updates von Sprachdateien/Infos Ihre gemachten Änderungen wieder überschrieben!
(hier: Sprachen - aber später auch: Komponenten, Module, Plugins, Layouts)
Overrides ermöglichen das "Überschreiben" von Sprachen-Platzhaltern mittels Erweiterungen - Sprachen - OverridesHier einfach die gewünschte Sprachkonstante sauber in einem Formular eingeben und hinterlegen.
Technisch.: im Ordner/Datei ./language/overrides/de-DE.override.ini werden Ihre persönlichen "German-DE-Übersetzungen" als Infos hinterlegt und können bei Aktualisierungen der Joomla-Sprachdateien dann eben nicht mehr überschrieben werden!
./language/overrides/de-DE.override.ini
Joomla bietet für alle anderen Ausgaben und Techniken (Komponenten, Module, Plugins, Layouts) entsprechende Overrides an (siehe Templates mit eigenen Ausgabetechniken für unsere Website → Ordner ./html )
/html
Joomla bietet einfaches SEO/SEF mit einem Klick:./index.php/suchen (z.B.)hier eigentlich SEF (Search Engine Friendly URLs) mit System - Konfiguration
./index.php/suchen
Analyse der resultierenden URLs, die Joomla ausliefert: ./index.php?option=com_content&view=article&id=13:vorstand&catid=11:vorstand... bzw. bei Verlinkung eines Suchformulars: ./index.php?option=com_search&view=...
./index.php?option=com_content&view=article&id=13:vorstand&catid=11:vorstand...
./index.php?option=com_search&view=...
Echtes SEF/SEO dann später in unserem Wochenprojekt (z.B. joomla-blanko) mit Aktivierung der Konfigurationen und Bereitstellung vorhandener .htaccess (aus Beispieldatei htaccess.txt kopieren) und Webserver Apache mit mod_rewrite (siehe Ausgaben/URL auf dieser Website).
.htaccess
Siehe: Menüs in horizontaler und vertikaler Darstellung und Nutzung
Das Backend ist durch das HTML/CSS/JS-Framework Bootstrap komplett für Mobile Platformen (Smartphones, Tablets) geeignet (Responsive Web Design)Erinnerung: bei Mozilla Firefox mittels Umschalten + Strg + M in Modus "Bildschirmgrößen testen" schalten
Übungen zur Joomla Konfiguration:
Nachinstallationshinweise: die Hinweise ausgeblendet; insbesondere "Zwei-Faktor-Authentifizierung" (Wikipedia Link) nur ausblenden - bitte hier nicht aktivieren! Das sollten man später für die Live-Projekte online vorsehen, umsetzen und testen.
Joomla kann Versionen für Ihre Beiträge verwalten.
Joomla kennt die Verwaltung von Versionsverläufen für Beiträge - es können also gespeicherte Vorversionen der Beiträge beim Editieren ausgewählt und verglichen werdenDie Technik kann über Beiträge - Optionen - Bearbeitungslayout konfiguriert werden (Aktiv/Deaktiv, Anzahl Versionen)
Kategorien und Beiträge
Kategorien der Beispielinstallation "Joomla! erlernen" mit Hilfe unterschiedlicher Filter und Ansichten analysiertBearbeiten von Beispielbeiträgen für bestehende Haupt-Kategorie "Joomla"
Hauptkategorien: "uncategorized" und Kategorien der Beispieldaten analysieren
Basics:
Erster Hinweis zu Menüs: Festlegen der Startseite (Stern in Menü - Menü mit Startseite durch Haussymbol gekennzeichnet)
Einfache Übungen zu Beiträgen und Menüs - mehr dazu in den praktischen Übungen
z.B. Backend: Inhalt - Beiträge - Optionen
Generelle Einstellungen für Beiträge, Kategorie, Kategorien, Blogs/Haupteinträge, Listen und Co
Übung: Darstellung der Startseite (Main Menu - Home) über die eigenen Layout-Optionen oder über die allgemeinen Optionen für Beiträge.
Für alle möglichen Joomla-Techniken/Komponenten (Menüs, Benutzer, Beiträge, Templates ...) gibt es eine individuelle Einstellung von Optionen.
Erinnerung für XAMPP / Joomla-Projekte: XAMPP Kontrollcenter xampp-control.exe sauber starten und natürlich die Dienste Apache und MySQL starten
Tipp: auf Desktop verknüpfen bzw. in Taskleiste eintragen (Anm.: bitte nicht einfach aus Ordner xampp-cmsod herausziehen!)Browser bereitstellen und URL für das aktuelle Joomla-BU-Projekt eingeben - BE für das Projekt öffnen
Lokal: C:\xampp-cmsod\htdocs\joomla\joomla-blankoWeb: http://localhost/joomla/joomla-blankoDatenbank: joomla_blanko (bitte auf Unterstrich achten bei Datenbanknamen)
C:\xampp-cmsod\htdocs\joomla\joomla-blanko
http://localhost/joomla/joomla-blanko
joomla_blanko
Aufruf der Webadresse zeigt uns dann wieder die Installationroutine für Joomla - hier jetzt ohne Beispieldaten installieren!
Auf der folgenden Leerseite wurde bereits der Text für die Startseite von "Home" auf "Startseite" geändert. Des Weiteren wurde das Modul für das Hauptmenü eingedeutscht und der Titel für das Login-Modul ausgeblendet.
Diese Rohinstallation ist der normale Weg für ein neues Joomla-Projekt und besonders für mehrsprachige Joomla-Projekte entscheidend.
Tipp: durch den Vergleich mit den Beispielinstallationen der Joomla-Entwicklergemeinschaft lernt man viel über die angewandten Joomla-Techniken. Das werden wir im Seminar immer wieder mal nutzen und anwenden.
Einstieg in die Analyse der Joomla-Strukturen; Vorarbeiten für die Verständnisse zur Joomla-Arbeitsweise und die Einbindung der "Templates" zur gestylten Ausgabe unserer Joomla-Beiträge und -Daten
Wichtig: alle Dateien mit "UTF-8" und am Besten immer mit Notepad++ (oder anderen professionellen Editoren wie VS Code) bearbeiten - niemals mit Editor von Windows! Die nachfolgende Tabelle ist nicht vollständig, sondern soll die wichtigsten Ordner und Dateien auflisten.
.htpasswd
/api
./cli
./components
./modules
./plugins
./includes
./libraries
./language
./templates
configuration.php
htaccess.txt
web.config.txt
web.config
robots.txt
LICENSE.txt
README.txt
... hier in angepasster Kürze - gerne ausführlicher als Literatur: J. Jacobsen benutzerfreun.de "Website-Konzeption - Erfolgreiche Websites planen, umsetzen und betreiben"
Stichworte:
Je besser die Projekte geplant (strukturiert!) sind, um so einfacher lassen sie sich dann mit Joomla umsetzen. Insbesondere der effiziente Entwurf von Kategorien für das Projekt ist wichtig!
Anm.: Übungen hier nur "angerissen" - vollständige Doku per Screenshots für Seminarteilnehmer
Hier: Vereinsszenario / Beispielszenarion - wird oft im Seminar dynamisch mit Trainees umgesetzt.
Kategorien: (hier mal mit eigener Hauptkategorie für den Verein)
Wie gesagt: diese Auflistung nur als Anriss...
Erinnerung: Module "positionieren" uns Inhalte auf der ausgelieferten Website oder auch im Administrator-Backend
Über die Verwaltung mit Erweiterungen - Module die jeweiligen Module analysiert und konfiguriert.
Übung Administrator (BE):
Übung Site (FE):
Erste Infos zu Modulpositionen mit einer Vorschau bei den Templates
Anm.: Übungen hier nur "angerissen oder ähnlich" - vollständige Doku per Screenshots für Seminarteilnehmer bzw. im Seminar ausgearbeitet
Neues Menü erstellt (Menütitel: Übungsmenü):
Neues Modul Navigation - Menü für das Menü erstellt bzw. zugewiesen Templateposition: position-7 ("Rechts" im Template Protostar)
Neues TopMenü-Modul für horizontale Navigation nach Vorbild aus Beispielinstallation "Joomla erlernen"Wichtig für das perfekte Styling (gemäß Bootstrap)→ Erweiterte Eigenschaft: Menüklassensuffix " nav-pills" (Beachten: hier Leerzeichen vor Klasse nav-pills!)
nav-pills
Anm.: nicht verwechseln - es gibt auch noch Modulklassensuffix
Wichtig: hinter diesen Techniken/Kenntnissen verbergen sich die nötigen Anpassungen für die Nutzung von "fremden Templates" und die saubere Zuweisungen der nötigen CSS-Klassen (Styles)
Für die Elemente Beiträge, Kategorien oder auch Benutzer können in Joomla auch eigenen Felder definiert werden.
Hierdurch ergänzt man die Infos zu den Elementen mit Bordmitteln Joomla - also ohne Extensions!
... sollte für Joomla 4/5 aktualisiert werden ...
Topic: Joomla-Benutzer-Konten (in Seminaren oft nur mit Erstellübungen zu Benutzern und praktischen Tests angerissen)
Rechte der Benutzer werden über die Zuweisung von Benutzergruppen (Rollen) organisiert und können mittels ACL erweitert werden.
Links
Frontend (FE) - Site:
Backend (BE) - Administrator:
Übungen mit Benutzern/GruppenVorschlag: einfach für alle Gruppen Beispieluser joeauthor bis joeadministrator anlegen und austesten
Zusammenfassung / Stichwort für Joomla-Projekte - beispielhafte Vorgehensweise!
mein-joomla-projekt.de
./joomla-projekt
Für die Datenbank muss vorher im Kundencenter des Hosters eine entsprechende DB erstellt werden!Die DB-Zugangsdaten muss man kennen und sollte eine entsprechende Dokumentation besitzen!
Übertragen und Wiederherstellen der Ordner und DB beim Hoster (z.B. mittels Akeeba Kickstart)
Aus den aktuellen Smartphone, iPad, Tablets, Kompaktkameras, Digitalen Spiegelreflexkameras kommen "Mega-Pixel" in MegaBytes:z.B. 1600 x 1200 Pixel oder über 6000 x 4000 Pixel (24 Megapixel) in Größen von mehreren Megabytes!
Tipp: Beispielbilder mit uneingeschränkten Lizenznutzungen auf unsplash.com.
Einfaches Tool zum sehr einfachen "Kleinrechnen": Radical Image Optimization Tool (Riot) das Werkzeug lässt sich auch gerne in der Konsole bedienen und kann auch ganze Ordner mit Bildern verkleinern.
Alternativen: PortableApps mit Tool XnView nachinstallieren, oder 3D-Paint, oder Gimp, oder Photoshop (;-), ...
Profis möchten die Bilder dann bitte nicht nur in den richtigen "Breiten" (in Pixel) haben, sondern natürlich auch in den gleichen Proportionen, damit die Bilder auch einmal in benachbarten Darstellungen exakt gleiche Darstellung und "Höhen" haben. Hierfür muss man die Bilder mit einer Bildbearbeigung zuschneiden - engl. croppen. Das kann gerne auch mal recht anspruchsvoll werden. Im Seminar haben wir einfach mal mit der Windows 11 Fotos App experimentiert, die einen recht einfache und ansprechende Lösung bereitstellt.
Das ist zwar keine einfach automatisierbare Technik für 100te von Bilder in einem Schwung - aber erfüllt auf jeden Fall seinen Zweck.
Die beiden hier dargestellten Tools benötigen keinerlei Admin-Rechte zum Einrichten. RIOT gibt es auch in einer portablen Variante und die Windows 11 App ist standardmäßig auf Windows 11 (bzw. Windows 10) Systemen verfügbar (siehe Windows Store).
Übung: einfacher Joomla Core Medienmanager
Der Medienmanager ermöglicht einfaches Ordner- und Datei-Management Technik inkl. Details oder Vorschaubilder.
Analyse/Vergleich: Joomla-Site-Ordner: C:\xampp-cmsod\htdocs \ joomla\joomla-bu\imagesentspricht URL: http://localhost / joomla/joomla-bu/images
C:\xampp-cmsod\htdocs \ joomla\joomla-bu\images
http://localhost / joomla/joomla-bu/images
Wichtig: in allen Ordner liegt zur Sicherheit eine Dummy-Datei index.html für Anzeige leerer Browser bei Direktaufrufen
index.html
Für die Integration von Bildmaterial bietet Joomla verschiedene Alternativen an.
Variante 1) spezielle Integration über Registerkarte "Bilder und Links":
Hier kann man Anreißer/Teaser-Bilder (klein) und die Beitrags-Anzeige-Version (groß) jeweils zuweisen stylen.
Tipp: kleine/große Bilder sind in Joomla-Installationen unter ./images/sampledata/cassiopeia zu finden.
./images/sampledata/cassiopeia
Ich stelle als Trainer ebenfalls webtaugliche Bilder in unterschiedlichen Größen (150px / 250px / 800px) zu Testzwecken zur Verfügungdann z.B. unter ./images/beispielbilder/100px bzw. ./images/beispielbilder/800px
./images/beispielbilder/100px
./images/beispielbilder/800px
Variante 2) Button zum Bild einfügen des Editors (am Besten mit erweitertem Editor - z.B. JCE)
Anm.: hier könnte man viele Konfigurationen und Styles manuell für jedes Bild (img-Tag) zuweisen!
Besser ist hier die Lösung allgemein über CSS-Klassen zuzuweisen. Ggf. passen wir dann beim Thema Templates mal das CSS für die eingefügten Bilder an, damit diese besser im Textfluss fließen und schöner gestylt sind (z.B. Rahmung, Hintergrundfarbe, ...)
Übungen: Bilder in Beiträgen einarbeiten und testen.
Bootstrap 5 Klassen nutzen
Da für die Ausgaben mit Template Cassiopeia das Bootstrap Framwork benutzt wird, können wir auf dessen Fundus an CSS-Klassen zugreifen:
Siehe Bootstrap Dokumentation zu den "Utilities / Float": https://getbootstrap.com/docs/5.2/utilities/float/ Übuing mit Klassen
float-start
float-end
Bevor wir uns den Erweiterungen zu Joomla widmen eine kurze Erinnerung:
Joomla Core ist sicher und lässt sich problemlos aktualisieren / updaten! Wenn wir "Fremd-Software" / 3rd-Party Extensions integrieren kann sowohl die Sicherheit als auch die problemlose Aktualisierung nicht mehr garantiert werden - hier sind wir selbst in der Pflicht!
Starten wir mit einem Joomla-On-Board Tool für die Absicherung von E-Mail-Daten in unserer Website.
über Erweiterungen - Plugins - Inhalt - E-Mail-Verschleierung (Plugin-Name emailcloak) werden E-Mailadressen per JavaScript verschleiert/unkenntlich gemacht, ohne die Funktion zu verlieren (Klick startet also den Standard-E-Mail-Client); Tests mit Aktivierung/Deaktivierung des Plugins
Ordnerstruktur und Datei:./joomla-blanko/plugins/content/emailcloak/emailcloak.php
./joomla-blanko/plugins/content/emailcloak/emailcloak.php
Wichtig: sehr häufig muss nach Installationen von Plugins das Plugin erst einmal aktiviert werden! Das wird häufig vergessen!
Die Joomla Entwicklergemeinschaft betreibt ein Online-Repository mit Erweiterungen (Komponenten, Module, Plugins): das JED (Joomla Extensions Directory).
Eine Einschätzung der Erweiterungen kann anhand verschiedener Infos vorgenommen werden:
Das JED ist in Form der Technik "Aus Webkatalog installieren" auch im BE von Joomla angekommen: Erweiterungen - Verwalten - Aus Webkatalog installieren
Hinweis: eine Sammlung von "Premium-Extensions" werden wir uns im Seminar erarbeiten und da geht es auch gleich mit einem Editor mit Medien Manager los...
[Status 2025] Der Standard-Editor TinyMCE hat ordentlich nachgelegt und bietet als Plugin viele Einstellungen (z.B. Profile für Joomla-User) und andere technische Spielereien, die den Standard-Editor für mich wieder interessant machen.
Hersteller - https://www.joomlacontenteditor.net
Ein toller Ersatz für Standardeditor TinyMCE - genauer gesagt: ein aufgerüsteter TinyMCE.
Installation der JCE Komponente und zusätzlichen Modulen/Plugins über den Webkatalog ggf. wegen falschem Link zu Zip-Install-Archiv nicht möglich!Natürlich dann auch eine manuelle Installation möglich - Bereitstellung/Download des Installpakets von JCE-Portal.
JCE Pro: das Entwicklerteam hält auch eine "Pro"-Version mit Zugriff auf weitere Techniken (JCE-Plugins und Support) für knapp 40 Euro im Jahr bereit und blendet bei der freien Version die entsprechenden Hinweise ("Werbung") ein!
Sprachpaket "german" für JCE (kann über JCE-Portal heruntergeladen - wird dynamisch mittels Übersetzungsportal erzeugt)Die Sprachdatei dann einfach über den Standard-Erweiterungsmanager von Joomla installieren - siehe hierzu auch die Erläuterungen des JCE-Forums.Der JCE lässt sich über Profile auch auf eine abgespeckte Ansicht für die Joomla-Autoren anpassen.
Anm. / später: JCE MediaBox ist eine Joomla-Plugin-Erweiterung (plg_jcemediabox_xyz.zip)
Übung: erste Tests mit JCE (Editor und Medienmanager/Bildmanager) und Einblick in die weitreichenden Konfigurationsmöglichkeiten.
Standardeditor konfigurieren:
Erinnerung: bitte "Styling" immer den Anpassungen mittels CSS (→ siehe Templates) überlassen und nie manuell mit einem Editor "stylen"!
Die Installation des PlugIns kann wieder über den Webkatalog erfolgen.
Wichtig: Aktivierung (Veröffentlichung) des PlugIns nicht vergessen - über Erweiterungen - PlugIns - Suche nach JCE...
Übung: JCE MediaBox nutzen - Klick auf kleines Beitragsbild (hier: 250px) öffnet "LightBox/Animation/Bildergalerie" mit großem Bild (hier: 800px)
Vorgehen / Kurzanleitung:
Tipp: wenn mehrere Bilder beim Öffnen als Bildergalerie verlinkt werden sollen, dann in Eigenschaft Gruppe denselben Eintrag (z.B. gallery oder ds - für DiaShow) vornehmen
Beispielhaftes "Bilder / Bildergalerie"-PlugIn - Link JED
eine für nicht-kommerzielle Einsätze wieder kostenlose Extension von Viktor Vogel (Link)
Für die mächtige PlugIn-Gallery gibt es sogar ein Button-Plugin (editors-xtd) für die Joomla-Editoren.
Auch hier wieder bitte nicht die Aktivierung des Plugins vergessen und auch in den Eigenschaften die nötigen Einstellungen vornehmen.Tipp: beim Editor-Plugin: Token muss hinterlegt werden für ein "Modalfenster - on the fly" mit allen Einstellmöglichkeiten
Übung: Nutzung von Parametern caption=1 und fileinfo=1 und einer Bildinfodatei captions-de-DE.txt Bitte unbedingt Notepad++ nutzen - einen beispielhaften Ordner stelle ich als Trainer als Ordner inkl. Dateien (Zip - bitte entpacken) bereit.
Weitere Installationsvorschläge:
Übung mit Extension DJ-ImageSliderAuslieferung mit Hilfe des Moduls dj-imageslider an Position banner des Protostar-Standard-Template, Konfigurationen
...tbc...
... und Trainer Joe Brandes ;-)
Die folgende Liste ohne Anspruch auf Vollständigkeit. Nach diversen Aufräumarbeiten bei Umstellungen von Joomla 3 auf 4 auf 5 jetzt noch gute 5000 Extensions im JED!Bitte den Einsatz genau analysieren und auf Nachhaltigkeit der Extensions und Verträglichkeiten mit Joomla Core und Update-Technologien achten!
Man beachte, dass manche der Extensions umfangreiche Techniken aber auch Einarbeitungszeiten und Konfigurationen verlangen.
Auf der Website CSS Zen Garden (Link) wird die saubere Trennung von Inhalten (hier die HTML-Seite) und Design/Layout (die jeweilige CSS-Datei) gezeigt.
Bei Joomla stellen uns dann die Templates diese Trennung sauber zur Verfügung.
Die individuellen Anpassungen per Styling (CSS) oder PHP-Programmierung (Overrides) können dann mittels sogenannter Child-Templates umgesetzt werden!
... eine erste Annäherung und Zusammenfassung - siehe auch alte Abschnitte zu Templates Joomla 3 und Joomla 4.x weiter unten
Grundidee: Trennung von "Inhalten" und "Design" - siehe Beispielwebsite "CSS Zengarden"
Bei Joomla sind für das "Design" die Templates zuständig, die allerdings nicht nur aus "Layout/Design"-Technik bestehen, sondern auch Logik enthalten!
Beispiel für diese Logik innerhalb eines Templates: wenn einmal an einer Template-Position (z.B. Sidebar Rechts sidebar-right) keine Module platziert werden, dann wird der Inhalt gleich komplett über die gesamte Seitenbreite gestylt, der entsprechende Block (div) also weggelassen und per CSS-Styling die gesamte Breite genutzt
Technisch Nutzung eines Templates über Stile: man installiert in Joomla Templates (siehe hier Standard-Templates: Protostar, Cassiopeia) und kann die Template-Zuweisung dann über (min.) einen Stil (z.B. Cassiopeia - Default) nutzen. So hat man auch Zugriff auf ide Konfigurationstechnik der Template-Technik (z.B. Logo, Schriften, Farben, ...).
Das Standard-Template seit Joomla 4 heißt Cassiopeia und basiert auf technischer Umsetzung mit dem HTML-/CSS-Framework Bootstrap.
Linksammlung zu Standardtemplate Cassiopeia:
Vorschau auf Modul-Positionen:Für das Standard-Template die Modulpositionen eingeblendet (Optionen Templates - Vorschau auf Modulpositionen aktivieren)Übungen mit Positionen - Zuweisung von Templates mittels Stilen durchgeführt.
Anm.: bitte auf Live-Seiten immer wieder die Vorschau deaktivieren, weil man sonst die Postionen auf per URL anzeigen lassen kann:index.php?tp=1&template=beez3 (Erlätuerung: tp - Template Preview; template - ein vorhandenes Template, kann man leicht dem Quellcode einer Seite entnehmen)
index.php?tp=1&template=beez3
Übung: Stil "Cassiopeia - default" kopiert in "Cassiopeia - default (2)" und letzterem Stil alternative Farbe eingestellt (Erkl. das lädt alternative CSS-Datei)mittels Register Menüzugehörigkeit individuelle Seite auf den neuen Stil verlinken
Tipp zu Farben definieren/auswählen für Designs z.B. mit Websites wie Paletton - aka colorschemedesigner )Hinweis zu Web-Fonts: Freie, kostenlose Fonts z.B. bei Google
Datennutzung: bitte stellen Sie die Fonts auf dem Webspace bereit und nicht per Content Delivery Network (CDN) via Google und Co. Das könnte zu Abmahnungen führen, da der Aufruf der Webpräsenz fremde Inhalte anderer Server einbindet. Als Techniker sage ich hierzu: Döh!
Analyse Template-Ordner:Wichtig: alle Joomla-Dateien immer mit "UTF-8" (also z.B. mit Notepad++) bearbeiten - möglichst nicht mit dem Editor von Windows!
Templates Standardverzeichnis: ./templates/cassiopeia
./templates/cassiopeia
./html
component.php
error.php
offline.php
favicon.ico
templateDetails.xml
Seit Joomla 4.1 werden die Mediendateien (Auslieferung auf Site/Frontend) technisch sauber getrennt!
Medienordner für Template: ./media/templates/site/cassiopeia
./media/templates/site/cassiopeia
./css
user.css
./images
./js
./scss
Übungen zu Template Cassiopeia oder auch Alternativen, sofern verfügbar - erfolgen im Seminar.
Hierfür will ich die Basics zur technisch sauberen Nutzung von Joomla Templates zusammenfassen.
Ein Template wird als Ordner- und Dokumentsammlung mittels Installation im System integriert. Hierfür werden die entsprechenden Ordner (s.o.) platziert und in manchen Template-Installationen auch Datenbank-Einträge vorgenommen!
Generell gilt: Joomla 4.1/5 Templates sollten nicht mehr manuell in das Joomla System kopiert werden!
Durch die Installation erhalten wir einen Standard Stil (z.B. Cassiopeia - Default) zur Nutzung der Template-Technik. Da wir diese Stile mehrfach erzeugen können, erhalten wir mehrfach Stille (Template-Konfigurationen), die wir flexibel gewünschten Menü-Ausgaben zuweisen können - clever.
Wenn wir Templates indviduell anpassen wollen, dann geht das oft über die fest im Template vorkonfigurierten Auswahlmöglichkeiten hinaus (siehe Cassiopeia: Logo, Alternative Farbe, Schriften, ...). Die Anpassungen lassen sich auf die folgenden zwei Umsetzungen komprimieren:
html/css/user.css
html/images/favicon.ico
Wichtig: die Lösungen sollten immer zusätzlich zur bestehenden Standard-Template-Technik erfolgen und niemals die Original-Dateien überschreiben. Das wäre bei späteren Joomla- bzw. Template-Aktualisierungen fatal, weil wir dann alle unsere Anpassungen verlieren würden!
Joomla bietet hierfür die Child Templates an. Also immer für das Template der Joomla-Installation ein Child-Template erstellen, was uns wieder einen entsprechenden "Child"-Stil spendiert. Bitte nicht vergessen, diesen neuen Stil als Standard für die Joomla Ausgabe zu definieren!
Jetzt können wir über das Child Template alle Anpassungen separat zum Original Template (z.B. Cassiopeia) vornehmen. Bei späteren Aktualiserungen des Templates behalten wir alle unsere Dateien und Codes!
... Zusammenfassungen / Einschätzungen: Free/kostenlos vs. Kauf, Lizenzmodelle, ..
Prinzipiell gibt es verschiedene Ansätze zur Bereitstellung/Erstellung von Templates:
Tipp: Analyse der Templates mit Modul-Vorschauen und Tool in Mozilla (aka AddOn FireBug bzw. Code-Inspektor mit Umschalten + Strg + I) für den ausgelieferten Quellcode der Template-Vorschauen
Übungen:
Beachten: häufig benötigt man dann auch noch weitere Module (Extensions) für eine komplette Umsetzung des "sogenannten freien Templates"
Besonderheit bei Joomla-Templates: Template Frameworks (Übersichten: Link, Link) liefern eine komplette Infrastruktur der Webagenturen und Templateentwickler, welche die Grundlage für die Nutzung in Joomla bildet. Man macht sich also mit Templates, die auf solchen Template Framworks basieren abhängig.
Mit den Frameworks sehr viel neue Funktionalitäten und Komfort aber wir bekommen auch Nachteile:
Im Rahmen aktueller Joomla Seminare folgen Linksammlungen mit Online Recherchen zu Joomla 5 Template Techniken und Joomla Angeboten im Netz.
Eine lockere Sammlung von Online Docs und Infos...
Joomla Dokumentationen:
Verschiedene allgemeine Quellen zu Templates
Video Series on YThttps://www.youtube.com/watch?v=GYtoAd_aj8EPluginshttps://kevinsguides.com/guides/webdev/joomla/ref/content-plugins-with-exs/
Sammlung von Quellen zu Templates Herstellern, Angeboten und Downloads...
Commercial Templates
Mit Version 4.1 wurde die Template-Technik final modernisiert und besteht jetzt aus zwei Verzeichnissen:
Es folgt eine alte Zusammenstellung aus Joomla 4 Seminarzeiten:
Das Standard-Template von Joomla bietet viele Konfigurationen und technische Erweiterungsmöglichkeiten.
Links zu Templates Joomla 4: (es geht wild zu und die meisten Plattformen nutzen Template-Frameworks)
... eine erste Annäherung und Zusammenfassung
Beispiel: wenn einmal an einer Template-Position "Rechts (position-7)" keine Module platziert werden, dann wird der Inhalt gleich komplett über die gesamte Seitenbreite gestylt, der entsprechende Block (div) also weggelassen!
Technisch: man installiert in Joomla Templates (z.B. Protostar) und über (min.) einen Stil (z.B. Protostar - Default) nutzt und konfiguriert man dann die Template-Technik.
Standard-Template für Joomla 4 -Frontend (Site): Cassiopeia
Übung: Am Beispiel "Protostar" und "Beez3" die Zuweisung von Templates mittels Stilen durchgeführt.So lassen sich dann später die Templates auch mehrfach auf Menüs zuweisen und auch die Parameter der Stile nutzen.
Vorschau auf Modul-Positionen:Am Beispiel "Protostar" und "Beez3" die Modulpositionen eingeblendet (Optionen Templates - Vorschau auf Modulpositionen aktivieren)
Anm.: bitte auf Live-Seiten immer wieder deaktivieren, weil man sonst die Postionen auf per URL anzeigen lassen kann:index.php?tp=1&template=beez3 (Erlätuerung: tp - Template Preview; template - ein vorhandenes Template, kann man leicht dem Quellcode einer Seite entnehmen)
Übung: Stil "Protostar - default" kopiert in "Protostar - default (2)" und letzterem Stil individuelle Farbparameter eingestellt (z.B. Rot statt Blau)mittels Register Menüzugehörigkeit individuelle Seite auf den neuen Stil verlinkt
Tipp: Farben definieren/auswählen für Designs z.B. mit Websites wie Paletton - aka colorschemedesigner )Hinweis zu Web-Fonts: Freie, kostenlose Fonts z.B. bei Google
Templates - Technik
Analyse Template-Ordner:Wichtig: alle Joomla-Dateien mit "UTF-8 ohne BOM" und am Besten immer mit Notepad++ bearbeiten - niemals mit Editor von Windows!
./img
./less
template_preview.pngtemplate_thumbnail.png
Weitere Übungen zu Templates folgen...
... Zusammenfassungen / Einschätzungen: Free/kostenlos vs. Kauf, Lizenzmodelle
Prinzipiell verschiedene Ansätze zur Bereitstellung/Erstellung von Templates
Tipp: Analyse der Templates mit Modul-Vorschauen und Tool in Mozilla (AddOn FireBug bzw. natürlich der Code-Inspektor mit Umschalten + Strg + I) für den ausgelieferten Quellcode der Template-Vorschauen
Übungen: Modul-Positionen anpassen und bei Menü-Modul auch ggf. auch erweiterte Eigenschaften einstellen (Menüklassensuffix, Modulklassensuffix)
Einblicke in ordentliche Dokumentation (Modulpositionen, Anleitung für Modul-Konfigurationen), Preisgestaltung
Beachten: häufig benötigt man dann auch noch weitere Module (Extensions) für eine komplette Umsetzung des "freien Templates"
Besonderheit bei Joomla-Templates: Template Frameworks (Übersichten: Link, Link)
An dieser Stelle möchte ich die wichtigen Grundlagen rund um unsere Joomla-Projekte nochmals zusammenfassen und darstellen.
Die beteiligten Joomla Dateien / Techniken, die unser Joomla Projekt benötigt:
Hier: Darstellungen für ein WordPress -Projekt
Die Dateien und Konfigurationen sind also für die Hosting-Umgebung anzupassen. Das macht man am Einfachsten vor dem Upload zum Hoster! Oder man speichert sich einfach mehrere Varianten der .htaccess (und configuration.php) mit Namen wie .htaccess-xampp oder .htacccess-hoster.
.htaccess-xampp
.htacccess-hoster
Kurzanleitungen zur Sicherung mit folgenden Techniken (Anm.: werden im Seminar mit Praxis dargestellt):
... klassische, manuelle Sicherung eines Joomla-Systems
a) Projekt-Ordner/-Dateien (Joomla 3: ca. 2000+ Ordner mit 7000+ Dateien / Joomla 5 mit Sample Data: ca. 3700 Ordner mit 11000+ Dateien)htdocs-Joomla-Projektverzeichnis mittels FTP sichern und wiederherstellen (hier: ./htdocs/joomla/joomla-blanko) - möglichst per Vorab-Komprimierung, damit man nur eine Archiv-Datei und nicht 10.000e von Einzeldateien übertragen muss!
./htdocs/joomla/joomla-blanko
b) Projekt-DatenbankJoomla-Datenbank-Tabellen mittels phpMyAdmin exportieren und importieren (DB-Dumps)
Anm.: das Ganze recht technisch und aufwändig, aber funktioniert natürlich und ließe sich auch per Skripting automatisieren!
Akeeba (vormals JoomlaPack)
Joomla Plugin für Backup / Restore / Duplicate (Kopieren)
kickstart.php
Einschätzung: sehr schnell und effektiv (siehe Joomla-Installation: sonst bei einzelnen Dateien per FTP echt ein "Krampf"!
Anm.: bei Standard-Hoster (Shared Hosting Pakete) muss vorher eine Datenbank angelegt und die nötigen Infos vorgehalten werden:
Tipp: Archiverstellungen (Backup-Profile) können so konfiguriert werden, dass man "große" Ordner (z.B. Download-Ordner mit großen PDFs/ZIP-Archiven) vom Archiv ausnehmen kann!Akeeba Core vs. Professional und die Komponente Akeeba Backup mit Deutscher Sprache ausstatten (Download über Google-Suche)
Backup-Speicherort (Standard): ./administrator/components/com_akeeba/backup (Archive: *.jpa - Joomla Pack Archive)
./administrator/components/com_akeeba/backup
Übung: Akeeba Backup Core Komponente installiert und Backup-Archiv erstellt und mit Kickstart wiederherstellen!
Kurzanleitung:
site-localhost-yyyymmdd-hhmmss.jpa
en-GB.kickstart.ini
Video-Anleitung Installation / Erste Sicherung des Entwicklerteams (Link)Video-Anleitung Kickstart des Entwicklerteams (Link)
Beispiele für die Akeeba Pro Technik (vs. Akeeba Core): Support, Backup-Archive lassen sich verschlüsseln (jps Archive - Joomla Pack secure), Unterstützung von Cron-Jobs (Automatisierung von Sicherungen)
Spezielle Backup/Restore Technik (Batchdateien, Skripte) in Ordner C:\xampp-cmsod\__backups (siehe auch Musterprüfungen/Prüfungen)
C:\xampp-cmsod\__backups
Anm.: diese XAMPP-CMSOD-Techniken haben natürlich nichts mit Backup-Techniken bei Hostern zu tun!
Für die Nutzung liegt eine Kurzanleitung als PDF im Ordner des XAMPP-CMSOD bei.
Über viele Jahre habe ich in den täglich orientierten Seminarbegleitungen zu den Trainings die jeweiligen wichtigen Screenshots als Diashow - mit viel Aufwand - aufbereitet.
Die Trainees bekommen ca. 250 - 300 tägliche Screenshots als quasi Diashow zu den Seminartagen! Hier habe ich die alten Screnshots zu Joomla 3 und Joomla 4 Seminaren beibehalten.
Tag 01
Tag 02
Tag 03
Tag 04
Tag 05
Ihr Trainer Joe Brandes
Sie finden auf dieser Seite - als auch auf meiner privaten Visitenkarte joe-brandes.de einige Hintergrundinformationen zu mir und meinem Background.Natürlich stellt die IT einen Schwerpunkt in meinem Leben dar - aber eben nicht nur ...
Private Visitenkarte / Technik: HTML & CSS joe-brandes.de
Ich erarbeite und konzipiere seit über 30 Jahren IT-Seminare und -Konzepte. Hierfür stehen der "PC-Systembetreuer / FITSN" und der "CMS Online Designer / CMSOD". Ich stehe Ihnen gerne als Ansprechpartner für Ihre Fragen rund um diese und andere IT-Themen zur Verfügung!
BECSS Visitenkarte / Technik: HTML & CSS becss.de
Wer einmal zum Snookerqueue gegriffen hat, der wird es wohl nicht wieder weglegen. Und ich spiele auch immer wieder gerne eine Partie Billard mit den Kumpels und Vereinskameraden. Der Verein freut sich über jeden, der einmal in unserem schicken Vereinsheim vorbeischauen möchte.
Billard Sport BS / nicht mehr von mir betreut billard-bs.de