Tag 02 - Dienstag

• Haupteintrag

Dienstag, 10.12.2013, 08.30 - 16.00 Uhr

• Rekapitulation, TN-Fragen
• Joomla-Installation (Blanko - ohne Beispielbeiträge)
  Install-Zip-Archiv von Joomla-Webportal laden
  In den Webserver-Hauptordner ./htdocs entpacken (Ordner: joomla-3.2-blanko
  Installationroutine aufrufen über localhost/joomla-3.2-blanko
  Daten für Site eingeben (Anm.: "sinnvolle" Admin-E-Mail nötig; BE-SuperUser mit Passwort)
  Datenbank anlegen (bzw. angeben): DB-Server, DB-Benutzer und Passwort, Datenbankname, Präfix
  Installationsverzeichnis löschen (bzw. löschen lassen)
  FE und BE aufrufen und Testen des BE-Zugangs
  Language Manager nutzen für "german" in Site (FE) und Administrator (BE)
• BE-Konfiguration
  Site - Offline-Modus (mit eigenen Meldungen und Bild), Meta-Informationen (für Suchmaschinen), Standard-Editor (Alternative zu TinyMCE suchen), Captcha (Formulare gegen Spam schützen - Empfehlung: reCaptcha oder barrierefreie "Rechnungen")
  System - Debug-Modus, Cache, Session Lifetime (15 Min Standard)
  Server - SSL erzwingen, Timezone, FTP (möglichst deaktiviert lassen), Datenbank (Grundkonfiguration ohne Passwort!), Mailing (keine Funktion auf Windows XAMPP)
• Kategorie und Beiträge
  Anlegen von Kategorie und Beispielbeiträgen für neue Kategorie; Bitte immer sauber an die "Anreißer/Teaser" denken (Weiterlesen)
  Kennzeichnen von Beiträgen als Haupteinträge
• Menü "Main Menu"
  Konfigurieren des einzigen Hauptmenüpunkts "Home" für die Ausgabe von Beiträgen -> Haupteinträge (Einführende, Einleitende, Spalten, Links)
  Neue Menüeinträge: Einzelner Beitrag, Kategorieblog, Kategorieliste
  Einblick in die Optionen für den Menüpunkt Home: Globale Einstellungen; Experimente zeigen Auswirkungen auf die Beiträge des Startseiten-Blogs; über Seitenanzeige individuelle Konfiguration von title-Tag (für Favoriten/Bookmarks), Seitenüberschrift oder auch eigene CSS-Klasse für den ausgelieferten Blog-Div-Block
• Optionen (Globale Einstellungen)
  Inhalt - Beiträge - Optionen; Generelle Einstellungen für Beiträge, Blogs, Listen und Co
  Übung: Überall den Autor verbergen lassen
• Module
  Platzhalter für diverse technische Ausgaben: Navigationen (Menü, Breadcrumbs), Anmeldungs-Modul (Login), ...
  wieder viele Eigenschaften für die einzelnen Module: Zugriffsebene, Sprache, Zuweisungen, ...
• Übung zu Menü und Module
  Erstellung eines eigenen Menüs "Testmenü" - Anmerkung: der sogenannte Menütyp ist eine Systemname innerhalb Joomla (Vorschlag hier: testmenu) und es gibt noch eine optionale Beschreibung
  Es gibt in der Menüübersicht sofort und direkt die Möglichkeit "Ein Modul für diesen Menütyp hinzuzufügen"
  Für das Modul wieder diverse Anpassungen; Reihenfolge der Module an "position-7" geändert (um den Trainer zu verwirren ;-)
• Templates (BE: Erweiterungen - Vorlagen)
  Vorlagen verfügbar für FE (Site: protostar, Beez3) und BE (Administrator: isis, Hathor)
• Modulpositionen
  Durch den beispielhaften Wechsel (Erweiterungen - Templates - Stile) von "Protostar" zu "Beez3" erkannt man die unterschiedliche lokale Positionierung der Module im jeweiligen Template
  Protostar [position-7] ist rechts außen - Beez3 [position-7] ist links ausgerichtet
  Neue Module erstellt (von Joomla Standard-Modulen): Beiträge - beliebt; Zufallsbilder (hier kompletter Pfad zu Bildern nötig: images/sampledata/parks/animals)
• Erweiterung installieren (ein erster Test)
  Neu ab Joomla 3.2: Installation direkt aus dem JED (Joomla Extension Directory) - Tab "Aus Webkatalog installieren"
  Übung: Installation von JCE - Joomla Content Editor (Komponente, Plugin)
  Neuer Medienmanager, superb nutzbarer und konfigurierbarer Editor

• Menüeintrag
• Reihenfolge
• Breadcrumb
• Images
• JED Webkatalog
• Konfiguration

Tag 03 - Mittwoch

• Gruppen

Mittwoch, 11.12.2013, 08.30 - 16.00 Uhr

• Rekapitulation, TN-Fragen
• Software komplettieren
  Browser (WWW-Clients): Mozilla Firefox, Google Chrome, Opera, Microsoft Internet Explorer
  Unterschiedliche Browser wichtig zum Testen von FE-Technik und Benutzerzugängen
  Eingebaute Code-Inspektoren: Umschalten + Strg + I (außer bei MS IE mit F12)
  Editor, mit Techniken: Syntax-Highlighting, Einrückungen, Klammern / Bracket Matching, Codevervollständigung / codecompletion, automatische Codes wie mit Emett / früher Zencoding, sauberer Umgang mit Zeichencodes (Empfehlung: UTF-8 ohne BOM; Codeproblem vom Windows Editor / Notepad gezeigt - ANSI, End of Line)
  Übung: Installation der Browser und Editor notepad++; Hinweis auf AddOns beim Mozilla Firefox: Firebug
• Benutzer (Joomla-Benutzer-Konten)
  Rechte der Benutzer über die Zuweisung von Benutzergruppen organisiert; klassische Hierarchien:
  FE: Registered (Anmeldung möglich), Author (Beitrag schreiben / einreichen / eigene ändern), Editor (Beiträge ändern), Publisher (Veröffentlichungen steuern, Hautpeintrag)
  BE: Manager (eingeschränktes BE; z.B. ohne Benutzer), Administrator (erweitertes BE; z.B. inklusive Benutzerverwaltung)
  Super User (kann überall Alles - also auch die Installationen und Verwaltungen im BE für Erweiterungen)
  Übung: ausführliche Übungen mit allen Benutzern/Gruppen
  eigenes Benutzermenü (Zugriffsebene: Registriert) erstellt: Beitrag einreichen, Benutzerprofil ändern
  Tipp: Orientierung an Best Practises aus der Demo-Joomla-Installation inkl. Beispieldaten: neue Benutzergruppen und Zugriffsebenen geschaffen und angwendet
  Tipp 2: das Anmelde-Modul (Login) erlaubt die Benutzerregistrierung neuer User - dieses lässt sich über Benutzer - Optionen deaktivieren
• Kontakte
  Kontaktinformationen mit Hilfe der Komponente "Kontakte" verwalten (eigene Kategorien für Kontakte/Kontaktgruppen möglich)
  Beispielhaften Kontakt erstellt und mit Infos versehen; Verbindung mit einem Joomla-Benutzer möglich aber nicht notwendig
  Übung: einzelnen Kontakt in unserem Testmenü verlinkt und getestet - Kontaktformular ohne Spamschutz
  Spamschutz / Captcha-Technik: Installation der Erweiterung (Plugin) EasyCalcCheck+ von Viktor Vogel (über das BE - Erweiterungen - Plugins bitte auch aktivieren nicht vergessen!)
  Anm.: hier wurde über das BE - Webkatalog "nur" der Download über das Entwicklerportal angeboten: bitte auf die richtige Version achten (J2.5 / J3.x)!
• Browser-Cache
  nach vielen Stunden Nutzung sammeln sich im Cache (Zwischenspeicher) des Browser die Webseitendaten an - bitte zwischendurch gerne mal Cache löschen
  Beispiel Firefox: Einstellungen - Erweitert - Netzwerk - Zwischengespeicherte Webinhalte - Jetzt leeren
• Menüeintrag-Alias (bei Systemlinks für neue Menüs)
  Nachtrag zu Gestern (siehe dort die beiden Home-Navi-Links; will man an mehreren Stellen in den Navigationen zur selben "Seite" verlinken, dann nimmt man am besten einen Menüeintrag-Alias
• Module (im BE / Administrator)
  man kann über Erweiterungen - Module - Administrator auch die Module im BE (Übung im cpanel - Control Panel - Kontrollzentrum) konfigurieren
  Übung: Module Logged-in Users, Popular Articles, Recently Added Articles eingedeutscht / angepasst / Reihenfolgen
• 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: alles Dateien wieder mit "UTF-8 ohne BOM" und am Besten immer mit unserem Notepad++ bearbeiten
  ./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; Includes für "Einfügungen" von Code; Libraries stehen für Code-Bibliotheken)
  ./language - die Sprachkonfigurationen bzw. Übersetzungen
  ./templates - die Design-Vorlagen für die Site
  configuration.php - die Konfigurationsdatei Ihrer Site (inkl. Zugangsdaten DB! Bitte lokal sicher aufbewahren und schützen und online auf Server nicht mit unsicheren Dateiattribute arbeiten: Stichwort 777 - alles dürfen alles mit einer Datei machen!)
  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)
