Tag 01 - Montag

Montag, 16.10.2017, 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ßen bild.jpg oder bild.jpeg oder bild.JPG - wir müssen das genau wissen!
• Windows Umgebungsvariable für openssl setzen
  Anm.: Anleitung durch Trainer bzw. in der "cmsod-overview-Website" (s.u.)
  Win + Pause ruft die Systemeinstellungen auf
  Erweiterte Systemeinstellungen (oben links) anklicken (ggf. Benutzerkontensteuerung - Admin - mit Passwort)
  Umgebungsvariablen (Button unten auf Register Erweitert)
  Unten: Systemvariablen - Neu klicken
  Name: OPENSSL_CONF  
  Wert: c:\xampp-cmsod\apache\conf\openssl.cnf    
  Jetzt möglichst einmal Windows-Benutzer ab- und wieder anmelden und XAMPP restarten!
  Test: Umgebungsvariablen auflisten lassen:
  Eingabe von Befehl "set" in Eingabeaufforderung (cmd)
• Windows hosts Datei
  Pfad:  C:\Windows\System32\drivers\etc\hosts  
  mit Einträgen für die gewünschten TYPO VHosts erstellen:{code lang:bash showtitle:false lines:false hidden:false}# den lokalen CMSOD-XAMPP per Domainname ansprechen können:
  127.0.0.1 cmsod30.local www.cmsod30.local
  
  # Konfigurationen - hier:
  # Beispiele für TYPO3 Modul
  # -------------------------------------------------
  # Domain: typo3-demo.local
  # Alias: www.typo3-demo.local
  # Webserver: C:\xampp-cmsod\htdocs\typo3\www.typo3-demo.local
  # Datenbank: typo3_demo
  # Einsatz: eine Umsetzung für das T3-Seminar mit einem akuellen TYPO3
  127.0.0.1 typo3-demo.local www.typo3-demo.local
  # am Besten auch gleich für die Seminarseite VHost eintragen:
  127.0.0.1 typo3-seminar.local www.typo3-seminar.local{/code}Diese virtuellen Hosts müssen natürlich auf Serverseite (Apache Webserver) entsprechend passend konfiguriert sein!
• Apache VHosts konfigurieren
  Pfad: C:\xampp-cmsod\apache\conf\extra\httpd-vhosts.conf  
  Anm.: für typo3-demo.local gibt es schon einen vorbereiteten VHost-Eintrag in der httpd-vhosts.conf des Apache in meinem XAMPP-CMSOD!
  Für typo3-seminar.local kopiert man sich einfach einen entsprechenden Eintrag und "bastelt" aus "typo3-demo" ein "typo3-seminar"!
  Wichtig: Änderungen an Apache-Konfigurationsdateien benötigen "Neu-Einlesen" dieser Konfigurationen. Also bitte den Apache restarten, falls er schon laufen sollte!

• LAMPP

• Serverumgebung XAMPP - Seminar-Version: XAMPP 7.1.8 mit PHP 7.1.8
  X - Betriebssysteme Linux (L), Windows (W), MacOS (M) oder Sun Solaris;
  A - Apache (Webserver),
  M - MariaDB / MySQL (Datenbankserver),
  P - PHP (serverseitige Skriptsprache)
  P - Projekt;
  bei Hostern:
  klassisches LAMP-System (Linux - Apache - MySQL/MariaDB - PHP)
  oder auch mal als WAMPP mit einer Windows Server Betriebssystem Basis und dem IIS (Internet Information Server) als Webserver und dem MSSQL-Server als Datenbankserver

