• typo3.orgtypo3.org

In der Woche ab Montag, dem 16. Juni 2014 findet an der VHS Braunschweig ein Seminar zum Thema "TYPO3" im Rahmen der Seminare des "CMS Online Designer (VHS)" statt.

Der Bildungsurlaub wird uns in die praxisorientierte Implementierung eines aktuellen TYPO3-Systems auf einem Server-Entwicklungssystems einführen. So wird im Laufe der Woche ein komplettes T3-Projekt entstehen und viele Fragen rund um das Backend, TypoScript oder die Nutzung von Extensions sollen geklärt werden!

Ort: VHS Braunschweig, Heydenstraße 2, Raum 2.11
Zeiten: Mo. 16.06. bis Fr. 20.06.14; jeweils 08.30 - 16.00 Uhr
Prüfung: eine freiwillige Prüfung für das Modul IIIb des "CMS Online Designer"-Zertifikats wird mit den TN im Seminar absprochen

Ich werde unser Seminar an dieser Stelle ausführlich begleiten und wünsche viel Spaß und Erfolg ...
Ihr Trainer Joe Brandes

 

Mo, 16.06.14

  • TYPO3 InstallationTYPO3 Installation

Montag, 16.06.2014, 08.30 - 16.00 Uhr

  • Orientierungsphase, TN-Themen, Pausenzeiten, Cobra Shop - Software für Teilnehmer (Link)
  • Software für das Seminar
    Einstellungen Windows (Windows Explorer; Win + E) - unbedingt Dateierweiterungen einblenden lassen!
    SW: Browser Mozilla Firefox, Packer 7-Zip, Editor Notepad++ (siehe Toolsammlung zum CMS Online Designer)
  • Windows- und XAMPP
    Konfigurationen auf Windows- und Server-Seite (XAMPP)
    Anm.: Trainer Joe Brandes hat ein komplett für den CMS Online Designer und TYPO3 vorkonfigurierten und dokumentierten XAMPP (basiernd auf XAMPP 1.8.3-4 für Windows) bereit gestellt und mit den TN die integrierte Konfigurations-Dokumentation nachgearbeitet - die Doku des Seminar-XAMPP werde ich auch auf diesem Portal (siehe Link zu CMSOD 2.0) bereitstellen.
    XAMPP Seminar-Pfad:  C:\xamppp-cmsod  für die vorbereitete Umgebung!
    Hinweis: später nur noch Hinweis auf C:\xampp! Eigene XAMPP-Installationen dann gerne mit Ordnern C:\xampp oder die Prüfungen des CMS Online Designers unter C:\xampp-pruefung
    Web-Dokumente:  C:\xampp-cmsod\htdocs
    Apache-Konfiguration: C:\xampp-cmsod\apache\conf\httpd.conf
    PHP-Konfiguration:  C:\xampp-cmsod\php\php.ini (php.ini für TYPO3-Umgebung)
    Arbeiten am TN-PC:
    1) Systemvariable OPENSSL_CONF einrichten
    2) Virtual Host konfigurieren für Arbeitsdomain: www.typo3-62-seminar.local
    Dateien: C:\windows\system32\drivers\etc\hosts (Client-Seite) und httpd-vhosts.conf (XAMPP-Server)
  • TYPO3 (Versionen, Varianten)
    Website: typo3.org - Erfinder: Kasper Skårhøj
    Bereitstellung (Download)  in verschiedenen Archivformaten (tar.gz, zip)
    Versionen: 4.4 - 4.5 (LTS ab Jan 2011) - 4.6 - 4.7 - 6.0 - 6.1 - 6.2 (LTS ab 25. März 2014)
    TYPO3 NEOS: früher Version 5.0 (Phoenix - basiert auf Framework FLOW)
    4.5 LTS - Long Term Support (eingeführt Jan 2011 - Support bis Oktober 2014) - jeweils 1 Jahr Überschneidung mit neuer LTS Variante 6.2 ab März 2014 mit dann maximal bis zu 5 Jahren Support (3 Jahre Allgemeiner/Vollständiger Support danach noch Sicherheitsupdates!)
  • 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 T3-Extensions, ...) spezialisiert; siehe Mittwald oder JWeiland
  • Installation:  Version: 6.2.3  (LTS)
    Installationsarchiv (*.zip) für die Version entpacken in C:\xampp-cmsod\htdocs\typo3\typo3-seminar
    Aufrufen der Installation mittels http://www.typo3-62-seminar.local - Entsperren der Installation mittels FIRST_INSTALL
    Zugang zum DB-Server (mit XAMPP Standard-User: root / "leeres Kennwort") und neue DB "typo3_seminar" anlegen
    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 (URL): ./typo3   (siehe auch Ordner-Struktur TYPO3-Projekt)
    Install-Tool (URL): ./typo3/install  (leitet dann auf das Install-Tool mit eigenem Kennwort - ohne Benutzer)
  • BE-Sprache "german"
    über Modul Admin Tools -> Language die Sprache "German" für alle (möglichen) Extensions des T3-Systems nachinstallieren; danach über User Tools -> User Settings die Sprache für "admin" User auf Deutsch umstellen; mit Ab-/Anmelden das BE aktualisieren
  • Install Tool
    hat eigenes Kennwort! Dieses kann bei Zugang zum Install Tool geändert werden und wird mit verschlüsselt in der Konfigurationsdatei typo3conf/LocalConfiguration.php abgelegt (normaler Weise keine manuelle Bearbeitung dieser Konfigurationsdatei)
    Zugang zum Install Tool nur bei vorhandener Datei ENABLE_INSTALL_TOOL im Ordner ./typo3conf
  • TYPO3 Grafikunterstützung (mit GD-Bibliothek und Grafik-Tools)
    GD-Unterstützung gecheckt und konfiguriert über Install Tool - Image Processing
    Grafik-Tools: Imagemagick (www.imagemagick.org) oder Graphicsmagick (www.graphicsmagick.org)
    Hier: Version Imagemagick in einem "XAMPP Tools-Ordner" bereitgestellt und die notwendigen Pfade in der Gesamtkonfiguraton (All Configuration) eingetragen; beachten: Backslashes auf Windows-Systemen und abschließenden Backslash nicht vergessen! Vorgabe der nötigen "GFX"-Konfiguration nach Vorgabe Trainer: im_path, im_path_lzw, gdlib_png
    Anm.: Formate PDF und AI nur mit Ghostscript-Unterstützung möglich; auf Windows Systemen nur mit erheblichem Aufwand
  • Seite 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
  • TypoScript (ein erstes Setup TS-Template)
    Kurz: Alles in TYPO3 sind Inhalte in Form von Datensätzen - Setup TS definiert dann "WIE" die Daten ausgeliefert werden!
    TS also die "Konfigurationssprache" für TYPO3, Unterteilung in Konstanten (constants) und Setup (setup),
    Zugriff über Module Web -> Template auf Ebene der obersten Seite (nicht auf allerhöchster TYPO3-Ebene)
    Erstellung einer ersten Instanz vom Objekt PAGE (Objekte - rechts vom Gleichheitszeichen - bitte immer groß schreiben), kleine Experimente mit neuen Objekten  und Analyse der ausgegebenen HTML-Dokumenttypen (Quellcode des Browsers analysieren; Standards: 4.5 HTML 4 Trans.; 6.2 HTML5); hier das Automatik-Template mit der "Hello World" Startseite:
    # Default PAGE object:
    page = PAGE
    page.10 = TEXT
    page.10.value = HELLO WORLD!
    
  • cObject (Content Objects)
    erste Beispiele: PAGE, TEXT
    stehen rechts von Gleichheitszeichen und müssen groß geschrieben werden; die Zuweisungen links vom "=" kann selbst gewählt werden, also z.B. page = PAGE oder auch seite = PAGE
  • TS-Experimente
    Nutzung von geschweiften Klammern (containment) für das Zusammenfassen von sich wiederholenden TS-Zeilen
    Kopieren von Objekten mittels <
    Reihenfolgen von Objekten mittels Zahlen: seite.10, seite.20, ...
    Meta-Tags für description, author per TS anpassen
    Konfigurieren des HTML Doctype mittels seite.config.doctype
    Einfügen einer CSS-Datei mittels seite.includeCSS
    Kommentieren mit #
    Einwickeln von Objekten mittels "wrap"

 

  • Setup TypoScriptSetup TypoScript
  • ENABLE_INSTALL_TOOLENABLE_INSTALL_TOOL
  • GFX - ImagemagickGFX - Imagemagick
  • ÜbersichtÜbersicht
  • TYPO3 InstallationTYPO3 Installation
  • BE - SprachenBE - Sprachen

