• TYPO3 6.2 LTSTYPO3 6.2 LTS

In dieser Woche steht eine TYPO3-Firmenschulung für die Braunschweiger Firma Metronix (Apex Tool Group) an.  Wir wollen die aktuelle TYPO3 LTS und  deren Einsatz als Internet- und Intranet-Plattform kennenlernen.

Schwerpunkt unserer Veranstaltung ist die Einarbeitung in die aktuellen TYPO3 Techniken (Version 6.2 LTS) an Hand eines topaktuellen LAMPP/TYPO3-Systems, damit wir dann in den nächsten Jahren von den innovativen Überarbeitugen des Enterprise CMS profitieren können und mit "cleanen" Website- und Intranet-Techniken durchstarten können.

Hier die Rahmendaten unseres Seminars:

Ort: Fa. Metronix, Seminarraum
Zeiten: Di. 12.11. - Do. 14.11.2013; jeweils 09.00 - 16.00 Uhr

Wie immer gehört eine beitragliche Dokumentation zu unserem Seminar...

 

To-Do-List nach Seminar: 

  • Screenshots in Beitrag einarbeiten (erledigt - Sa., 16.11.2013)
  • Download für TN/Metronix bereitstellen (erledigt - So., 17.11.2013)
  • CD-mit LAMP/TYPO3-Server (erledigt - So., 17.11.2013)
    eine CD mit komprimierter VirtualBox-VM, Screenshots aus Seminar und Infos rund um TYPO3, unser Seminar und die gebaute(n) Beispielsite(s)
    Hinweis: Endergebnis in Test-Domain site615.metronix in Verzeichnis /var/www/site615

 Ihr Trainer Joe Brandes

 

TYPO3 Testserver

