Für alle Interessierten aus dem Bereich des "CMS Online Designer (VHS)" findet ab dem 05.12.2016 das Modul "CMS Joomla" bei der VHS Braunschweig als Bildungsurlaub statt.
In diesem CMS-Workshop wollen wir uns alle notwendigen Fähigkeiten von der Installation bis hin zum eigenen Joomla!-Template 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.03
Zeiten: Mo, 05.12. - Fr, 09.12.2016; jeweils 08.30 - 16.00 Uhr
freiwillige Prüfung: Interesse wird ggf. im Seminar mit den interessierten Teilnehmern koordiniert
Status: aktuell 2 Interessierte TN
Termin: Mi., 14.12.2016, 16.30 Uhr, Raum 2.03 (muss noch offiziell von VHS BS / EPZ bestätigt werden)
Ich werde unser Seminar an dieser Stelle - wie gewohnt - ausführlich begleiten...
Ihr Trainer Joe Brandes
Tag 01 - Montag
joomla.org
Montag, 05.12.2016, 08.30 - 16.00 Uhr
- Orientierungsphase, Absprache der Woche (Pausenzeiten, Anfangs-/Endzeiten) und freiwillige Prüfung
Cobra-Shop mit Software für VHS-Schulungsteilnehmer; Hinweis auf Zertifikat CMS Online Designer - Kurzdarstellung "CMS Online Designer (VHS)"
- 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.jpgoderbild.jpegoderbild.JPG- wir müssen das genau wissen! - Serverumgebung XAMPP - Seminar-Version: XAMPP 1.8.3-4 mit PHP 5.5.11
X - Betriebssysteme Linux (L), Windows (W), MacOS (M) oder Sun Solaris;
AMP - A - Apache (Webserver), M - MariaDB / MySQL (Datenbankserver), P - PHP (serverseitige Skriptsprache)
P - Projekt;
bei Hostern: klassisches LAMP-System (Linux - Apache - MySQL - PHP) - Vorgehensweise im Seminar:
Ich stelle als Trainer ein fertiges selbstentpackendes XAMPP-Archiv bereit,
das bereits für Joomla und die anderen CMSOD-Seminare vorkonfiguriert ist
und auch Beispielinstallationen enthält!
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-cmsodangebeben
Anm.: Entpacken in ZielpfadC:\xampp-cmsodist wichtig!
Grund: weil alle eingebauten CMSOD-Techniken und Tools auf dieses lokale Verzeichnis optimiert wurden.
Tipp: eigene XAMPPs kann man dann einfach in anderen Verzeichnissen wieC:\xamppunterbringen.
4) Starten derxampp-control.exe(Kontrollcenter) und
5) Starten von Apache Webserver und MySQL Datenbankserver
Anm.: die Nachfragen der Windows-Firewall bei den Dienste-Starts können abgebrochen werden, da wir keine Zugriffe auf unsere lokalen Testinstallationen über das Netzwerk wünschen. Die Aktionen zum Starten Webservice Apache und Datenbankserver MySQL (bzw. MariaDB) müssen wir täglich (also jeweils bei Bedarf) starten.
Empfehlung: von einer automatischen Bereitstellung des XAMPP-Server über (automatisch startende) Services (Dienste) rate ich ab!
6 - Browser) Starten des für Webentwicklung CMSOD optimierten Firefox über Schaltfläche "Admin" im Kontrollcenter bei Webserver Apache Hinweis: dieser portable Firefox hat bereits Standard-AddOns installiert und nutzt z.B. auch keinen Browser-Cache; Sie können einen installierten und diesen mobilen FF nicht gleichzeitig nutzen!
Für Technik- und CMSOD-Zertifikat-Interessierte befindet sich unter(URL) http: //localhost/cmsod-overvieweine Website mit Infos rund um den CMSOD und die genutzten Techniken und Konfigurationen. - Joomla! - Versionen (Heimatportal: www.joomla.org - Übersicht auf Wikipedia)
Version 1.0 - bitte nicht mehr einsetzen, kann noch mit PHP4 eingesetzt werden, hat sehr viele Sicherheitslücken durch Grundmodi wie register_globals=On
Version 1.5 - bitte nicht mehr einsetzen, Betrieb bitte ohne Legacy-Modus, eigentlich erste LTS-Variante seit Januar 2008! Empfehlung: nicht mehr einsetzen!
LTS-Versionen (Long Term Support - ca. 3 Jahre; alternative Bezeichnung: LTR - Long Term Release):
Version 2.5 - bitte nicht mehr einsetzen, seit Januar 2012 dann erste offizielle LTS-Version mit Nummer 2.5 (Alle .5er sollten dann in der Folgezeit dann die LTS-Varianten mit gut 3 Jahren Supportwerden),
die Joomla Version 2.5 wurde bis Ende 2014 supportet und ist somit ebenfalls "überaltert"
Joomla ist 2014 von LTS/LTR abgerückt und entwickelt nun kontinuirlich (engl./fachdeutsch: Continuous Development w/ Rolling Update) weiter
Versionen 3.5.x ab März 2016 - ab jetzt also mit immer stets "laufenden Updates"
Seminarversion / aktuelle Version 3.6.4
Statusartikel zur "Roadmap" von Joomla auf diesem Infoportal - dort dann auch Link zur Darstellung auf joomla.org zum Thema Updates/Upgrades - 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 - jetzt zu 3.6 - 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.6 - Die neuesten Features") -
Installation: Entpacken im Webdokument-Ordner unseres XAMPP-Servers
Download bzw. Bereitstellung der aktuellen Version 3.6.4 von joomla.org
(Anm.: wenn Sie die Joomla-interne Update-Technik ausprobieren wollen, dann können Sie aber auch 3.5.0 oder 3.4.x Vorgänger nutzen)Technik Info Bemerkung Lokal C:\xampp-cmsod\htdocs\joomla\joomla-buhtdocs hier mit Unterordnerstruktur Web http://localhost/joomla/joomla-buimmer über htdocs aufrufen
nie über Laufwerkspfad C:\... aufrufenDatenbank 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: 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 Dateipassword.txtim XAMPP-Hauptverzeichnis)
Datenbankserver: localhost
Benutzer: root
Passwort: leer (kein Passwort!)
Anm.: CMS-Vorinstallationen 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! - 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 eingenen 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üs
Plugins - für verschiedenste Automatisierungen/Aufgaben; am Interessantesten Inhalts-PlugIns (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) definiert
Beispiele/Anmerkungen: wort-wörtlich 1000e von freien und kostengünstigen "fertigen" Templates für Joomla im Netz verfügbar - beachten: genau auf vermeintlich "freie" Lizenzen für Templates achten und einsetzen!
Wichtig: Vorteil von reiner Joomla Core Technik (ohne Fremderweiterungen):
wird immer gepflegt und für kommende Versionen aktualisiert und die Datenübernahmen (Updates) werden "garantiert" - 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) als Standard (Default) einstellen
Wirkung: siehe Suchbox "Search..." wird zu "Suchen..." und Link "Back to Top" wird zu "Nach oben"
Das Backend "deutschen" wir über die Verwaltung "Users - Manage" ein:
der Admin-Benutzer "Super User" wird editiert und bei den "Basic Settings" (3. Registerkarte" kann die Backend Language auf "German" umgestellt werden! - Nachinstallationshinweise
die Hinweise ausgeblendet; insbesondere "Zwei-Faktor-Authentifizierung" nur ausblenden - bitte hier nicht aktivieren - Frontend-Editing
im FE angemeldet (Login-Modul) und somit die Beiträge und Module direkt bearbeiten
Ändern von Texten, Anpassen von Modul-Titeln direkt im Frontend, also in der Seite möglich - "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 Design)
Erinnerung: bei Mozilla Firefox mittels Umschalten + Strg + M in Modus "Bildschirmgrößen testen" schalten
Übung: Ä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) - Versionen für Beiträge
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
Anlegen von Beispielbeiträgen für bestehende Haupt-Kategorie "uncategorized"
andere Hauptkategorie "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
Erste Darstellung von Menüs in Menü "main menu" und "top" und Festlegen der Startseite (Stern in Menü - auf Beispielinstallation vom Typ "Beiträge- Haupteinträge"; also einer Blogansicht für alle Beiträge mit der Eigenschaft "Haupteintrag") - Optionen (Globale Einstellungen - Beiträge)
BE-Menü: Inhalt - Beiträge - Optionen
Generelle Einstellungen für Beiträge, Kategorie, Kategorien, Blogs/Haupteinträge, Listen und Co
Übung: Infos/Details gezielt verbergen lassen
Hinweis: Einstellungen an verschiedenen Stellen von Global (→ Beiträge - Optionen) über Menüs (→ Layout-Optionen) bis hin zu Eigenschaften eines einzelnen Beitrags (→ Optionen) konfigurierbar
Wichtig: die Optionen werden auf Grund der erzeugten Links beim Öffnen zugewiesen - das haben wir uns mit ersten Übungen zu Menüs (Typ: System - Menü-Alias) erarbeitet
Hinweis: Layout-Optionen wie "Mehrspaltigkeit" funktionieren natürlich nur mit dafür ausgelegten Templates
Versionierungen Beiträge
XAMPP läuft
Menüeintrag-Alias
Optionen für Beiträge
Joomla Projektordner
Frontend vs. Backend
Tag 02 - Dienstag
Dienstag, 06.12.2016, 08.30 - 16.00 Uhr
- Ausführliche Rekapitulation für Seminartag 01,
TN-Fragen, Koordination (freiwillige) Prüfung - XAMPP / Joomla-Projekte in Betrieb nehmen
Erinnerungen: XAMPP Kontrollcenterxampp-control.exesauber starten
Tipp: auf Desktop verknüpfen - bitte nicht aus Ordner xampp-cmsod herausziehen!
und Dienste Apache und MySQL starten
Browser bereitstellen und URL für das aktuelle Joomla-BU-Projekt eingeben - BE für das Projekt öffnen - Captcha
Absicherungsmechnismen für Webformulare; Empfehlung: reCaptcha (jetzt bei Google - man benötigt also Google-Account und direkt als Technik in Joomla verfügbar)
Anm.: kommerzielle Formularseiten müssen über https erreichbar sein! - Joomla (Datei- und Ordner-Struktur)
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 ohne BOM" und am Besten immer mit unserem Notepad++ bearbeiten - niemals mit Editor von Windows!
Datei / Ordner Anmerkungen / Bedeutung ./administratordas "Backend"; Seitenzugriff ggf. über Verzeichnis-Zugriffsschutz extra sichern (z.B. Zugriffsschutz per .htaccess und .htpasswd) und nach Möglichkeit Zugriff mittels SSL (https) ./bin./cliProgramme (Binaries) und Command Line Interface Tools (CLI) für Joomla ./components./modules./pluginsdie Erweiterungen (Komponenten, Module, Plugins) ./includes./librariesdas "Joomla-Framework" (Joomla-Platform; Includes für "Einfügungen" von Code; Libraries stehen für Code-Bibliotheken) ./languagedie Sprachkonfigurationen bzw. Übersetzungen ./templatesdie Design-Vorlagen für die Site configuration.phpdie Konfigurationsdatei Ihrer Site (inkl. Zugangsdaten DB! Bitte lokal sicher aufbewahren und schützen und online auf Server nicht mit unsicheren Dateiattribute arbeiten: Stichwort 777 - Alle dürfen alles mit dieser Datei machen!
Größere Sicherheit mit Berechtigungen 400 bzw. 440 (nur Benutzer bzw. Gruppe kann lesen)
Anm.: auf Windows-Systemen wird Attribut "Read only - Schreibschutz" aktiviert!htaccess.txtVorlage für .htaccess(Apache Webserver Konfigurationsdatei); Tipp: bei Windows-Systemen in der Eingabeaufforderung (cmd) mittels "copy htaccess.txt .htaccess" in der Konsole eine echte .htaccess erstellen!web.config.txtVorlage für web.config(MS Webserver IIS - Internet Information Server)robots.txtSteuerdatei für Suchmaschienen (Standard: nicht um Unterordner kümmern, außer: images, templates) LICENSE.txtREADME.txtInfodateien zur Lizenz und lesenswerte Quellen rund um Joomla index.phpdie eigentliche Joomla-"Seite" - Joomla URL Suchmaschinenoptimierung (SEO)
hier eigentlich erst einmal SEF (Search Engine Friendly URLs) mit Konfiguration (siehe 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 mit vorhandener .htaccess und Webserver Apache mit mod_rewrite (mittlerweile Standard) - 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.
Durch den Vergleich mit den Beispielinstallationen der Joomla-Entwicklergemeinschaft lernt man viel über die angewandten Joomla-Techniken. - Inhalt - Medien (einfacher Joomla Kern Medienmanager)
einfache Ordner- und Datei-Management Technik inkl. Details oder Vorschaubildern
Analyse/Vergleich: Joomla-Site-Ordner:C:\xampp-cmsod\htdocs\joomla\joomla-blanko\images
entspricht URL:http://localhost/joomla/joomla-blanko/images
Wichtig: in allen Ordner liegt Dummy-Dateiindex.htmlfür Anzeige leerer Browser bei Direktaufrufen
Übungen (siehe morgen): Bilder-Ordner erstellen und Bilder hochladen - 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 (→ Erweiterung ?)
Geschlossener Mitgliederbereich (→ Sichtbarkeit / Berechtigungen für Joomla-Benutzer)
, ... und vieles mehr
Kategorien: (hier mit Hauptkategorie für den Verein)
Verein → Vorstand
Verein → Spielberichte (→ Unterkategorien: Saison 2016/17, Turniere) - Ausführliche Übungen zu ...
Beiträge / Kategorien
Menüs → Menü-Module / Module (z.B. Zufallsbild)
Startseite angepasst
Hiweise auf : Sichtbarkeit von Modulen/Beiträgen - Besonderheit: Modul für Benutzer (gibt es später in Blanko-Installation gar nicht!)
Modulpositionen (später auch für Templates wichtig)
Kategorien
Stapelverarbeitung
Beitrag - Kategorie
Überschrift h3
image - Dummy index.html
configuration.php
Tag 03 - Mittwoch
Mittwoch, 07.12.2016, 08.30 - 16.00 Uhr
- Rekapitulation, TN-Fragen
- 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) - 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/landscapezu finden; ich stelle als Trainer ebenfalls webtaugliche Bilder in unterschiedlichen Größen (150px / 250px / 800px) zu Testzwecken zur Verfügung
Variante 2) Button zum Bild einfügen des Editors (am Besten später mit erweitertem Editor - z.B. JCE s.u.)
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
Übung: Bilder in Beiträgen eingearbeitet und getestet - JED - Joomla Extensions Directory
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 (Joomla Content Editor - 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
Natürlich wäre 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)
Beachten: diese Spracherweiterung (Unterstützung) wird früher (bis JCE 2.5.x) durch eine JCE-Komponenteneigene Installationstechnik durchgeführt
JCE 2.6.x: Sprachdatei einfach über den Standard-Erweiterungsmanager von Joomla installieren
Siehe hierzu auch die Erläuterungen des JCE-Forums;
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 stylen - 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: 150px) öffnet "LightBox/Animation/Bildergalerie" mit großem Bild (hier: 500px)
Vorgehen:
150px Bild in Beitrag einfügen (gerne inkl. Textfluss links/rechts)
Bild verlinken - also Link-Symbol anklicken und über Dateiauswahl die große Dateiversion (500px) als Linkziel (URL) angeben
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. DS - für DiaShow) vornehmen
Anm.: funktionierte nicht auf allen Systemen auf Anhieb; auf Trainer-System habe ich am Ende einfach die aktuelle veröffentlichte Version (1.2.3) entfernt und statt dessen die "Developer-Version 2.0.0-rc1 - Release Candidate 1" installiert - damit funktionierte die Bildgalerie-Technik der JCE Mediabox - 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 - Joomla Update
das Kontrollzentrum meldet uns eine neue JCE-Version 2.6.1 und bietet Button für Update-Vorgang 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.6.4 auf 3.6.5) und
mit Upgrade (oder sogar Migration) größere Aktualisierungen (z.B. Upgrade von 2.5.x auf 3.x oder Migrationen von 1.5.x auf aktuelle Versionen 3.5.x) - E-Mail-Verschleierung
über Erweiterungen - Plugins - Inhalt - E-Mail-Verschleierung (Plugin-Name emailcloak) werden E-Mailadressen per JavaScript verschleiert/unkenntlich gemacht, ohne die Funktion (Klick startet E-Mail-Client) zu verlieren; 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! - Module - Allgemein
die Module lassen sich positionieren (klassisch: position-0 bis position-14) und auf Sichtbarkeit konfigurieren
auf welchen Seiten sollen sie erscheinen) und
für welche User sollen die Module sichtbar sein (Public, Registered, Super User)
Übung: mit Modul "Zufallsbild" und Modul "Suchbox" (→ position-0) - Module Navigation - Menü (Forts. und Übungen)
Neues Menü erstellt (Menütitel: Topmenu) und
1) Link "Home" erstellt auf bereits bestehenden Link "MainMenu - Home" mittels Systemlinks - Alias (ggf. händisch neu vergeben)
2) Link "Spielberichte" - ebenfalls ein Alias
3) Link "joomla.org" - ein externer Link
Neues Modul Navigation - Menü für das Menü Oben erstellt bzw. zugewiesen;
Templateposition: position-1
Erweiterte Eigenschaft: Menüklassensuffix "nav-pills" (Beachten: hier Leerzeichen vor Klasse nav-pills!)
Anm.: es gibt auch noch Modulklassensuffix - 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) - Templates I (eine erste Annäherung)
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!
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 wählen 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
Plugin emailcloak
Template - Optionen
Template - Stil
Medien
Erste Bilder in Beiträgen
JCE - Joomla Content Editor
Tag 04 - Donnerstag
Donnerstag, 08.12.2016, 08.30 - 16.00 Uhr
- Rekapitulation, TN-Fragen
- 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!
Übungen:Datei / Ordner Anmerkungen / Bedeutung ./cssdie CSS-Styles ./htmlOverrides - Ausgaben von Joomla-Komponenten, Modulen, Plugins, Layouts überschreiben ./images./imgBilder und
"Icons"./jsJavaScript ./languagedie Sprachkonfigurationen bzw. Übersetzungen für das Template ./lessBootstrap-Technik: hier der LESS-CSS-Precompiler component.phpAusgabekomponente error.phpAusgabe für Fehler 404 - Dokument nicht gefunden! offline.phpAusgabe für Joomla-System offline - siehe Konfiguration favicon.icoFavorite Icon (siehe Favicon Generatoren) template_preview.png
template_thumbnail.pngBilder für die Darstellung des Templates im Backend templateDetails.xmlKonfigurationsdatei des Templates - wichtig für Installation und Infos im Backend index.phpdas eigentliche Joomla-Template
Anpassungen in index.php für Datum/Uhrzeit in footer
CSS für Image-Tag img , sogar spezielle Klassen jbleft und jbright für Bilder mit individuellem Floating "links" bzw. "rechts"
Datei:./css/template.css:Hintergrundbild für Tag body mit folgenden Styles zur Verbesserung der Darstellungen/Lesbarkeiten von Text (Absätze, Anker/Links) im Footer:{code lang:css showtitle:false lines:true hidden:false}body {
background-image: url("../images/bg.jpg");
background-repeat: no-repeat;
}
footer p, footer a {
color: #FFFFFF;
}{/code}Anleitung der Joomla-Entwicklergemeinschaft (Link)
Empfehlung: für den Anfang die Verwendung von Templates mit darunter liegenden Template-Frameworks (z.B. Helix3, Gantry, Vertex, Warp, JA T3) weglassen, weil man hier noch mehr Technik handeln muss und sich auch leicht abhängig von Technikentwicklungen und Unterstützungen macht. - Templateübung: - hier Hinweis auf ein Beispiel-Template "News Campus" (Link)
aus Übersichten auf joomlasaver.com bereitgestellt / installiert / analysiert (Templatepositionen) und konfiguriert (Modul positioniert)
Anm.: dieses Template dann gerne auch als Premium-Template ab 35 $ (Link)
weitere Templates (andere "Hersteller") ausprobiert / analysiert - ./language (Ordner, Technik, Overrides)
neue Sprachen 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 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.ini
die Sprachkonstante des Templates TPL_PROTOSTAR_BACKTOTOP geändert und im FE beobachtet!
Anm.: in derindex.phpdes Templates Protostar wird diese Joomla-Sprach-Variable mittelsJText::_('TPL_PROTOSTAR_BACKTOTOP')als Platzhalter mittels eines PHP-Skriptblocks eingefügt
Weitere Übungen: Sprachanpassungen für das
Login-Modul (de-DE.mod_login.ini),
Suchbox-Modul (de-DE.mod_search.ini) und für
die "Weiterlesen"-Texte in der Standard-Inhaltsausgabe (de-DE.com_content.ini).
Problem: man ändert Dateien im Standard-Language-Ordner von Joomla - dort werden womöglich bei Updates von Sprachdateien/Infos Ihre Änderungen wieder überschrieben! - Lösung: Overrides (Sprachen - aber auch: Komponenten, Module, Plugins, Layouts)
("Überschreiben") von Sprachen-Platzhaltern mittels Erweiterungen - Sprachen - Overrides - hier einfach die gewünschte Sprachkonstante sauber in einem Formular eingeben und hinterlegen (techn.: im Ordner/Datei./language/overrides/de-DE.override.iniwerden Ihre persönlichen "German-DE-Übersetzungen" als Infos hinterlegt und würden bei Aktualisierungen der Joomla-Sprachdateien dann eben nicht immer überschrieben werden!
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) - Backup & Restore I - klassische Sicherung eines Joomla-Systems
a) Projekt-Ordner/-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: >6500 Dateien / > 1200 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;
Tipp: Archiv-Ordner können konfiguriert werden, sodass 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 auf Akeeba-Website)
Backup-Speicherort (Standard):./administrator/components/com_akeeba/backup(Archive: *.jpa - Joomla Pack Archive)
Beispiel für die Akeeba Pro Technik: Backup-Archive lassen sich verschlüsseln → jps Archive (Joomla Pack secure)
Erweiterung als RC
Sprachen - Debugmodus
Sprachdateien - UTF-8
Akeeba Backup
Joomla Templateordner
Templatewechsel
Tag 05 - Freitag
Freitag, 09.12.2016, 08.30 - 16.00 Uhr
- Rekapitulation, TN-Fragen
- Akeeba - Backup & Restore
Wiederholungen, Übungen - 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 (z.B. joomla-templates.de)
2) Beispiel-Template von Joomla (Protostar) als Grundlage für eigene Anpassungen/Design nehmen
Anm.: tolle Anleitung zu Joomla 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
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" von Übersichtsportal joomlaos.de
Tipp: Analyse der Templates mit Modul-Vorschauen und Tool in Mozilla - AddOn FireBug 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" - 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: Token oder
Button öffnen mit Standard-Konfiguration des PlugIn oder einem "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 wieder Notepad++) - 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, Hautpeintrag)
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)
Übung: Übungen mit allen Benutzern/Gruppen
Vorschlag: einfach für alle Gruppen Beispieluser joeauthor bis joeadministrator anlegen und austesten - 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
Man beachte, dass manche der Extensions umfangreiche Techniken aber auch Einarbeitungszeiten und Konfigurationen verlangen.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 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 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 ... -
Joomla Wissen der Woche anwenden...
→ Neues Blanko Joomla-Projekt auf einem lokalen Entwicklungssystem erstellen
Vorschlag: das fertige XAMPP-CMSOD von Ihren Teilnehmer-Unterlagen
→ Kategorien (planen / erstellen), Beiträge, Menüs (planen / erstellen), Module für Menüs
Anm.: alles erst einmal mit Standard-Template Protostar
→ Ausstattung mit Erweiterungen/Techniken nach Wahl:
Komponenten, Module, PlugIns
→ System stetig während der Überarbeitung sichern:
Backup(s) erstellen: site-localhost-xxxxyyzz-hhmmss.jpa
→ ... die Zeit vergeht! ...
→ Template (das Design) - die größte "Baustelle"
siehe Anmerkungen und Darstellungen in unserem Seminarbeitrag
→ Jetzt sind Sie fertig! (Anm.: ne - ist man nie ;-)
und haben eine "letzte" Sicherung / einen Sitestatus: site-localhost-development-final-yyyymmdd-hhmmss.jpa
→ Hoster suchen / finden
Domain:mein-joomla-projekt.de
Webserver:./joomla-projekt(Ordner für Ihre Website/Domain auf Ihrem gemieteten Webserver)
→ Lokales Entwicklungsprojekt auf Hosting veröffentlichen / übertragen
Für die Datenbank muss vorher im Kundencenter des Hosters eine entsprechende DB erstellen
Die DB-Zugangsdaten muss man kennen und sollte eine entsprechende Dokumentation besitzen!
Übertragen und Wiederherstellen der Ornder und DB beim Hoster mittels Akeeba Kickstart
Kurzanleitung: alle nötigen Dateien in Ihren Projekt-Ordner "hochladen"
(Alternativen: a) FTP, b) Dateimanger im Hosting-Kundencenter - wir nehmen natürlich FTP)site-localhost-yyyymmdd-hhmmss.jpa,kickstart.php,jquery.min.js,json2.min.js,de-DE.kickstart.ini
(oder einfach alle Dateien aus dem kickstart-Zip-Archiv von akeebabackup.com)
Wiederherstellung nach unseren Übungen am Donnerstag/Freitag mit "Kickstart" durchspielen - Musterprüfungen zum Modul IIIa - Joomla (CMS Online Designer 3.0)
für die Prüfungen des CMSOD stelle ich im OrdnerC:\xampp-cmsod\__backups(wird ggf. als Zip bereitgestellt)
eine Sammlung von Skripten für die Eingabeaufforderung (cmd) unter Windows und
die entsprechende Anleitung alstrainer-ek-zk-anleitung-backup-restore.pdfbereit
Kurzanleitung zum Restore der Musterprüfung: (hier nur kurz die Eingaben)
Musterprüfungs-Zip-ArchivMustermann-Max_musterpruefungen_joomla_20161208.zip
per Drag & Drop auf das Restore-Skript ziehen
es öffnet sich eine Eingabeaufforderung:musterpruefungen(Return)joomla(Return)
Abfrage DB-Kennwort: einfach Return für "leeres" Kennwort (wie immer beim XAMPP!)
Die Musterprüfung - und die Musterlösung auf Anfrage - werden als PDF bereit gestellt. - TN-Bescheinigungen, Feedback, letzte TN-Fragen,
Digitale Seminarunterlagen, Screenshots der Woche bereitgestellt (ca. 150-200 pro Tag - "Daumen-Kino" zum Seminar)
Joomla Benutzergruppen
Akeeba Kickstart
Designanalyse mit Firebug
Sprachen - Override
Plugin-Code im Beitrag
SIGE Editor Button
Ihr Trainer Joe Brandes
