joomla.org
Für alle Interessierten aus dem Bereich des "CMS Online Designer/in (VHS)" findet ab dem 10.12.2012 das Modul "Joomla!" 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 neuen Online-Zertifikats (VHS) aber natürlich 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, 10.12. - Fr, 14.12.2012; jeweils 08.30 - 16.00 Uhr
freiwillige Prüfung:eine Absprache für die Teilnahme an einer freiwilligen Prüfung im Seminar mit den Teilnehmern statt
Ich schreibe natürlich wieder ein Protokoll unserer BU-Woche mit ...
Ihr Trainer Joe Brandes
Tag 1 - Montag
Globale Einstellungen
Montag, 10.12.2012, 08.30 - 16.00 Uhr
- Orientierungsphase, Absprache der Woche und freiwilliger Prüfung
Cobra-Shop mit Software für VHS-Schulungsteilnehmer; Hinweis auf Zertifikat CMS Online Designer - Tools:
Bereitstellung / Konfiguration Windows Umgebung (s. a. Toolsammlung zum CMSOD)
Browser: Mozilla Firefox (Link) - Alternativen zum Testen vs. IE, siehe auch Google Chrome, ...
Packer: 7-Zip (Link) - Schneller und multifunktionaler als das Bordwerkzeug von Windows
Editor: Notepad++ (Link) - Syntaxhighlighting und mehr für Dateihandling von Joomla, CSS, ...
Windows Explorer (Win + E) konfigurieren: Dateierweiterungen einblenden, System-/Dateien/Ordner einblenden - Serverumgebung XAMPP (Version 1.7.4 mit PHP 5.3.5)
X - Betriebssysteme Linux (L), Windows (W), MacOS oder Sun Solaris;
AMP - Apache (Webserver), M - MySQL (Datenbankserver), P - PHP (serverseitige Skriptsprache)
P - Projekt; Download der 7z-XAMPP-Version - Entpacken nach C:\ ergibt lokalC:\xampp\...
Hinweise: Einsatz von XAMPP bitte nur als Test- und Backup-Umgebung - nicht als Produktionsserver! Wichtige erste php-Umgebungsvariablen:max_execution_time, post_max_size, upload_max_filesize - Joomla! (Heimatportal: www.joomla.org)
Versionen beachten, Übersichten in Wikipedia-Artikel Joomla!
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 - Betrieb bitte ohne Legacy-Modus, eigentlich erste LTS-Variante seit Januar 2008!
Version 2.5 - aktuell 2.5.8; seit Januar 2012 dann erste offizielle LTS-Version mit Nummer 2.5 (Alle .5er dann in der Folgezeit dann die LTS-Varianten), 2.5 wird bis Juli 2013 supportet, Technikumgebungen bleiben dann immer einheitlich; nächste LTS-Version 3.5 (Juli 2013 bis Januar 2015) ... 4.0 / 4.1 / 4.5 ...
(Grafik: joomla.org - Artikel: Abstimmung über die Versionen)
- Deutschsprachiges Installationspakete von www.jgerman.de
Komplett-Pakete oder Sprachaktualisierungen; Eindeutschung von Frontend, Backend, Standard-Joomla-Erweiterungen und deutsche Beispieltexte - Installation: Entpacken im Webdokument-Ordner unseres XAMPP
Lokal:C:\xampp\htdocs\joomla
Web:http://localhost/joomla
Aufruf der Webadresse zeigt uns die Installationroutine für Joomla; Hinweis: für die Komplettierung der Installation muss vorher eine Datenbank mit phpMyAdmin auf dem MySQL-Datenbankserver angelegt werden! - Frontend (FE) und Backend (BE) aufgerufen und getestet
FE:http://localhost/joomla
BE:http://localhost/joomla/administrator
Einloggen in das Backend mit SuperUser; Erste Übersicht über Anzeigen im BE: Artikel - Hauptartikel (Sortierungen, Reihenfolge, Aktivierung/Deaktivierung - Suchmaschinenoptimierung (SEO)
auswww.domain.de/index.php?option=com_content&view=article&...&id=185
wirdwww.domain.de/kategoriexy/beitragxyz.html
einfache SEO bereits mit einer Option im BE - Konfiguration - Site - SEO - Suchmaschinenfreundliche URL aktivierbar; für eine bessere Umsetzung wie im Beispiel oben muss dann noch etwas Technik her (.htaccess) - configuration.php - siehe Hauptverzeichnis der Joomla-Installation
die Hauptkonfigurationsdatei mit vielen Parametern und Einstellungen für die Site
Beispiel:$offline = "0"bzw.$offline = "1" - Leeres "Blanko-Joomla" installiert
alternative Installation mit Original-Joomla-Install-Zip von joomla.org; ohne Beispieldaten!
Installation der deutschen FE/BE-Sprachdateien von jgerman.de; Umstellen der Sprachen im FE/BE; - Erste Beiträge
erstellt und konfiguriert (Weiterlesen); Globale Einstellungen: siehe Optionen in BE - Beiträge; Hauptbeiträge konfiguriert, Überlegungen zu Kategorien, einen Beitrag als Menüeintrag verlinkt
Tag 2 - Dienstag
Modulklassensuffix
Dienstag, 11.12.2012, 08.30 - 16.00 Uhr
- Rekap, TN-Fragen
TN: Frage zu SEO-Links/Urls - kurze Klärung; aber: ausführliche Darstellung im Rahmen der SEO-Technik mittels "mod_rewrite und .htaccess" im Laufe der Woche; aktuell SEO komplett deaktiviert! - Forts. Übungen zu Beiträgen, Menüs, Kategorien, ...
- Kategorien
neue Kategorien erstellt; mit Unterkategorien
beispielhafte Menü-Links als Kategorieblog und Kategorieliste; Vergleich und Konfigurationen vorgenommen (siehe wieder auch Globale Einstellungen)
Stapelverarbeitung genutzt um mehrere Beiträge in einer Aktion in eine andere Kategorie zu verschieben - Menüs / Modultyp Menü
Übung: neues Menü mit Menüeintrag erstellen und auf Website positionieren
Wichtig: die Menüs stellen nur die Strukturen / den Aufbau meiner gedachten Links dar - die Platzierung in der Website geschieht dann über das Standard-Modul "Menü" an einer definierten Position mit den Parametern für Zugriffsebene und Sichtbarkeit/Unsichtbarkeit auf einzelnen Seiten
Anm.: Standardposition Beez20 - linke Navispalte "position-7"; rechte Navispalte "position-6" (oder -8); die rechte Spalte lässt sich dynamisch ein-/ausschalten! - Vorschau auf Template-Positionen
über Templates: Templates auf Vorschau klicken; diese Vorschau muss erst über die Templateoptionen entsperrt werden; die Vorschau sollte nach der Nutzung wieder deaktiviert werden! - Firebug
Extensions Firebug für Mozilla Firefox nachinstalliert; wir müssen jetzt immer wieder auch mal den Quellcode auf Clientseite (Browser) analysieren; Hinweis: Spaltenweise Blog-Ausgabe mittels Klassen "column-1" und "column-2" und geeignetes CSS-Styling (floating) - Ordner- und Dateistruktur
./administrator- das "Backend"; Seitenzugriff ggf. über Verzeichnis-Zugriffsschutz extra sichern und möglichst Zugriff mittels SSL (https)./components ./modules ./plugins- die Erweiterungen (Komponenten, Module, Plugins)./includes ./libraries- das "Joomla-Framework" (Joomla-Platform)./languages- die Sprachkonfigurationen bzw. Übersetzungen./templates- die Design-Vorlagen für die Siteconfiguration.php- die Konfigurationsdatei Ihrer Site (inkl. Zugangsdaten DB!)htaccess.txt- Vorlage für .htaccess (Apache Webserver Konfigurationsdatei)index.php- die eigentliche Joomla-"Seite"LICENSE.txt README.txt- Infodateien zur Lizenz und lesenswerte Quellen rund um Joomlarobots.txt- Steuerdatei für Suchmaschienen (nicht um Unterordner kümmern)web.config.txt- Vorlage für web.config (MS Webserver IIS - Internet Information Server) - Komponenten, Module, Plugins
erste Analyse der Ordnerstruktur am Beispiel Plugin E-Mail-Verschleierung (emailcloak)
Ordnerstruktur: ./plugins/content/emailcloak/emailcloak.php und andere Dateien
Praxis mit E-Mail-Verschleierung; Dummy-"index.html" in Ordnerstrukturen um bei Direktaufruf eine leere Seite anzuzeigen - Templates (Joomla-Vorlagen)
Ordner enthält neben "system"-Vorlagen die drei im Blanko-System enthaltenen FE-Templates (Bereich: site) für "Beez_20" (Ordner beez_20; Standardtemplate Version 2.0 nach der ersten Version für Joomla 1.5); "Beez5" (Ordner beez5; Version Beez mit HTML5-Ausgabe) und "Atomic" (Ordner atomic; Roh-Template ohne Styling)
erster Einblick in Ordner- und Dokumentstruktur von Beez_20
Anm.: die Templates für das BE (Bereich: Administrator) liegen unter ./administrator/templates - Prinzip: Trennung von Layout (HTML-Gerüst/ Inhalt) und Design (CSS)
wird super auf www.csszengarden.com gezeigt: immer dieselbe Seite, aber durch verschiedene CSS-Dateien wird die Seite komplett umgestylt - Übung: Templateinstallation
über Website www.joomlaos.de ein beliebiges Design ausgesucht und im Joomla-System über Erweiterungen installiert; hier musste erst lokal entpackt werden, da Template-Versionen für Joomla 3 und 2.5 enthalten waren! Lizenz beachten!
Wichtig: Template-Positionen für neues Template analysieren und die nötigen Modulklassensuffix mit einer beispielhaften Ansicht des Template anlysieren und in der Konfiguration der Menü-Module einstellen - BE-Konfiguration
Site - Offline-Modus, Meta-Informationen, Standard-Editor (Alternative zu TinyMCE suchen)
System - Debug-Modus, Cache, Session Lifetime
Server - SSL erzwingen, Timezone, FTP, Datenbank, Mailing
Tag 3 - Mittwoch
jdoc:include head
Mittwoch, 12.12.2012, 08.30 - 16.00 Uhr
- Rekap, TN-Fragen: Nachfrage zu Suffix bei Modulklassen
Just for Fun vor Sem-Beginn: Google-Suchmaschine "Lochstreifen"-Style auf www.masswerk.at/google60 - Forts. und Schwerpunktthema Template-Technik und -Design
- Analyse Beez 2.0 (Standardtemplate Team Angie Radtke für Joomla)
Template-Ordner beez_20; auch Name des Template in XML-Datei (s.u.)
Bilder für Template-Menü BE:template_thumbnail.pngundtemplate_preview.png(Bildabmessungen beachten!)
Favicon: ein spez. Iconformat für Favoriten/Bookmarks/Browsertabs -favicon.ico; mit geeigneter Software (z.B. Gimp) selbst erstellen oder Favicon-Generator im Web (z.B. www.favicon.cc); Anm.: ggf. mit alternativem Browser testen, wird oft noch in Browser vorgehalten, obwohl schon geändert!templateDetails.xml- notwendige saubere XML-Beschreibung des Template, Templateeigenschaften wie Autor, Dateien, Positionen, Sprachen, Konfigurationsmöglichkeiten - Spracheinstellungen Beez 2.0
Ordner ./language mit Unterordnernde-DEunden-GBenthalten die Beez 2.0 Sprachübersetzungen (z.B.de-DE.tpl_beez_20.iniundde-DE.tpl_beez_20.sys.ini); praktische Änderungen und Auswirkungen durchgetestet; Achtung: das Beez-Template hat auch einen eigenen language-Unterordner!
wichtig: Dateien müssen als UTF-8 ohne BOM gespeichert werden, Groß-/Kleinschreibung ist entscheidend - index.php einer Template-Struktur
am Beispiel des einfacheren Template "atomic"; Minimalaufruf der "Joomla-Umgebung" am Anfang:
defined('_JEXEC') or die; /* The following line loads the MooTools JavaScript Library */ JHtml::_('behavior.framework', true); /* The following line gets the application object for things like displaying the site name */ $app = JFactory::getApplication();Nutzung von PHP-Snippets ("Schnippseln") um jeweils passende Werte bereitzustellen:
Snippet beginnen jeweils mit PHP-Code und dann echo $this -> ...
_charset (Charakter / Zeichencode: z. B. UTF-8)
language (Sprache: z. B. de-DE)
direction (Leserichtung: z. B. ltr - left-to-right)
baseurl (Basis-URL der Installation: z. B. Unterordner ./joomla.org-25)
template (Templatename: z. B. atomic)
Einfügen von "Kopf/Head-Daten" von Joomla mittels:
<jdoc:include type="head" />
Einfügen von Modulen mit Positionsnamen (und Style) mittels:
<jdoc:include type="modules" name="position-0" style="none" />
Anm.: möglichst Modulpositionen mit äußerer IF-Bedingung mit:
if($this->countModules('atomic-search') or $this->countModules('position-0')) ... endif
Einfügen der Systemnachrichten und der eigentlichen dynamischen Inhalte (content) mit:
<jdoc:include type="message" />
<jdoc:include type ="component" />
Spezielles: Einfügen von Seitenname aus Konfiguration und aktuells Jahr:
htmlspecialchars($app->getCfg('sitename')
date('Y') - alles natürlich immer mit den nötigen php-Echos versehen! - Modul "Suchen"
neues Modul vom Typ "Suchen" für Praxis mit dem Template "atomic" und position-0 erstellt - error.php
die Fehlerbehandlungsseite von Joomla; in Templates persönlich anpassbar; Beispiel von "atomic" angeschaut und verändert - Extensions (siehe extensions.joomla.org)
riesiges Repository mit fast 10.000 Erweiterungen zu allen Einsatzzwecken; auf Aktualität und andere Parameter (Downloads, Joomla-Versionen, ...) achten - JCE (Joomla Content Editor - www.joomlacontenteditor.net)
Editor basierend auf TinyMCE (von Fa. Moxiecode); besseres Handling von Medien und Co, eingebauter Dateimanager; beachten: die Komponente JCE hat eigenens Plugin-Handling - also die Sprachdateien für den JCE über seine eigene Plugin-Verwaltung und nicht die von Joomla! installieren
Tipp: in Beez20 stellt JCE die Beiträge zentriert dar (obwohl eigentlich in Site linksbündig)
1) für den body-Tag die Ausrichtung ändern: body {... text-align: left; ...} oder besser
2) in der template.css (bzw. Template in JCE-Konfiguration): #tinymce { text-align: left; } - Fehlerberichte ausgeschaltet
JCE-Installation erzeugt in XAMPP-PHP-Variante "strict"-Meldungen - Entscheidung: Fehlerberichtswesen komplett ausschalten in Zeile (ca.) 533 - display_errors = Off (in php.ini)
wichtig: danach Apache restarten, um die geänderte php.ini neu einzulesen - Kurzer Ausblick auf Do:
Benutzer, Gruppen, Zugriffsrechte, Datei-/Ordner-Strukturen für images, Fehler erzeugt bei nachträglicher manueller Änderung eines Bilderordners!
Tag 4 - Donnerstag
Modul Overrides
Donnerstag, 13.12.2012, 08.30 - 16.00 Uhr
- Rekap, TN-Fragen
- BE - Benutzer - Benutzerund Zugriffsebenen
Das Konzepte der Benutzer in Zusammenhang mit den Benutzergruppen und Zugriffsebenen kennen gelernt
Übersicht über klassische Gruppen für FE und BE (siehe hierzu auch OpenBook zu Joomla 1.5 Link)
neue Benutzer mit den unterschiedlichen Gruppenzugehörigkeiten angelegt und ausgetestet
Hinweis: zum Testen der Konten möglichst unterschiedliche Browser für FE und BE nutzen und nach gewisser Zeit (und Problemen) auch mal den Browser-Cache leeren!
Nachfrage: auch die Editoren und hier speziell der JCE lassen sich auf Benutzergruppen und sogar einzelne Benutzer optimieren und anpassen! - Menü und Menümodul für Benutzer
Übung: neues Menü "Benutzermenü" mit Links zum "Artikel erstellen / einreichen" und "Benutzerprofil ändern" erstellt und konfiguriert
Tipp: Orientierung an Best Practises aus der Demo-Joomla-Installation inkl. Beispieldaten: neue Benutzergruppen und Zugriffsebenen geschaffen - eigenes Template erstellen
Tutorial 1: Website www.joomla-template-erstellen.com - zeigt Joomla-Template-Prinzip ohne weitere Verfeinerungen und auch die Erarbeitung der HTML/CSS-Strukturen; Anm.: Installation des Tpl-Zip brachte nur Ordner und templateDetails.xml; manuelle Reparatur war notwendig
Tutorial 2: Website software-lupe.de (Link) - ausführliche Joomla-Template-Technik inklusive Erläuterungen zu den Versionen / Änderungen ab 1.7/2.5; weitere Tricks für Berechnungen und dynamischen Zuordnungen ($contentwidth = 960 / 770 / 580 ergibt dann z. B. class="col_960")
Installation und Übersicht zu Template-Tutorial 2 - Joomla Klassen
Übersicht und Analyse der Joomla-Klassen mittels Firefox/Firebug-Team
Auflistungen in Joomla-Dokumentationen oder speziellen Websites: www.joomla-css.nl (Link zu Übersicht); hier gibt es auch eine "leere" komplette template.css für Joomla - Overrides
1) Bilder des Joomla Systems: ./media/system/images/printButton.png
lassen sich mit: /templates/tplname/images/system/printButton.png überschreiben
2) Modulausgaben lassen sich mittels eigenem style="beezDivision" in der Templatedatei /templates/tplname/html/moduls.php mit eigener Funktion function modChrome_beezDivision überschreiben
siehe hierzu Beez 2.0 Templatedateien index.php und html/modules.php
Styles der Beez 2.0: beezDivsion, beezTabs, beezHide (Tabs, Hide in Demoinstallation zu bewundern)
3) alle Ausgaben der Joomla-Komponenten und Erweiterungen lassen sich mit geeigneten html-Ordnerkonstruktionen im Template Ordner html überschreiben (siehe MVC Entwurfsmuster)
Anm.: Variante 3) nur kurz angesprochen! - Template-Parameter
Am Beispiel Beez 2.0 die Parameter im BE eingesehen: $templatecolor
Definition in templateDetails.xml - auslesen mittels $color = $this-> params -> get('templatecolor')
die zugehörigen Sprachdateien der Beez analysiert - Extensions (weitere Beispielinstallationen)
SIGE - Simple Image Gallery (Plugin) - nach Installation immer den Status des Plugin und Konfigurationen checken!
Impressum (Komponente) - lässt sich über BE - Komponenten konfigurieren und über einen Menüeintrag zu der Komponente Impressum in die Site integrieren
Tag 5 - Freitag
Joomla BE Update
Freitag, 14.12.2012, 08.30 - 16.00 Uhr
- Rekap, TN-Fragen
- Overrides (siehe Donnerstag Overrides Top 3)
Praxis mit Override zu "Contentausgabe - Artikel" - also der Auslieferung einzelner Beiträge durch Joomla!
Standardpfad der Joomla-Technik (gemäß MVC Entwurfsmuster)./htdocs/joomla.org-25/components/com_content/views/article/tmpl/default.php
wird ersetzt durch Template-Override./htdocs/joomla.org-25/templates/beez_20/html/com_content/article/default.php
Bitte jeweilige neue Ordner-Strukturen mit "leerer" index.html ausstatten. - Backup & Restore I - Techniken und klassische Sicherung
htdocs-Joomla-Verzeichnis mittels FTP sichern und wiederherstellen
Joomla-DB-Tabellen mittels phpMyAdmin exportieren und importieren (DB-Dumps) - Backup & Restore II - Akeeba (vormals JoomlaPack)
mittels Akeeba-Core-Komponente im Joomla-BE eine Sicherung erstellen (*.jpa)
mittels Kickstarter-Skript (kickstart.php) und Akeeba-Sicherungsdatei wiederherstellen
sehr schnell und effektiv (siehe im Vergleich >6000 Dateien mit FTP) - Joomla Updates
automatische Aktualisierung mittels eingebauter "1-click"-Lösung in BE-Kontrollzentrum; Anm.: dafür muss allerdings die PHP-Umgebung auf allow_url_fopen = On gesetzt sein!
Manuelle Aktualisierung mit Aktualisierungspaket der Joomla.org-Entwickler
stets danach die aktuellen Sprachdateien laden (siehe jgerman.de) und abschließend über Erweiterungen (Installationsdialog im BE) die "Datenbank" checken (DB-Schema also ggf. aktualisieren) - .htaccess (hier für SEO genutzt, sonst auch Verzeichnisschutz, ...)
die htaccess.txt als .htaccess speichern (z. B. mit Notepad++) und im Joomla-BE die Optionen für URL-rewritet aktivieren
Infosite zu .htaccess: 1) htaccess-Generator; 2) Erläuterungen SelfHtml 3) htaccess Beispiele - Virtual Hosts (namensbasiert, s. a. allgemeine Beiträge zum CMS Online Designer - Übungsumgebung)
aushttp://localhost/joomla.org-25wirdhttp://www.joomlaorg-25.local
Server: den Apache mittelshttpd.confund der dort inkludiertenextra/httpd-vhosts.confauf namensbasierte Virtual Hosts konfigurieren; nach den Änderungen muss der Apache restarted werden
Client: Betriebssystem (hier Win) muss mittels hosts-Datei (C:\Windows\system32\Drivers\etc\hosts) manuell über gewünschte Domain informiert werden127.0.0.1 joomlaorg-25.local www.joomlaorg-25.local - Mehrsprachigkeit (nicht im Seminar)
komplette Unterstützung der Mehrsprachigkeit seit 1.7; wie jede Multi-Sprachen-Konfiguration etwas kniffelig ;-)
meine Empfehlung: diese Website mit "Schritt für Schritt Anleitung zur Mehrsprachigkeit und kompletten BE-Zugang zur Einsicht in die gesamte Konstruktion der Seite (Link)
Beispielseite Trainer JoeB für mehrsprachige Joomla-Site: www.dominicjentsch.biz - TN-Bescheinigungen, Feedback, letzte TN-Fragen; Musterprüfung für TN mit Interesse an Prüfung im Zertifikat CMS Online Designer
Vielen Dank für Ihr tolles Feedback zum Ende des Seminars und Ihr Interesse an weiteren Seminaren
Ihr Trainer Joe Brandes