Beispielinstallation TYPO3 Server

  • Betriebssystem: Debian "Wheezy" 7.2 (64-Bit)
  • LAMP
    für die Grundinstallation eine Linux-basierten Apache / MySQL / PHP / phpMyAdmin Gespanns gibt es diverse Anleitungen im Netz; im Grunde reichen hier erst einmal die folgenden Pakete (natürlich immer mit Anweisung apt-get install <paketname>)
    apache2
    mysql-server
    libapache2-mod-php5
    phpmyadmin
  • Verfeinerung des Systems für die TYPO3 Anforderungen
    libtiff-tools
    gettext (holt auch git)
    libpng (weggelassen)
    pdflib (weggelassen)
    freetype (libfreetype6 vorhanden, libfreetype6-dev installiert)
    php-pear
    php-apc (Alternative PHP Cache;
        ln -s /usr/share/doc/php-apc/apc.php /var/www/apc.php
        Aufruf: http://<server>/apc.php
    php5-curl (möglichst auch curl)
    sendmail (entfernt Fehleranzeige in 6.1.5; aber ohne Konfiguration nicht funktionsfähig)
  • php.ini
    Anpassungen für die TYPO3-Testserverumgebung für möglichst reibungsloses Entwickeln
    max_execution_time = 300 (statt 30)
    upload_max_filesize = 10M (statt 2)
    post_max_size = 10M (statt 8 und gleich mit upload_max_filesize)
  • Apache2 Servername
    Start des Apache bemmängelt fehlenden Servername
    Konfiguration Apache /etc/apache2/conf.d/name mit Inhalt:
    ServerName     metronix
    
  • Virtual Hosts (beipsielhafte Umsetzungen sind in der Seminarserverumgebung zu finden)
    Konfiguration des Servers auf DHCP für Seminar bei Metronix - später natürlich im Einsatz statisch
    (bei mir im Büro: 192.168.2.66 - im Seminar bei Metronix 10.133.22.107)
    hosts-Datei: (Windows: C:\Windows\system32\drivers\etc\hosts)
    <IP-Adresse> metronix           www.metronix   
    <IP-Adresse> site2013.metronix  www.site2013.metronix
    <IP-Adresse> tn01.metronix      www.tn01.metronix
    <IP-Adresse> tn04.metronix      www.tn04.metronix
    
    auf Server: /etc/apache2/site-available
    neue Site site2013 aus default kopieren und anpassen
    siehe: ServerName und ServerAlias und Pfade und AllowOverride (Indexes, FileInfo)
    a2ensite site2013 (erstellt den nötigen Sym-Link in /etc/apache2/site-enabled)
  • Apache2-User herausfinden:
    ps -aux | grep apache2
    wichtige Konf-Datei: /etc/apache2/envars  (export-Einträge ansehen)

 

Tag 01

  • System EnvironmentSystem Environment

Dienstag, 12.11.2013, 09.00 - 16.00 Uhr

  • Sammlung der Themen für unsere Veranstaltung - wir haben uns für die drei Tage orientiert
  • 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 ab Jan 2011) - 4.6 - 4.7 - 6.0 - 6.1 - 6.2 (LTS ab Dez 2013)
    TYPO3 NEOS: 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 Dezember 2013
    Seminar mit letzter aktuellster Vorversion 6.1.5, weil die 6.2.0 aktuell noch mit Status "Beta1" keine Extensions installieren lässt
  • 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; ab Version 6.2 ist dann der Ordner ./t3lib verschwunden
  • TYPO3 roadmap für 6.2 LTS:
    Infos zur 6.2 Version siehe online unter http://typo3.org/news/article/typo3-cms-62-lts-beta1-released/
    Feature Freeze (beta1): October 15th, 2013
    Beta2: November, 12th
    Release Candidate: around December, 3rd
    Final Release: December, 10th
  • TYPO3 Seminarumgebung (wird nach Seminar komplett an Metronix übergeben!)
    über den Trainer-Laptop wurde eine Serverumgebung für die Teilnehmer bereitgestellt
    Betriebssystem: Linux Debian "Wheezy" 7.2 (als Virtuelle Maschine unter VirtualBox)
    Webserver: Apache 2.2.22; Datenbank: MySQL 5.5.31; PHP 5.4.4-14+deb7u5; phpMyAdmin 3.4.11.1deb2
    komplette Umgebung nach Anleitung der TYPO3-Installationsanleitung optimiert - eine gesonderte Erläuterung für den sauberen Nachbau des optimierten Debian LAMP Systems folgt als Ausarbeitung in diesem Beitrag
  • Trainingsdomains eingerichtet für Teilnehmer
    die TN haben auf dem Server Projektordner tn01 bis tn04 bekommen
    hieraus wurden mit Hilfe der hosts-Datei auf den TN-Windows-PCs die Domains tn01.metronix bis tn04.metronix
    kurzer Hinweis auf die Virtual Hosts Konfigurationen des Apache2 (/etc/apache2/sites-available und .../sites-enabled und Apache2 Tool a2ensite)
  • Introduction Package TYPO3 Version 6.1.5
    komplette neue Installation eines IP-T3-Projekts und dessen Inbetriebnahme auf dem Seminarserver
    hier stellt die T3-Gemeinschaft "Best Pracitses" für ein T3-Projekt zusammen an dem man sehr viel über das System lernen kann!
  • TYPO3 soll "Webseiten herausgeben" (Varianten)
    1) alles per TypoScript kodieren (wohl eher nicht ;-)
    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; mittlerweile Extensions mit Fluiden Templates als Standards enthalten
    Beispiel für überarbeitete Extension: alt tt_news - neu news
  • CSS Styled Content (css_styled_content)
    Statische Templates einschließen - hier für Content - später auch für Erweiterungen; sonst bleiben die Positionen in der Website leer! Findet man über die Bearbeitung des Templates über "Vollständigen Template-Datensatz bearbeiten" im Register "Enthält"
  • 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; Passwort für User admin neu gesetzt
  • Install Tool
    hat eigenes Kennwort! Dieses kann bei Zugang zum Install Tool geändert werden und wird mit verschlüsselt in der Konfigurationsdatei typo3conf/localconf.php abgelegt;
    Neu ab 6.x: typo3conf/LocalConfiguration.php (ohne manuelle Bearbeitung)
  • TYPO3 Grafikunterstützung (mit GD-Bibliothek und Grafik-Tools - hier gm für GraphicsMagick)
    GD-Unterstützung gecheckt und konfiguriert über Install Tool - Image Processing
    Grafik-Tools: Imagemagick (www.imagemagick.org) oder Graphicsmagick (www.graphicsmagick.org)
    Anm.: hier werden jetzt in einer guten TYPO3-Umgebung unter Linux auch die PDF- und AI-Formate manipulieren
  • cObject FLUIDTEMPLATE
    mit moderner Fluid/Extbase Technik die Seiten ausliefern; Darstellung auf gesonderter Anleitung in diesem Beitrag

 

  • FLUIDTEMPLATEFLUIDTEMPLATE
  • TYPO3 6.2 Beta1TYPO3 6.2 Beta1
  • Struktur 6.1.5Struktur 6.1.5
  • SprachenSprachen
  • System EnvironmentSystem Environment
  • GrafiktoolsGrafiktools