Di, 17.06.14

  • Statische TemplatesStatische Templates

Dienstag, 17.06.2014, 08.30 - 16.00 Uhr

  • Rekapitulation, TN-Fragen
  • 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++ als *.ts Dateien sichern
  • CSS per TS
    Wiederholung zu page.includeCSS; alternativ auch den Style in den Head schreiben mittels page.CSS_inlineStyle
  • Seitenstrukturen
    die Hierarchien ausgehend von dem TYPO3-Root beachten; eine gute Planung (Strukturierung) der Website ist wichtig
    Seitenbaum erstellt und Inhaltselemente erstellt (Text, Text und Bilder, Tabellen); Verweise auf die gewünschte tatsächliche "Hauptseite" erstellt; einzelne Seiten müssen immer aktiviert (sichbar gemacht) werden ; jede Seite ist durch eine eindeute Seiten-ID (page id) gekennzeichnet und diese wird beim Aufruf der Seite genutzt: index.php?id=8
    Tipp: Über Modul Web - Funktionen lassen sich auch mehrere Seiten/Objekte in einem Schwung erstellen
    Hauptseite der Seitenbaumstruktur als "Anfang der Website" auszeichnen - dadurch wird die Hauptseite unterhalb der TYPO3-Wurzel zur Erdkugel
  • Seitenbaumexport
    Hinweis auf einfache "Backup/Sicherung" mittels Eport einer Seitenstruktur in ein *.t3d Datei; diese lassen sich dann wieder importieren
  • Inhaltselemente (Content Elements)
    Übungen: Text, Text und Bilder (Übungen mit vorbereiteten 800px Bildern mit Speichern der Bilder im fileadmin),
    Tabellen (Tipp: Tabellen-CE erst erstellen und dann wieder zum Bearbeiten öffnen, dann steht auch der Assistent zum Erstellen von Tabellen zur Verfügung; es lassen sich auch diverse CSV-Textformate einfach einfügen)
  • Statische Templates
    Bei Verwendung von cObject CONTENT für die .table = tt_content bleibt Anzeige der Inhalte (Inhaltselemente) leer bis das Statische Template css_styled_content über die Bearbeitung des Root-Templates nachgeholt wird (Register Enthält)
    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:
    < styles.content.get   (weist die Inhalte für colPos = 0 aus der Tabelle tt_content zu)
    die styles.content.getLeft, .getRight, getBorder   (für die colPos = 1 , 2 und 3)
  • Constants (erste Gehversuche)
    über das statische Template ccc_styled_content stehen jetzt über Web -> Template im Konstanten-Editor Einstellungen zum Handling vieler TYPO3-Standardausgaben (Link, Bilder, ...) zur Verfügung
    Übung: Anpassung von Pixel-Breiten für Bilder und "Bilder im Text"
  • TypoScript-Object-Browser, Template-Analyse
    kurzer Einblick über den Trainer in die Übersicht und Analysen mit diesen wertvollen Tool von Web -> Template
  • Spaltenpositionen (colPos) - Übersicht:
    colPos englisch deutsch
    0 normal Normal
    1 left Links
    2 right Rechts
    3 border Rand
  • 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) festlegen
  • Interne Notiz
    Datensatz für die Darstellung von Notizen für die Seitenansichten im BE
  • HTML & CSS Vorlage
    Bereitstellung eines freien "HTML & CSS"-Templates basierend auf Bootstrap-Technik: mPurpose (MIT-License)
    Auswahl einer Blog-Darstellung (mit linker Navigationsleiste) für die Hauptdarstellung unserer T3-Site
    Einbau von "Platzhaltern" zum späteren Ersetzen von Inhalten durch TYPO-TypoScript
    Tipp: nutzen von Code-Inspektoren (FF, Chrome mit Umschalten + Strg + I; IE mit F12) oder gerne auch Firebug unter Firefox
  • Template Building
    der Einbau der Platzhalter:
    Marker (marks) der Form ###MARKERNAME###
    Subparts (subparts) der <!-- ###DOCUMENT###  ...  ###DOCUMENT### -->
    Beispielhafte Nutzuung: page.10.marks.CONTENT < styles.content.get
    # Default PAGE object:
    page = PAGE
    page.config.doctype = html5
    page.meta.description = Eine Testseite im BU TYPO3 an der VHS Braunschweig
    page.meta.author = Joe Brandes
    # Laden der CSS-Dateien:
    page.includeCSS {
         file1 = fileadmin/mpurpose/css/main.css
         file1.title = display
         file1.media = screen
         file2 = fileadmin/mpurpose/css/bootstrap.min.css
         file2.title = display
         file2.media = screen
    }
    # das eigentliche Seitenelement
    page.10 = TEMPLATE
    page.10.template = FILE
    page.10.template.file = fileadmin/mpurpose/vorlage-blog-left.html
    page.10.workOnSubpart = DOCUMENT
    page.10.marks.INHALT < styles.content.get
    

 

  • BE-LayoutsBE-Layouts
  • HTML-Template AnalyseHTML-Template Analyse
  • FunktionenFunktionen
  • InhaltselementeInhaltselemente
  • styles.content.getstyles.content.get
  • Statische TemplatesStatische Templates
 