• XAMPP-CMSOD installieren
  Vorgehensweise im  "Windows"-Seminar (XAMPP-Server  für Windows):
  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! Das Archiv wird stetig aktualisiert (s.a. PortableApps, ...)!
  

  Archivname:	xampp-cmsod-TEILNEHMER-20171015-1630.exe
  MD5-Prüfsumme:	b939515595f0e4d6685996a0386f2ecd

  
  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-cmsod angebeben (Anm.: Entpacken in Zielpfad  C:\xampp-cmsod  ist wichtig!)
  Grund: alle eingebauten CMSOD-Techniken und Tools auf dieses lokale Verzeichnis optimiert wurden.
  Tipp: eigene XAMPPs kann man dann einfach in anderen Verzeichnissen wie C:\xampp unterbringen.
  4) Starten / Doppelklicken  xampp-control.exe (Kontrollcenter) und
  5) Starten der nötigen Server mit Hilfe des Kontrollcenters:
  → Apache Webserver und
  → MySQL Datenbankserver per Schaltflächen "Starten" im Kontrollcenter
  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) sollten wir täglich (also jeweils bei Bedarf) durchführen.
  Empfehlung: von einer automatischen Bereitstellung des XAMPP-Server über (automatisch startende) Services (Dienste) rate ich ab!
  6) Browser / Webclient - 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 Firefox nicht gleichzeitig nutzen!
  

  die vorbereitete Umgebung:

  Technik	Info	Bemerkung
  XAMPP	C:\xampp-cmsod\	Basispfad des XAMPP-CMSOD
  Web-Dokumente	C:\xampp-cmsod\htdocs\typo3\...	mit Unterordnerstrukturen
  Apache	C:\xampp-cmsod\apache\conf\httpd.conf	Konfigurationsdatei Webserver
  PHP	C:\xampp-cmsod\php\php.ini	Konfigurationsdatei PHP

  Arbeiten am TN-PC (Client-Seite):Für Technik- und CMSOD-Zertifikat-Interessierte befindet sich unter
  (URL) http: //localhost/cmsod-overview  eine Website mit Infos rund um den CMSOD
  und die genutzten Techniken und Konfigurationen.

• TYPO3 (Versionen, Varianten - Einsatz im Seminar: TYPO3 8.7.8)
  Website: typo3.org - Erfinder: Kasper Skårhøj
  Bereitstellung (Downloads)  in verschiedenen Archivformaten (tar.gz - Unix/Linux, zip - Windows)
  Versionen:
  4.4 - 4.5 (LTS ab Jan 2011) - 4.6 - 4.7 (4er Zweig)
  (5 - Anm.: TYPO3 NEOS - als Version 5.0 entwickelt - Codename: Phoenix - basiert auf Framework FLOW und wurde von CMS TYPO3 getrennt)
  6.0 - 6.1 - 6.2 (LTS ab 25. März 2014 bis min. März 2017) -
  7.0 - 7.1 - 7.2 - ... - 7.6 LTS ab 10.11.2015
  8.0 - ... - 8.7 LTS ab 04.04.2017
  Aktuell: 8.7.x (Seminar 8.7.8)
  9.0 am 14.11.2017 - Version 9.5 LTS angekündigt für Oktober 2018
  Long Term Support (LTS - eingeführt Jan 2011) - jeweils 1 Jahr Überschneidung mit neuer LTS Variante mit dann maximal bis zu 5 Jahren Support (3 Jahre Allgemeiner/Vollständiger Support danach noch Sicherheitsupdates!)
  Der jeweilige Planungsstatus kann jeweils über die TYPO3 Roadmap nachgeschlagen werden!
• TYPO3-Hoster
  fast alle Hoster können TYPO3 "irgendwie" hosten - aber manche haben sich auf die speziellen Anforderungen (Performance, Aktualisierungen TYPO3-Sources, php.ini-Anforderungen, ImageMagick, zusätzliche Unterstützung für TYPO3-Extensions, Sicherheit, ...) spezialisiert und bieten sogar TYPO3-Projekte auf Mausklick!
  TYPO3-Hosterbeispiele: Mittwald oder JWeiland
• Vorinstalliertes TYPO3-Projekt www.typo3-demo.local
  analysiert und genutzt für erste Gehversuche mit dem TYPO3-Backend (BE)