FLUIDTEMPLATE

Anleitung für Semiar-Teilnehmer erarbeitet und bereitgestellt:

  • css_styled_content (Statisches Template einschließen)
    bitte nicht Statisches Template css_styled_content für die Ausgabe mittels styles.content.get vergessen!
    Bearbeitung des Templates über "Vollständigen Template-Datensatz bearbeiten" im Register "Enthält"
  • Setup-TS (TypoScript)
    die Einbindung des cObject FLUIDTEMPLATE und dessen Konfiguration im Setup-TS:
    page.10 = FLUIDTEMPLATE
    page.10 {
       file = fileadmin/default/templates_fluid/template.html
       partialRootPath = fileadmin/default/templates_fluid/partials/
       layoutRootPath = fileadmin/default/templates_fluid/layouts/
       variables {
           contentGet < styles.content.get
      }
    }
    

    die Variblen sind quasi die Nachfolger der "alten" Subparts
    früher: subpart.inhalt < styles.content.get
    jetzt: variables.contentGet < styles.content.get
  • Ordnerstruktur erstellen im Modul Dateiliste
    fileadmin/default/templates_fluid/partials und fileadmin/default/templates_fluid/layouts
  • Fluid-Template-Datei: (siehe TS oben)
    fileadmin/default/templates_fluid/template.html
    mit dem Inhalt:
    <f:layout name="default" />
    <f:section name="body">
        <!--TYPO3SEARCH_begin-->
        <f:format.html parseFuncTSPath="">{contentGet}</f:format.html>
        <!--TYPO3SEARCH_end-->
    </f:section>
    

    es handelt sich um fluid-Tags (beginnen mit f:) und diese werden sauber geschlossen (siehe /)
    hier erkennt man auch die Fluid-Variablen {contentGet}, die in geschweiften Klammern stehen
    der Fluid-Tag f:layout legt die Layout-Datei (eigentliches Webgerüst für Ausgabe) fest: hier default
    daraus resultiert der Name der Layout-Datei im Layouts-Ordner (siehe oben TS): ./layouts/default.html
  • Layout-Datei
    das eigentliche Webgerüst mit dem die Fluidtemplate-Technik Ihre Webseite am Frontend (FE) ausliefert
    in unserem ersten einfachen Beispiel einfach nur ein div-Block:
    <div id="test">
        <f:render section="body" />  
    </div>
    

    dieses Gerüst kann man mit beliebigen weiteren div-Blöcken und Tags natürlich dann zu einer "richtigen" Webseite aufrüsten!
  • Caching: (ein Hinweis)
    da an dieser Technik auch Dateien (auf fileadmin) beteiligt sind, muss man beim Testen im FE bedenken, vorher den Seiteninhalts-Cache zu löschen
    außerdem empfiehlt es sich von Zeit zu Zeit auch den Browser-Cache zu löschen, wenn man lange in demselben Browser dieselben Seiten öffnet.

 

 

Tag 02

  • Text und BilderText und Bilder

