Joomla! / VHS BS / 12. - 16.12.2011

Aktualisiert (Freitag, den 16. Dezember 2011 um 15:42 Uhr) Geschrieben von: Joe Brandes Donnerstag, den 01. Dezember 2011 um 13:02 Uhr

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