• joomla.orgjoomla.org

Für alle Interessierten aus dem Bereich des "CMS Online Designer (VHS)" findet ab dem 20.05.2019 das Modul "CMS Joomla" bei der 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.

Hier die Rahmendaten unseres Seminars:

Ort: VHS Braunschweig, Heydenstraße 2, Raum 2.11
Zeiten: Mo, 20.05. - Fr, 24.05.2019; jeweils 08.30 - 16.00 Uhr
freiwillige Prüfung: Interesse wird ggf. im Seminar mit den interessierten Teilnehmern koordiniert

Ich werde unser Seminar an dieser Stelle - wie gewohnt - ausführlich begleiten...
Ihr Trainer Joe Brandes

Tag 01 - Montag

Montag, 20.05.2019, 08.30 - 16.00 Uhr

Allgemeine Infos / Intro

  • Orientierungsphase
  • Ablaufplanung Seminar: Pausenzeiten, Anfangs-/Endzeiten
  • Kurzdarstellung "CMS Online Designer  (VHS)"
  • Cobra-Shop mit Software für VHS-Schulungsteilnehmer

Windows-Umgebung konfigurieren

Bei der VHS Braunschweig sind entsprechende Windows Profile zur Nutzung vorinstalliert:
Windows 10 BU beim Starten auswählen!

Ansicht für den Standard-Dateimanager Window Explorer (Win + E) einstellen:

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ßen bild.jpg oder bild.jpeg oder bild.JPG - wir müssen das genau wissen!

Software für CMSOD-Seminare: (siehe auch Beitrag Toolsammlung auf diesem Portal)
Anm.: die Programme sind ggf. schon installiert oder werden bereitgestellt!

  • XAMPP für Windows (Link)
    wird maßgeschneidert von Trainer J. Brandes bereitgestellt oder die TN nutzen eine aktuelle Apachefriends.org-Version
  • Notepad++ (Link)
    Texteditor (auch für Konfigurationsdateien oder auch PHP / HTML / CSS / JS / TypoScript)
    Tipp: bitte 32-Bit-Version installieren, wenn man die Plugins/Erweiterungen von Notepad++ nutzen möchte
    Siehe auch Alternative: Microsoft Visual Studio Code (Link)
  • 7-Zip (Link)
    Packer / Entpacker

Client-Server-Prinzip (WWW)

WWW - World Wide Web: Internet "Dienstleistung / Service / engl. Daemon - siehe angehängtes "d" bei httpd für Apache-Server-Software"

Web-Client: genannt Browser, die über ein Protokoll (http, https) vom Server Daten abfragen (request)
Browser-Software: Microsoft Internet Explorer, Google Chrome, Mozilla Firefox, Apple Safari, Opera, ...

Web-Server: "Dienstleister"-Software - Apache ("A Patchy Server" - historisches Wortspiel für alten NCSA Webserver Mosaic, der durch "Flicken" verbessert und dann eigenständig entwickelt wurde)
Alternative Web-Server-Software: IIS (Internet Information Server von Microsoft); nginx von Firma NGINX, LIGHTTPD, ab PHP 5.4 ist in der Skriptsprache PHP auch ein "Server" eingebaut (Link)!

Zusammenspiel: "Kopiermaschine"
Client fragt nach Webdokument - Server bereitet Daten auf und kopiert an Client

Wichtig: unsere serverseitigen PHP-Dokumente müssen immer über eine http-Url im Browser aufgerufen werden und die Dokumente sollten immer über die Dateiendung *.php verfügen.

Serverumgebung "WAMP"

  • LAMPPLAMPP

XAMPP für Windows - Seminar-Version: XAMPP 7.2.8 mit PHP 7.2.8

X - Betriebssysteme Linux (L), Windows (W), MacOS (M) oder Sun Solaris;
A - Apache (Webserver),
M - MariaDB / MySQL (Datenbankserver),
P - PHP (serverseitige Skriptsprache)
P - Projekt;

bei Hostern: klassisches LAMP-System (Linux - Apache - MySQL/MariaDB - PHP)
oder auch mal als WAMPP mit einer Windows Server Betriebssystem Basis und dem IIS (Internet Information Server) als Webserver und dem MSSQL-Server als Datenbankserver

Hier eine kleine Übersicht / Zusammenfassung zur genutzten AMP-Umgebung:

AMP A - Apache M - MySQL / MariaDB
P - PHP
Technik Web-Server Datenbank-Server serverseitige Skriptsprache
Web (URL) httpd.apache.org
(Projekt Apache Foundation)
www.mysql.com
(bzw. .de)
mariadb.org
www.php.net
(bzw. de.php.net)
Konfigurationen httpd.conf my.ini
(bzw. my.cnf)
php.ini
XAMPP Versionen 2.4.34 10.1.34-MariaDB
mit PhpMyAdmin 4.7.0
7.2.8

Im Seminar werden einfache Konfigurationsbeispiele dargestellt.

XAMPP-CMSOD installieren

Vorgehensweise im  "Windows"-Seminar (XAMPP-Server  für Windows):

Ich stelle als Trainer ein fertiges selbstentpackendes XAMPP-7z-Archiv bereit, das bereits für die CMS Joomla, TYPO3 und die anderen CMSOD-Seminare vorkonfiguriert ist.

Archivname: xampp-cmsod-TEILNEHMER-20180824.exe
MD5-Prüfsumme: 4A1B634170BB3A585147B3A25C388B64

Tipp für MD5-Prüfsumme in PowerShell: (Anm.: hier Aufruf im Ordner des Archivs)

$a = Get-FileHash -Path .\xampp-cmsod-TEILNEHMER-20180824.exe -Algorithm MD5
$a.Hash

Das Archiv wird nur bei Notwendigkeit (siehe zuletzt PHP-Version 7.2 für TYPO v9) aktualisiert.
Die eingebauten Techniken (s.u.a. PortableApps, ...) können selber aktualisiert werden!

XAMPP-CMSOD bereitstellen - Kurzanleitung:

  • XAMPP-CMSODXAMPP-CMSOD
  1. XAMPP-Archiv auf TN-PC kopieren über Netzwerkfreigabe
    (oder von bereitgestellter Trainer-CD)
  2. Selbstentpackendes 7z-Archiv mit Doppelklick "öffnen/entpacken"
  3. Zielordner: C:\xampp-cmsod angebeben
    Anm.: Entpacken in Zielpfad  C:\xampp-cmsod  ist wichtig!
    Grund: alle eingebauten CMSOD-Techniken und Tools auf dieses lokale Verzeichnis optimiert wurden.
    Tipp: eigene XAMPP-Testumgebungen kann man dann einfach in anderen Verzeichnissen wie C:\xampp unterbringen.
  4. Starten / Doppelklicken  xampp-control.exe (Kontrollcenter) und
  5. Starten der nötigen Server mit Hilfe des Kontrollcenters:
    → Apache Webserver und
    → MySQL Datenbankserver per Schaltflächen "Starten" im Kontrollcenter
    Anm.: die Nachfragen der Windows-Firewall bei den Dienste-Starts können bestätigt werden, falls wir Zugriffe auf unsere Testinstallationen über das Netzwerk wünschen.

Die Aktionen zum Starten Webservice Apache und Datenbankserver MySQL (bzw. MariaDB) sollten wir täglich (also jeweils bei Bedarf) durchführen.
Empfehlung: von einer automatischen Bereitstellung des XAMPP-Server über (automatisch startende) Services (Dienste) rate ich ab!

Jetzt kann man mit Browser / Webclient Ihrer Wahl die Adresse localhost öffnen und die Entwicklungsumgebung testen / nutzen.

Hinweis: portable Firefox (s. PortableApps Anwendungen) nutzen keinen Browser-Cache und sie können einen installierten und einen portablen Firefox nicht gleichzeitig nutzen!

Die vorbereitete Umgebung in einer kleinen Übersicht:

TechnikInfoBemerkung
XAMPP C:\xampp-cmsod\ Basispfad des XAMPP-CMSOD
Web-Dokumente C:\xampp-cmsod\htdocs\joomla\... mit Unterordnerstrukturen
Apache C:\xampp-cmsod\apache\conf\httpd.conf Konfigurationsdatei Webserver
PHP C:\xampp-cmsod\php\php.ini Konfigurationsdatei PHP

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.

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)
    Übersetzungen 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

Und natürlich viele weitere Online- (und Offline-) Quellen für das sehr beliebte und verbreitete Joomla-CMS

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!
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 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 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!

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.