• configuration.php
  Übung: Konfigurationsvariable $offline auf den Wert '1' geändert - erzeugt den Offlinemodus der Site
  Und nochmals: in dieser Datei stehen die Zugangsdaten zu Ihrer Joomla-Datenbank im Klartext!
• ./language (Ordner)
  Ü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!

• Spamschutz
• BE Module
• Sprachdatei
• Beitrag einreichen
• Versteckt
• Menüeintrag-Alias

Tag 04 - Donnerstag

• index.php

Donnerstag, 12.12.2013, 08.30 - 16.00 Uhr

• Rekapitulation, TN-Fragen
• To-Do-4-Do: Warmlaufen mit deutschem JCE und Bildern in Beiträgen, Forts. Ordnerstruktur Joomla, Templates als Schwerpunkt des Tages
• Sprachpaket "german" für JCE
  Beachten: diese Spracherweiterung (Unterstützung) wird durch eine Komponenteneigene Installationstechnik durchgeführt
  Siehe hierzu auch die Erläuterungen des JCE-Forums
• Joomla CMS (TN-Frage - Erläuterung im Vorgriff auf Joomla-Backup Technik am Freitag)
  Ihr Joomla CMS besteht aus zwei Teilen:
  1) der Joomla-Projektordner (hier: ./htdocs/joomla-3.2-blanko)
  Bei Ihrem Hoster wird daraus durch "Verbindung" zu einer Domain (www.ihredomain.de) das zuständige Hauptverzeichnis
  Sie können diese Dateien manuell per FTP sichern / übertragen (Tool: z.B. Filezilla -siehe Toolsammlung)
  2) die Joomla-Datenbank
  Bei XAMPP (und auch bei den meisten Hostern) wird Ihnen die PHP-Verwaltungstoolsammlung für MySQL-Datenbankserver phpMyAdmin angeboten; die Verwaltung erreichen Sie unter der Adresse localhost/phpmyadmin des XAMPP; Sichern/Wiederherstellen geschieht hier durch Export/Import von Datenbankinhalten (DB-Dumps)
  Anm.: für Joomla gibt es tolle Sicherungstechniken, die Ihnen beide Teile als gemeinsames Archive sichern und wiederherstellen
  Joomla basiert heute auf dem "Joomla Platform" - einem Framwork für PHP/MySQL-Entwicklungen, dass man auch eigenständig nutzen kann