Mi, 18.06.14

  • Website BenutzerWebsite Benutzer

Mittwoch, 18.06.2014, 08.30 - 16.00 Uhr

  • Rekapitulation, TN-Fragen
  • TYPO3 Literatur
    siehe hierzu die Bibliothek des Trainers zum Modul IIIb TYPO3 des CMS Online Designers
    die beiden T3-Bücher "Einstieg in TYPO3" (Galileo Verlag) und "Praxiswissen TYPO3" (OReilly Verlag, Mittwald-Mitarbeiter Robert Meyer) lagen im Seminar vor und wurden für eine weitere Beschäftigung mit TYPO3 eingeschätzt und empfohlen
    Einschätzung/Empfehlung: "Einstieg in TYPO3 - Stöckl, Bongers" für TYPO3 Version 6.2 abwarten bzw. mit dem Buch zu Version 6.1 loslegen bzw. das Seminar nacharbeiten! Beim Herdt-Verlag aktuell nur Skript bis TYPO3 Version 4.5!
    Hinweis: Videotrainings "video2brain" für TN, die sich gerne visuell schulen lassen (besondere Cobra-Shop Konditionen möglich)
  • Version 6.2 vs. Vorversionen
    seit 6.2 erstellt die Install-Routine alle nötigen Ordner und Ressourcen (DB/Tabellen) für eine "Basisseite"! In den Vorgängerversionen bestand das System aus den T3-Quellen (source) und einem T3-Basisprojekt (dummy bzw. blank packages). Desweiteren gab es spezielle Komplett-Versionen (Introduction package, Government package) mit Beispielinstallationen.
    In 6.2 werden solche komplette Umgebungen als "Distributionen" bereit gestellt (siehe Adminwerkzeuge -> Erweiterungsmanager - Auswahl: Vorkonfigurierte Distributionen); Hinweis: die Introduction Distribution der TYPO3 Entwickler (best practise) lässt sich auf unserem Windows-XAMPP aktuell leider nicht voll funktionieren installieren (Seitenbaum fehlt)
  • Wiederholung: Template Building mit Subparts/Markern
    Exemplarische Einführung an Hand von Beispielen; siehe Literaturempfehlungen
    cObject TEMPLATE nutzen, workOnSubpart nutzen, damit keine doppelten HTML-Strukturen entstehen, Nachrüsten von CSS mittels page.includeCSS, Marker INHALT für den Inhaltsbereich der Webseite mit der Kurzform styles.content.get (bzw. .getLeft, getRight, getBorder), Marker (marks) für eine erste Navigation eingebaut: cObject HMENU in Textdarstellungen (cObject TMENU) kreirt (directory)
    Übung: Einbau von Markern (DATUM, NAVIPFAD, LOGO)  in der vorbereiteten HTML/CSS-Template-Datei
  • Extension Templates
    nicht verwechseln mit den nötigen TS-Templates für Erweiterungen! Sondern hier sind Verschachtelungen von Templates in der Seitenbaumstruktur gemeint, mit denen man Einstellungen überschreiben kann oder auf mehrere Templates in der Seitenstruktur verteilen kann
    Übung: meta-Tags überschreiben, später auch template.file überschreiben
  • Seitentitel / Untertitel einfügen
    marks.SEITENNAME.field = subtitle // title
    subtitle als Feld in den Seiteneigenschaften bearbeitet und getestet
  • Begrüßung einfügen
    Marker ###DATUM### mit geeignetem TS-Setup bestücken
    # Hier das Datum und Begrüßung einfügen
      marks.DATUM = COA_INT
      marks.DATUM {
        10 = TEXT
        10 {
        value = Good Morning
        lang.de = Guten Morgen
        wrap =  | , heute ist der&nbsp;
        }
        20 = TEXT
        20.data = date:d.m.y H:i
      }
    
    cObject COA_INT: Content Object Array (für verschachtelte Strukturen), mit _INT: kein Caching
    Nutzung der Spracheinstellung "lang.de" (hierfür muss allerdings die config gesetzt werden)
    date Funktion (nach Google Recherche) funktioniert genau wie die gleichnamige PHP-Funktion date() - also die php-Hilfe über den Notepad++ aufgerufen: in Datei "date" geschrieben und auf Sprache PHP gestellt, Alt + F1 Tastenkombination führt zu PHP-Online-Hilfe
  • Spezialseiten mit Menü (oben rechts)
    Bereitstellung eines Ordners für spezielle Seiten und Links
    Verweise für Externe Links eingebaut
    Analyse der Original-Menüstruktur (HTML/CSS-Designvorlage) und des aktuellen T3-Templates: wir brauchen eine einfache ul/li Menükonstruktion für unser erstes Menü
    # das TOP-Menü oben rechts ersetzen
      marks.MENU_TOP_EXTRAS = HMENU
      marks.MENU_TOP_EXTRAS {
        special = directory
        special.value = 10
        wrap = <ul class="meineKlasse"> | </ul>
        # hier nur eine Ebene
        1 = TMENU
        1.NO.wrapItemAndSub = <li> | </li>  
      }
    
    cObject HMENU stellt Herarchisches Menü bereit; es soll ein spezielles "Verzeichnis (Directory)" ausgegeben werden und hier kommt der special.value ins Spiel: das muss die Page ID (pid) des Ordners "Spezialseiten" Ihrer Struktur sein
    die Objekteigenschaft NO bezeichnet den "Normal"-Zustand unsere ersten Menülinks (später auch z.B. ACT für aktive Links)
    Anm.: der besondere Wrapper (wrapItemAndSub) wird später bei mehreren Ebenen besonders wichtig!
  • Seitenbaum (Sitemap)
    Einbau einer Inhaltselemts aus der Rubrik "Spezielle Elemente - Spezial Menüs"; die nötigen Einstellungen vornehmen und gezielt die gewünschten Seitenbäume im Seitenbaum anzeigen lassen
    Übung: in Seite "Module" zusätzlich Unterseiten anlegen, damit wir eine weitere Ebene bekommen
    Vergleich: komplette Sitemap anzeigen lassen
  • 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 eine "User-Icon"
    über Web -> Liste die neuen Datensätze für Website-Benutzergruppe (Kunden) und danach für einen Website-Benutzer (maxmustermann) anlegen
  • Anmeldung an Website (FE Login - Erweiterung felogin)
    auf Seite "Anmeldung" ein Inhaltselement Formulare - Anmeldeformular integrieren und konfigurieren (Speicherort Benutzer)
    Test der Anmeldung/Abmeldung mittels anderen Browsers! Meldugen der Erweiterung "felogin" noch in englisch!
    Übung: Nutzen der FE-Benutzer über die Eigenschaften "Zugriff" auf Seiten- oder Inhaltselemente-Ebene
    Hinweis: dermaßen geschützte Seiten und Inhaltselemente sind entsprechend gekennzeichnet
  • Sprache konfigurieren
    ohne Konfiguration hat unser TYPO3-System "keine definierte" Sprache und gibt entsprechend "international englisch" aus
    jetzt konfigurieren wir diese "Sprache 0" auf "deutsch"
    # Grundkonfiguration des System
    config {
      sys_language_uid = 0
      language = de
      locale_all = de_DE
    }
    
    Dann klappt es auch mit Sciptcode wie "lang.de = " und das An-/Abmeldeformular (felogin) gibt uns "deutsche Infos" (natürlich nur weil wir über Modul Adminwerkzeuge -> Sprache die Sprachunterstützung "german" geladen/aktualisiert haben.
  • Konditionales Scripting
    wir können über solche Skriptzeilen die TS-Setup von Bediungen abhängig machen, das wird uns ab morgen auch bei mehrsprachigen Seiten helfen; hier wollen wir die Begrüßungstexte (siehe Marker DATUM) von der Uhrzeit (hour) abhängig machen
    # Konditionales (d.h. mit Bedingungen)
    [hour = > 10]
      page.10.marks.DATUM.10.value = Good Afternoon
      page.10.marks.DATUM.10.lang.de = Guten Tag
    [hour = > 18]
      page.10.marks.DATUM.10.value = Good Evening
      page.10.marks.DATUM.10.lang.de = Guten Abend
    [global]
    
    Normalerweise wird Text "Guten Morgen" im Standard-Setup-TS ausgegeben! Hier wird ab 11 Uhr "Guten Tag" und nach 18 Uhr "Guten Abend" (bei deutscher config) ausgegeben (sonst halt die englischen Standardtexte).

 

  • Website BenutzerWebsite Benutzer
  • Datum - UhrzeitDatum - Uhrzeit
  • cObject IMAGEcObject IMAGE
  • subtitle // titlesubtitle // title
  • Stöckl - BongersStöckl - Bongers
  • Menü AnalyseMenü Analyse
 

Do, 19.06.14

  • SuchenSuchen

Donerstag, 19.06.2014, 08.30 - 16.00 Uhr

  • Rekapitulation, TN-Fragen
  • Fortsetzung "Template Building"
    Übungen des vierten Seminartags: weitere Marker mit Setup-TS sinnvoll ersetzen
  • Ü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 Di)
    2) Template Building: Nutzen von HTML/CSS-Vorlagen in Kombination mit Markern (marks) und Subparts (subparts), diese werden dann per TS ersetzt
    3) Automaketemplate (Erweiterung) - automatisiert das Nutzen der HTML-Seite unter Zuhilfenahme der benutzen IDs und nutzt diese Bereiche als "Markierungen" 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 / Aufwand abschätzen
    5) Fluidtemplate - moderne Erweiterungen fluid (und extbase) im Rahmen der TYPO3 Version 5 (Phoenix und Flow) Entwicklungen
  • Menüs mit cObjects HMENU, TMENU, GMENU
    für TYPO3-Seite mit Template Building mit subparts/marks; Nutzung von temp-Objekten
    Einbinden der 2. Ebene, wrapItemAndSub statt einfachem linkWrap für das Wrappen ganzer li-Tags inklusive der Unterlisten (ul mit li),
    Zustände 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
    spezielles HMENU mit rootline für die Erstellung von Breadcrumbs ("Brotkrumen"-Linkliste, Navigationspfad)
    Hinweis: gutes Styling erhalten die Menüs dann durch geeignetes CSS, für Menüs kann man in Seiteneigenschaften auch "Alternative Navigationstitel" konfigurieren
  • cObject GIFBUILDER
    erstellen dynamischer Headerbilder (siehe Marker TRAILER): Bilder erzeugen und kombinieren inklusive Einbettung von Schriften (Tipp: Google Fonts für freie und attraktive Schriftarten), Nutzung der Bilderressourcen von Seiten für den Hintergrund der Headerbilder
    Hinweis: TypoScipt Reference (online docs.typo3.org)
  • Setup-TypoScript organisieren
    TS-Code nach dem config-Block mit Hilfe von temp.xyz Objekten ausgelagert und dann mit Einzeiler die marks/subparts zuweisen: marks.MENU_LINKS < temp.menuGrafic (oder alternativ: marks.MENU_LINKS < temp.menuTexte)
    Templates können auch andere Templats enthalten: in Template-Datensatz - Register "Enthält" kann man andere "Basis Templates einschließen lassen
    alternativ kann man TS-Code auch physisch als Datei auslagern und per "include" in das Setup integrieren
    # Vereinbarung für komplette Routinen in
    # Form von sogenannten temp-Objekten
    # alternativ: den Scriptcode auslagern in Dateien:
    <INCLUDE_TYPOSCRIPT: source="FILE:fileadmin/ts-code/menus.ts">
    temp.menuGrafic = HMENU
    temp.menuGrafic {
            special = directory
            ...
            }
    
  • Modul Datei -> Dateiliste
    Übungen mit dem fileadmin, neue Ordner angelegt und Dateien hochgeladen; BE unterstützt modernes Drag & Drop
  • Suchen in TYPO3
    Hier eine kurze und unvollständige Liste
    1) in TYPO3 ist eine einfache Suchfunktion integriert (s. a. Content Element Suchformular)
    2) Erweiterung indexed_search (unsere Empfehlung)
    3) ein Enterprise Search Server (für/mit Apache) im Gespann mit TYPO3
  • indexed_search (Extension für indizierte, erweiterte Suche)
    die Erweiterung kann nicht nur die Datensätze (T3-DB) sondern auch externe Dokumente von PowerPoint-Folien bis hin zu PDFs durchsuche und die Ergebnisse aufbereiten (config.index_externals = 1); siehe auch Konfiguration im Erweiterungsmanager
     die Erweiterung indexed_search befindet sich bereits im System und kann direkt aktiviert werden; neues Modul Adminwerkzeuge -> Indexierung (Aktualisierung Sprache / Übersetzungen nicht vergessen); Aktivierung der Indizierung mittels TS: config.index_enable = 1; Erstellung einer Page Suche mit dem Plug-In Indexsuche (Achtung: nicht das Suchformular als Inhaltselement sondern Allgemeines Plug-In und dann Indexsuche auswähelen); neues Modul Adminwerkzeuge -> Indexierung
    Bereitstellung Suchbox-TS für unseren Marker "SUCHE" - im form-Tag muss beim action="..." die richtige pid für die Suchseite (siehe Allgemeines Plug-In vom Typ Indexsuche) angeben
  • Mehrsprachigkeit
    nach T3-Verständnis hat eine Grundinstallation (also quasi ein leeres T3) bereits eine (erste) 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 T3-Dachelement (Web - Liste) über Neuen Datensatz hinzufügen
    Dann lassen sich alle Seiten und Elemente auch in dieser Sprache erstellen (z.B. über Web -> Info -> Übersetuungübersicht)
    und danach die Inhaltselemente in der neuen Sprache für diese erzeugen
    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 T3-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:
    # Konditionales für Sprache(n)
    [globalVar = GP:L=1]
      config.sys_language_uid = 1
      config.language = en
      config.locale_all = en_UK
    # Ersetzen des Wrappers für Begrüßung
      page.10.marks.NAVIPFAD.wrap = <br />You are here&nbsp; |
    [global]
    

  • TYPO3-System - Backup (Teil I - erste Annäherung)
    TYPO3 besteht aus
    0) TYPO3-Sources (Quellen / T3-Kern): muss (eigentlich) nicht gesichert werden: ./typo3
    1) TYPO3-Projekt-Dateien: Ordner ./typo3conf, ./uploads, ./fileadmin (, ./typo3temp)
    2) TYPO3-Datenbank: Eportieren und Importieren mittels PhpMyAdmin (MySQL-Dumps; Formate: sql, zip. gz, bz2)

 

  • TYPO3 SiteTYPO3 Site
  • SuchenSuchen
  • Seiten übersetzenSeiten übersetzen
  • DateilisteDateiliste
  • cObject GMENUcObject GMENU
  • MenüsMenüs
 

