• typo3.orgtypo3.org

Mit der VHS Braunschweig findet ab dem 19.02.2013 ein Firmenseminar bei der Fa. Metronix zum Thema "TYPO3" statt.

In einem zweitägigen Seminar wollen wir den Einstieg in die Anwendungen des Enterprise-CMS TYPO3 erarbeiten und die notwendigen Techniken für die Firmenwebsite kennenlernen.

Im Vorfeld des Seminars wurden gewünschte Inhalte zum Seminar abgesprochen und definiert. Hier die Rahmendaten unseres Seminars:

Ort: Fa. Metronix Meßgeräte und Elektronik GmbH; Kocherstr. 3; 38120 Braunschweig, Seminarraum
Zeiten: Di. 19.02. - Mi. 20.02.2013; jeweils 09.00 - 16.00 Uhr!

Ich werde unser Seminar mit diesem Beitrag begleiten...
Ihr Trainer Joe Brandes

Versionen und Entwicklungszyklen TYPO3 - LTS: Long Term Support 4.5 und Nachfolger 6.2 LTS (siehe Artikel auf typo3.org)

versionsgraph 03 580

 

 

  • Website typo3.orgWebsite typo3.org

Dienstag, 19.02.2013, 09.00 - 16.00 Uhr

  • Orientierungsphase, TN-Themen
  • 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
  • TYPO3 (Versionen, Varianten)
    Website: typo3.org - Erfinder: Kasper Skårhøj
    Bereitstellung (Download) diverser Packages (Blank, Source, Dummy, Introduction, Government) in verschiedenen Archivformaten (tar.gz, zip)
    Versionen: 4.4 - 4.5 (LTS) - 4.6 - 4.7 - 6.0 (alter Codename: Phoenix - basiert auf Framework FLOW)
    LTS - Long Term Support (eingeführt Jan 2011 - Support bis April/Oktober 2014)
    Seminarwoche mit LTS-Version 4.5.x (Version der Firmenseite)
  • Testserver für Seminar vorgestellt
    Trainer betreibt virtuelle Maschine (Oracle VirtualBox / Debian / LAMP-System) für die Darstellungen der TYPO3-Technik
    wir brauchen für ein TYPO3-System: (Empfehlung für professionelles Testen / Entwickeln für die Firmenseite metronix.de sind fett)
    L) Betriebssystem: Linux
    TYPO3 lässt sich auf diversen OS (Operating Systems) umsetzen; aber: Linux empfohlen! Unter Windows keine einfache Nutzung von Symbolischen Links (s.u.) oder auch Grafiktoolimplementierungen (ImageMagick, GD, Ghostscript)
    A) Webserver: Apache; hier ließe sich alternativ auch ein Windows Server IIS nutzen
    M) Datenbank: MySQL; hier alternativ auch MSSQL, Oracle oder andere DBs
    P) serverseitige Skriptsprache: PHP; unser TYPO3 ist "einfach" gesagt eine riesige Sammlung von PHP-Skripten
    Nutzung von Virtuellen Hosts ergibt Seminaradressen wie testing.metronix.host, semdemo und semdemo2.metronix.host
  • Installation
    komplette Darstellung des Downloads der nötigen TYPO3-Pakete (source + dummy) von der TYPO3-Downloads-Seite; Darstellung der genutzten Symbolischen Links aus der Ordnerstruktur für die eigentliche TYPO3-Seite (also dummy-Ordner) in die TYPO3-Quellen (also source-Ordner)
    Installations-Tool benötigt für Zugang (Pfad: ./typo3/install/) eine Datei ENABLE_INSTALL_TOOL im Ordner ./typo3conf
  • Install Tool
    hat eigenes Kennwort! Dieses kann bei Zugang zum Install Tool geändert werden und wird mit MD5 verschlüsselt in der Konfigurationsdatei typo3conf/localconf.php abgelegt; so kann man über das Standard-Passwort (joh316) und Bearbeitung der localconf.php auch Zugang zum Install-Tool wiederherstellen
  • TYPO3-Source + TYPO3-Site
    Analyse der T3-Source-Ordner und Dateien ("T3-Kern": ./t3lib, ./typo3, index.php) und
    T3-Site-Ordner und Dateien (z.B. Dummy: ./typo3conf, ./fileadmin, ./uploads, ./typo3temp)
    Auf Linux-Systemen Einsatz Symbolischer Links (Befehl ln -s  zur Verdrahtung der T3-Source in T3-Site - dadurch lassen sich die TYPO3-Quellen (Sources / Kern) leicht austauschen
  • Grafikunterstützung (siehe Install-Tool)
    saubere Konfiguration der Grafik-Tools ImageMagick und der PHP-GD-Bibliotheken ist wichtig; hierzu die Tests im Install-Tool für "Image Processing" durchführen und die notwendigen Konfigurationen vornehmen
  • Dummy-Site in Betrieb genommen
    Einwahl in Dummy mittels Standard-Benutzer und Passwort-Kombination (admin / password); Seite im Backend angelegt und über Modul Template ein Typoscript Template (Setup TS) für die Site angelegt; erste Rundgänge im Backend (BE): Übersicht über die Module und Vergleich mit der Firmensite metronix.de
  • Extension Manager (erste Einstellungen)
    Spracheinstellungen für "German" nachgeladen und für das erste Benutzerkonto "admin" über die Benutzer-Einstellungen das Backend (BE) auf "deutsch" gestellt; Aktualiserung der Infos zu Erweiterungen über "Holen" der neuesten Infos aus dem TER (TYPO3 Extension Repository) ergab 5905 Erweiterungen! Jede Erweiterung eindeutig durch ihrem Schlüsselnamen repräsentiert. Erste Beispiele für den Import einer Erweiterung und dann dem Installieren dieser Erweiterung (Trainer installiert lorem_ipsum)
  • Setup-TS
    erste Experimente mit dem Setup-TS aus dem Template unserer Dummy-Site; Änderung der Dokumenttypdefinition der ausgelieferten TYPO3-Seite (Frontend - FE); hierzu immer auch den Quellcode im Browser beachten; z.B. Strg + U bei Browsern außer IE oder auch Firefox-Browser-Erweiterung Firebug)
    Hinweis auf Syntax und Lesweise des TS-Codes; z.B. Rechts vom Gleichheitszeichen stehen Objektnamen (cObjects) PAGE oder TEXT, die zwingend groß geschrieben werden müssen!
  • TYPO3 soll "Webseiten herausgeben" (ohne Anspruch auf Vollständigkeit ;-)
    1) alles per TypoScript kodieren (!)
    2) klassisches Nutzen von HTML/CSS-Vorlagen in Kombination mit Markern (marks) und Subparts (subparts), diese werden dann per TS ersetzt (auch manchmal als Modern Template Buildung bezeichnet MTB)
    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 - Schlüsselname templavoila) - 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) Fluid - moderne Erweiterungen fluid (und extbase) im Rahmen der TYPO3 Version 5 (Phoenix und Flow) Entwicklungen; mittlerweile Extensions als Standards enthalten!
  • Variante 2) mit Markern und Subparts dargestellt
    mit einfachem HTML-Template die Nutzung von Markern und Subparts gezeigt und des nötige Setup-TS gezeigt; wichtig: für die Auslieferung der Inhalte aus der Datenbank (Tabelle tt_content) benötigt TYPO3 das statische Template "CSS Styled Content", das über die Bearbeitung des TS-Templates hinzugefügt werden muss!
    Code:
    # Umsetzung mit Markern und Subparts:
    page = PAGE
    page.10 = TEMPLATE
    page.10 {
        template = FILE
        template.file = fileadmin/template/blanko/template.html
        workOnSubpart = DOCUMENT_BODY
        marks.CONTENT < styles.content.get
        }
    
  • Statisches Template nutzen
    in Setup-TS bewirkt das < Symbol ein Kopieren und styles.content.get ist TS, welches in der aktuellen Seite die Inhalte der Inhaltselemente der Spalte Normal (engl. normal oder Spalten-Postion 0 - colPos 0) aus der Datenbanktabelle tt_content holt
    alternativ würden styles.content.getLeft (getRight, getBorder) die Inhalte aus den jeweils anderen Spalten holen
  • Nachfrage zu HTML & CSS
    Prinzip der Trennung von Inhalt (HTML Seitenbeschreibungssprache; verschiedene Dokumentdarstellungstypen: HTML 4.0, XHTML 1.0 Trans.; HTML5) und der Auszeichnung also dem Design der Elemente mittels CSS (Cascading Style Sheets)
    siehe Website csszengarden.com - immer dieselbe Site, aber je nach genutzem CSS gänzlich anderes Erscheinungsbild
  • "Mindmapping" zum Seminartagende
    Begriffe und Techniken aufgelistet und als einfaches Text-Dok bereitgestellt (ging mittlerweile per Mail an Frau G.)