Mittwoch, 13.11.2013, 09.00 - 16.00 Uhr

  • Fluidtemplate Technik nutzen (Wiederholung)
    die beteiligten Teile:
    Einbinden des statischen Templates css_styled_content über die Template-Record Bearbeitung (Register Enthält)
    Setup-Typoscript für Einbindung der Template-Datei (file = .../template.html)
    Dort wird in unserem Beispiel ein Layout (f:layout name default) und eine Sektion zugewiesen
    Das Layout aus ./layouts/default.html wird mit Platzhaltern (f:format.html {variablenName} und dem Renderer für die Sektion gefüllt
    Die Platzhalter werden im Setup-TS mittels variables.variablenName "gefüllt" (z.B. variables.variablenName < temp.variablenName)
    Das benötigte TS in dem temp.variablenName Objekt definieren
  • Konstanten
    mit dem statischen Template können über den Konstanten-Editor der Template-Verwaltung jetzt auch bestimmte Grundeinstellungen für die Auslieferung von T3-Quellcode eingestellt werden: Heading-Ebene, verschiedene Bildgrößen, Links/Linkverhalten
    Übung: Heading-Tag für Überschriften von h1 auf h2 umgestellt
  • 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 - Amazon-Link) und "Praxiswissen TYPO3" (OReilly Verlag, Mittwald-Mitarbeiter Robert Meyer) wurden  eingeschätzt und empfohlen
  • YAML
    Yet Another Multicolumn Layout - ein Framework für die automatisch richtige Darstellung in beliebigen Browsern inklusive Unterstützung von Responsive Design (Darstellung automatisch optimiert in iPhone, Smartphones)
    Testen der Webgrößen z.B. mit Mozilla Firefox: Umschalten + Strg + M
    Hinweis: kostenlose Nutzung des YAML unter Einhaltung der Lizenz - weiterhin kostenlos bei Link auf Seite und/oder Impressum-Nennung
    Bereitstellung der notwendigen YAML-Layout und CSS-Dateien im Ordner fileadmin/default/templates/
  • CSS-Dateien integrieren
    per Setup-TS mittels page.includeCSS.file10 = .../yaml/core/base.css (Hinweis YAML: alles im Ordner Core bitte nicht ändern!)
    über Angabe media auch mögliche Zuordnung zu CSS-Nutzung screen, print oder anderen Ausgabetechniken (braille)
  • Menüs - Navigationsstrukturen
    hier Platzhalter subNavi, headerNavi, headerTopNavi
    hier beispielhafter TS-Code für 3 Menü-Platzhalter und Beispiele für temp-Objekte
    temp.headerCompany = TEXT
    # temp.headerCompany.value = <h1>Apex Tool Group</h1>
    temp.headerCompany.value = <img alt="Logo" title="logo" src="/fileadmin/default/templates/images/logo.png" />
    temp.subNavi= HMENU
    temp.subNavi{
             # excludeUidList = 89, 88
             entryLevel = 1
             wrap = <ul> | </ul>
             
       # Die erste Ebene:
             1 = TMENU
             1.expAll = 1
             1.NO.wrapItemAndSub = <li> | </li>
             
       # CUR-Zustand der ersten Ebene:
             1.CUR = 1
             1.CUR < .1.NO
             # 1.CUR.wrap = <strong> | </strong>
             1.CUR.ATagParams = class="active"
             # 1.CUR.allWrap = <strong> | </strong>
             
       # ACT-Zustand der ersten Ebene:
             1.ACT = 1
             1.ACT < .1.CUR
       # Die zweite Ebene:
             2 = TMENU
             2.wrap = <ul class="subnavi"> | </ul>
             2.NO.wrapItemAndSub = <li> | </li>
             
       # CUR-Zustand der zweiten Ebene:
             2.CUR = 1
             2.CUR < .2.NO
             2.CUR.ATagParams = class="active"
       }
    temp.headerNavi < temp.subNavi
    temp.headerNavi {
             entryLevel = 0
             special = directory
             special.value = 1
             2 >
    }
    temp.headerTopNavi = HMENU
    temp.headerTopNavi {
             
             special = list
             special.value = 15, 16, 24, 25
             wrap = <ul> | </ul>
             
       # Die erste Ebene:
             1 = TMENU
             1.expAll = 1
             1.NO.wrapItemAndSub = <li> | </li>
             
       # CUR-Zustand der ersten Ebene:
             1.CUR = 1
             1.CUR < .1.NO
             1.CUR.ATagParams = class="active"
             
       # ACT-Zustand der ersten Ebene:
             1.ACT = 1
             1.ACT < .1.CUR
    }
    temp.pageTitle = TEXT
    temp.pageTitle.field = subtitle // title

    insbesondere im Objekt headerTopNavi haben wir uns die "Spezial-Liste" vorgenommen und die IDs auf die von uns erstellten "Spezialseiten - Impressum" angepasst
    in tempHeaderCompany wird ein Bild in der Website ersetzt (hier transparentes logo.png)
    in pageTitle wird aus der DB der "Untertitel oder Titel" der aktuellen Seite ersetzt
  • Seiteninhaltselemente
    Übungen mit verschiedenen Inhaltselementen: "Text",  "Text und Bilder", "Tabelle"
    Hinweis zu Tabellen: Für den Zugang zum Tabellenassistenten muss das Element einmal kuzr gespeichert und neu geöffnet werden, die Spaltenköpfe können als Überschriften ausgewiesen werden (aus td werden th-Tags), ein Zusammenfassung (table summary) für Barrierefreiheit sollte hinterlegt werden
  • Allgemeines:
    Strategien zur Umsetzung der TYPO3-Techniken des Seminars im Firmeneinsatz (Intranet und Internet), Diskussion rund um Techniken HTML & CSS (Trennung von Inhalt/Layout und Design - Beispielwebsite: CSSZenGarden)

 

  • TYPO3 LiteraturTYPO3 Literatur
  • KonstantenKonstanten
  • YAML CSS FrameworkYAML CSS Framework
  • CE - Content ElementsCE - Content Elements
  • Text und BilderText und Bilder
  • TabellenTabellen