Fr, 20.06.14

  • tt_news installierttt_news installiert

Freitag, 20.06.2014, 08.30 - 16.00 Uhr

  • Rekapitulation, TN-Fragen
  • To-Do-List: Komplettierung/Rekap Mehrsprachigkeit, Backup TYPO, SEF (Suchmaschinenfreundliche URL, simulate_static_documents), News Verwaltung (tt_news), Redakteure (BE-Benutzergruppen/-Benutzer, Web -> Zugriffe), Arbeitsumgebungen (workspaces)
  • Mehrsprachigkeit (Forts. Übung)
    Übersetzen des Seitenbaums "root (Menü links)" komplett mit allen Seiten und Seitenelementen
    Bereitstellung von Setup-TS für den Marker "SPRACHE":
    Grafisches Menü (GMENU) mit Flaggen zum direkten Umschalten der Sprachen
  • Backup (Teil II - beispielhafte Umsetzung durch Trainer)
  • TYPO3 Ordner und Dateien (eine kurze Übersicht)
    Hautptordner Dateien: sind von den TYPO3-Sources/Quellen (TYPO3-Core/Kern)
        index.php (die eigentlichen TYPO3-Site),
        _.httaccess (Beispieldatei für .htaccess),
         diverse Readme/Info-Dateien
    ./typo3 - der eigentliche TYPO3-Kern (früher noch zusätzlicher Ordner ./t3lib)
    ./typo3temp - temporäre Ablagen (z.B. die Sprachdateien-Downloads, Unterordner ./typo3temp/GB für GIFBUILDER)
    ./fileadmin - der Dateibaum (Datei -> Dateiliste) de5 TYPO3-Site
    ./ uploads - die Verwaltung für "hochgeladenen" Dateien (eigentlich 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;
        Datei LocalConfiguration.php enthält die Konfiguration der Site
            normalerweise mittels Install-Tool bearbeitet
            nur in Ausnahmefällen manuell: siehe DB-Zugangsdaten)
        Datei: PackageStates.php enthält den Status der installierten Pakete/TYPO3-Extensions
  • Erweiterungsmanager
    Aktualisierung von Erweiterungen und Importieren und Installieren der gewünschten Erweiterungen (Keys)
    die Infos über die Erweiterngen werden aktuell in der DB abgelegt (Tabelle: tx_extensionmanager_domain_model_extension - ca.23,5 MB); dadurch ist unsere TYPO3-DB schnell ca. 30 MB groß!
    Hinweis: vorkonfigurierte Distributionen (z.B. Introduction Package - leider aktuell keine vollfunktionsfähiger Install auf Windows-XAMPP)
  • SEF (Search Engine Friendly - Suchmaschinenfreundliche URL - "sprechende" URLs)
    verschieden Umsetzung und viele Erweiterungen möglich
    1) simulatestatic - schnelle und einfache Umsetzung
    2) realurl - ein echter Profi mit vielen Extras, der sich dann auch um die News (s.u.) kümmert
    3) solr - ein Apache basierter Suchserver; ein absolutes Profiwerkzeug mit erheblichen Hostinganforderungen
    Hinweis: wir benötigen jetzt auf jeden Fall eine geeignete .htacces
  • simulatestatic (Simulieren statischer Webseiten-URLs)
    Importieren und Installieren (jetzt in einem Schritt) der Erweiterung mit Schlüssel (Key) simulatestatic
    Apache Webservice Steuerdatei .htaccess erzeugen (Kopie - bzw. Neu Speichern unter - aus der Beispieldatei _.htaccess)
    notwendiges TS-Setup einfügen:
    config {
      ...
      index_enable = 1
      # index_externals = 1
      # für simulatestatic
      simulateStaticDocuments = 1
      simulateStaticDocuments_noTypeIfNoTitle = 1
      ...
    }
    
    Echte Namen für die URL (statt der pid) kann man über die Seiteneigenschaften als "URL-Alias" konfigurieren
  • tt_news (Verwaltung von News in Kategoren)
    Kurzanleitung (nicht unbedingt in dieser Reihenfolge)
    1) Installation tt_news importiert, installiert, aktualisiert und Sprachpakete überprüft/aktualisiert
    in Eigenschaften der Extension die Option USE "General record storage page" deaktivieren
    2) im TS-Setup über Register "Enthält" die Statischen Templates "News settings" und "News CSS-styles" einschließen
    3) Seitenstrukturen für News-Verwaltung und Anzeige erstellen und konfigurieren:
    Ordner "News" (z.B. id=10 - beinhaltet später die News-Kategorien und News
    Seite "Aktuelles" (z.B. id=11 - soll die einzelne gewählte News anzeigen, im Menü verbergen)
    Unterseite "News-Archiv" (z.B. id=12 - soll später das News-Archiv zeigen, im Menü verbergen)
    4) Konfiguration der tt_news-Konstanten ("Einstellungen") über Web - Template - Konstanten-Editor für die Kategorie PLUGIN_TT_NEWS_BASIC: bei "Links and targets" die vier IDs für Starting Point (hier: 10), SinglePID (hier: 11), BackPID (id der Home-Seite, normaler Weise 1), Archive Link parameter (hier: 12) setzen
    5) News-Plug-In Seitenelemente auf Seite "Home" (LATEST Ansicht) und Seite "Aktuelles" (SINGLE Ansicht) erstellen; ggf. dann auch für eine Archiv-Ansicht  (AMENU) auf Unterseite "News-Archiv"
    Übung: Einbau der notwendigen Ressourcen und erstellen von Testkategorie und Testnews
    Zusatzübung: alles (News-Container, Seiten, Seiteninhalte/Plug-Ins) in die erste Website-Sprache (L=1) "übersetzen/integrieren"
  • Inahltselement: Überschrift - Typ Layout
    Konfiguration mit Layout1 bis Layout5 erzeugt Heading (Überschriften Tags) von h1 bis h5 - Wie/Warum? Antwort mit TypoScript-Object-Browser
  • TypoScript-Object-Browser
    Nachschlagen der TS-Einstellungen und Zuweisungen unseres Sytems - eine hierarische, baumartige Struktur, die sich per Mausklicks erkunden lässt; die Überschrift - Layout Typen gefunden im Pfad: lib - stdHeader - 10 (CASE) - Objekte 1 bis 5 mit den passenden dataWRAPs
    man könnte jetzt die entsprechenden TS-Zeilen mit eigenem TS überschreiben; hier wäre aber denkbar den Standardtyp für das Layout zu konfigurieren
  • recycler (Papierkorb)
    (letzte) Installation des Papierkorbs für unser TYPO3-System; kurze Übung mit Löschen/Wiederherstellen von Elementen
  • Passwort Trick
    Zugang zum BE oder gar zum Install-Tool verloren? Einfach Install-Tool aufrufen (Datei ENABLE_INSTALL_TOOL nötig) und Passwort eingeben - das Install-Tool verweigert den Zugriff! Aber: es zeigt den MD5-verschlüsselten (und gesalzenen) HASH-Wert an - diesen Wert dann einfach in der ./typo3conf/LocalConfiguration.php ersetzen
    Tipp: beispielhafte Video-Anleitung (hier jweiland.de) für die Unterstützung und Hilfestellung im Web zu diversen solcher Problemchen
  • Testsite www.typo3-62-testing.local (vorbereitete CMSOD 2.0 TYPO3 Site)
    die fertige Vorlage für unser Seminarprojekt: www.typo3-62-seminar.local
    Techniken für die Nachbereitgung / Übungen:
    BE-Benutzer- und -Gruppen: über Web -> Zugriff (Berechtigungen), über BE-Gruppe "Redakteure" Benutzerrechte gesetzt
    Tipp: über System -> Backend-Benutzer kann man als Admin einfach die Benutzerumgebung per Klick übernehmen
    Workspaces (Arbeitsumgebungen) für größere Redaktionen und für einen Arbeitsablauf (Workflow) in Firmenumgebungen
    Verzeichnisfreigabe eingerichtet für die Redakteure (Unterverzeichnis des ./fileadmin für Redakteure)
    AdminPanel und FE-Editing (Extension feedit) gezeigt
  • Demo: Linux basierter VirtualBox Server
    kurze Darstellung einer virtuellen Linuxumgebung (LAMP) für TYPO3 basierend auf VM-Lösung VirtualBox (heute bei Oracle) und einem Debian OS; volle Unterstützng aller TYPO3-Techniken (siehe Grafiktools) und einfaches Austauschen der TYPO3-Sourcen (des TYPO3-Kerns) durch Symbolische Links -> sehr einfache TYPO3-Aktualisierungen; so hat man dann auch dieselbe Technik wie bei Hoster
  • Feedbackbögen, TN-Bescheinigungen, letzte Fragen,
  • Dokumente und Unterlagen für TN bereitgestellt:
    kompletter XAMPP des Trainers als selbstentpackendes 7z-Archiv für die TN: xampp-cmsod-20140620-1526-nach-bu.exe
    Hinweis: bitte in Pfad C:\xampp-cmsod entpacken
    alle Software-Downloads und Unterlagen der BU-Woche, Screenshots ("Daumenkino"; knapp 200 pro Tag)
    Musterprüfung "TYPO3 - Version 4.5 - CMSOD 1.0 - bitte nach C:\xampp-pruefung) entpacken; eine aktualisierte TYPO3-Prüfung mit Version 6.2 für den CMSOD 2.0 wird ab III/2014 bereit stehen
    auf dieser Website: Download der TypoScripts (Snippets) der Woche und der wichtigsten Dateien

 

  • tt_news installierttt_news installiert
  • tt_news Templatestt_news Templates
  • tt_news Plug-Intt_news Plug-In
  • TypoScript-Object-BrowserTypoScript-Object-Browser
  • Passwort TrickPasswort Trick
  • .htaccess.htaccess

 

Vielen Dank für Ihr überaus freundlichen Feedback und Ihr Interesse an weiteren IT-Seminaren.
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"

© 2018 - Websitedesign und Layout seit 07/2015 - Impressum - Datenschutzerklärung
Nach oben