Hier eine kleine Bildergalerie (Screenshots) aus unserem Seminar - die Teilnehmer erhalten die komplette Serie über alle Tage (503 Screenshots!) als CD:

  • Marker / SubpartsMarker / Subparts
  • Neue MarkerNeue Marker
  • Symbolische LinksSymbolische Links
  • Website typo3.orgWebsite typo3.org
  • ImageMagickImageMagick
  • Über ModuleÜber Module

Simple Image Gallery Extended

 

  • cObject HMENUcObject HMENU

Mittwoch, 20.02.2013, 09.00 - 16.00 Uhr

  • Rekapitulation, TN-Fragen
  • Aktualsierung TYPO3-Source
    Seminardemo-System für Tag 2 (semdemo2.metronix.host) von T3-Version 4.5.22 auf 4.5.23 aktualisiert: Austauch des symbolischen Links von altem zu neuem Quellpfad; danach im Install-Tool - Database Analyzer ein "Compare" empfohlen; danach im Extension Manager die Übersetzungen aktualisieren
  • Wiederholung zu Markern/Subparts
    komplette HTML/CSS-Vorlage in TYPO3-Dummy-Seite eingebaut; Wiederholung zu Ersetzungen von Marker-Positionen mittels styles.content.get; in Beispiel Inhalte aus Spalte "Rechts/Right" unterhalb der Navigation mittels neuem Marker SIDEBARRIGHT eingebaut und mit Setup-TS verdrahtet
  • HMENU
    cObject für hierarches Menü; Beispiele für Navigationsstrukturen mit Textbasierten Menü-Objekten (TMENU) für vertikale und horizontale Navigationsstrukturen
    Exkurs: Navigationen in HTML-Seiten bestehen aus unsortierten Listen (Tags ul für unsortierte Liste und li für die Listen-Items/Objekte); Beispiel für die Umsetzung eines HTML-Gerüsts mit 4 Blöcken (Kopf, Navigation, Inhalt und Fuss/Fuß/Footer) mittels tabellenlosem DIV-Layout und passendem CSS-Styling von einfachen Blöcken untereinander bis hin zu "fließendem" Layout (floating Design) wurde kurz gezeigt
    Anm.: die genutzten Setup-TS basieren auf den Ausführungen in der empfohlenen Literatur und können dort ausführlich dokumentiert gefunden werden; die im Seminar angewendeten Dateien und TS-Schnippsel stelle ich den TN nach dem Seminar zur Verfügung
    ein TS-Beispiel soll an dieser Stelle erwähnt werden: expAll = 1 in Menüstruktur klappt automatisch alle Ebenen der Navigation auf
    weiterer Spezialfall eines hierarchischen Menüs: rootline - Verwendung in "Brotkrumen"-/Breadcrumbs-Navigationen
  • Templavoilá (Umsetzungstechnik für metronix.de)
    Anwendung importiert und installiert; wichtig: mit TYPO3-Dummy-Site 4.5.23 funktioniert "ältere" Version 1.7.0 besser als aktuelle Version 1.8.0
    in Konfiguration von TV auch das klassische Modul Seite zum Bearbeiten von Seiten und Inhalten aktiviert
    beispielhafte Umsetzung des TV-Konzepts nach der Vorgehensweise aus Robert Meyers Buch "Praxiswissen"; Anm.: manches Dialogfenster und Registerkarte aus den Screenshots im Buch nicht mehr aktuell - dann muss man halt schauen
    die fileadmin-Ordnerstruktur muss ./fileadmin/templates (Plural) lauten für TV; eine Mischung von Setup-TS für die klassischen T3-FE-Auslieferungen (s.o.) und TV kann es nicht geben - also: entweder/oder
    Zitat aus "Das TYPO3 Profihandbuch - Der Leitfaden für Administratoren und Entwickler"; F. Ripfel, M. Meyer, I. Höppner; Addison-Wesley
    "templavoila ist schnell installiert und liefert durch den mitgelieferten Wizard relativ schnell Ergebnisse. Die Konfiguration ist jedoch äußerst mächtig und ohne Erfahrung in TYPO3 nicht leicht zu durchschauen."
    Versuch einer Analyse der Umsetzung der Firmenwebsite metronix.de mittels Templavoilá
  • GMENU
    grafisches Menü bei der beispielhaften Umsetzung mit Templaviola-Seitenbaum; hier bitte auf jeden Fall die erwähnte Konfiguration der Grafik-Tools (ImageMagick, GD) optimieren
  • Introduction Package
    die Entwicklergemeinschaft liefert mit dem Introduction Package zu TYPO3 eine komplette Umsetzung mit "Best Practises" - also empfohlenen Vorgehensweisen (Benutzerverwaltung für BE- und FE-User, Mehrsprachigkeit, Suchmaschinenfreundliche URL, Standard-Extensions wie tt_news, Dateifreigaben, Berechtigungen/Zugriffe, ...); die Seite nutzt das klassische Template-Building mit Markern/Subparts über die Erweiterung automaketemplate, die uns das Auszeichnen im HTML-Gerüst mit Markern/Subparts erspart und dafür automatisch bestimmte HTML-Bereiche (z.B. DIV-Blöcke) ersetzt
  • Bilder
    TYPO3 bietet viele Wege, Bilder in Inhaltselementen zu integrieren; Problematisch: alle Wege über "Hochladen" von Dateien in das T3-System kreieren zwar webkonforme passende Grafiken, aber die Originale "verstopfen" mehrfach in Originalgröße den Ordner "./uploads" (siehe Dateien RTEMagicP_ bei Hochladen über den Editor); kurze Übersicht über die unterschiedlichen Datei-Handlings
    Anm.: Nutzung von Bild-Symbol in RTE über Eigenschaften des RTE in den Extensions aktivieren; die Möglichkeit zum Hochladen im RTE dann mittels User-TS in den Eigenschaften eines Benutzers über das Modul Adminwerkzeuge - Benutzer im Register Optionen eintragen (options.uploadFieldsInTopOfEB = 1)
    Hinweis: die Verwaltung der Bilder auf fileadmin und Download PDF-Dateien kann durch die Profi-Erweiterung DAM (Digital Asset Management - Schlüssel: dam; benötigt noch weitere Extensions) extrem aufgewertet werden
  • Fragen? Aber ja, da wäre noch was ...
    Abarbeitung der Fragen aus dem Vorfeld der Planung unseres 2-tägigen TYPO3-Seminars; hier nur Stichworte!
    Bilder bearbeiten und veröffentlichen (s.o.), Kontaktformular (Hinweis auf fileadmin/template/mailformplus_en.html), Sprachen (kurze Einführung - keine AdHoc-Umsetzung in Firmenwebsite möglich), Sprungmarken/Anker in Webseiten (kurze Einführung in Tag a und Inhaltselement "Reines HTML" gezeigt); Besucherzugriffe (Alternative zu Google Analytics mit Tool Piwik);
  • Feedback und letzte Fragen ;-)
  • Seminarunterlagen / Trainerdemo(s) / Screenshots
    wird von mir direkt per CD/DVD bereitgestellt, wenn wir uns das nächste Mal sehen und Ihre weiteren Fragen angehen

Hier ein paar Impressionen von Tag 2:

  • HTML/CSS TemplateHTML/CSS Template
  • Templavoila MappingTemplavoila Mapping
  • Templavoila Setup-TSTemplavoila Setup-TS
  • GD BibliothekGD Bibliothek
  • Introduction PackageIntroduction Package
  • cObject HMENUcObject HMENU

Simple Image Gallery Extended

 

Vielen Dank für Ihr freundliches Feedback und das Interesse an einer weiteren TYPO3-Zusammenarbeit
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
Nach oben