Kommen wir also zum (aktuellen) Joomla 3.x-Zweig: (Anm.: wird mit Joomla 3.10 beendet werden)

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.x ... Version 3.8 ...
... Version 3.9.6 (aktuelle Joomla-Version zur Seminarwoche)
... Version 3.10.x (dann als Übergangsversion/Bridge zu 4.0 - ohne technische Neuerungen)

Statusartikel zur "Roadmap" von Joomla auf diesem Infoportal
dort dann auch Link zur Darstellung auf joomla.org zum Thema Updates/Upgrades

Die Folgeversion Joomla 4 wurde (als Entwickerlerversion) schon 2017 veröffentlicht und war (als 4.0) eigentlich schon für Ende 2018 / Anfang 2019 angekündigt. Durch diverse Zusatzarbeiten und Verbesserungen am 3er-Zweig (siehe z.B. GDPR/DSGVO Technik) verzögert sich der offizielle Launch für Joomla 4 bis auf Weiteres (Ende 2019?).
Joomla 4 Version: aktuell Joomla 4.0-Alpha 9 vom 16. Mai 2019
Rheinwerk-Verlag Buch "Umfassende Handbuch"-Reihe ist für 20.12.2019 angekündigt (vorbestellbar!)

Links / Beiträge zu Joomla 4

Im Seminar konzentrieren wir uns erst einmal auf den stabilen 3er Zweig, der mit/nach 3.10 ja immer noch fast 2 Jahre unterstützt werden wird. Und wir können im Seminar natürlich gerne dann auch mal die 4er-Alpha installieren/vergleichen.

Technik-Infos zu Joomla 3.x

(siehe auch wieder Übersicht auf Wikipedia)

Neu seit Version 3.2:
Versionen für Beiträge; Einstellung mittels Optionen zu Beiträgen - Bearbeitungslayout - Verlauf speichern und Anzahl Versionen; außerdem lassen sich die 3er Versionen durch die Unterstützung des Bootstrap-Frameworks (ehemals Twitter-Bootstrap) auch sehr gut im Backend mit Smartphones (iPhones, Android) und Tablets nutzen (Stichworte: Responsive Design, Mobile First)

Testen mit Mozilla Firefox:
Tastenkombination Umschalten + Strg + M (bzw. Menü - Webentwickler - Bildschirmgrößen testen) macht das schön deutlich!

Neu seit Version 3.5:
PHP 7 Support, Update Hinweise per Email, System Informationen Export, Drag & Drop von Bildern, Anonymisierte System Daten, Einfaches Einfügen von Modulen in Artikel (aktuelle Website auf joomla.org)

Technische Umgebung (Servertechniken):
Übersicht zu Joomla-Varianten ebenfalls auf joomla.org (Link "Technical Requirements")
Einstiegs-/Übersichtsseite zu Joomla 3 auf joomla.org (Link "Joomla 3.x")

Joomla Installation

Entpacken im Webdokument-Ordner unseres XAMPP-Servers
Download bzw. Bereitstellung der aktuellen Version 3.9.6 von joomla.org bzw. aus lokal in Seminarumgebung

Anm.: wenn Sie die Joomla-interne Update-Technik ausprobieren wollen, dann können Sie später gerne auch Vorgängerversionen nutzen.

TechnikInfoBemerkung
Lokal C:\xampp-cmsod\htdocs\joomla\joomla-bu htdocs hier mit Unterordnerstruktur
Web http://localhost/joomla/joomla-bu immer über htdocs aufrufen
nie über Laufwerkspfad C:\... aufrufen
Datenbank joomla_bu
              ↑ Unterstrich in DB-Name!
DB erlaubt keine Bindestriche/Minus

Aufruf der Webadresse zeigt uns die Installationroutine für Joomla;
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 vorher eine Datenbank mit DB-Tool des Hosters (oft: phpMyAdmin) auf Ihrem MySQL-Datenbankserver angelegt werden!

XAMPP-Datenbank-Zugangsdaten:
(Übersicht mit Hilfe Datei password.txt im XAMPP-Hauptverzeichnis)

Datenbankserver: localhost
Benutzer: root
Passwort: leer (kein Passwort)

Anm.: CMS-(Vor-)Installationen meines XAMPP-CMSOD haben folgende Zugangsdaten:
Benutzer: admin; Passwort: cmsodcmsod

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 morgen durchspielen und über die Woche als Joomla-CMS sauber mit Inhalten füllen und pflegen!