• Bilder ("... and now to something completely different!" - Monty Python ;-)
  die Daten aus den DigiCams und Co (Smartphones, Tablets, Scans) müssen für das Web optimiert werden:
  Größe in kB: viele MB-große Dateien müssen auf erträgliche Größen (kB) komprimiert werden
  Größe in Pixel: die Dimensionen für die 100%-Darstellung auf Ausgabegeräten optimieren
  Ziel: Große Bilder in Beiträgen (Vollformat) ca. 50-100 kB bei 500 bis 800 Pixel Breite dimensionieren
  Tools (siehe wieder Toolsammlung): Übungen mit RIOT (Radical Image Optimization Tool), XnView (mit Stapelverarbeitung für viele Bilder und vielfache weitere Funktionen wie Wasserzeichen, ...)
• Bilder in Joomla-Beiträgen
  spezielle Integration über Registerkarte "Bilder und Links" wo man Anreißer/Teaser-Bilder (klein) und die Beitrags-Anzeige-Version (groß) einzeln zuweisen kann
  Alternativ natürlich über den Button zum Bild einfügen des Editors (am Besten JCE) - Anm.: hier lassen sich viele Konfigurationen und Styles manuell für jedes Bild (img-Tag) zuweisen; besser ist hier die Lösung allgemein über CSS-Klassen zuzuweisen