• Installation:  Version: 8.7.8  (LTS)
  Installationsarchiv (*.zip) für die Version
  sauber entpacken in C:\xampp-cmsod\htdocs\typo3\www.typo3-seminar.local
  Tipp: Analyse der TYPO3-Core-Technik durch Vergleich der vorliegenden fertigen TYPO3-Projektseite "typo3-demo" mit dem entpackten und noch nicht durchinstallierten "typo3-seminar"-Projekt.
  Ein TYPO3-Projekt besteht also - neben der (späteren) TYPO3-Projekt-Datenbank - aus
  1) TYPO3-Core:
  Ordner:
  ./typo3 (eigentlicher TYPO3-Kern),
  ./vendor (Zusatztechniken - früher in Unterordner ./typo3/contrib) und
  Hauptdatei index.php  
  2) TYPO3-Website:
  Ordner werden alle durch Installprozess erstellt; (früher: eigener Download als z.B. dummy-4.5.15.zip)
  ./fileadmin (Dateispeicher) ,
  ./typo3conf (Konfigurationen, Erweiterungen) ,
  ./typo3temp (Temporäres) ,
  ./uploads (Hochgeladenes)
  Der eigentliche Clou hierbei auf den Linux-Webservern:
  man hat nur einen TYPO3-Core (z.B. typo3_src/typo3_src-8.7.8) als Quellordner und verlinkt diesen nötigen Quellhauptordner, den Ordner ./typo3 und die Datei index.php! Eine Beispielhafte Anleitung findet sich im Hauptordner in Datei Install.md!
  Aufrufen der Installation mittels Browser mit Adresse (URL):  http://www.typo3-seminar.local  
  Entsperren der Installation mittels Datei FIRST_INSTALL im Hauptverzeichnis der TYPO3-Installation
  Zugang zum Datenbankserver (mit XAMPP Standard-User: root / "leeres Kennwort") und DB "typo3_seminar" anlegen lassen
  Anm.: so geht das nur in XAMPP-Umgebung - beim normalen Hoster muss eine DB vorher manuell angelegt werden und die Zugangsdaten (Host/Server, DB-Name, DB-User, DB-Passwort) bereitgehalten werden.
  Anm.: entweder DB-Konnektion mittels Netzwerkverbindung oder über Socket (hier selber Rechner Webserver / Datenbankserver und dateiorientiert - kann etwas schneller sein - Standard: TCP/IP-Netzwerkverbindung)
  

  Technik	Info	Bemerkung
  Lokal	C:\xampp-cmsod\htdocs\typo3\www.typo3-seminar.local	htdocs hier mit Unterordnerstruktur
  Web	http://www.typo3-seminar.local	immer über http: aufrufen nie über C:\... aufrufen
  Datenbank	typo3_seminar               ↑ Unterstrich in DB-Name!	Datenbank erlaubt kein Minus

  Benutzer "admin" (Backend-User mit Superadmin-Rechten) und gewünschtem Kennwort
  Erstes Anmelden am BE mit dem User "admin" - erster Blick in das Backend (Versionscheck)
  Backend-Adresse (BE-URL): (siehe auch Ordner-Struktur TYPO3-Projekt)
  http://www.typo3-seminar.local/typo3  
  Install-Tool (URL): (leitet dann auf das Install-Tool mit eigenem Kennwort - kein Benutzer)
  http://www.typo3-seminar.local/typo3/install  
  Das Kennwort entspricht anfangs dem von User "admin" und sollte auf Produktionssystemen natürlich geändert werden → Install-Tool
  Profi-Trick (später ;-): manuell in der Datei ./typo3conf/LocalConfiguration.php  als verschlüsselter "Hash"-Wert.
• Backend-Sprache (BE) "german" konfigurieren
  über Modul Admin Tools -> Language die Sprache "German" für alle (möglichen) Extensions des TYPO3-Systems nachinstallieren;
  danach über Kopfleiste - User - User Settings die Sprache für "admin" User auf Deutsch umstellen;
  mit Ab-/Anmelden das BE aktualisieren
• TYPO3 Grafikunterstützung (mit GD-Bibliothek und Grafik-Tools)
  GD-Unterstützung gecheckt und konfiguriert über Install Tool - Test Setup
  Grafik-Tools für TYPO3:
  Imagemagick (www.imagemagick.org) oder Graphicsmagick (www.graphicsmagick.org)
  Hier: Version Imagemagick in einem "XAMPP Tools-Ordner"
  C:\xampp-cmsod\_tools\ImageMagick-7.0.7-0\ bereitgestellt
  und die notwendigen Pfade in der Gesamtkonfiguraton eingetragen;
  beachten: Backslashes auf Windows-Systemen und abschließenden Backslash nicht vergessen!
  Anm.: Formate PDF und AI nur mit Ghostscript-Unterstützung möglich; auf Windows Systemen nur mit erheblichem Aufwand
  Die Konfiguration ist wichtig für Grafikverarbeitungen innerhalb von TYPO3 oder auch einfach den Thumbnails für Grafiken/Bilder.