Sprachen für Frontend (Site) und Backend (Administrator)

FE und BE aufrufen und Testen des BE-Zugangs (Adresse der Site plus Ordner/URL ./administrator )
Web (BE):  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"

Das Backend am Besten mit einer einmaligen Ab-/Anmeldung testen/aktualisieren.
Die Benutzer können sich Ihre Spracheeinstellungen später individuell einstellen.

Nachinstallationshinweise

die Hinweise ausgeblendet;
insbesondere "Zwei-Faktor-Authentifizierung" (Wikipedia Link) nur ausblenden - bitte hier nicht aktivieren!

Captcha

Absicherungsmechnismen für Webformulare

Empfehlung: reCaptcha (jetzt bei Google - man benötigt also Google-Account und dann ist reCaptcha direkt als Technik in Joomla verfügbar)
Anm.: kommerzielle Formularseiten müssen über https erreichbar sein!

Joomla URL Suchmaschinenoptimierung (SEO)

Joomla bietet einfaches SEO/SEF mit einem Klick:
./index.php/suchen  (z.B.)
hier eigentlich SEF (Search Engine Friendly URLs) mit System - Konfiguration

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=...   

Echtes SEF/SEO dann später in unserem Wochenprojekt (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)

"Gang" durch das Backend

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:
Ändern des Site-Titel in der Konfiguration und
Aktivierung des "Offline-Modus" für die Website (Gründe: Installation  von Erweiterungen, Joomla-Updates, Backups mit exaktem Status)

Systemzeit von UTC auf "Berlin" eingestellt (sonst 2 Std Abweichung bei Datum/Uhrzeitstempeln!)

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"

Beiträge und Menüs (Kurzeinf.)

Versionen

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 werden
Die 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 analysiert
Bearbeiten von Beispielbeiträgen für bestehende Haupt-Kategorie "Joomla"

Hauptkategorien: "uncategorized" und "Sample Data-Articles" mit Unterkategorien "Joomla", "Parks", "Fruit Shop"

Bitte immer sauber an die "Anreißer/Teaser" denken (Erzeugt Link "Weiterlesen: ..." in Blogansichten);
Kennzeichnen von Beiträgen als Haupteinträge,
Beeinflussung von Veröffentlichung (Start- / Endetermin, Erstelldatum);
Hinweis auf individuelle Beitrags-ID

Festlegen der Startseite (Stern in Menü - Menü mit Startseite durch Haussymbol gekennzeichnet)

Einfache Übungen zu Beiträgen und Menüs - mehr dazu die nächsten Tage...

Optionen (Globale Einstellungen)

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 Anlaufstelle für die jeweiligen Optionen 

 

  • Joomla 3.9.6 DownloadJoomla 3.9.6 Download
  • Joomla InstallationJoomla Installation
  • FE vs. BEFE vs. BE
  • Joomla KonfigurationJoomla Konfiguration
  • Menü in WebsiteMenü in Website
  • OptionenOptionen

 

Tag 02 - Dienstag

Dienstag, 21.05.2019, 08.30 - 16.00 Uhr

Ausführliche Rekapitulationen zu Tag 01, TN-Fragen

XAMPP / Joomla-Projekte

... in Betrieb nehmen

Erinnerungen: 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

Neuinstallation: Joomla-Blanko Site

Lokal:  C:\xampp-cmsod\htdocs\joomla\joomla-blanko
Web:  http://localhost/joomla/joomla-blanko
Datenbank:  joomla_blanko  (bitte auf Unterstrich achten bei Datenbanknamen)

Aufruf der Webadresse zeigt uns dann wieder die Installationroutine für Joomla - hier jetzt ohne Beispieldaten installieren!

Diese Rohinstallation ist der "normale" Weg für ein neues Joomla-Projekt und besonders für mehrsprachige Joomla-Projekte entscheidend.

Zusätzlich: durch den Vergleich mit den Beispielinstallationen der Joomla-Entwicklergemeinschaft lernt man viel über die angewandten Joomla-Techniken.

Webprojekt planen

... hier in angepasster Kürze

gerne ausführlicher als Literatur:
J. Jacobsen benutzerfreun.de "Website-Konzeption - Erfolgreiche Websites planen, umsetzen und betreiben"

