Für alle Interessierten aus dem Bereich des "CMS Online Designer (VHS)" findet ab dem 16.10.2017 das Modul "CMS TYPO3" bei der VHS Braunschweig als Bildungsurlaub statt.

typo3 version8 800px

In diesem CMS-Workshop wollen wir uns alle notwendigen Fähigkeiten von der TYPO3-Installation bis zur ausgebauten Website erarbeiten. Das Seminar orientiert sich dabei an den aktuellen Leitfäden des Online-Zertifikats (VHS) aber natürlich vor Allem 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, 16.10. - Fr, 20.10.2017; jeweils 08.30 - 16.00 Uhr
freiwillige Prüfung: Interesse wird ggf. im Seminar mit den interessierten Teilnehmern koordiniert

Ich werde unser Seminar an dieser Stelle - wie gewohnt - ausführlich begleiten...
Ihr Trainer Joe Brandes

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:
    View source
    # 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
    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!
  • LAMPPLAMPP
  • 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!
    xampp cmsod darstellung 20161203

    die vorbereitete Umgebung:

    TechnikInfoBemerkung
    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)
    TechnikInfoBemerkung
    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 #
    View source
    1. # Default PAGE object:
    2. # page = PAGE
    3. # page.10 = TEXT
    4. # page.10.value = HELLO WORLD!
    5. # allgemeine Konfigurationen:
    6. config.htmlTag_langKey = de
    7. # Default PAGE object:
    8. seite = PAGE
    9. # seit 6.2 wird HTML standardmäßig ausgeliefert!
    10. seite.config.doctype = html5
    11. seite.meta.DESCRIPTION = Test mit TYPO3
    12. seite.meta.KEYWORDS = TYPO3, Bildungurlaub, VHS Braunschweig
    13. seite.meta.author = J. Brandes
    14. seite.10 = TEXT
    15. seite.10.value = <p>HELLO WORLD - noch mal hallo Joe!</p>
    16. seite.20 = TEXT
    17. seite.20.value = <p>Noch ein Hallo!</p>
    18. # mit Hilfe von styles.content.get die Datensätze
    19. # für die Spalte 0 (Normal) aus DB holen:
    20. seite.100 < styles.content.get
    21. # jetzt noch die Inhalte aus Spalte Links
    22. # dort ist colPos allerdings gleich 1
    23. seite.200 < styles.content.get
    24. seite.200.select.where = colPos=1
    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 RoadmapTYPO3 Roadmap
  • Install-Tool (GFX)Install-Tool (GFX)
  • TYPO3 Core entpackenTYPO3 Core entpacken
  • TYPO3 InstallTYPO3 Install
  • Statische TemplatesStatische Templates
  • Datensätze: colPos 0 und 1Datensätze: colPos 0 und 1

 

Tag 02 - Dienstag