• Seitenbaumstruktur erstellen
  erste Seite im Seitenbaum erstellt - neue "Drag & Drop" Techniken im BE;
  die wechselnden Meldungen im Frontend beobachtet: erst "no page" danach "no template";
  neue Seite muss aktiviert werden, deaktivierte Seite können im BE als "preview" begutachtet werden
  Hierarchie von Seiten erstellt und die Seiten-IDs (PageIDs) identifiziert
  Start [ID=1] - Wurzelseite der Site (wird technisch als Verweis auf erste Unterseite konfiguriert)
  → Start [ID=2]  (hat URL ./index.php?id=2 )
  → Unterseite 2 [ID=3]
  → Unterseite 3 [ID=4]
  Anm.: oberste TYPO3-Hierarchie (siehe TYPO3-Logo) hat die ID=0 !
• TypoScript cObject (Content Objects)
  erste Beispiele: PAGE, TEXT
  stehen rechts von Gleichheitszeichen und müssen groß geschrieben werden;
  die Zuweisung links vom "=" kann selbst gewählt werden, also z.B. page = PAGE oder auch seite = PAGE
• TypoScript (hier: Setup-TS)
  Nutzung von geschweiften Klammern (containment) für das Zusammenfassen von sich wiederholenden TS-Zeilen
  Kopieren von Objekten mittels <  (Kleiner-Zeichen / Spitze Klammer auf)
  Reihenfolgen von Objekten mittels Zahlen also Objekteigenschaften: seite.10, seite.20, ...
  Meta-Tags für description, author per TS anpassen
  Konfigurieren des HTML Doctype mittels seite.config.doctype
  Kommentieren mit #{code lang:freebasic showtitle:false lines:true hidden:false}# Default PAGE object:
  # page = PAGE
  # page.10 = TEXT
  # page.10.value = HELLO WORLD!
  # allgemeine Konfigurationen:
  config.htmlTag_langKey = de
  # Default PAGE object:
  seite = PAGE
  # seit 6.2 wird HTML standardmäßig ausgeliefert!
  seite.config.doctype = html5
  seite.meta.DESCRIPTION = Test mit TYPO3
  seite.meta.KEYWORDS = TYPO3, Bildungurlaub, VHS Braunschweig
  seite.meta.author = J. Brandes
  seite.10 = TEXT
  seite.10.value = <p>HELLO WORLD - noch mal hallo Joe!</p>
  seite.20 = TEXT
  seite.20.value = <p>Noch ein Hallo!</p>
  # mit Hilfe von styles.content.get die Datensätze
  # für die Spalte 0 (Normal) aus DB holen:
  seite.100 < styles.content.get
  # jetzt noch die Inhalte aus Spalte Links
  # dort ist colPos allerdings gleich 1
  seite.200 < styles.content.get
  seite.200.select.where = colPos=1{/code}Beispielhafter TS-Setup-Code
• CE (Content Elements) - Seitinhaltselemente
  erste einfache Inhalte in Seiten erstellt (CE Typ: Text - also einfach Überschriften mit Texten)
  Es folgt eine kurze Übersicht zu den Standard-Spalten von TYPO3
  

  colPos	englisch	deutsch	FLUID_STYLED_CONTENT
  0	normal	Normal	< styles.content.get
  1	left	Links	Objekt anpassen mit .select.where = colPos=1
  2	right	Rechts	Objekt anpassen mit .select.where = colPos=2
  3	border	Rand	Objekt anpassen mit .select.where = colPos=3

  Anm.: später bauen wir uns mit den Backend-Layouts unsere eigenen zugewiesenen "Spalten/Datensätze"
• Diverses:
  Bücher, Literatur, Videotutorials
  HTML/CSS sauber getrennt nach Layout und Design am Beispiel CSSZenGarden (Link)

• TYPO3 Roadmap
• Install-Tool (GFX)
• TYPO3 Core entpacken
• TYPO3 Install
• Statische Templates
• Datensätze: colPos 0 und 1