Stichworte:
Berichte / Veranstaltungen (→ Kategorien planen)
Termine / Kalender (→ Erweiterungen ?)
Geschlossener Mitgliederbereich (→ Sichtbarkeit / Berechtigungen für Joomla-Benutzer), ... und vieles mehr

Inhalt - Medien

(einfacher Joomla Core Medienmanager)

einfache Ordner- und Datei-Management Technik inkl. Details oder Vorschaubildern

Analyse/Vergleich: Joomla-Site-Ordner: 
C:\xampp-cmsod\htdocs \ joomla\joomla-bu\images
entspricht URL: 
http://localhost / joomla/joomla-bu/images   

Wichtig: in allen Ordner liegt Dummy-Datei index.html für Anzeige leerer Browser bei Direktaufrufen
Übungen zu Bildern und Bilder-/Medienordner images folgen

JED - Joomla Extensions Directory (Teil I)

Online-Repository mit Erweiterungen (Komponenten, Module, Plugins)

Einschätzungen mittels Download-Zahlen, Wertungen, Benutzer-Feedback, Aktualität, Versionsunterstützungen Joomla

Das JED ist mittlerweile auch im BE von Joomla angekommen: Erweiterungen - Verwalten - Aus Webkatalog installieren
Hinweis: eine Sammlung von Premium-Extensions werden wir im Seminar erarbeiten und da geht es auch gleich mit einem Editor mit Medien Manager los...

JCE - Joomlacontenteditor

Hersteller - 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 (kann über JCE-Portal heruntergeladen - wird dynamisch mittels Übersetzungsportal erzeugt)
Sprachdatei dann einfach über den Standard-Erweiterungsmanager von Joomla installieren; siehe hierzu auch die Erläuterungen des JCE-Forums
jce editor 800px
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"

Intermezzo CSS Zen Garden

mit Website CSS Zen Garden (Link) 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

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

... Beispielbild / Dimensionen aus Seminar als Bild einfügen ...

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

 

... Screenshots zum Seminartag folgen ...

 

Tag 03 - Mittwoch

Mittwoch, 22.05.2019, 08.30 - 16.00 Uhr

Rekapitulationen, TN-Fragen

 

...

...tbc...

...

 

... Screenshots zum Seminartag folgen ...

 

Tag 04 - Donnerstag

Donnerstag, 23.05.2019, 08.30 - 16.00 Uhr

Rekapitulationen, TN-Fragen

 

...

...tbc...

...

 

... Screenshots zum Seminartag folgen ...

 

Tag 05 - Freitag

Freitag, 24.05.2019, 08.30 - 16.00 Uhr

Rekapitulationen, TN-Fragen

 

...

...tbc...

...

 

Dokumente und Unterlagen für TN

XAMPP-Versionen (Wochenanfang - Seminarende Trainer-XAMPP),
Screenshots der Seminartage (Bildergalerie/Diashow der Seminarwoche)
und Ordner-/Dateistrukturen + DBs mit Backup-Skripts

Die XAMPP-Ordner lassen sich auch komplett als selbstentpackendes 7z-Archiv sichern. Die Trainer-Version wird den TN ebenfalls als "Digitale Seminarunterlage" bereitgestellt.

xampp 7z archiv 800px

Hinweis: vor dem Archivieren bitte erst alle Zugriffe und Dienste beenden.

 

Feedbackbögen, TN-Bescheinigungen, letzte Fragen

 

 

... Screenshots zum Seminartag folgen ...

 

Ihr Trainer Joe Brandes

  Privates

... zu 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 ...

joe brandes 600px

Private Visitenkarte / Technik: HTML & CSS /
  joe-brandes.de

  Jobs

... IT-Trainer & Dozent

Ich erarbeite und konzipiere seit über 20 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 600px

BECSS Visitenkarte / Technik: HTML & CSS /
  becss.de

  Hobby

... Snooker & more

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.

bsb 2011 600px

Billard Sport BS / Joomla 3.x /
  billard-bs.de

PC Systembetreuer ist J. Brandes - IT seit über 35 Jahren - Technik: Joomla 3.4+, Bootstrap 3.3.4 und "Knowledge"

© 2019 - Websitedesign und Layout seit 07/2015 - Impressum - Datenschutzerklärung
Nach oben