• typo3.orgtypo3.org

In der Woche ab Montag, dem 08. Juni 2015 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. 08.06. bis Fr. 12.06.15; 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
Prüfungstermin: 01.07.2015; 17.00 Uhr Raum 2.11 (4 TN)
Status Erstkorrektur: erledigt - 05.07.2015 - alle TN haben - mit teilweise sehr guten Leistungen - bestenden!
Ein stolzer Trainer gratuliert herzlichst!

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

 

Mo, 08.06.15

Montag, 08.06.2015, 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!
    Software (Empfehlungen - bzw. als Portable Apps beim XAMPP-CMSOD):
    Browser Mozilla Firefox, Packer 7-Zip, Editor Notepad++ (siehe Toolsammlung zum CMS Online Designer)
  • Windows-XAMPP
    Konfigurationen nötig auf Windows- (also Client-) und Server-Seite (XAMPP)
    Anm.: Trainer Joe Brandes stellt einen komplett für den CMS Online Designer und TYPO3 vorkonfigurierten und dokumentierten XAMPP-CMSOD (basierend auf XAMPP 1.8.3-4 für Windows) bereit!
    Dieser XAMPP hat eine integrierte Konfigurations-Dokumentation - diese Doku des Seminar-XAMPP werde ich auch auf diesem Portal (siehe Link zu CMSOD 2.0) bereitstellen und wird später in einer speziellen CMSOD-Website (TYPO3-Technik) aufbereitet.
  • XAMPP-CMSOD (Version 2.0)
    XAMPP Seminar-Pfad:  C:\xamppp-cmsod  für die vorbereitete Umgebung!
    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 (Client-Seite):
    1) Systemvariable OPENSSL_CONF einrichten (Anleitung in der Doku zum CMSOD 2.0)
    Win + Pause ruft die Systemeinstellungen auf
    Erweiterte Systemeinstellungen (oben links) anklicken
    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
    Windows User ab- und wieder anmelden (um Variable neu einzulesen)
    Natürlich XAMPP wieder starten
    openssl-conf-800px

    später ggfs. auch VirtualHosts einrichten für "echte Domänen": (Anm.: heute nicht konfiguriert)
    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 - Einsatz im Seminar: TYPO3 6.2.12)
    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 -
    6.0 - 6.1 - 6.2 (LTS ab 25. März 2014 bis min. März 2017) -
    7.0 - 7.1 - 7.2 (wahrscheinlich dann 7.6 LTS Ende 2015)
    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 TYPO3-Extensions, ...) spezialisiert und bieten TYPO3-Projekte auf Mausklick!
    Hosterbeispiele: Mittwald oder JWeiland
  • Installation:  Version: 6.2.12  (LTS)
    Installationsarchiv (*.zip) für die Version entpacken in C:\xampp-cmsod\htdocs\typo3\typo3-seminar
    Aufrufen der Installation mittels http://localhost/typo3/typo3-seminar
    Entsperren der Installation mittels Datei FIRST_INSTALL
    Zugang zum Datenbankserver (mit XAMPP Standard-User: root / "leeres Kennwort") und vorbereitete DB "typo3_seminar" anlegen oder eine neue DB anlegen lassen (geht nur in XAMPP-Umgebung - nicht beim normalen Hoster!)
    Anm.: entweder DB-Konnektion mittels Netzwerkverbindung oder über Socket (hier selber Rechner Webserver / Datenbankserver und dateiorientiert - also etwas schneller)
    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): http://localhost/typo3/typo3-seminar/typo3   (siehe auch Ordner-Struktur TYPO3-Projekt)
    Install-Tool (URL): http://localhost/typo3/typo3-seminar/typo3/install  (leitet dann auf das Install-Tool mit eigenem Kennwort - ohne Benutzer)
  • Backend-Sprache (BE) "german"
    über Modul Admin Tools -> Language die Sprache "German" für alle (möglichen) Extensions des TYPO3-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 verschlüsselt in der Konfigurationsdatei typo3conf/LocalConfiguration.php abgelegt (Bitte: 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!
  • 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-6.8.8-7\" 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: gdlib_png (1), im_path, im_path_lzw (Pfade siehe oben), colorspace (sRGB)
    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 Zuweisung links vom "=" kann selbst gewählt werden, also z.B. page = PAGE oder auch seite = PAGE
  • TypoScript-Experimente (Setup-TS)
    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
    Kommentieren mit #
    Einwickeln von Objekten mittels "wrap"
    # Default PAGE object:
    seite = PAGE
    
    seite.config.doctype = html5
    seite.meta.DESCRIPTION = Test mit TYPO3
    seite.meta.KEYWORDS = TYPO3, Bildungurlaub, VHS Braunschweig
    seite.meta.author = J. Brandes
    
    seite.10 = TEXT
    seite.10.value = <h1>HELLO Joe</h1>
    seite.20 = TEXT
    seite.20.value = Das ist mein erster Absatz!
    seite.20.wrap = <p> | </p>
    
    # hier jetzt mit Containment
    seite.30 = TEXT
    seite.30 {
    		value = Das ist mein nächster Absatz!
    		wrap = <p> | </p>
    		}
    
    # Kopie mittels < Zeichen:		
    seite.40 < seite.30
    seite.40.value = Das ist der kopierte Absatz!
    
  • Nachfragen:
    z.B. "HTML & CSS ?" - Hinweis auf csszengarden.com - Super Beispiel für die Trennung von Inhalt (HTML) und Design (CSS). Dazu kommt dann noch ein wenig JavaScript (JS), damit z.B. auch Bilder schön dargestellt werden (siehe Bildergalerien wie Lightbox)
    z.B. "Client-/Server-Prinzip" - für uns diese Woche mit "Webtechnik - WWW  -World Wide Web": also Web-Client (Browser) fragt bei Webserver nach Informationen (Durchführung eines REQUEST) - Auslieferung der durch TYPO3 erzeugten Dateien an den Client (Browser); das Ganze ist eine "Kopiermaschine"

 

  • $TYPO3_CONF_VARS['GFX']$TYPO3_CONF_VARS['GFX']
  • TS Template fehltTS Template fehlt
  • Hello WorldHello World
  • XAMPP-CMSODXAMPP-CMSOD
  • Openssl UmgebungsvariableOpenssl Umgebungsvariable
  • FIRST_INSTALLFIRST_INSTALL

Di, 09.06.15

Dienstag, 09.06.2015, 08.30 - 16.00 Uhr

  • Heute: ausführliche Rekapitulation und Darstellung der Themen des Montag,
    TN-Fragen (Diverses)
  • Trainer zeigt Durchlauf einer neuen TYPO3-Installation "./typo3-aktuell" inklusive Install-Tool (erste GFX Konfigurationen), einer ersten Startseite und einem Template (TypoScript Snippet von Montag genutzt!) - fertich ;-)
    hier der "kurze Ablauf"
    1) Inhalt des TYPO3-Packages (zip) in neuen Projektordner sauber entpacken
    2) Url in Browser öffnen http://localhost/typo3/typo3-aktuell
    3) Datei FIRST_INSTALL zum Freischalten der Installation in Projektordner legen
    4) Install-Routine durchführen (Hinweis: DB beim Hosting vorher anlegen)
    5) BE-Anmeldung - Install Tool aufrufen - GFX (Graphics) konfigurieren
    6) Übersetzungen "German" aktualsieren - Bentzereinstellungen auf "Deutsch" umstellen
  • Übung für TN:
    zweite TYPO3-Installation für Teilnehmer, Probleme geklärt und Techniken verinnerlicht
  • 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
    Tipp: im Notepad++, der in meinem XAMPP-CMSOD eingebaut ist, ist die Syntax-Unterstützung bereits eingebaut
  • Statische Templates (Hier: css_styled_content)
    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)
    Hier folgt ein Auszug aus dem TS-Code, den wir mit dem statischen Template css_styled_content erhalten
    # Clear out any constants in this reserved room!
    styles.content >
     
    # get content
    styles.content.get = CONTENT
    styles.content.get {
     	table = tt_content
     	select.orderBy = sorting
     	select.where = colPos=0
     	select.languageField = sys_language_uid
     }
     
    # get content, left
    styles.content.getLeft < styles.content.get
    styles.content.getLeft.select.where = colPos=1
    
  • Seitenstrukturen und Hierarchien
    die Hierarchien ausgehend von dem TYPO3-Root beachten (siehe TYPO3-Symbol); eine gute Planung (Strukturierung) der Website ist wichtig, kann bei einem CMS aber flexible geändert werden (im Gegensatz zu statischen Websites!)
    Seitenbaum erstellt und Inhaltselemente erstellt (Text, Text und Bilder, Tabellen); 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=6
    Tipp: mit 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
  • Spaltenpositionen (colPos) - Übersicht:
    colPos englisch deutsch CSS_STYLED_CONTENT
    0 normal Normal < styles.content.get
    1 left Links < styles.content.getLeft
    2 right Rechts < styles.content.getRight
    3 border Rand < styles.content.getBorder
  • 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
  • Erweiterungs Templates (+ext)
    nicht verwechseln mit den nötigen TS-Templates für Erweiterungen! Sondern 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
    Übung: meta-Tags überschreiben, Inhalte von TS-Objekten (TEXT - value) überschrieben
  • Inhaltselemente (Content Elements - CE)
    Übungen: Text, Text und Bilder (Übungen mit großen Bildern mit Speichern der Bilder im fileadmin-Ordner user_upload),
    Tipp für Tabellen: 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/reinkopieren
  • Constants (erste Gehversuche)
    über das statische Template css_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 bzw. "Bilder im Text"
  • Ausblick auf Morgen: "Modern Template Buildung (MTB)" - wir nutzen HTML-Vorlagen mit Platzhaltern (Marker und Subparts) und lassen diese mittels TypoScript ersetzen.

 

 

  • CE TabelleCE Tabelle
  • Template BuildingTemplate Building
  • Statische TemplatesStatische Templates
  • Modul FunktionenModul Funktionen
  • TechnikanforderungenTechnikanforderungen
  • Backend LayoutsBackend Layouts

