joomla.org
Für alle Interessierten aus dem Bereich des "X-pert CMS Online Designer/in (VHS)" findet ab dem 12.12.2011 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.03
Zeiten: Mo, 12.12. - Fr, 16.12.2011; jeweils 08.30 - 16.00 Uhr
freiwillige Prüfung:eine Absprache für die Teilnahme an einer freiwilligen Prüfung in der folgenden Woche findet im Seminar mit den Teilnehmern statt
Ich schreibe natürlich wieder ein Protokoll unserer BU-Woche mit ...
Ihr Trainer Joe Brandes
Montag, 12.12.2011, 08.30 - 16.00 Uhr
- Orientierungsphase, Absprache der Woche und freiwilliger Prüfung
Hinweis auf Musterprüfung zum Abschluss der Woche - Tools: Bereitstellung / Konfiguration Windows Umgebung (s. a. Toolsammlung zum CMSOD)
Browser: Mozilla Firefox
Packer: 7-Zip
Editor: PSPad
Windows Explorer (Win + E) konfigurieren: Dateierweiterungen einblenden, alles System-/Dateien/Ordner einblenden - Client-Server für Joomla! nötig:
Client ruft auf http:\\www.pcsystembetreuer.de mittel Web/WWW-Client (Browser)
Server stellt Webserver (Apache) mit PHP und Datenbankserver (MySQL) inklusive Verwaltungstools (z.B. phpMyAdmin) - Serverumgebung XAMPP
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 lokal
C:\xampp\...
Hinweis: Einsatz von XAMPP bitte nur als Test- und Backup-Umgebung - nicht als Produktionsserver! - Joomla! (Heimatportal: www.joomla.org)
Versionen beachten, Übersichten in Wikipedia-Artikel Joomla!
1.0.x - bitte nicht mehr einsetzen, kann noch mit PHP4 eingesetzt werden, hat sehr viele Sicherheitslücken durch Grundmodi wie register_globals=On
1.5.x - Betrieb bitte ohne Legacy-Modus, eigentlich erste LTS-Variante seit Januar 2008!
1.6.x / 1.7.x / 2.5.x - aktuell 1.7.3; im Januar 2012 dann erste offizielle LTS-Version mit Nummer 2.5 (Alle .5er dann in der Folgezeit dann also die LTS-Varianten), 2.5 wird bis Juli 2012 supportet, Technikumgebungen bleiben dann immer einheitlich, ...
In Zukunft dann: 3.0 / 3.1 / 3.5 (LTS 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 Updates für die Vorgängerversionen
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! - Fehlerbehandlung: Nach Komplettierung der Installation Aufruf von Front- und Backend "Meldungen" der Form "... Error strict ..."
Grund: PHP ist auf Ausgabe wirklich aller Meldungen konfiguriert (E_ALL | E_STRICT)
Lösung: in c:\xampp\php\php.ini das error_reporting rekonfigurieren und Webserver neu starten!
Zeile 516 (XAMPP 1.7.7) : error_reporting = E_ALL & ~E_NOTICE - 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 - SEF - Suchmaschinenfreundliche URL (in Konfiguration der Site)
Analyse der entsprechenden URLs
./index.php/using-joomla/extensions/components/content-component/article-category-list/50-upgrader
vs.
./index.php?option=com_content&view=article&id=50:upgrader&catid=19&Itemid=260 - Konfigurationen:
Site, Server, System, Berechtigungen - Meta Informationen für die Site eingetragen
Beschreibung (Description), Schlüsselwörter (Keywords)
Meta Informationen im Quelltext der Website kontrolliert - configuration.php - siehe Hauptverzeichnis der Joomla-Installation
die Hauptkonfigurationsdatei mit vielen Parametern und Einstellungen für die Site
Beispiel: $offline = "0" bzw. $offline = "1" - TN-Fragen zum Ende der Veranstaltung: Klären der Begriffe Hosting und die Verwaltung der entsprechenden Resourcen
Dienstag, 13.12.2011, 08.30 - 16.00 Uhr
- TN-Fragen (keine! ;-)
- Rekapitulation: Joomla-Versionen, CMS benötigt Webservice (mit PHP) und Datenbank, Trennung von lokalten Test-/Trainings- und Backup-Umgebungen zu den Produktionsservern (Hosting)
- Ordner- und Dateistruktur
./administrator - das "Backend"
./components ./modules ./plugins - die Erweiterungen
./includes ./libraries - das "Joomla-Framework"
./languages - die Sprachkonfigurationen bzw. Übersetzungen
./templates - die Design-Vorlagen für die Site
configuration.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 Joomla
robots.txt - Steuerdatei für Suchmaschienen (nicht um Unterordner kümmern)
web.config.txt - Vorlage für web.config (MS Webserver IIS - Internet Information Server) - BE - Site
alle Konfigurationen und Einträge durchgegangen
Kontrollzentrum, Mein Profil, Konfiguration, Wartung, Systeminformationen - BE - Benutzer - Benutzer
Das Konzepte der Benutzer in Zusammenhang mit den Benutzergruppen kennen gelernt
Übersicht über klassische Gruppen für FE und BE mit 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! - Menüs / Modultyp Menü
Die Menüstruktur des deutschen Standard-Joomla analysiert
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 - Übung zu Menü:
Menü "Über Joomla!" auf Startseite ein-/ausgeblendet
Neuer 2. Menüpunkt: Externe URL zu www.vhs-braunschweig.de in neuem Fenster - Module
Weitere Übersicht über die Module am Beispiel Modul-Typ "Anmeldung"
die Positionen spielen dann im Zusammenhang mit den Templates eine zentrale Rolle!
Mittwoch, 14.12.2011, 08.30 - 16.00 Uhr
- Rekap, TN-Fragen
- Übung zu Kategorien, Beiträgen, Menüs und Modulen (Typ Menü)
A) neue Kategorie "Bildungsurlaub"
B) neue Beiträge (3) für die Kat "Bildungsurlaub" mit den Namen Bericht 01, ... 02, ...03
C) neues Menü "BU Menü" mit Menütyp "bu-menue"
D) neue Untermenüpunkte erstellen:
D1) Beitrag "Bericht 01" verlinken
D2) Blog zu Kat "Bildungsurlaub" verlinken
D3) zu www.bahn.de verlinken (in neuem Fenster öffnen)
E) neues Modul mit Typ "Menü" für das Menü "BU Menü" an "position-7" an erster Stelle und allen Seiten
Test des neuen Menüs auf dem Frontend - Konfiguration (für Beiträge, Blog-Ansichten, Kategorien, ...)
die Globalen Einstellungen für Beiträge, Blog-Ansichten, Kategorien, ... mittels Schaltfläche Optionen auf Dialogfenster Inhalt: Beiträge festlegen - Joomla-Blank Installation
zum Vergleich mit der kompletten deutschen Joomla-Installation (inkl. Beispieldaten) eine zweite Joomla-Installation ohne die Beispieldaten
http://localhost/joomla-blank für das lokale Verzeichnis C:\xampp\htdocs\joomla-blank
Testinstallation einer Vorversion von Joomla (hier: 1.7.2 statt 1.7.3) - Aktualisierung (Update) einer Joomla-Installation 1.7.2 auf 1.7.3
Variante 1) klassisch: Update-Archiv für passende Aktualisierung (z.B. Joomla_1.7.2_to_1.7.3-Stable-Patch_Package_German.zip) herunterladen und entpacken; die Daten und Ordner über die Installation "drüberkopieren"; Hinweis: Site offline schalten wird empfohlen
Variante 2) ab 1.7 eine automatische Aktualisierung über das BE - Erweiterungen: Aktualisieren; Hinweis: manuell auf "Aktualisierung suchen" klicken, um entsprechende Aktualisierungen auflisten zu lassen!
Techn. Anm. zu 2) Hoster müssen die Webserver/PHP-Umgebung für diese Automatik erlauben: allow_url_fopen = On; Laufzeiten für Skripte, Größen für Übertragungen auf Server, ... - Positionen
Übung: neues Menü und Modul erstellt und auf position-6 zugewiesen
neue Klapptechnik für das Standardtemplate von Joomla
rechte Spalte mit Positionen position-6, position-8 und position-3 - Templates und Stile
Standardtemplates von Joomla (1.7.3):
1) atomic - sehr rudimentäres ("nacktes") Basistemplate
2) beez_20 - 2. Version nach der Version für 1.5; Ersteller: Team Angie Radtke
3) beez_5 - ein HTML5-Template (sichtbar auf Obstshop-Seiten
Zuweisung und Nutzung über Stile
Vorschau auf Templates muss erst über Optionen - Vorschau Modulpositionen - Aktiviert werden; Wichtig: bitte nach Aktivierung der Vorschau diese wieder deaktivieren, da die Vorschau sonst auch direkt über die URL im Browser aufrufbar ist (ohne BE!)
Templates z.B. über: www.joomlaos.de , ... (bitte Lizenzen beachten!)
Zuweisungen von Modulen auf die Positionen in verschiedenen Templates durchgespielt
Beispiel: Joomlashack - Template Jubilee - Template-Designer, die Ihre Templates ausführlich auf einer Beispielseite dokumentieren (Typography, Modul-Positionen, Styles, Parameter, Themes) - Bilder (und mehr)
Bilder und Grafiken sollten für das Web optimiert sein: Dimensionen ca. 250 - 600 Pixel Breite je nach Layout der Seite; Größe bis ca. 60 kB für Standardbilder in diesen Größen - hier zählt bei grafiklastigen Seiten jedes kB!
Eine manuelle Anpassung der Bilddimensionen im Editor sollte nur ausnahmsweise vorgenommen werden!
Das Recht am Bild respektieren: Empfehlung zu eigenen Bildern oder speziellen Foto/Bild/Grafik-Börsen (z.B. iStockphoto, Fotolia, ...)
Spezial-Thema: Bilder lassen sich nicht sinnvoll und schon gar nicht 100%ig vor dem Download auf einen Rechner schützen! Das ist ja das eigentlichen Grundsystem des WWW (World Wide Web): Client (Browser) - Server - Prinzip (<= eine "Kopiermaschiene")
RIOT - Radical Image Optimization Tool (Link): Toolempfehlung für Bildoptimierung auf Knopfdruck
Donnerstag, 15.12.2011, 08.30 - 16.00 Uhr
- Rekap, TN-Fragen
- Firebug (Addon für Mozilla Firefox) installiert
Quelle für Firefox Addons: addons.mozilla.org - Modulklassensuffix
Module für Menüs unterschiedlich formatiert! (CMS ./joomla-blank)
Hauptmenü anders formatiert als eigenes Menümodul BU
Analyse mit Firebug ergibt unterschiedliche Klassen für die Modul-Blöcke (DIVs)
Hauptmenü: <div class="modultable_menu> ... </div>
BU-Menü: <div class="modultable"> ... </div>
Also: Suffix _menu macht den Unterschied! Siehe hierzu Konfiguration über Module - Modul Menü - Erweiterte Optionen - Modulklassensuffix - beez_20
Standardtemplate (zusammen mit atomic und beez5) einer Joomla-Installation)
Ordner: C:\xampp\htdocs\joomla-blank\templates\beez_20\...
Browser: http://localhost/joomla-blank/templates/beez_20/...
index.html - leere Dummy-HTML-Datei (HTML5) für Absicherung bei direktem Aufruf des Ordners
template_thumbnail.png - kleines Vorschaubildchen (206 * 150 px) auf Template
template_preview.png - große Vorschau auf Klick in Template-Verwaltung (640 * 388 px)
favicon.ico - spez. Favoriten Symbol Bilddatei für Browseranzeige (Bildbearbeitungsspezialisten oder entsprechende Dienste im Netz für die Erstellungen nutzen: Link 1 - Link 2, ...)
index.php - das eigentliche Template mit der "Verdrahtung" für Joomla!
Erste Analyse von index.php mit einem geeigneten Editor (hier: PSPad oder Notepad++) - index.php des Templates (notwendige Zeilen und Konstruktionen)
defined('_JEXEC') or die; verhindert den direkten Aufruf von index.php ohne Joomla
JHhtml::_('behaviour.framework', true);
$app = JFactory::getApplication(); stellen Verbindung zum Joomla-Framework her
<jdoc:include type="modules" ... /> einfügen/bereitstellen von Positionen
<jdoc:include type="component" /> einfügen des Inhaltsbereichs (Beitrag, Blogansicht, Startseite, ...) - Links zu Template Design Techniken und Anleitungen:
Deutsche Anleitung zu Joomla 1.6 (Link)
im Seminar gesucht und gefunden: Link
Anleitung mit mehr Detailinfos zu Joomla 1.7 Templates: Link
Joomla-Template Erläuterungen von joomla.org (engl.): Link - Template Overrides (die komplette Kontrolle über den ausgebenen Code)
siehe hierzu Zeile 194 der index.php von beez_20
<jdoc:include type="modules" name="position-6" style="beezDivision" headerlevel="3" />
statt der Standard-Joomla Ausgabe mit
<jdoc:include type="modules" name="position-6" style="xhtml" />
Vergleich der ausgegebenen Modul-Blöcke (DIVs)
beezDivision: h3-Überschrift in 3 SPANs verschachtelt und kann mit headerlevel auch auf h4 verändert werden!
xhtml: einfache h3 Überschrift
Code für die Overrides in Unterordner ./html des Templates - Datei: modules.php - Spracheinstellungen (Ordner ./language)
Unterordner für Sprachen: de-DE, en-GB, ...
Dateien mit Zusammenhang zu Komponenten (.com_), Modulen (.mod_), Plugins (.plg_) oder Templates (.tpl_)
hier für die beez_20: ./language/de-DE/de-DE.tpl_beez_20.ini
ordnet die hinterlegten Platzhalter den gewünschten Inhalten zu
Platzhalter in der index.php: <?php JText::_('TPL_BEEZ2_TEXTRIGHTCLOSE'); ?> - Erweiterungen (Extensions - Beispielinstallationen)
Impressum Reloaded 3.02 (Komponente)
Joomla Content Editor JCE 2.019 (Verwaltungs-Komponente und Editor-Plugin)
Problemlösung JCE: Absätze zentriert:
a) entweder CSS für body ändern: body {text-align: left; }
b) in Standardtemplate template.css den Eintrag #tinymce {text-align: left;}
Freitag, 16.12.2011, 08.30 - 16.00 Uhr
- Rekap, TN-Fragen
- Modul: (Installation wie immer über Erweiterungen - Erweiterungen installieren)
Beispiel: CountDown-Up Big 1.7
Contdown-Module installiert und konfigurert, Sichtbarkeit auf "Allen Seiten" an position-6 von beez_20
Gütekriterien: gute Infoseite mit Beschreibung und Features und Support (Link) - Plugins: (Arten: content - Inhalt, editors - Editor, system - System, ...)
Beispiel: content-Plugin pPGallery
nach der Installation die Aktivierung des Plugins nicht vergessen!
erzeugt Bildergalerien für Ordner/Unterordner oder Einzelbilder mit Lightbox/Diashow-Effekten
in Beiträgen mittels {ppgallery}bilderordner{/ppgallery} einfügen
Problem: Warnungen der XAMPP/PHP-Technik
Lösung: ggf. in php.ini - Zeile 534 - display_errors = off (Apache Restart nicht vergessen! - Services Lokal (XAMPP) vs. Remote (Hosting)
Wiederholung zu XAMPP (inkl. der Konfiguratiosdateien)
Joomla besteht aus 2 Teilen:
1) Webserver-Verzeichnis (./htdocs/testjoomla)
2) Datenbankserver-Tabellen (manueller Import/Export mit PhpMyAdmin möglich)
plus Anpassung von configuration.php (oder auch .htaccess)
Anm.: ausführliches Diagramm / Grafik folgt - Virtual Hosts (www.testjoomla.local)
für eine saubere und Verzeichnistreue "Kopie" und Sicherung/Wiederherstellung von Joomla-Projekten notwendig; siehe auch Bauanleitung
a) hosts-Datei Windows: C:\Windows\system32\drivers\etc\hosts mit Adminrechten bearbeiten:
127.0.0.1 testjoomla.local www.testjoomla.local
Test: in Eingabeaufforderung geht jetzt ping www.testjoomla.local !
b) httpd.conf-Datei Apache: Zeile 479 - Include "conf/extra/httpd-vhosts.conf darf nicht kommentiert sein (#)
c) extra/httpd-vhosts.conf-Datei Apache: Zeile 19 - NameVirtualHost *.80
Die beiden vordefinierten Blöcke (Block 1 - Standard-Adresse Server; Block 2 und folgende Ihre VirtualHost Einträge:
Block 2 für unseren VirtualHost www.testjoomla.local (der Block 1 kann "irgendwie" aussehen)
<VirtualHost *:80>
DocumentRoot "/xampp/htdocs/testjoomla"
ServerName testjoomla.local
ServerAlias www.testjoomla.local
</VirtualHost>
d) die Änderungen müssen durch Reload/Restart des Apache quittiert werden! - Akeeba (Joomla Backup-Tool - früher Joomlapack)
sichert alle Joomla-Daten in einem einzigen komprimierten und verschlüsselten Sicherungsarchiv
plus "Erstellungsskript" Kickstarter - Musterprüfung (Große Übung)
für das neue "Modul IIIa - Joomla!" des "X-pert CMS Online Designer (VHS)" - TN-Bescheinigungen, Feedback-Bögen, letzte Fragen
Vielen Dank für Ihr freundliches Feedback am Ende unseres "kleinen Seminars".
Ihr Trainer Joe Brandes