• Plugins
  Übersicht verschaffen mit Erweiterungen - Plugins; Typen: content, editors, editors-xtd
  ein Joomla-System-Plugin: E-Mail-Verschleierung (emailcloak - siehe
  Ordnerstruktur ./htdocs/joomla-3.2-blanko/plugins/content/emailcloak/emailcloak.php
  ein Joomla-Plugin nachinstalliert: SIGE (Simple Image Gallery Extended - Viktor Vogel) inkl. Editor Schaltfläche (Button)
  Übung mit SIGE: Einfügen manuelle Plugin-Inhaltsplatzhalter oder über Button
  Und wieder: bitte nicht vergessen die Plugins zu aktivieren!
• Templates
  die Joomla-Vorlagen-Technik - eine erste Annäherung mit den Joomla-Standard-Templates
  Beez3: der Nachfolger der klassischen barrierefreien Vorlage von Team Angie Radtke (der-auftritt.de)
  protostar: das neue Standard-Template mit Bootstrap-Framework (ehemals Twitter Bootstrap)
  Übung: Wechsel des Standard-Templates über Erweiterungen - Templates - Stile
  jedes installierte Template wird durch einen Stil nutzbar gemacht; mit kopierten Stilen kann man dann über die Register Menüzugehörigkeit die Stile auf unterschiedlichen Seiten einzeln zuweisen
  Parameter (params): die Templates können mit Parametern (Eigenschaften) ausgezeichnet werden, über die man dann das jeweilige Design (sprich Template) speziell anpassen kann: Beispiel mit Templatefarben
• ./templates/protostar/index.php
  Erläuterungen zum Aufbau der Hauptdatei für ein Template - Mischung aus PHP und HTML-Code
  PHP: wird definiert mit <?php  ...   ?>  Abschnitten; jede Anweisung in PHP muss mit einem Semikolon abgeschlossen werden; Kommentare werden einzeilig mit // oder über mehrere Zeilen mit /* ... */ eingeschlossen
  HTML: besteht aus Tags wie z.B. <h1>  ...  </h1> (hier Überschrift 1. Ordnung - Heading); Kommentar in HTML mit <!--  ...  -->
  letztere Kommentare werden dann auch in der Website ausgeliefert (PHP-Kommentare "verbleiben" auf Server)

• Plugin
• Joomla Platform
• JCE deutsch
• Bilder und Links
• Bild für Web
• emailcloak

Tag 05 - Freitag

Freitag, 13.12.2013, 08.30 - 16.00 Uhr

• Rekapitulation, TN-Fragen
• To-Do-List-Fr:
  Forts. Templates (Analyse protostar - Aufbau, jdoc includes positions, jdoc component, debug - Debug aktivieren, Overrides Modulstyles); Backup & Restore für Joomla
• Backup & Restore I - Joomla-Techniken und klassische Sicherung eines J-Systems
  htdocs-Joomla-Verzeichnis mittels FTP sichern und wiederherstellen
  Joomla-DB-Tabellen mittels phpMyAdmin exportieren und importieren (DB-Dumps)
  Anm. zu XAMPP  (lokaler Windows Test- und Entwicklungsserver): einfach kompletten xampp-Ordner per 7-Zip archivieren; nach Entpacken am neuen Zielordner ggf. mit setup_xampp.bat die Pfade neu setzen
• Backup & Restore II - Akeeba (vormals JoomlaPack)
  mittels Akeeba-Backup-Core-Komponente im Joomla-BE eine Sicherung erstellen (*.jpa)
  mittels Kickstart-Skript (kickstart.php, Sprachdatei, JavaScripts) und Akeeba-Sicherungsdatei wiederherstellen
  sehr schnell und effektiv (siehe im Vergleich >6500 Dateien mit FTP)
  Anm.: bei Standard-Hoster (Shared Hosting Pakete) muss vorher  eine Datenbank angelegt und die nötigen Infos (Datenbankserver, Datenbankname, Datenbankbenutzer und Datenbankpasswort) vorgehalten werden
• XAMPP Konfigurationen
  Hinweise auf Konfigurationsdateien Apache, PHP und MySQL/PhpMyAdmin
  weitere Infos auch hier auf diesem Portal mit Beitrag "Toolsammlung"
• JED - Joomla Extensions Directory
  Online-Repository mit Erweiterungen (Komponenten, Module, Plugins); in den aktuellen Versionen sogar direkt im Backend von Joomla verfügbar
  Einschätzungen mittels Download-Zahlen, Wertungen, Benutzer-Feedback, Aktualität, Versionsunterstützungen Joomla
• Templates
  Am Beispiel "Protostar" die Modulpositionen eingeblendet (Optionen Templates - Vorschau auf Modulpositionen)
  mit den Stiles lassen sich die Templates dann auch mehrfach auf Menüs zuweisen und auch hinterlegte Parameter nutzen;
  Beispielübung: Template-Farbe
  Beez-Template von Angie Radtke und Ihrem Team; von A. Radtke auch sehr gutes Buch zum Thema Joomla und Joomla-2.5-Templates (ISBN: 3827328462)
• 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)
• Spracheinstellungen (hier am Beispiel Protostar)
  Ordner ./language mit Unterordnern de-DE und en-GB enthalten die Beez Sprachübersetzungen (z.B. de-DE.tpl_protostar.ini und de-DE.tpl_protostar.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
• Fehlersuche - Debug
  Einschalten des Debug-Modus im BE (Konfiguration) und Ansichte der Debug-Konsole im FE
• Musterprüfung für TN mit Interesse an Prüfung im Zertifikat CMS Online Designer
• TN-Bescheinigungen, Feedback, letzte TN-Fragen
  [Nachtrag: Bericht erst in 2014 komplettiert! - Sorry - war krank und dann kurz in Vergessenheit geraten ;-)]