Mi, 10.06.15

Mittwoch, 10.06.2015, 08.30 - 16.00 Uhr

  • Rekapitulation, TN-Fragen
    Erinnerung: Bücher (Bibliothek für TYPO3), Prüfungsinteresse (Termin geklärt)
  • Ü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 Markern (marks - Markierungsstellen) und Subparts (subparts - Markierungsklammerungen), diese Marker/Subparts werden dann per TS ersetzt
    3) Automaketemplate (Erweiterung - 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 "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 / hoher Aufwand; lässt sich heute mit Backend-Layouts und einfachen Erweiterungen (z.B. gridelements) besser und mit TYPO3-onboard-Techniken lösen
    5) Fluidtemplate - moderne Erweiterungen fluid (und extbase); wurden im Rahmen der TYPO3 Version 5 (Phoenix und Flow) entwickelt und eingeführt; wurden auch auf Version 4.5 zurückportiert
  • HTML / CSS / JS - Vorlage (wieder mal ein Template ;-)
    Bereitstellung eines freien "HTML / CSS / JS"-Templates basierend auf Bootstrap-Technik: mPurpose (MIT-License)
    Auswahl einer Blog-Darstellung (mit linker oder rechter Navigationsleiste) für die Hauptdarstellung unserer TYPO3-Site
    Einbau von "Platzhaltern" zum späteren Ersetzen von Inhalten durch TYPO-TypoScript wurde durch den Trainer vorbereitet - da müsste man eben auch ordentliche HTML-Kenntnisse anwenden
    Tipp: nutzen von Code-Inspektoren (FF, Chrome mit Umschalten + Strg + I; IE mit F12) oder gerne auch Firebug unter Firefox
  • Marker / Subparts
    der Einbau der Platzhaltertechniken:
    Marker (marks) der Form ###INHALT###
    Subparts (subparts) der <!-- ###NAVIBEREICH###  ...  ###NAVIBEREICH### -->
    Beispielhafte Nutzuung: page.10.marks.INHALT < styles.content.get
    bzw. page.10.subparts.NAVIBEREICH < temp.navigation

  • cobject TEMPLATE nutzen:
    die eigentliche TYPO3-Seite ist komplett in page.10 = TEMPLATE untergebracht!
    # 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 von zwei 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
      template.file = fileadmin/mpurpose/vorlage-blog-left.html
      workOnSubpart = DOCUMENT
    
    # hier jetzt die Marker ersetzen - ein paar Beispiele:
      
    # Das Logo mit Bild ersetzen
      marks.LOGO = IMAGE
      marks.LOGO {
        file = fileadmin/mpurpose/img/mPurpose-logo.png
        # file.height = 200
      }
    
    # Hier den Seitennamen einfügen
      marks.SEITENNAME = TEXT
      marks.SEITENNAME.field = subtitle // title
    
    # hier den Inhalt aus Seiten / Seiteninhaltselementen einfügen
      marks.INHALT < styles.content.get
    }
    


  • Erste Grundkonfiguration des Systems:
    die "nullte" Sprache und Umgebung auf "Deutsch" einstellen, damit man die Sprach-/Länderspezifischen Ausgaben nutzen kann
    # Erste Grundkonfiguration des System
    config {
      sys_language_uid = 0
      language = de
      locale_all = de_DE
    }
    


  • Datum und Begrüßung ausgeben
    mit "deutschen Inhalten" und auch Konditionen - also Bedingungen (hier werden die Uhrzeiten genutzt für unterschiedliche Texte)
    Tipp: für die Datumskonfiguration "... date: ..." einfach eine Google-Suche nach "php date" eingeben, die führt zur PHP-Hilfeseite zur Funktion date() und liefert eine Tabelle mit den möglichen Ausgaben
    Anm.: cObjects von TYPO3 mit Zusatz _INT liefern die Bereiche immer ohne TYPO3-Caching aus!
    ...
    # Hier das Datum und Begrüßung einfügen - bitte an page.10. denken
      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
      }
    ...
    # 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 = > 14]
      page.10.marks.DATUM.10.value = Good Evening
      page.10.marks.DATUM.10.lang.de = Guten Abend
    [global]
    
    


  • Spezialseiten mit Menü (Marker oben rechts)
    Bereitstellung eines speziellen Ordners für spezielle Seiten und Links: Impressum, Kontakte, Suche
    immer wieder: bei bereitgestelltem TS-Setup-Code müssen immer die richtigen Page-IDs zugewiesen werden
    # 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!
  • Menüs mit cObjects HMENU, TMENU, GMENU
    für TYPO3-Seite mit Template Building mit subparts/marks
    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
  • 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
  • Rundgang durch die Module
    das Backend (BE) erkundet von oben nach unten
  • Modul Datei -> Dateiliste
    Übungen mit dem fileadmin, neue Ordner angelegt und Dateien hochgeladen; BE unterstützt modernes Drag & Drop
    sauberes Anlegen von Ordnerstrukturen für Bilder, PDFs (mit Unterordnern), 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

 

 

  • H1 HeadingsH1 Headings
  • Extension TemplateExtension Template
  • Modul ZugriffModul Zugriff
  • Interne NotizInterne Notiz
  • Drag & DropDrag & Drop
  • Firebug AnalyseFirebug Analyse
 