Dienstag, 17.10.2017, 08.30 - 16.00 Uhr

  • Ausführliche Rekapitulation (inkl. VHosts und Installation von neuem Projekt typo3-dienstag.local),
    TN-Fragen
  • Client-Server-VHosts-Technik
    für neues TYPO3-Projekt benötigen wir allgemein
    1) Projektordner auf Webserver, 2) Datenbank in DB-Server und 3) Namensauflösung für TYPO3-Projekt-Adresse
    Die Lösungen für a) lokale XAMPP-CMSOD-Umgebung und b) für unseren Hoster:
    1) Projektordner erstellen / bereitstellen
    a) .\htdocs\typo3\www.typo3-dienstag.local  (XAMPP; Ordner lokal erstellen)
    b) ./www/html/typo3/typo3-dienstag  (Hoster - Linux-OS; z.B. mittels SFTP oder über Kundencenter)
    2) Datenbank 
    a) im XAMPP unter URL localhost/phpmyadmin  neue Datenbank anlegen (z.B. typo3_dienstag mit Kollation utf8_general_ci)
    b) beim Hoster im Kundencenter (Kontrollcenter) bei Datenbanken neue DB anlegen und Zugangsdaten notieren:
    DB-Servername (z.B. dbkunden.hoster.de), Datenbank (z.B. db1234), DB-User (z.B. dbuser1234), DB-Passwort (z.B. geheim ;-)
    3) Namensauflösungen:
    a) im XAMPP die Apache VHosts-Konfiguration bearbeiten:
    .\apache\conf\extra\httpd-vhosts.conf    siehe Beispiele im XAMPP-CMSOD;
    außerdem müssen wir Client-seitig die Windows Hosts Datei mit einem Eintrag für unser Projekt versehen:
    127.0.0.1   typo3-dienstag.local    www.typo3-dienstag.local 
    b) beim Hoster kümmert sich der Internet-Dienst DNS um die Auflösung Ihrer Projektseite www.firmaxyz.de !
  • Wiederholung mit neuer TYPO3-Installation
    typo3-dienstag.local  (nur rohe Installation; exklusive Install-Tool - GFX Konfigurationen, Startseite und TS-Template);
    hier der "kurze Ablauf"
    1) Inhalt des TYPO3-Packages (zip) in neuen Projektordner sauber entpacken
    2) Url in Browser öffnen http:// www.typo3-dienstag.local  
    3) Datei FIRST_INSTALL zum Freischalten der Installation in Projektordner anlegen
    4) Install-Routine durchführen (Hinweis: DB beim Hosting vorher anlegen)
    5) BE-Anmeldung - Install Tool aufrufen - GFX (Graphics) konfigurieren
    6) Übersetzungen "German" aktualisieren - Bentzereinstellungen auf "Deutsch" umstellen
    7) neue Startseite erstellen und aktivieren
    8) neues Template für Startseite erstellen
  • TYPO3 Ordner und Dateien (eine kurze Übersicht)
    Hautptordner Dateien: sind von den TYPO3-Sources/Quellen (TYPO3-Core/Kern)
    index.php (die eigentlichen TYPO3-Site),
    _.htaccess (Beispieldatei für .htaccess - Steuerungsdatei für den Apache Webserver), diverse Readme/Info-Dateien
    ./typo3 - der eigentliche TYPO3-Kern (in der Praxis: das Backend - BE)
    ./typo3temp - temporäre Ablagen (z.B. die Sprachdateien-Downloads, Unterordner ./typo3temp/GB für GIFBUILDER)
    ./fileadmin - der Dateibaum (Datei -> Dateiliste) der TYPO3-Site
    ./uploads - die Verwaltung für "hochgeladenen" Dateien
    (Empfehlung: vermeiden und immer über fileadmin arbeiten)
    ./typo3conf - die Konfiguraiton unserer Site; Speicherort für ENABLE_INSTALL_TOOL für Zugriff auf Install-Tool,
    Ordner ./typo3conf/ext für die installierten Extensions,
    Ordner ./typo3conf/l10n für die Sprachaktualisierungen der Extensions der Site (l10n: l ocalizatio n);
    Datei LocalConfiguration.php enthält die Konfiguration der Site
    wird normalerweise mittels Install-Tool bearbeitet
    nur in Ausnahmefällen manuell: siehe DB-Zugangsdaten oder Rettungsszenario "Install-Tool-Zugriff -> Adminzugang erstellen
    Datei: PackageStates.php enthält den Status der installierten Pakete/TYPO3-Extensions
  • Backend-Layouts
    mittels Web -> Liste auf Ebene Seiten-Root einen neuen Datensatz vom Typ "Backend-Layout" erstellt und dann später über die Seiteneigenschaften im Register "Erscheinungsbild" als BE-Layout für die aktuelle Seite (und für die Unterseiten) festgelegt
    Später: die ausgewählten BE-Layouts weisen dann auch die entsprechend gewünschten HTML-/CSS-Templates zu.
  • Statische Templates
    Hier: Content Elements (fluid_styled_content)
    Das Statische Template fluid_styled_content (Anm.: alt/obsolut - css_styled_content) wurde über die Bearbeitung des Root-Templates nachgeholt (siehe Register Enthält bei Bearbeitung des kompletten Templates).
    Anm.: das ist dann auch bei Erweiterungen (Extensions) wichtig, die oft ihre eigenen Statischen Templates benötigen!
    Kompakte Zuweisung der Inhalte (Datensätze) mittels der statischen Template TS Objekte:
    seite.100 < styles.content.get   (weist die Inhalte für colPos = 0 aus der Tabelle tt_content zu)
    View source
    1. # mit Hilfe von styles.content.get die Datensätze
    2. # für die Spalte 0 (Normal) aus DB holen:
    3. seite.100 < styles.content.get
    4. # jetzt noch die Inhalte aus Spalte Links
    5. # dort ist colPos allerdings gleich 1
    6. seite.200 < styles.content.get
    7. seite.200.select.where = colPos=1
    Hier folgt ein Auszug aus dem Setup-TS-Code, den wir mit dem statischen Template SYS:TYPO3_CONF_VARS:FE:defaultTypoScript erhalten:
    View source
    styles.content.get = CONTENT
    styles.content.get {
        table = tt_content
        select.orderBy = sorting
        select.where = {#colPos}=0
    }
    Eine Übersicht über den kompletten Code erhält man über Web - Template - Template Analyzer.
    Für die anderen Standardspalten für Inhaltsobjekte (Links, Rechts, Border) benötigen wir jetzt nur eine kleine Anpassung im Setup-TS für die gewünschte Spalte
    View source
    1. seite.500 < styles.content.get
    2. seite.500.select.where = colPos=20
    Im Beitrag befindet sich eine Tabelle mit den Standard-Cols 0 bis 3. Im Beispiel genannte ColPos=20 können wir über unsere eigenen Backend-Layouts "erfinden" und nutzen.
  • Interne Notiz
    Datensatz für die Darstellung von Notizen für die Seitenansichten im BE
    Tipp: nutzen Sie die Ansicht "Liste" - da sind die meisten Aktionen gut erreichbar
  • Syntax-Highlighting für Notepad++
    Google Suche führt zu Link - Einbau der "userDefinedLang.xml mittels Menü Sprachen - Benutzerdefiniert - Importieren...
    Anm.: Setup-TS mittels Notepad++ später gerne als *.ts Dateien sichern
    Tipp: im Notepad++, der in meinem XAMPP-CMSOD eingebaut ist, ist die Syntax-Unterstützung bereits eingebaut!
  • Install Tool
    hat eigenes Kennwort! Dieses kann bei Zugang zum Install Tool geändert werden und wird verschlüsselt in der Konfigurationsdatei typo3conf/LocalConfiguration.php abgelegt
    Empfehlung: normaler Weise keine manuelle Bearbeitung dieser Konfigurationsdatei!
    Zugang zum Install Tool nur bei vorhandener Datei ENABLE_INSTALL_TOOL im Projekt-Ordner ./typo3conf
    Anm.: als "admin" im BE lässt sich das per Klick erledigen!
    Die URL zum Install-Tool ist "BE TYPO3 + Install-Ordner): www.typo3-seminar.local/typo3/install   
  • Passwort Trick (Zugangsprobleme zum TYPO3-System "reparieren")
    Zugang zum BE oder gar zum Install-Tool verloren?
    Einfach Install-Tool aufrufen (Datei ENABLE_INSTALL_TOOL in ./typo3conf nötig/erstellen) und Passwort eingeben.
    Das Install-Tool verweigert bei falschem Install-Passwort den Zugriff: es zeigt aber den MD5-verschlüsselten (und gesalzenen) HASH-Wert an - diesen Wert dann einfach in der ./typo3conf/LocalConfiguration.php manuell ersetzen (seltener Fall für die manuelle Bearbeitung dieser Datei!).
    Nach Zugriff auf das Install-Tool kann man einfach über die Kategorie "Important Actions" einen neuen Admin-Account erstellen und hat somit wieder kompletten Zugrif auf das Backend (BE).
    Tipp: beispielhafte Video-Anleitung (hier jweiland.de) für die Unterstützung und Hilfestellung im Web zu diversen solcher Problemchen.
  • Erweiterungs Templates (+ext)
    nicht verwechseln mit den nötigen TypoScript-Templates für Erweiterungen!
    Hier sind Verschachtelungen / Erweiterungen / Anpassungen von TypoScript-Templates in der Seitenbaumstruktur gemeint, mit denen man Einstellungen überschreiben kann oder auf mehrere Templates in der Seitenstruktur verteilen kann
    View source
    1. # Überschreiben von TS mit Erweiterungstemplate
    2. seite.20.value = <p>Noch ein Hallo! mit EXTRA</p>
    3. # Neues Seiten (PAGE) Element an Position seite.30 :
    4. seite.30 = TEXT
    5. seite.30.value = <p>Hier Extra-Text auf Unterseite 1</p>
    Übungsbeispiele wie im Code oder: meta-Tags überschreiben, Inhalte von TS-Objekten (TEXT - value) überschrieben
  • Modul Datei -> Dateiliste
    BE unterstützt modernes Drag & Drop
    Empfehlung: Aktivieren der Kern-Erweiterung "filemetadata" für das "Tagging" (Infos an Medien heften)
    sauberes Anlegen von Ordnerstrukturen für Bilder, PDFs (mit Unterordnern)
    Tipp: der "Fileadmin" hat Eigenschaften (Rechte Maus - Bearbeiten) mit denen man z.B. auch die Sensitivität für Groß-/Kleinschreibung aktivieren kann!
    später: Nutzen der bereitgestellten Bilder in CE (Content Elements - Inhaltselementen) "Text und Bilder": jetzt kann man auch bei den Bildern die Referenzen einsehen, wo die Bilder eingesetzt werden
  • Bilder - mit TYPO
    aus den aktuellen Smartphone, iPad, Tablets, Kompaktkameras, Digitalen Spiegelreflexkameras kommen "Mega-Pixel" in MegaBytes:
    z.B. 1600 x 1200 Pixel (oder 6000 x 4000 Pixel) in Datei-Größen von mehreren Megabytes!
    TYPO3: wegen der Grafikbearbeitungsmöglichkeiten von TYPO3 dürfen wir ausnahmsweise die Bilder auch in den "großen Größen" in den Fileadmin legen! Diese werden mit ImageMagick/GraphicsMagick automatisch auf gewünschte Dimensionen "_processed_"
    Beispielbilder mit uneingeschränkten Lizenznutzungen: unsplash.com (Link)
    Tools zum sehr einfachen "Kleinrechnen": Radical Image Optimization Tool (Riot)
    Alternative: Tools wie XnView, IrfanView, ...
  • Übungen zu CE "Text und Bilder"
    Frage: Wo kommen die Dimensionen der eingefügten Bilder in "klein/groß" her?
    Antwort: Konstantendefinitionen für Kategorie Content (Erkl.: kommen von den statischen Templates für fluid_styled_content)
  • Konstanten (Constant TS)
    Über Web - Template - Konstanten-Editor haben wir uns die Konstanten für die Kategorie "Content" angesehen und die Breite für Bilder in CE "Text & Bilder" auf eigene Werte angepasst!
    Danach kann man im Template auch für Konstanten eine Konfiguration einsehen!

 

  • DB manuell erstellenDB manuell erstellen
  • Backend-LayoutBackend-Layout
  • Interne NotizInterne Notiz
  • Dateiliste - fileadminDateiliste - fileadmin
  • Drag & Drop im BEDrag & Drop im BE
  • CE TabelleCE Tabelle

 

Tag 03 - Mittwoch

Mittwoch, 18.10.2017, 08.30 - 16.00 Uhr

  • Rekapitulation, TN-Fragen
  • Übung: Setup-TS-Template
    Containment {...}, wrap (mit dem Pipesymbol | ), Kopien von TS-Objekten mit < Symbol
  • Übersicht der möglichen Techniken zum Ausliefern von Seiten mit TYPO3
    TYPO3 soll "Webseiten herausgeben" (Varianten ohne Anspruch auf Vollständigkeit)
    1) Alles per TypoScript kodieren! (siehe Mo/Di - geht so, ist aber nicht "schön" ;-)
    2) Template Building (früher: MTB - Modern Template Buildung)
    Nutzen von HTML/CSS-Vorlagen in Kombination mit cObject TEMPLATE und
    Markern (marks - Markierungsstellen) und
    Subparts (subparts - Markierungsklammerungen),
    diese Marker/Subparts werden dann per TS ersetzt
    Hinweis: Anleitungen zu solchen technischen Umsetzungen finden sich in Beiträgen zur Vorgängerseminaren zu TYPO3 auf diesem Infoportal (z.B. Link)
    3) Automaketemplate (Erweiterung zu MTB - Autor: Kasper Skårhøj)
    automatisiert das Nutzen der HTML-Seite unter Zuhilfenahme der benutzen Klassen/IDs von HTML-Tags (DIVs) und nutzt diese Bereiche als "fertige Markierungen" automatisch zum Ersetzen
    4) Templavoilá (Erweiterung)
    komplett andere Herangehensweise mit anderem TS; hier können TV-Seiten dann für die BE-Nutzer das Design der Seite abbilden und können so die Eingabe von Datensätzen erleichtern; Nachteil: sehr aufwendige Implementierung / hoher Konfigurations-Aufwand;
    Anm.: lässt sich heute mit Backend-Layouts und einfachen Erweiterungen (z.B. EXT:gridelements) besser und mit TYPO3-onboard-Techniken - also ohne große Erweiterung(en) - lösen
    5) Fluidtemplate (cObject FLUIDTEMPLATE)
    moderne Erweiterungen fluid (und extbase); wurden im Rahmen der TYPO3 Version 5 (Phoenix und Flow) entwickelt und eingeführt;
    die Techniken wurden auch auf Version 4.5 zurückportiert und sind also auch ab TYPO3 4.5 LTS verfügbar!
    Nutzung von cObject FLUIDTEMPLATE und ersetzen von Variablen oder direktes Einfügen von Setup-TS an entsprechenden Platzhaltern
  • HTML - CSS - JS - Vorlage (wieder mal ein Template ;-)
    Bereitstellung eines freien "HTML - CSS - JS"-Templates
    basierend auf Bootstrap-Technik: mPurpose (MIT-License - wird im XAMPP-CMSOD im Ordner _tools bereitgestellt)
    Auswahl der Seiten mit Blog-Darstellung (mit linker oder rechter Navigationsleiste) für die Hauptdarstellung unserer TYPO3-Site
    FluidTemplate Technik / Einbau von "Platzhaltern" zum Ersetzen von Inhalten durch TYPO-TypoScript wurde durch den Trainer vorbereitet!
    Tipp: nutzen von Code-Inspektoren (Firefox, Chrome mit Umschalten + Strg + I; IE mit F12; Edge: Strg + U)
  • cobject FLUIDTEMPLATE (Kurzanleitung)
    siehe auch Webseiten mit Erläuterungen: Portal T3N , Marco Seiler , TS Referenz 
    Meine Teilnehmer bekommen von mir eine kleine technisch FLUIDTEMPLATE Umsetzung bestehend aus
    1) fileadmin-Ordnerstruktur mit Ordnern mit HTML-CSS-JS-Dateistrukturen und
    2) FluidTemplate-Ordnerstruktur mit beispielhafter DefaultTemplate.html  Datei
    und dazugehöriger ./Layouts/DefaultLayout.html  Datei
    3) Setup-TS zur "Aktivierung/Nutzung" der vorbereiteten FluidTemplate-TechnikenPlan:
    Umsetzung einer "2-spaltigen Blog" Ansicht des Bootstrap-Template mPurpose (s.o.)
    In Kürze:
    Das Template enthält die Grundanweisung für das FluidTemplate:
    fileadmin/templating/bu/FluidTemplate/DefaultTemplate.html  
    Hier beispielhafter Template-Code:
    View source
    1. <f:layout name="DefaultLayout"/>
    2. <f:section name="ContentLeft">
    3.      <div class="col-sm-8">
    4.      <f:if condition="{contentMain}">
    5.          <f:format.raw>{contentMain}</f:format.raw>
    6.      </f:if>
    7.      </div>
    8. </f:section>
    9. <f:section name="ContentRight">
    10.      <div class="col-sm-4 blog-sidebar">
    11.      <f:if condition="{contentSidebar}">
    12.          <f:format.raw>{contentSidebar}</f:format.raw>
    13.      </f:if>
    14.      </div>
    15. </f:section>
    Als erstes wird das zuständige Layout angegeben, welches die Gesamtseitenstruktur (purer body ohne die äußeren Tags html, head und auch body). In geschweiften Klammern erkennt man hier die "variables", die im Setup-TS definiert werden (s.u.)
    Der Layout-Name wird im entsprechend konfigurierten Layout-Ordner gefunden und die Endung .html  erwartet/angefügt:
    fileadmin/templating/bu/FluidTemplate/Layouts/DefaultLayout.html   
    Hier ein paar beispielhafte Zeilen aus der Layout-Datei:
    View source
    1. <div class="row">
    2. <!-- Blog Post -->
    3.      <f:render section="ContentLeft" />
    4. <!-- End Blog Post -->
    5.  
    6. <!-- Sidebar -->
    7.      <f:render section="ContentRight" />
    8. <!-- End Sidebar -->
    9. </div>
    Jetzt benötigen wir noch das passende Setup-TS:
    View source
    1. # cObject für neue Fluid/Extbase Technik - FLUIDTEMPLATE
    2. page.10 = FLUIDTEMPLATE
    3. page.10 {
    4.      # wenn man nur ein Template hat, dann reicht der folgende Einzeiler
    5.      file = {$kunden.templatingpfad}/Fluidtemplate/DefaultTemplate.html
    6.      partialRootPath = {$kunden.templatingpfad}/Fluidtemplate/Partials/
    7.      layoutRootPath = {$kunden.templatingpfad}/Fluidtemplate/Layouts/
    8.      variables {
    9.          contentMain < temp.main
    10.          contentSidebar < temp.sidebar
    11.          }
    12. }
    Das Besondere am FluidTemplating wird dann später deutlich, wenn man erkennt, dass man mit dieser Technik auch Bedingungen (z.B. bei Sprachen) nutzen kann oder auch einfach direkt die Setup-TS Techniken "roh" einfügen/ersetzen kann:
    View source
    1. <div class="row">
    2. <div class="col-md-12">
    3.      <h1>Testseite mPurpose</h1>
    4.      <f:cObject typoscriptObjectPath="lib.search" />
    5.      </div>
    6. </div>
    Hier wird später ein Setup-TS-Block für eine Suchbox mit Erweiterung EXT:indexed_search eingefügt.
    Ergänzt wird diese Grundtechnik durch die sogenannten Partials: das sind Website-Stellen, die mehrfach auf der Seite auftauchen sollen.
    Das Ganze stellt eine sehr effiziente und mächtige Technik dar, die aktuell in allen guten Erweiterungen und TYPO3-Entwicklungen eingesetzt wird.

  • Mehrsprachigkeit
    nach TYPO3-Verständnis hat eine Grundinstallation (also quasi ein "sprachleeres" TYPO3) bereits eine (erste/nullte) Sprache 0, die als STANDARD (default) bezeichnet wird; mit Setup-TS (config) stellt man dann die gewünschten Sprachkonfigurationen (config.language, config.locale_all, ...) ein.
    Wichtig:  config.sys_language_uid = 0   (das ist die ID der Sprache STANDARD)
    Weitere Website Sprache über das TYPO3-Dachelement (Web - Liste) über Neuen Datensatz hinzufügen!
    Prinzip: die "2te" Sprache hat dann die id=1, die nächste die id=2 und so weiter...
    Für die Grundkonfiguration muss jetzt natürlich das TS für die Sprache konfiguriert werden.
    Konditionales Setup-TS einfügen, damit für die neue Sprache (normalerweise sys_language_uid = 1) und den Sprach-URL-Schalter "L" jetzt auch diese anderen Datensätze aus der TYPO3-DB geholt werden; siehe auch config.linkVars = L in der Grundkonfiguration:
    URLs: index.php?id=85&L=0  vs. index.php?id=85&L=1
    Setup-TS:
    View source
    1. # Grundkonfiguration des System
    2. config {
    3. linkVars = L
    4. sys_language_uid = 0
    5. language = de
    6. locale_all = de_DE
    7. ...
    8. }
    9. ...
    10. # Konditionales (d.h. mit Bedingungen)
    11. [globalVar = GP:L=1]
    12. config.sys_language_uid = 1
    13. config.language = en
    14. config.locale_all = en_UK
    15. # Navigationspfad in englisch (hier beispielhaftes TS)
    16. lib.breadcrumbs.wrap = <br />You are here:&nbsp; |
    17. [global]
    Dann lassen sich alle Seiten in dieser Sprache erstellen (z.B. über Web -> Info -> Übersetzungsübersicht)
    und danach die Inhaltselemente in der neuen Sprache erzeugen/übersetzen.

 

  • HTML-CSS-JS TemplateHTML-CSS-JS Template
  • Code-InspektorCode-Inspektor
  • filadmin - Fluidtemplatingfiladmin - Fluidtemplating
  • Website-Sprache erstellenWebsite-Sprache erstellen
  • Seiten übersetzenSeiten übersetzen
  • CE übersetzenCE übersetzen

 

