Für den Asta Ostfalia findet am 03.11.2017 eine Info- /Workshop-Veranstaltung zum Thema "CMS Joomla" statt.
In dem eintägigen Seminar soll den Interessierten MA des Asta Ostfalia das CMS Joomla näher gebracht werden.
Hier die Rahmendaten unseres Seminars:
Ort: Ostfalia WF, Gebäude D, Salzdahlumer Str. 46/48, Pool-Raum P5
Zeiten: Fr, 03.11.2017; 09.00 - 16.30 Uhr
Ich werde unser Seminar an dieser Stelle - wie gewohnt - ausführlich begleiten...
Ihr Trainer Joe Brandes
Freitag, 03.11.2017, 09.00 - 16.30 Uhr
- Orientierungsphase, Seminarzeiten
- Website Asta Ostfalia asta.ostfalia.de (Link)
Youtube Video mit "alter" Website (Link) - Infozusammenstellung / dieser Beitrag
Die Auszüge zu Joomla, die ich hier zusammengestellt habe, habe ich aus meinen Joomla-Beiträgen auf diesem Infoportal bezogen!
Der Umfang dieser Darstellung liegt deutlich über einem Seminartag!
Aber so können Sie sich am Seminartag auf meine Ausführungen und Ihre Übungen konzentrieren und müssen "nichts" mitschreiben! - Windows Einstellungen - Dateierweiterungen einblenden
Anzeige der Dateiendungen mit Windows Explorer (Win + E);
Windows Vista / 7 / 8 / 10: Organisieren - Ordner- und Suchoptionen - Register Ansicht ...
Alternativ bei Windows XP: Menü Extras - Ordneroptionen
Grund: Dateien heißenbild.jpg
oderbild.jpeg
oderbild.JPG
- wir müssen das genau wissen! - Joomla! CMS Community (Links / URLs / Infosites)
Hauptportal (Link) - die Einstiegsseite zum Joomla Content Management System
Version 3 (dt. Link) - Version(en) Joomla 3 inhaltlich begleitet
Technikanforderungen (dt. Link) - Serveranforderungen (Webserver, PHP, DB) für Joomla
Dokumentation (dt. Link) - Joomla Dokumentationen in verschieden Sprachen (und auch Qualitäten)
Translations (Link) - Üersetzungen zu Joomla
Übersetzungen deutsch (Link) - direkte Downloads der offiziellen Sprachdateien Joomla deutsch
Extensions (JED Link) - das Joomla Extensions Directory: Erweiterungen zu Joomla nach Kategorien
Forum (Link) - Joomla Forum zum Austausch
Github (Link) - offizielles Entwicklerportal bei Github.com und mit Git Softwareverwaltungstechniken
Roadmap (Link) - die offizielle Plattform für die nahe und ferne Zukunft von Joomla - Joomla! - Versionen (Heimatportal: www.joomla.org - Übersicht auf Wikipedia)
Version 1.0 - bitte keinesfalls mehr einsetzen, kann noch mit PHP4 eingesetzt werden, hat sehr viele Sicherheitslücken durch Grundmodi wie register_globals=On
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!
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 nicht mehr einsetzen, seit Januar 2012 offizielle LTS-Version mit Nummer 2.5
(Alle .5er sollten dann in der Folgezeit dann die LTS-Varianten mit gut 3 Jahren Suppor twerden),
die Joomla Version 2.5 wurde bis Ende 2014 supportet und ist somit ebenfalls "überaltert"
Wichtiges 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 3.5.x ab März 2016 - ab jetzt also mit immer stets "laufenden Updates"
Version 3.6.x ... (bis Ende 2016 / Anfang 2017)
Version 3.7.5 zum Seminarzeitpunkt die aktuelle Joomla-Version (→ Seminarversion Version 3.7.5)
Version 3.8 ab Oktober 2017 ...
Statusartikel zur "Roadmap" von Joomla auf diesem Infoportal oder bei Joomla.org (Roadmap)
dort dann auch Link zur Darstellung auf joomla.org zum Thema Updates/Upgrades - Joomla Updates
das Kontrollzentrum meldet uns neue Joomla und Erweiterungsaktualisierungen und bietet Buttons für Update-Vorgänge an;
die Update-Technik weist darauf hin, dass man für die Zusatztechniken / Erweiterungen selbst zuständig ist und deren Kompatibilität mit der neuen Version vorab testen /evaluieren solle → z.B. also einen XAMPP als Testserver betreiben!
Wichtig:
vor Updates auf Live-/Produktionssystem sollte man ein Backup erstellen und die Aktualisierung an einem vergleichbaren Testsystem durchführen und ausgiebig testen;
auf Live-Systemen (also im Internet - beim Hoster) wird auch der Offline-Modus für den Update-Zeitraum empfohlen
Anm.: klassisch bezeichnet man mit Update "kleinere" Aktualisierungen (z.B. von 3.7.4 auf 3.7.5 und dann auch 3.8.0, ...) und
mit Upgrade (oder sogar Migration) größere Aktualisierungen (Infolink auf diesem Portal)
z.B. Upgrade von 2.5.x auf 3.x
oder Migrationen von 1.5.x auf aktuelle Versionen 3.x (da wäre man jetzt aber auch sehr spät dran ;-) - Technik-Überblick
alles direkt zu Joomla gehörige wird als Joomla-Kern (Joomla Core) bezeichnet;
Joomla CMS basiert auf dem Joomla Framework (Link), das alle grundlegenden Techniken bereithält
fremde Erweiterungen (z. B. Komponenten, Module, Plugins, Templates) werden als 3rd Party bezeichnet
Komponenten - größere Techniken/Umsetzungen mit eigenen Konfigurationsumgebungen und Eintrag im Backend unter Menüpunkt "Komponenten"
Beispiele: Bildergalerie (inkl. Bildverwaltung; z.B. Phoca Gallery), Kalender/Event-Verwaltung (z.B. JEvents), leistungsfähiger Editor (z.B. JCE - Joomla Content Editor), Backup-Tool (z.B. Akeeba)
Module - Inhalte, die sich über Modulpositionen auf der Website oder im Backend platzieren lassen (siehe Menü-Module, Login-Modul, Suchen-Modul, beliebte Beiträge, neue Beiträge)
Beispiele: Zufallsbilder, Kalenderinfos, Besucherstatistik, ... und natürlich Menü-Module
Plugins - für verschiedenste Automatisierungen/Aufgaben; insbesondere Inhalts-PlugIns (also für content) für automatische Integration von Inhalten in Beiträgen
Beispiele: einfache Bildergalerien in Beiträgen (z.B. SIGE - Simple Image Gallery), Social Media Button in Beiträgen (z.B. 2-Click-Social-Buttons)
Templates - hiermit wird in Joomla die technische Auslieferung der Website (HTML, CSS, JS und technisch auch PHP) definiert
Beispiele/Anmerkungen: 1000e von freien und kostengünstigen "fertigen" Templates für Joomla im Netz verfügbar - zu beachten: genau auf vermeintlich "freie" Lizenzen für Templates achten und einsetzen!
Wichtige Vorteile von reiner Joomla Core Technik (ohne Fremderweiterungen):
wird immer gepflegt und für kommende Versionen aktualisiert und die Datenübernahmen (Updates) werden "garantiert" - JCE (Joomlacontenteditor - Link)
ein toller Ersatz für Standardeditor TinyMCE - genauer gesagt: eine 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 30 Euro im Jahr bereit und blendet die entsprechenden Hinweise ("Werbung") ein!
Sprachpaket "german" für JCE (über JCE-Portal heruntergeladen - wird dynamisch mittels Übersetzungsportal erzeugt)
Sprachdatei 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:
Global: über System - Konfiguration - Standardeditor
Benutzer: über Benutzer - Benutzer verwalten / editieren - Basiseinstellungen - Editor
Erinnerung: bitte "Styling" immer den Anpassungen mittels CSS (→ siehe Templates) überlassen und nie manuell mit einem Editor "stylen" - E-Mail-Verschleierung
ü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
Wichtig: sehr häufig muss nach Installationen von Plugins das Plugin erst einmal aktiviert werden! Das wird häufig vergessen! - Bilder - webtauglich machen
aus den aktuellen Smartphone, iPad, Tablets, Kompaktkameras, Digitalen Spiegelreflexkameras kommen "Mega-Pixel" in MegaBytes:
z.B. 1600 x 1200 Pixel (oder 6000 x 4000 Pixel) in Größen von mehreren Megabytes
Beispielbilder mit uneingeschränkten Lizenznutzungen: unsplash.com (Link)
Tools zum sehr einfachen "Kleinrechnen": Radical Image Optimization Tool (Riot)
oder über die im XAMPP-CMSOD eingebauten PortableApps das Tool XnView nachinstallieren - Bilder in Joomla-Beiträgen
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
Tipp: kleine/große Bildpaare sind in Joomla-Installationen unter./images/sampledata/parks/landscape
zu finden;
ich stelle als Trainer ebenfalls webtaugliche Bilder in unterschiedlichen Größen (150px / 250px / 800px) zu Testzwecken zur Verfügung
dann z.B. unter./images/beispielbilder/100px
bzw../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 eingearbeitet und getestet - JCE MediaBox
Installation des PlugIns über den Webkatalog
Aktivierung (Veröffentlichung) des PlugIns über Erweiterungen - PlugIns - Suche nach JCE...
Übung: JCE MediaBox nutzen
Klick auf kleines Beitragsbild (hier: 100px) öffnet "LightBox/Animation/Bildergalerie" mit großem Bild (hier: 800px)
Vorgehen:
100px Bild in Beitrag einfügen (gerne inkl. Textfluss links/rechts - besser mit sauberem CSS)
Bild verlinken - also Link-Symbol anklicken und über Dateiauswahl die große Dateiversion (800px) als Linkziel (URL) angeben bzw. auswählen
im Register Popups den JCE Media Popup auswählen und die gewünschten Eigenschaften (Bildtitel, Bildunterschrift) eingeben
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 - SIGE - Simple Image Gallery Extended (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 den Editor
auch hier wieder bitte nicht die Aktivierung des Plugins vergessen und auch in den Eigenschaften die nötigen Einstellungen vornehmen
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 (biite unbedingt Notepad++ nutzen) - Backup & Restore I - klassische, manuelle Sicherung eines Joomla-Systems
a) Projekt-Ordner/-Dateien (aktuell ca. 2000+ Ordner mit 7000+ Dateien)
htdocs-Joomla-Projektverzeichnis mittels FTP sichern und wiederherstellen (hier:./htdocs/joomla/joomla-blanko
)
b) Projekt-Datenbank
Joomla-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 - Backup & Restore II - Akeeba (vormals JoomlaPack)
mittels Akeeba-Backup-Core-Komponente im Joomla-Backend eine Sicherung erstellen (*.jpa)
Restore: mittels Kickstart-Skript (kickstart.php
, Sprachdatei, JavaScripts) und Akeeba-Sicherungsdatei wird die Seite dann später wiederhergestellt
Einschätzung: sehr schnell und effektiv (siehe Joomla-Installation: >7000 Dateien / >2000 Ordner mit FTP echt ein "Krampf")
Anm.: bei Standard-Hoster (Shared Hosting Pakete) muss vorher eine Datenbank angelegt und die nötigen Infos
Datenbankserver (z.B. localhost oder dbserver.hostingfirma.de),
Datenbankname (z.B. dbo123456)
Datenbankbenutzer (z.B. dbu123456) und
Datenbankpasswort (z.B. geheim ;-) vorgehalten werden
Übung:
Akeeba Backup Core Komponente installiert und Backup-Archiv erstellt und mit Kickstart wiederhergestellt;
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 angesprochen 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)
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) - Templates I (eine erste Annäherung und Zusammenfassung)
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: 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!
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.
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
(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 (Rot statt Blau)
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
mittels Register Menüzugehörigkeit individuelle Seite auf den neuen Stil verlinkt - Templates II (Fortsetzung - Technik)
Analyse Template-Ordner:
Wichtig: alle Dateien mit "UTF-8 ohne BOM" und am Besten immer mit unserem Notepad++ bearbeiten - niemals mit Editor von Windows!
Datei / Ordner Anmerkungen / Bedeutung ./css
die CSS-Styles ./html
Overrides - Ausgaben von Joomla-Core- oder Erweiterungs-Techniken
(Komponenten, Modulen, Plugins, Layouts) überschreiben./images
./img
Bilder und
"Icons"./js
JavaScript ./language
die Sprachkonfigurationen bzw. Übersetzungen für das Template ./less
Bootstrap-Technik: hier der LESS-CSS-Precompiler component.php
Ausgabekomponente error.php
Ausgabe für Fehler 404 - Dokument nicht gefunden! offline.php
Ausgabe für Joomla-System offline - siehe Konfiguration favicon.ico
Favorite Icon (siehe Favicon Generatoren) template_preview.png
template_thumbnail.pngBilder für die Darstellung des Templates im Backend templateDetails.xml
Konfigurationsdatei des Templates - wichtig für Installation und Infos im Backend index.php
das eigentliche Joomla-Template - Templates III (Zusammenfassungen / Einschätzungen: Free/kostenlos vs. Kauf, Lizenzmodelle)
Prinzipiell drei Ansätze zur Bereitstellung/Erstellung von Templates
1) gesamte Templatetechnik inkl. HTML/CSS/JS Webseitengerüst manuell erstellen und "programmieren
Beispielhafte Dateien und Vorgehen auf verschiedenen Webportalen
2) Beispiel-Template von Joomla (Protostar) als Grundlage für eigene Anpassungen/Design nehmen
Anm.: tolle Anleitung zu Joomla 1.6/.1.7/2.5 Versionszeiten mit Buch A. Radtke "Templates für Joomla 2.5" (ISBN: 3827328462); dort zeigt das Radtke-Team anhand des damaligen Standardtemplate eine persönliche Anpassung und Umsetzung mit komplett anderem Styling
→ Ideen und Vorgehensweisen könnte man technisch aktueller auch mit Protostar umsetzen
3) freies (kostenloses) Template oder natürlich auch eine Kaufversion
beispielhafte Gegenüberstellung von vermeintlichen "Free" gegen die Kauf-/Premium Versionen beim Anbieter "AS" (Link);
Übung mit freiem Template "MX JooFree12 - Herstellerlink" oder "j51_scarlett_free" (liegt XAMPP-CMSOD bei oder bei joomlaos suchen) von Übersichtsportal joomlaos.de
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
Hier: 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) → Warp, T3, Helix, Gantry, Expose
mit den Frameworks sehr viel neue Funktionalitäten und Komfort, aber: Abhängigkeit von Framework, Einarbeitungszeit und ggf. auch Kosten - Extensions - Vorschläge nach Premiumlisten JED (und Trainer Joe Brandes)
die folgende Liste ohne Anspruch auf Vollständigkeit (aktuell fast 8000 Extensions im JED!)
bitte den Einsatz genau analysieren und auf Nachhaltigkeit der Extensions und Verträglichkeiten mit Joomla Core und Update-Technologien achten
Name Link Beschreibung Akeeba JED Backup und Restore (Kickstart) Tools Admin Tools JED Absicherungen und Tools für das Backend / den Administrator J2XML JED Tools zum Exportieren/Importieren von Daten aus alten 1.5/2.5
oder aktuellen 3.x Versionen (oder sogar WordPress)JCE JED Joomla Content Editor, eine attraktive Alternative für den Standard TinyMCE JCE MediaBox JED Bild- und Multimedia Lightbox SIGE JED Simple Image Gallery Extended, eine "einfache aber mächtige" Bildergalerie Tabs JED Tabs/Registerkarten in Beiträgen Sliders JED Slider (Accordion) in Beiträgen DJ-Imageslider JED Image-/Infoslider für Showcases / Header 2 Click Social Buttons JED 2 Klicks für mehr Privatsphäre bei Nutzung von Social Media Buttons JEvents JED Kalender/Event Komponente (z.B. auch zum Einbinden öffentlicher Google-Kalender) Kunena JED ein mächtiges Forum Phoca Gallery JED eine sehr umfangreiche Bildergalerie Phoca Download JED eine sehr umfangreiche Download-Erweiterung K2 JED die Komplettlösung für Beitragsdarstellung (sehr mächtig) EU e-Privacy Directive JED Infotechnik zu Cookies nach EU Privatssphäre Vorgaben tbc ... to be continued ...
aber eben auch eine persönliche Entscheidung und Wahl ... - Benutzer (Joomla-Benutzer-Konten)
Rechte der Benutzer über die Zuweisung von Benutzergruppen organisiert;
klassische Hierarchien: Übersicht mit Openbook Galileocomputing Verlag zu Joomla 1.5 (Link)
Frontend (FE) - Site:
Registered (Anmeldung möglich),
Author (Beitrag schreiben / einreichen / eigene ändern),
Editor (Beiträge ändern),
Publisher (Veröffentlichungen steuern, Hautpteintrag konfigurieren)
Backend (BE) - Administrator:
Manager (eingeschränktes BE; z.B. ohne Benutzer, Menüs),
Administrator (erweitertes BE; z.B. inklusive Benutzerverwaltung)
Super User (kann überall Alles - also auch die Installationen und Verwaltungen im BE für Erweiterungen)
Übungen mit Benutzern/Gruppen
Vorschlag: einfach für alle Gruppen Beispieluser joeauthor bis joeadministrator anlegen und austesten
Vielen Dank für Ihr Klopfen und Feedback zum Seminarende und Interesse an Seminarfortsetzungen
Ihr Trainer Joe Brandes