Do, 11.06.15

Donnerstag, 11.06.2015, 08.30 - 16.00 Uhr

  • Rekapitulation, TN-Fragen
  • Verknüpfung (Seitenbaum-Objekt)
    ermöglicht Unterseite (unter Start) mit Verweis auf die Oberste Seite ("Start"), sodass diese auch in unseren Menüs, Linkstrukturen und Navigationspfaden (Breadcrumbs) auftaucht
  • 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
  • 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! Meldugen der Erweiterung "felogin"
    Übung: Nutzen der FE-Benutzer über die Eigenschaften "Zugriff" auf Inhaltselemente-Ebene
    Hinweis: dermaßen geschützte Seiten und Inhaltselemente sind entsprechend gekennzeichnet
  • Mehrsprachigkeit
    nach TYPO3-Verständnis hat eine Grundinstallation (also quasi ein leeres 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
    Dann lassen sich alle Seiten und Elemente auch in dieser Sprache erstellen (z.B. über Web -> Info -> Übersetzungsü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:
    # Grundkonfiguration des System
    config {
      linkVars = L
      sys_language_uid = 0
      language = de
      locale_all = de_DE
      ...
    }
    ...
    
    # Konditionales (d.h. mit Bedingungen)
    [globalVar = GP:L=1]
      config.sys_language_uid = 1
      config.language = en
      config.locale_all = en_UK
      # Navigationspfad in englisch
      page.10.marks.NAVIPFAD.wrap = <br />You are here:&nbsp; |
    [global]
    
    


  • TS "überall" - eine kurze Orientierungshilfe
    Setup-TS (die Grundkonfiguration - siehe Modul Template)
    Constant-TS (Festlegungen / Konstanten - siehe Modul Template)
    Page-TS (Konfigurationen für Seite/Page - siehe Eigenschaften Seite - Register Ressourcen - Seiten-TSconfig)
    User-TS (Konfiguration für Benutzer - siehe Modul Backend-Benutzer - Eigenschaften - Register Optionen
    Übung: User-TS für das Einschalten der IDs im Seitenbaum konfiguriert (options.pageTree.showPageIdWithTitle = 1)
  • indexed_search (Extension für indizierte, erweiterte Suche)
    die Erweiterung kann nicht nur die Datensätze (TYPO3-DB) sondern auch externe Dokumente von PowerPoint-Folien bis hin zu PDFs durchsuchen und die Ergebnisse aufbereiten (config.index_externals = 1); siehe auch Konfiguration im Erweiterungsmanager (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 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ählen);
    Spezial: Bereitstellung Suchbox-TS für unseren Marker "SUCHE" - im form-Tag muss beim form-Tag action="..." die richtige pid für die Suchseite (siehe Allgemeines Plug-In vom Typ Indexsuche) erhalten
  • TypoScript für unsere Seminarseite komplettiert
    TS bereitgestellt, um alle fehlenden Marker und  und Techniken der Website zu komplettieren
    Techniken:
    - beispielhafte Organisation von TS in temp./lib. Objekten
    - Sprachwechsler für Marker SPRACHE mit Flaggen
    - zentrales Menü für Marker MENU_OBEN
    - Headerbilder (Marker TRAILER) mittels cObject GIFBUILDER mit der zusätzlichen Möglichkeit für individuelle Bilder je Seite (siehe Register Ressourcen einer Seite) inkl. eines Farbverlaufs und der Seitentitel
    - Brotkrumenpfad (Marker NAVIPFAD) konfiguriert (Tipp/Anpassung: special.range = 0 | -1)
    # 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
            special.value = 1
    ...
    temp.menuTexte = HMENU
    temp.menuTexte {
             special = directory
             special.value = 1
    ...
    lib.search = COA_INT
    lib.search {
      10 = TEXT
      10 {
        typolink.parameter = "test"
        typolink.returnLast = url
        value = <form action="index.php?id=10&L=0&tx_indexedsearch[sword]" method="post" id="indexedsearch">
      }
    ...
    # Den Sprachwechsler darstellen
      marks.SPRACHE = HMENU
      marks.SPRACHE {
        special = language
        special.value = 0,1
            
        1 = GMENU
    ...
    # Den Trailer per Image und Gifbuilder erstellen
      marks.TRAILER = IMAGE
      marks.TRAILER.file = GIFBUILDER
      marks.TRAILER.file {
        XY = 750,75
        backColor = white
        # Das Hintergrundbild einlesen
        10 = IMAGE
        10 {
          file {
            import = 1
            import.data = levelmedia:-1, slide
            import.listNum = 0
            treatIdAsReference = 1
            width = 750
          }
          offset = 0,-180
        }
        # Den Verlauf einarbeiten
        20 = IMAGE
    ...
    # Den Breadcrumb / Brotkrumen / Navigationspfad einfügen
      marks.NAVIPFAD  = HMENU
      marks.NAVIPFAD {
          special = rootline
          special.range = 0 | –1
          wrap = <br />Sie sind hier:&nbsp; |
          1 = TMENU
    ...
    

    Die Teilnehmer haben den kompletten TS erhalten und wir werden diesen morgen noch einmal nacharbeiten.
    Übung: TS auf den eigenen TYPO3-Seitenbaum (PIDs) anpassen und Funktion 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 (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) der TYPO3-Site
    ./ uploads - die Verwaltung für "hochgeladenen" Dateien (Empfehlung: 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)
        Datei: PackageStates.php enthält den Status der installierten Pakete/TYPO3-Extensions
  • Passwort Trick (ein Problemchen eines TN mal zwischendurch)
    Zugang zum BE oder gar zum Install-Tool verloren? Einfach Install-Tool aufrufen (Datei ENABLE_INSTALL_TOOL nötig/erstellen) und Passwort eingeben
    Falls das Install-Tool den Zugriff verweigert: : es zeigt 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.
    Tipp: beispielhafte Video-Anleitung (hier jweiland.de) für die Unterstützung und Hilfestellung im Web zu diversen solcher Problemchen.

 

 

  • SprachschalterSprachschalter
  • LocalConfiguration.phpLocalConfiguration.php
  • VerweisVerweis
  • FE-BenutzerFE-Benutzer
  • Website-SpracheWebsite-Sprache
  • Modul InfoModul Info
 

Fr, 12.06.15

Freitag, 12.06.2015, 08.30 - 16.00 Uhr

  • Rekapitulation, TN-Fragen
    To-Do-List: das Komplett-TS diskutieren/erläutern; TS organisieren / auslagern; Musterprüfung -> ausgelagertes TS zeigen; filemetadata;  news - Georg Ringer (früher: tt_news);  TypoScript-Object Browser und TS-Analyzer; BE-Benutzer; VHosts; Backup TYPO3
  • Komplett-TypoScript für "typo3-seminar"-Website
    diskutiert und erläutert; Speziell: Mehrsprachige Texte ausliefern und Probleme lösen bei verschachteltem TS (siehe COA_INT - Content Object Array ohne Caching)
    das fertige Setup-TS (bzw. die Entstehung über die Seminarwoche) wurde den Teilnehmern als *.ts Dateien bereit gestellt.
  • TypoScript organisieren
    1) temp.menuTexte oder lib.search Objekte vordefinieren und dann zuweisen: marks.SUCHE < lib.search
    2) TS in Systemordnern unterbringen / organisieren: Template hierarchisch bauen und ineinander integrieren bis rauf in das Root-Template der Startseite (wird in der Musterprüfung angewendet)
    3) TS komplett in Dateien auslagen: <INCLUDE_TYPOSCRIPT: source="FILE:fileadmin/ts-code/menus.ts">
    Beispiel für Auslagerung/Organisationen in TS-Dateien auch bei Musterprojektseite JWeiland gezeigt
  • 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)
  • Extensions / Erweiterungsmanager
    Aktualisierung von Erweiterungen;  Importieren und Installieren der gewünschten Erweiterungen (Keys)
    Infoportal / TYPO3 Extensions Repository (TER): http://typo3.org/extensions/repository/
    Entscheidungskriterien: Aktualität, Downloadzahlen, Online-/Offline-Dokumentation(en), Entwickler (Team), Abhängigkeiten (Dependencies), unterstützte TYPO3-Versionen, Bereitstellungen als *.zip oder als *.t3x Dateien
    Erweiterungen müssen erst BE aktualisiert werden (TER-Info-Download)
    Installierte Erweiterungen bieten teilweise eigene Konfigurationen und Statische Templates; die Extensions können im BE heruntergeladen werden (ZIP für Extensions, Dump für DB-Tabellen der Extension)
    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)
  • Übungen mit Erweiterungen:
    Systemerweiterung: filemetadata (Dokumente / Bilder / PDFs sauber mit Informationen auf fileadmin versehen)
    Bild/Lightbox Erweiterung: jh_magnificpopup (Autor J. Heilmann - TER-Link) - die Erweiterung benötigt passendes JavaScript (jquery - passt durch unsere mpurpose-Vorlage) und wir müssen daran denken, dass das Statische Template "Magnific Popoup" in unser TS-Root-Template integriert wird (siehe Statisches Template css_styled_content); Anleitungen (Videos) auf JWeiland-Portal (Link)
    Tipp: nach dem Import und Install einer Extension bitte die Sprache(n) aktualisieren und checken, ob die Extension ein - oder mehrere - Statische Templates mitbringt
  • Musterprüfung TYPO3 für den CMSOD 2.0
    Bereitstellung eines ZIP-Archivs Mustermann-Max_musterpruefungen_typo3_20150502.zip
    im Ordner C:\xampp-cmsod\__backups
    Kurzanleitung für Installation der Musterprüfung: (siehe auch Erklärungen auf der .\htdocs\cmsod-overview Website)
    - das Zip mit der Maus auf das Restore-Skript ziehen (hier: restore-cmsod-basisversion.bat)
    1) Eingabe:  musterpruefungen  (Return)
    2) Eingabe:  typo3  (Return)
    3) Eingabe:  (Return - leeres Kennwort für die Datenbank)
    man erhält Projektordner .\htdocs\musterpruefungen\typo3 und die zugehörige Datenbank muster_typo3
    Anm.: für das Zip mit dem Ergebnis der Musterprüfung müssen Sie bei der 2. Eingabe  typo3-ergebnis  eingeben!
    Kurze Einweisung in die Musterprüfung-Website - Hinweis auf die besondere TS-Organisation in Ordnern
    Übungen: ein paar Theoriefragen durchgegangen und Bearbeitung und Vorgehensweisen empfohlen
    Praxis: BE-User / FE-User  Aufgaben 8 ff
  • TypoScript-Object-Browser (wie ist unser TS aufgebaut!)
    Nachschlagen der TS-Einstellungen und Zuweisungen unseres Sytems - eine hierarische, baumartige Struktur, die sich per Mausklicks erkunden lässt;
    Übungsvorschlag: die Überschrift - Layout Typen finden Si 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, um nicht immer bei Überschriften den H1-Tag ausgeliefert zu bekommen (Aber: Ihre Website sollte natürlich einen H1-Tag xfür Ihre oberste Dokumentebene haben!)
  • Template Analyse
    Über Web - Template oben auf Template Analyse schalten, Konstruktion/Nutzung der Templates / Erweiterungstemplates / Statische Template ersichtich; über Klick dann Anzeige von Konstanten und Setup TS; bei Statischem Template css_styled_content wird im Setup TS dann auch die Nutzung von styles.content.get Varianten deutlich)
  • Virtual Hosts (siehe auch Erläuterungen in der .\htdocs\cmsod-overview Website - im Seminar nur durch Trainer gezeigt)
    Ziel: Adresse www.typo3-62-seminar.local auf XAMPP möglich machen
    technisch.: sauberer Fully Qualified Domain Name FQDN als BaseURL ohne Schrägstriche!)
    Server-Pfad für unsere Seminarseite "typo3-seminar":  C:\xampp\htdocs\typo3\typo3-seminar
    (Apache Datei: httpd.conf) Webserver: Apache; Konfigurationsdatei: c:\xampp\apache\conf\httpd.conf
    mit includierten (eingefügten) Zusatz-Konfigurationsdateien im Unterordner .\conf\extra
    Hier: httpd-vhosts.conf  bearbeiten; Aktivieren und Eintragen der namensbasierten Virtual Hosts
    Änderungen werden durch Restart (Reload) des Webservers gültig, fehlende Ordnerstrukturen führen zu Meldungen des Servers
    Anm.: für diese Daten von "typo3-seminar" findet sich bereits ein fertiger Eintrag im XAMPP-CMSOD
    (Windows Datei: hosts) Windows-Client: Namensauflösung über hosts-Datei eintragen (muss mit Admin-Rechten geschehen!)
    Datei: c:\Windows\system32\drivers\etc\hosts 
    mit Eintrag für typo3-62-seminar.local und Alias  auf Adresse 127.0.0.1
    127.0.0.1      typo3-62-seminar.local      www.typo3-62-seminar.local   
  • TYPO3-System - Backup (eine kurze Darstellung)
    TYPO3 besteht aus
    0) TYPO3-Sources (Quellen / T3-Kern): muss (eigentlich) nicht gesichert werden: ./typo3, Dateien: index.php, ...
    1) TYPO3-Projekt-Dateien: Ordner ./typo3conf, ./uploads, ./fileadmin (, ./typo3temp)
    2) TYPO3-Datenbank: Eportieren und Importieren mittels PhpMyAdmin (MySQL-Dumps; Formate: sql, zip. gz, bz2)
    Tolle Anleitungen für die Hosting-Umgebungen (Achtugn: 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
    Anm./Tipp: (haben wir leider am Freitag nicht mehr geschaftt!)
    Eigenes Archivformat von T3:  .t3d-Dateien - lassen sich über die Seitenelement-Kontextmenüs mittels Exportieren / Importieren nutzen (Anm.: nicht das komplette T3-Projekt, sondern hauptsächlich die Seitenbaumstruktur!)
  • Was wir nicht mehr geschaftt haben...
    - Extension news (Autor G. Ringer - TER-Link - Video Anleitungen JWeiland); in Musterprüfung eingebaut
    - Konstanten-TypoScript (Constants) - bitte Beispiel in der Musterprüfung nachvollziehen
    # im Konstanten-TS: (auf Root-Seite "Willkommen zur Musterprüfung")
    # =================
    # cat=cmsod; type=boolean; label= AdminPanel enable: eine Checkbox for AdminPanel
    cmsod.adminpanel = 1
    
    # im Setup-TS: (organisiert in: TS-Templates - Page - page.config)
    # ============
    # Allgemeine Konfigurationen
    config {
      linkVars = L
      sys_language_uid = 0
      # sys_language_mode = content_fallback
      sys_language_mode = strict
      sys_language_overlay = hideNonTranslated
      language = de
      locale_all = de_DE
      spamProtectEmailAddresses = 1
      spamProtectEmailAddresses_atSubst = at
      # die Konstante cmsod.adminpanel nutzen
      admPanel = {$cmsod.adminpanel}
    }
    


  • Dokumente und Unterlagen für TN bereit gestellt
  • Feedbackbögen (Anregung: TN-Skript/Herdt-Skript), TN-Bescheinigungen, letzte Fragen

 

  • MusterprüfungMusterprüfung
  • ErweiterungenErweiterungen
  • ext:filemetadataext:filemetadata
  • TERTER
  • Import - InstallImport - Install
  • ErweiterungErweiterung

 

Vielen Dank für Ihre freundlichen Feedbackbögen und Ihr lautes Klopfen zum Ende unseres Seminars.
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