Tag 04 - Donnerstag

Donnerstag, 19.10.2017, 08.30 - 16.00 Uhr

  • Rekapitulation, TN-Fragen
    Darstellungen zu Schwerpunktthema cObject FLUIDTEMPLATE
  • Menüs mit cObjects HMENU, TMENU, GMENU
    Für TYPO3-Seite TS-Setup Code bereitgestellt, der (z.B. bei Hauptmenü - mainMenu) per
    <f:cObject typoscriptObjectPath="lib.mainMenu"</f:cObject> 
    direkt im Fluid-Template (bzw. Layout) eingefügt wird.
    Grund-Technik der Erstellung von Menü-TS an Beispielen von "Stöckl/Bongers"
    Techniken/Stichworte zum Menü-TS:
    Einbinden der 2. Ebene muss sauber mit wrapItemAndSub statt einfachem linkWrap für das Wrappen erfolgen! → Nur so werden die Unterlisten (ul mit li) sauber verschachtelt!
    Zustände der Links (Anchor; a-Tags) mit NO, CUR, ACT;
    Navigationen aufklappen mit expAll;
    intelligentes Kopieren von Teilobjekten  2.CUR < .2.NO;
    ausnehmen von Seiten mit excludeUidList,
    mit ATagParams werden Anchors (Anker Tags a) Klassen hinzugefügt

    View source
    1. # Menü - in den Sidebars (links oder rechts)
    2. lib.menuSide = HMENU
    3. lib.menuSide {
    4. special = directory
    5. special.value = 1
    6. # excludeUidList = 89, 88
    7. wrap = <ul class="recent-posts"> | </ul>
    8.  
    9. # Die erste Ebene:
    10. 1 = TMENU
    11. 1.expAll = 0
    12. 1.NO.wrapItemAndSub = <li> | </li>
    13.  
    14. # CUR-Zustand der ersten Ebene:
    15. 1.CUR = 1
    16. 1.CUR < .1.NO
    17. 1.CUR.ATagParams = class="active"
    18.  
    19. # ACT-Zustand der ersten Ebene:
    20. 1.ACT = 1
    21. 1.ACT < .1.CUR
    22.  
    23.  
    24. # Die zweite Ebene:
    25. 2 = TMENU
    26. 2.wrap = <ul class="subnavi"> | </ul>
    27. 2.NO.wrapItemAndSub = <li> | </li>
    28.  
    29. # CUR-Zustand der zweiten Ebene:
    30. 2.CUR = 1
    31. 2.CUR < .2.NO
    32. 2.CUR.ATagParams = class="active"
    33. }
    Tipp: weitere Beispiele den bereitgestellten TS-Snippets ("Schnippseln") entnehmen:
    lib.menuMain , lib.menuSide  (hier ohne Dateiendung .ts - also also Objektbezeichner für das Setup-TS)

  • Sprachschalter mit Länderkennungen (Sprachen: DE | GB)
    Trainer stellt beispielhaften Setup-TS ( lib.languages.ts ) bereit für Sprachumschaltungen per Klick auf "Sprachen"
    Mit geeignetem Grafikmaterial gerne dann auch später per CSS mit Flaggen
  • Seiten-Typ: Ordner
    Für Spezialseiten wird ein Ordner bereitgestellt, der mit Seiten und Links gefüllt wird.
    Wir bauen die folgenden Seiten in den Ordner ein:
    → PCS (Link zu externer URL),
    → Suche (beinhaltet später eine Suchseite),
    → Impressum (Imprint),
    → Anmeldung (beinhaltet später eine Frontend User Anmeldeseite)
    Übung: Einbau eines "Spezialmenüs" für diese Links wieder mit Hilfe eines TS-Code-Snippet lib.menuSpezial.ts
    1) TS aus der lib.menuSpezial.ts-Datei in das Setup-TS Ihrer TYPO3-Website kopieren.
    2) Gemäß Anleitung in Kommentar des Menü-TS den nötigen Fluid-Tag (technisch: Fluid-Help für cObjects f:cObject) 
    in ./DefaultTemplate.html  kopieren/einfügen!
    Wichtig: bei dieser Art von Menü-TS muss auf die richtige Seiten-ID (hier: HMENU "Spezial")
  • EXT:indexed_search (Erweiterung aus Kern für indizierte Suche)
    die Erweiterung kann nicht nur die TYPO3-Datensätze, sondern auch externe Dokumente von PowerPoint-Folien bis hin zu PDFs durchsuchen und die Ergebnisse aufbereiten ( config.index_externals = 1 );
    Anm.: index_externals macht auf einem Windows-Server keinen Sinn!
    Die Erweiterung indexed_search befindet sich bereits im System und kann direkt aktiviert werden;
    neues Modul Web - Indizierung (Aktualisierung Sprache / Übersetzungen nicht vergessen);
    Aktivierung der Indizierung mittels TS: config.index_enable = 1;
    Um den "Suchbereich" festzulegen einfach die folgenden Kommentare im Layout/Template nach Wunsch eingrenzen:
    View source
    1. ...
    2. <!--TYPO3SEARCH_begin-->
    3. ... Inhalt ...
    4. <!--TYPO3SEARCH_end-->
    5. ...
    Erstellung einer Seite "Suche" (s.o. Ordner Spezialseiten) mit dem Plug-In Indexsuche:
    Das entsprechende Plug-In für die Indexsuche auswählen!
    To-Do-List (nach dem Seminar):
    Bereitstellung Suchbox-TS für ein Fluidtemplate-Objekt  lib.search  (nach bewährtem Vorgehen)
  • Website-Benutzer (FE-User)
    Bitte unbedingt Unterschied zu Backend-Benutzern erkennen:
    FE-User können nur die Seite nutzen, haben aber keinerlei Bearbeitungsmöglichkeiten;
    Arbeiten im/am System können nur BE-User!
    Erstellen eines neuen Ordners "FE-Benutzer" und Einstellung (Register Verhalten) als Container für Website-Benutzer;
    dadurch verändert sich das Logo des Ordners in ein "User-Icon"
    über Web -> Liste die neuen Datensätze für Website-Benutzergruppe (Kunden) und danach für einen Website-Benutzer (maxmustermann) anlegen
    Test: die Spezial-Unterseite "Anmeldung" mit Zugriff für Website-Benutzergruppe "Kunden" konfigurieren!
  • Anmeldung an Website (FE Login - Erweiterung felogin)
    auf Seite "Anmeldung" ein Inhaltselement Formulare - Anmeldeformular integrieren und konfigurieren
    Unbeding konfigurieren: Speicherort Benutzer auf unseren FE-Benutzer Ordner
    Test der Anmeldung/Abmeldung mittels anderen Browsers!
    Übung: Nutzen der FE-Benutzer über die Eigenschaften "Zugriff" auf Inhaltselemente-Ebene
    Hinweis: dermaßen geschützte Seiten und Inhaltselemente sind entsprechend gekennzeichnet!

 

  • Eigene KonstantenEigene Konstanten
  • cObject in TemplatecObject in Template
  • indexed_searchindexed_search
  • Indexierung - StatistikIndexierung - Statistik
  • Frontend - Benutzer, GruppenFrontend - Benutzer, Gruppen
  • BenutzerbereichBenutzerbereich

 

 