Tag 03

  • 3-Spalten Raster3-Spalten Raster

Donnerstag, 14.11.2013, 09.00 - 16.00 Uhr

  • To-Do-List Tag 03
    Forts. Inhaltselemente Dateilinks und Sitemap, System-Notizen (Post-Its), Mehrsprachigkeit (TS für page.config und Sprachen), Suchen mit indexed_search, Erweiterung news, ...
  • Inhaltselemente (Forts.)
    Dateilinks - ermöglichen die automatische Bereitstellung von "Downloads" für z.B. PDFs inklusive Vorschau, Download-Größe und Berschreibungen
    Sitemap - siehe Spezial-Menüs und dann bitte als Typ Sitemap (statt Menü Voreinstellungen)
  • BE-Layouts
    mit eigenem Systemordner können jettz Datensätze angelegt werden, mit denen man die Spalten im Backend (0 - Normal, 1 - Links, 2 - Rechts, 3 - Rand) in gewünschter Darstellung ein-/ausgeblendet werden; die angelegten BE-Layouts lassen sich dann über die Seiteneigenschaften (im Seminar natürlich "Wurzel-Seite" Home) auswählen und dann auch gerne für alle untergeordneten Seiten nutzen
    Übung: wir lassen nur noch 0 (Normal) und 1 (Links) anzeigen, also 2 (Rechts) und 3 (Rand) verschwinden
  • System-Notizen
    die Post-ITs für die Seitenansichten über das Modul Liste als nenen Datensatz für eine Seite anlegen
  • jquerycolorbox (Extension mit Lightbox-Effekt)
    Erweiterung nachinstalliert und hier wieder Hinweis auf Statische Templates einfügen lassen (Register "Enthält" im Dialogsystem zum kompletten Template)
  • Mehrsprachigkeit
    Hinweis: ein Grundsystem TYPO3 hat eine Sprache "0" und Sie entscheiden einfach mit welcher Sprache (Texte und Co) Sie Ihr System füllen
    Damit TYPO3 weiß, welches diese Standard-Sprache ist, muss folgender Code für die Konfiguration (config) bereitgestellt werden:
    config {
      language = de
      locale_all = de_DE
      metaCharset = utf-8
      htmlTag_langKey = de-DE
      linkVars = L
      sys_language_uid = 0
    }
    
    zu beachten ist die sys_language_uid mit der "0", die Festlegung der Variable "L" für die Anfrage der Sprache (&L=0 bzw. dann später &L=1) und die Einstellung für Sprache (language) und locale_all (für die Landesspezifischen Darstellungen von Datum/Uhrzeit, Währungen und Co)
    Damit das System überhaupt eine "andere" Website-Sprache hat, muss diese über die TYPO3-Wurzelseite (nicht Home!) als neuer Datensatz "Website-Sprache" angelegt werden (bei uns: Englisch - Flagge auswählen ergibt neuen Datensatz mit ID 1)
    Jetzt müssen wir TYPO die neue Website-Sprache beibringen (config für den Fall, dass L=1 gefragt wird)
    # wenn der globale Parameter L auf 1 steht:
    [globalVar = GP:L = 1]
    config.sys_language_uid = 1
    config.language = en
    config.locale_all = en_UK
    config.htmlTag_langKey = en-UK
    [global]
    
    ein sogenanntes "Konditionales TS-Element
    jetzt müssen alle Seiten über Modul Info - Übersetzungsübersicht auch für die Website-Sprache angelegt werden und die Inhaltselemente (Content Elements) der Reihe nach kopiert und angepasst werden (bzw. natürlich gerne auch original Neu angelegt werden)
    nun lassen sich die Seiten im Frontend mittels Manipulation der URL (Adresse im Browser) manuell umschalten:
    aus index.php?id=40L=0 (bzw. einfach index.php?id=40) wird dann index.php?id=40&L=1
  • einfacher Sprachschalter mit TypoScript
    über die mittlerweile bekannte "Fluid-Platzhaltertechnik" (variables) lässt sich mit dem folgenden TS ein einfacher Deutsch/Englisch-Umschalter basteln:
    Anm.: bei den Links index.php musste ich ein Leerzeichen reinschummeln (index .php), weil sonst meine Code-Darstellung "spinnt"
    temp.headerLanguages = COA
    temp.headerLanguages {
          10 = TEXT
          10.wrap = <a href="/index .php?id=|&L=0">Deutsch</a>
          10.field = uid
          20 = TEXT
          20.value = &nbsp;|&nbsp;
          30 = TEXT
          30.wrap = <a href="/index .php?id=|&L=1">Englisch</a>
          30.field = uid
        }
    
    die beiden Links "Deutsch" und "Englisch" erscheinen so allerdings auch auf den englischen Seiten, was man mit dem folgenden TS ändern kann:
    # wenn der globale Parameter L auf 1 steht:
    [globalVar = GP:L = 1]
    temp.headerLanguages.10.wrap = <a href="/index .php?id=|&L=0">german</a>
    temp.headerLanguages.30.wrap = <a href="/index .php?id=|&L=1">english</a>
    [global]
    
    hier wieder ein konditionales TS
  • indexed_search (eine schnelle und sehr mächtige Erweiterung zum Suchen)
    Installation direkt im Erweiterungsmanager (Hinweis: Extension bereits im System!)
    notwendiges TS: config.index_enable = 1
    Seiten werden durch Aufruf in den Index aufgenommen - siehe Modul Indexierung
    einfacher Einbau der Suche mit eigener Spezialseite - Suche - Inahltselement Plug-Ins und dann das Plug-In genauer konfigurieren (Indexsuche)
    die Suche über unser Spezial-Listen-Menü (oben links) integrieren
  • gridelements (Erweiterung)
    Grundfunktionen für das BE: Inhalte von anderer Seite, zusätzliche Menüleiste für Inhaltselemente mit Drag&Drop
    Kurzanleitung: (3-spaltiges Raster mit Spalten Links - Mitte - Rechts)
    installieren über Erweiterungmanager
    statisches Template nicht vergessen!
    anlegen von Layout-Rastern: Ordner für Gridelements erstellen
    neues CE Backend Layout erstellen (Listenansicht Ordner gridelements)
    Assistent für Layout nutzen - ID bitte mindestens ab 4 besser gleich 10 (siehe normal 0 - Links 1... - Rand 3)
    Rasterelement wie ein Inhaltselement einfügen
    Setup-TS für Gridelements: (damit die div-Blöcke unseres Rasters auch die gewünschten HTML-Tags und CSS-Klassen erhalten)
    tt_content.gridelements_pi1.20.10.setup {
        # ID des Gridelements 
        1 < lib.gridelements.defaultGridSetup
        1 {
           columns {
               # colPos ID
               10 < .default
               10.wrap = <div class="col1">|</div>
               # colPos ID
               11 < .default
               11.wrap = <div class="col2">|</div>
               # colPos ID
               12 < .default
               12.wrap = <div class="col3">|</div>
            }
            wrap = <div class="col-alles">|</div>
         }
    }
    
    
    dieses ist die "kurze" Variante mit einfachen div-Blöcken für die Darstellung des Prinzips; im Seminar haben wir dann die "richtigen" div genutzt, damit dann mit Hilfe des CSS-Rahmenwerks YAML der Dreispalter unserer Übung ausgegeben wurde (CSS-YAML erkennbar an Kürzeln ym-...)
  • Videotutorials (und mehr - Hinweis auf Online-Infos)
    hier als Beispiel: Portal des TYPO3-Hosters jweiland (Link)
    ich weise außerdem auf meine diversen Infoseiten und Linksammlungen (CMS Online Designer) auf diesem Portal zum Thema TYPO3, Joomla und Co hin
    Anm.: da finden Sie auch eine Video-Reihe zur Extension "news" für die an Tag 03 leider keine Zeit mehr war, die ich aber für die Metronix-Seite bereits eingebaut habe und zur Verfügung gestellt wird

 

  • BE-LayoutsBE-Layouts
  • Interne NotizInterne Notiz
  • Konditionales TSKonditionales TS
  • Seiten EnglischSeiten Englisch
  • DateilisteDateiliste
  • Menü / SitemapMenü / Sitemap
  • Grid ElementsGrid Elements
  • 3-Spalten Raster3-Spalten Raster
  • Grid mit TS gestyltGrid mit TS gestylt

 

Vielen Dank an dieser Stelle nochmals für Ihr überaus freundliches Feedback zu unserem anregenden und anstrengenden 3-Tage-Intensivseminar. Auch mir haben die 3 Tage sehr viel Spaß gemacht.

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