Tag 05 - Freitag

Freitag, 20.10.2017, 08.30 - 16.00 Uhr

  • Rekapitulation, TN-Fragen, To-Do-List
    TypoScript "überall": Setup, Constants, Page, User (inkl. Beispielen)
    "Show": TYPO3 auf einem LAMP-System (Linux Debian)
  • BE-Layouts steuern FluidTemplates.
    Automatisch per BE-Layout ein passendes Fluid-Template zuweisen. Ich habe den nötigen Setup-TS-Code (s.u.) bereitgestellt. An dieser Stelle die wichtigen Zeilen aus dem Setup-TS für das Objekt page.10, also dem FLUIDTEMPLATE:

    View source
    1. page.10 = FLUIDTEMPLATE
    2. page.10 {
    3. file.cObject = CASE
    4. file.cObject {
    5. key {
    6. data = levelfield: -1 , backend_layout_next_level, slide
    7. override.data = TSFE:page|backend_layout
    8. }
    9. 1 = TEXT
    10. 1.value = {$kunden.templatingpfad}/Fluidtemplate/DefaultTemplate.html
    11. 2 = TEXT
    12. 2.value = {$kunden.templatingpfad}/Fluidtemplate/TemplateReverse.html
    13.  
    14.  
    15. default < .1
    16. }
    17. partialRootPath = {$kunden.templatingpfad}/Fluidtemplate/Partials/
    18. layoutRootPath = {$kunden.templatingpfad}/Fluidtemplate/Layouts/
    19. variables {
    20. contentMain < temp.main
    21. contentSidebar < temp.sidebar
    22. }
    23. }
    Auf diese Weise steuert das BE-Layout für eine Seite (bzw. einen Seitenbaum - siehe Unterseiten BE-Layouts) die Auswahl des FluidTemplates!

  • Erweiterungen (Link)
    Entscheidung "Pro & Contra Erweiterungen" anhand von:
    Aktualität Technik (TYPO3 7, 8, 9?), Nutzerzahl, Entwicklername, Unterstützung / Community, Kosten, Abhängig machen von Erweiterungen
    TER - TYPO3 Extension Repository (modernisiertes Web-Onlineportal III/2017)
  • EXT:news (eine Verwaltung von News - vielseitig auch für andere Veröffentlichungen verwendbar)
    Neuentwicklung einer News-Erweiterung für TYPO3 von Georg Ringer
    Bitte nicht verwechseln mit dem Klassiker: tt_news (nur für Version TYPO3 7 verfügbar)
    Kurzanleitung:
    1) Download / Installation / Aktivierung checken
    Standard über Erweiterungsmanager von TYPO3
    2) Statische Templates
    3) Sprachen aktualisieren
    4) News-Container anlegen in Seitenbaum - Standardseite über Eigenschaften in Behälter für News konfigurieren (blauer "Ordner")
    5) News-Objekte anlegen/konfigurieren: Gruppe(n), Tag(s), News
    Anm.: bei Mehrsprachigkeiten den News-Container bitte über Modul Web - Info "übersetzen"
    6) CEs (Inhaltselemente) mit PlugIns für Listen- und Detaildarstellungen der News einfügen
    Tipp: neue Seite für "News - Details" als Unterseite in Menüs verbergen lassen
    in den PlugIns die richtigen IDs für News-Behälter und Detailseiten eintragen/konfigurieren
  • EXT:realurl (SEF - Search Engine Friendly URLS)
    Kurzanleitung:
    1) Download / Installation / Aktivierung checken
    Standard über Erweiterungsmanager von TYPO3
    Anm.: Abhängigkeiten werden automatisch aufgelöst - hier: scheduler
    keine Statischen Templates nötig; bitte Sprachen aktualisieren!
    2) Setup-TS: 
    View source
    1. # Grundkonfiguration realurl:
    2. config.simulateStaticDocuments = 0
    3. config.baseURL = http://www.typo3-seminar.local/
    4. config.tx_realurl_enable = 1
    5.  
    3) .htaccess im TYPO3-Projektordner bereitstellen
    Anm.: in Windows mit Notepad++ die vorbereitete _.htaccess öffnen und als .htaccess sauber speichern!
    Die erstellten Pfadanpassungen (URLs) können im Modul Web - Sprechende URLs für jede Seite eingesehen werden!
  • Lightbox/Fancybox Extensions
    dynamische Bildergalerien mit jQuery-Javascript Techniken am Beispiel von
    EXT:cl_jquery_fancybox (Anm.: für kommerzielle Zwecke nicht kostenlos; Anleitungen auf jweiland.net)
    EXT:jh_magnificpopup (Anm.: nicht für Version 8! siehe Meldungen bei Installation; kann aber funktionieren ;-)
  • TYPO3-System - Backup & Restore (eine kurze Darstellung)
    TYPO3 besteht aus
    0) TYPO3-Sources (Quellen / T3-Kern):
    muss (eigentlich) nicht gesichert werden: ./typo3, Dateien im Hauptordner: index.php, ...
    1) TYPO3-Projekt-Dateien:
    Ordner ./typo3conf, ./fileadmin (, ./typo3temp, ./uploads)
    2) TYPO3-Datenbank:
    Exportieren und Importieren mittels PhpMyAdmin (MySQL-Dumps; Formate: sql, zip. gz, bz2)
    Tolle Anleitungen für die Hosting-Umgebungen (Achtung: Linux/Unix Betriebssystem) finden sich wieder bei JWeiland (z.B. Projekt kopieren)
    bei Serverumzug natürlich Anpassung der Zugangsdaten zur Datenbank (mittels Install-Tool)
    oder manuelles Bearbeiten der ./typo3conf/LocalConfiguration.php
    Alternative Techniken:
    .t3d-Dateien - Eigenes Archivformat von TYPO3 
    lassen sich über die Seitenelement-Kontextmenüs mittels Exportieren / Importieren nutzen - kümmert sich aber nicht um das komplette T3-Projekt, sondern hauptsächlich um die Seitenbaumstruktur!
    Batch - für den XAMPP-CMSOD habe ich eigenen Backup/Restore-Technik (cmd-Skripte / Batch) erstellt
  • TYPO3 auf LAMP-System (Linux AMP)
    Die native Umgebung für einen TYPO3-Service.
    Wichtigste technische Vorteile/Unterschiede:
    Groß-/Kleinschreibung unterscheidbar (CaseSensitivity)
    Grafik- und Spezialtools (ImageMagick/GraphicsMagick, AI, PDF, Word- oder PowerPoint-Dokument)
    Symbolische Links zum "Verdrahten" von TYPO3-Sources:
    lampp typo3 v8 800pxSaubere symbolische Links, um einen TYPO3-Kern (T3-Core) effizient  vom TYPO3-Websiteordner (Kern) zu trennen und später einfach durch Anpassen des Hauptlinks typo3_src auf einen anderen TYPO3-Kern verlinken zu können.
    beispielhafte Befehle: (siehe auch Infodatei in TYPO3-Kern: INSTALL.md)
    ln -s ../../../typo3_src/typo3_src-8.7.8 typo3_src   (erstellt Hauptlink zur TYPO3-Source)
    ln -s typo3_src/typo3 typo3   (erstellt Link zu TYPO3-Hauptordner ./typo3)
    ln -s typo3_src/index.php index.php   (erstellt Link zu TYPO3 Projekt ./index.php )
  • TypoScript (TS) "überall" - eine kurze Orientierungshilfe zum Seminarende...
    Setup-TS (die Grundkonfiguration für Auslieferung der Site - siehe Modul Web - Template)
    Das Haupt-Typoscript unserer TYPO3-Projekte
    angefangen von page.10.value = Hello World bis zu page.10 = FLUIDTEMPLATE  
    Tipp für die Organisation von "längerem/größerem" Setup-TS per
    a) Auslagerung in Dateien in fileadmin und Einfügen - Beispielzeile in Setup-TS dann:
    <INCLUDE_TYPOSCRIPT: source="FILE:fileadmin/templating/bu/TypoScript/config.ts"> 
    Anm.: nicht jedes TS kann ausgelagert werden!
    b) Auslagerung in "Spezialordner" für Templating im Seitenbaum und dort die Templates als Eigenschaften hinterlegen. Dieses Setup wird dann - ähnlich wie statische Templates - per Register "Enthält" des Standard-Template eingefügt.
    Constant-TS (Festlegungen / Konstanten - siehe Modul Web - Template)
    z.B. Definition von Bildeigenschaften oder Aktivieren/Deaktivieren des Admin-Panels auf Frontend:

    View source
    1. # im Konstanten-TS:
    2. # =================
    3. # cat=kunden; type=boolean; label= AdminPanel enable: eine Checkbox for AdminPanel
    4. kunden.adminpanel = 0
    5. # cat=kunden; type=string; label= Templating Basispfad: Grundverzeichnis für Konf.
    6. kunden.templatingpfad = fileadmin/templating/bu
    7. # cat=kunden; type=string; label= Templating Basispfad: Grundverzeichnis für Search-Box in Menü oben
    8. kunden.baseurl = http://localhost/typo3/typo3-seminar/>
    9.  
    10.  
    11. # Templating (Fluid) for indexedsearch
    12. plugin.tx_form.view.layoutRootPath = fileadmin/templating/kundendemo/Extensions/form/Layouts/
    13. plugin.tx_form.view.partialRootPath = fileadmin/templating/kundendemo/Extensions/form/Partials/
    14. plugin.tx_form.view.templateRootPath = fileadmin/templating/kundendemo/Extensions/form/Templates/
    15.  
    16.  
    17. styles.content.textmedia.maxWInText = 275
    Page-TS (Konfigurationen für Seite/Page - siehe Eigenschaften Seite - Register Ressourcen - Seiten-TSconfig)
    Beispiel: Vorgaben Zugriffsberechtigungen für neue Seitenelemente im Seitenbaum (siehe BE-Benutzer-Berechtigungen)
    Einstellungen recherchiert: Link zur TSConfigReference der typo3.org - diese Konfigurationen machen erst mit BE-Gruppen Sinn...
    User-TS (Konfiguration für Benutzer - siehe Modul Backend-Benutzer - Eigenschaften - Register Optionen)
    Konfiguration der Benutzerumgebung - also Maßschneidern des BE (IDs anzeigen, Farben im Seitenbaum, ...);
    Recherche zu "Farben im Seitenbaum": Link 1, Link 2 
    Übung (nach dem Seminar): User-TS für das Einschalten der IDs im Seitenbaum konfigurieren:
    options.pageTree.showPageIdWithTitle = 1  

  • Was wir nicht mehr geschafft haben...
    Backend-Benutzer (BE) und BE-Benutzergruppen (gute Anleitungen im Web, "Praxiswissen TYPO3"-Buch R. Meyer / Mittwald)
  • Dokumente und Unterlagen für TN:
    XAMPP-Versionen (Wochenanfang - Seminarende Trainer-XAMPP),
    Screenshots der Seminartage (Bildergalerie/Diashow der Seminarwoche),
    Snippets (TypoScript Schnippsel) und Ordner-/Dateistrukturen fileadmin und Co
  • Feedbackbögen, TN-Bescheinigungen, letzte Fragen

 

  • alternative BE-Layoutxalternative BE-Layoutx
  • TERTER
  • News - Liste (CE)News - Liste (CE)
  • EXT - VersionskonfliktEXT - Versionskonflikt
  • EXT:realurlEXT:realurl
  • News - Statische TemplatesNews - Statische Templates

 

 

Vielen Dank für Ihre überaus positiven Feedbackbögen, Anregungen und Klopfen zum Seminarende. Viel Spaß mit TYPO3 wünscht Ihnen
Ihr Trainer Joe Brandes

 

  Privates

... zu Joe Brandes

Sie finden auf dieser Seite - als auch auf meiner privaten Visitenkarte joe-brandes.de einige Hintergrundinformationen zu mir und meinem Background.
Natürlich stellt die IT einen Schwerpunkt in meinem Leben dar - aber eben nicht nur ...

joe brandes 600px

Private Visitenkarte / Technik: HTML & CSS /
  joe-brandes.de

  Jobs

... IT-Trainer & Dozent

Ich erarbeite und konzipiere seit über 20 Jahren IT-Seminare und -Konzepte. Hierfür stehen der "PC-Systembetreuer / FITSN" und der "CMS Online Designer / CMSOD". Ich stehe Ihnen gerne als Ansprechpartner für Ihre Fragen rund um diese und andere IT-Themen zur Verfügung!

becss 600px

BECSS Visitenkarte / Technik: HTML & CSS /
  becss.de

  Hobby

... Snooker & more

Wer einmal zum Snookerqueue gegriffen hat, der wird es wohl nicht wieder weglegen. Und ich spiele auch immer wieder gerne eine Partie Billard mit den Kumpels und Vereinskameraden. Der Verein freut sich über jeden, der einmal in unserem schicken Vereinsheim vorbeischauen möchte.

bsb 2011 600px

Billard Sport BS / Joomla 3.x /
  billard-bs.de

PC Systembetreuer ist J. Brandes - IT seit über 35 Jahren - Technik: Joomla 3.4+, Bootstrap 3.3.4 und "Knowledge"

© 2017 - Websitedesign und Layout seit 07/2015 - Impressum
Nach oben