Typo3 Schulung - Hochschule Neubrandenburg

Typo3 Workshop
Hochschule Neubrandenburg
Wiebke Peters
Projekt CampusOnline
[email protected]
Wiebke Peters - CampusOnline
1
Agenda
1.Tag
 Überblick/ Leistungsumfang
 Einführung in die Typo3-Nutzung am Beispiel-Webauftritt
 Backend-Oberfläche
 Anlegen von Seiten und Seiteninhalt, Listen, Dateilliste, Funktionen, Einstellungen
 Frontend-Editing
 Rechte und Redakteure
2.Tag
 Theorie: Einführung in die Begriffe TypoScript und Templates
 Typoscript – Syntax, Objekte, Eigenschaften
 Template-Modul incl. Template-Werkzeuge
 Eine Webseite erstellen – am Beispiel
 Seitenstruktur erfassen
 Template anlegen
 Design-Vorlagen (HTML, CSS) einbinden
 Menüs und andere Objekte erstellen
 Einbinden einer Extension am Bsp. tt_news
 Fragen
3.Tag
 Fortsetzung Tag 2
 Absprachen zur Umstellung des Neubrandenburger Webauftritts
Wiebke Peters - CampusOnline
2
Typo3 Workshop
Überblick/ Leistungsumfang
Wiebke Peters - CampusOnline
3
Überblick/ Leistungsumfang (1)
 Sog. Enterprise Web CMS
Kostenlose und kommerzielle WebCMS
Allgemein:
 Trennung von Inhalt und Layout
 Freie Gestaltung von Layoutvorgaben mit
externen Editoren  Einheitliches Layout für
den Webauftritt
 Einfache Integration von modernen Features
wie: Foren, Newsletter,Sitemaps
 Einfache Bearbeitung von Inhalten
 Redakteure  Abbildung von Benutzergruppen
Wiebke Peters - CampusOnline
4
Überblick/ Leistungsumfang (2)
Speziell Typo3:
 Kostenloses Open-Source CMS
 Wird sowohl von öffentlichen Einrichtungen als
auch von privaten Unternehmen eingesetzt
 PHP-basiertes CMS, dass durch die Entwicklung
eigener Extensions erweiterbar ist
 Werkzeuge und API zur Extension-Entwicklung
 umfangreiche Dokumentationen
(www.typo3.org), sowie eine hilfsbereite
Coummunity
 Entstehung seit Ende der 90iger - Geistiger
Vater und zentraler Entwickler ist der Däne
Kasper Skårhøj Aktuelle Typo3 Version: Typo3 3.8
Wiebke Peters - CampusOnline
5
Überblick/ Leistungsumfang (3)
Architektur:
 Basiert grundsätzlich auf einem LAMP-System,
läuft aber auch auf Windows und anderen
gängigen Unix-Systemen
 Es steht auf www.typo3.org zum Download zur
Verfügung (Source Code oder komplettes
LAMP/WAMP-Paket)
 Verwendung von ausschließlich freien
Standardkomponenten wie z.B.GDlib,
ImageMagick
 PHP-basiert, modular aufgebaut  Integration
eigener Module möglich
Wiebke Peters - CampusOnline
6
Überblick/ Leistungsumfang (4)
Ein paar Features:
 Integrierte Bildverarbeitung (GIFBUILDER)
 Mehrsprachigkeit
 Frontend-Editing
 Rich Text Editor (RTE)
 Zahlreiche Extensions:
 tt_news (sehr komplexe Newsverwaltung), Newsletter,
Forum, Gästebuch, CSS-Styled-Content, Indizierte
Suche u.v.m…
 Entwicklung eigener Extensions möglich
  sehr flexibles System
Wiebke Peters - CampusOnline
7
Typo3 Workshop
Einführung in die Typo3-Nutzung
am Beispiel-Webauftritt
Wiebke Peters - CampusOnline
8
Voraussetzungen
Backend = Arbeitsfläche
Frontend = Webseite
Aktueller Browser - empfohlen werden
Internet Explorer, Mozilla, Firefox
Cookies müssen aktiviert sein
Popups müssen erlaubt sein
Login: URL + /typo3
Wiebke Peters - CampusOnline
9
Das Backend - Arbeitsoberfläche
Modulleiste Navigationsleiste
Detailansicht
Wiebke Peters - CampusOnline
10
Seite und Seiteninhalt anlegen
- auf Seitenicon klicken
- „Neu“ wählen
- über den Assistenten Seite oder Seiteninhalt auswählen
- Eingabemaske ausfüllen
Wiebke Peters - CampusOnline
11
Seitentypen und Inhaltselemente
Seitentypen
 Standard – klassischer Typ
 Erweitert – zusätzl. Informationen,
wie Beschreibung, Dateien,
Stichworte…
 Externe URL – direkte Verlinkung
auf Externe Webseite
 Shortcut – zu einer anderen Seite
im SB
 Nicht im Menu - wird nicht in der
Navigation der Webseite
angezeigt
 Abstand - dient der Strukturierung
des Menüs
 SysOrdner – Container für
verschiedene Datensätze (z.B.
News)
Inhaltselemente
 Überschrift
 Normaler Text
 Text mit Bild
 Nur Bilder
 Aufzählung
 Tabellen
 Dateilinks
 Multimedia
 Sitemmap
 Formular
 Datensatz einfügen
 HTML
 PHP-Scripte
 Plugin
 …
Eigene Inhaltselemente können erstellt werden
Wiebke Peters - CampusOnline
12
Typo3 Workshop
Rechte und Benutzer
Wiebke Peters - CampusOnline
13
Benutzer
 Admin  Verwaltung der Webseite und deren
Komponenten
 Redakteur  Pflege der Inhalte
 Ausarbeitung eines Redaktions- und
Berechtigungskonzept
 Anlegen und Zuweisen von Benutzergruppen
 Zuweisen von Seiten
Beispiele:
Presseredakteur pflegt Pressemitteilungen ein
Studiengangsverantwortlicher pflegt Studiengänge
Wiebke Peters - CampusOnline
14
Typo3 Workshop
Einführung in die Begriffe
TypoScript und Templates
Wiebke Peters - CampusOnline
15
Ziel
 Einführung in die Begriffe Template und
Typoscript
 Kennenlernen der Tools zur TemplateBearbeitung
Temlate-Analyzer
TypoScript Object Browser
Template Datensatz Editior
 TypoScript anhand einfacher Beispiele
 Grundlegendes zur TypoScript-Syntax
 Erstellen einer Beispiel-Webseite
Wiebke Peters - CampusOnline
16
Templates in Typo3
steuern die Web - Darstellung von Seiten
bilden das Grundgerüst jeder Typo3
Webseite
werden über TypoScript konfiguriert
sind KEINE HTML-Vorlagen
werden in einem sogenannten TemplateRecord angelegt
Man unterscheidet Root-Templates und
Extension-Templates
Wiebke Peters - CampusOnline
17
TypoScript (TS)
 TypoScript ist keine Programmier- oder
Scriptsprache
 TypoScript ist eine Syntax zur Beschreibung von
Daten
 TypoScript ist eine Schnittstelle über welche
Informationen an das System übergegeben
werden
 Wird genutzt in:
 Page TSConfig (Konfiguration für Seiten im Seitenbaum)
 User TSConfig (Konfigurationen für den Nutzer)
 TS Templates (Steuerung der Webseite)
Wiebke Peters - CampusOnline
18
TypoScript + Template = TypoScriptTemplates
Mit TypoScript-Templates wird festgelegt:
wie die die Ausgabe einer Webseite erstellt
werden soll
welche Inhalte aus der Datenbank gelesen
werden
ob eine bzw. welche HTML-Vorlage verwendet
wird
Steuerung der Frontend-Ausgabe
Wiebke Peters - CampusOnline
19
Template Tools
 Constant Editor
 Dient der komfortableren Bearbeitung von Konstanten,
insbesondere bei der Konfiguration von Standard - Templates
 Info/Modify
 Bearbeitung des Setup-Codes und des gesamten Template Records
 TSOB
 Zeigt TS-Objekte und deren Eigenschaften
 Man kann einfach Eigenschaften ändern, hinzufügen (TSref)
 Bessere Kontrolle und Anpassung bei der Entwicklung
 Template Analyzer
 Zeigt Template - Hierarchie und Quell-Code
Wiebke Peters - CampusOnline
20
TypoScript am Beispiel
Das berühmte „Hello World“
Es muss ein Template angelegt werden, um
eine Ausgabe zu erzeugen, ansonsten:
 Standard-Template einbinden
oder
 Neues Template erstellen
Wiebke Peters - CampusOnline
21
TypoScript am Beispiel- Template alegen
 Ein neues Template erzeugen:
 Seite im Seitenbaum als
Root-Seite auswählen
 Auf Modul Template klicken
 Über die Schaltfläche
„Create template for a new
site“ im Formularbereich
„Create new Website“ wird
dann ein neuer
Templatedatensatz (New
Site) angelegt
 Alternativ kann auch ein von
Typo3 mitgeliefertes
Standardtemplate über die
Auswahlbox eingebunden
werden
Wiebke Peters - CampusOnline
Neuer Template-Datendatz
22
TypoScript am Beispiel-Template-Datensatz
 Template Datensatz
Titel eingeben
Webseiten-Titel
bestimmen
Evtl. Konstanten
einfügen
Setup einfügen
Rootlevel
Clear Constants
Clear Setup
Include Static
Wiebke Peters - CampusOnline
23
TypoScript am Beispiel - Setup
Das erstellte Template enthält bereits 7
Zeilen im Setup:
# Default PAGE object:
page = PAGE
page.typeNum = 0
page.10 = TEXT
page.10.value = HELLO WORLD!
Wiebke Peters - CampusOnline
24
TypoScript am Beispiel - Erläuterung




Default PAGE Object ist ein Kommentar
page ist ein Objekt vom Typ PAGE
Der Bezeichner page kann frei gewählt werden
PAGE ist ein TS-Objekttyp und startet die
Webpräsentation und die Ausgabe
 TypeNum ist eine Eigenschaft des Objektes PAGE
und legt die Web-Ausgabe fest (Webseite,
Druckversion, WAP)
 page.10 ist ein Objektpfad über welchen ein Objekt
bzw. eine Eigenschaft adressiert wird
 Hello World ist ein Wert der der Eigenschaft value
zugewiesen wird
Wiebke Peters - CampusOnline
25
TypoScript am Beispiel - Syntax
Verallgemeinerte Schreibweise:
[Objektpfad].[Eigenschaft] [Operator] [Wert]
myObject = [value 1]
myObject.myProperty = [value 2]
myObject.myProperty.firstProperty = [value 3]
myObject.myProperty.secondProperty = [value 4]
Bsp.: myObject = HTML
myObject.value = <BLINK> HTML - code </BLINK>
page.10=TEXT
page.10.value= Ich bin ein Text
TypoScript unterscheidet Groß-/Kleinschreibung
Wiebke Peters - CampusOnline
26
TypoScript-Syntax - Kommentare
# oder / einzeiliger Kommentar
/* mehrzeiliger Kommentar*/
Wiebke Peters - CampusOnline
27
TypoScript-Syntax – Operatoren (1)
{ } dienen der Strukturierung
page =PAGE
page{
typeNum=0
10=TEXT
10{
value=Hallo WELT!
}
}
( ) Schließen Werte ein, die über mehrere Zeilen gehen
… 10=HTML
10.value( <table cellspacing=1 cellpadding=1 border=1>
<tr><td>EINE TABELLE</td></tr>
</table>
)…
Wiebke Peters - CampusOnline
28
TypoScript-Syntax – Operatoren (2)
 = Zuweisungsoperator
mycontant=mein text
 < Kopieren
temp.menu=HMENU
temp.menu.1=TMENU
temp.menu.1{
wrap=<ul> | </ul>
NO{
linkWrap=<li>| </li>
}
}
 TS-Anweisungen werden
an einer Stelle festgelegt
und an eine andere
Position kopiert
 Es können Eigenschaften
oder ganze Objekte
kopiert werden
temp.menu wird also nach
page.10 kopiert
page=PAGE
page.typeNum=0
page.10 < temp.menu
Wiebke Peters - CampusOnline
29
TypoScript-Syntax – Operatoren (3)
> Löschen
Löscht einen Objektpfad
Wird benötigt, um Template-Hierarchien zu
bereinigen und durch eigene Werte zu ersetzen
=< Referenzieren
referenziert einen Objektpfad
Referenzierung ist nur mit Objekte möglich,
nicht mit Eigenschaft
Wiebke Peters - CampusOnline
30
TypoScript-Syntax - Bedingungen
 Bedingungen werden durch
[eineBedingung] eingeleitet
page=PAGE
page.typeNum=0
[browser=msie]
 [else] – Verzweigung
page{
 [end] – Beendet die Bedingung
10=TEXT
 [global] - setzt alle Bedingungen
10.value=Hui ein Internet
zurück und kehrt zur obersten
Explorer!
TypoScript-Ebene
}
[else]
page{
20=TEXT
!!! Bedingungen können nicht innerhalb
20.value= Irgend ein anderer
von mit {} geschachtelten Eigenschaften
Browser!
gesetzt werden !!!
}
[end]
Wiebke Peters - CampusOnline
31
Hilfreiche Dokumente:
http://typo3.org/documentation/documentlibrary
TypoScript by Example
TypoScript Syntax and In-depth Study
TypoScript Templates
TSref – TypoScript Reference
Wiebke Peters - CampusOnline
32
Typo3 Workshop
Erstellen einer Webseite – am
Beispiel
Wiebke Peters - CampusOnline
33
Gliederung (1)
Template-Konzepte
Vorbereitung der Layout-Vorlage
Marker und Subparts
Seitestruktur anlegen
Root-Seite auswählen
Root-Template anlegen
Template-Record (Name etc.) bearbeiten
Include Static (content (default) vs. CSS
Styled Content)
Wiebke Peters - CampusOnline
34
Gliederung (2)
 TypoScript – „Programmierung“
 Vorbereitete HTML-Vorlage einbinden
 Navigation programmieren
 Arten von Menüs
 Linke Navigation
 Rootline
 Infomenu
 Seiteninhalte auslesen – styles.content.get
 FE - Ausgabe betrachten
 Weitere Elemente per TS einfügen
 Extension-Template
 Extension einbinden – am Beispiel tt_news
 Extension Manager
 tt_news konfigurieren
Wiebke Peters - CampusOnline
35
Template-Konzepte
Standard-Templates  Out-of-the-Box
Reine TypoScript-Templates
TypoScript und Einbinden einer HTMLVorlage und CSS-Stylesheets
Template Auto-Parser
TemplaVoila
Wiebke Peters - CampusOnline
36
Vorbereitung der Layout-Vorlage (1)
Subparts und Marker
Werden in der HTML-Vorlage durch dynamische
Inhalte ersetzt.
Subparts:
 werden immer paarweise angewendet
 Umschleißen Abschnitte in HTML-Vorlagen, können mit
HTML-Kommentaren umgeben werden

<!- - ###SUBPART### begin - -> <!- - ###SUBPART### end- ->
Marker:
 Werden nur einzeln verwendet und durch die Ausgabe der
TS-Konfiguration ersetzt
 ###MARKER### (Bsp.: ###COPYRIGHT###)
Groß-/Kleinschreibung beachten!
Wiebke Peters - CampusOnline
37
Vorbereitung der Layout-Vorlage (2)
 Ausgezeichnete HTML-Vorlage
Wiebke Peters - CampusOnline
38
Include Static (content(default) vs. CSS
Styled Content)
 Content(default) und CSS Styled Content sind
statische Templates die über include static
eingebunden werden
 Beinhalten die Definitionen zum Rendern der
Inhalte
 Content(Default)
älteste Content-Rendering-Template
verwendet zum Rendern <font>-Tags
 CSS Styled Content (CSC)
Rendering basiert auf CSS
CSC wird sich langfristig durchsetzen
Wiebke Peters - CampusOnline
39
Vorbereitete HTML-Vorlage einbinden
page.10=TEMPLATE
page.10{
template=FILE
template.file=fileadmin/schulung/vorlagen/index.html
workOnSubpart=DOCUMENT_BODY
}
workOnSubpart=DOCUMENT_BODY
nur der Teil innerhalb dieses Subparts wird aus der HTML-Vorlage verwendet
Wiebke Peters - CampusOnline
40
Menüs
 Verschieden Arten von Menüs (Navigation)
 Dyn. erstellt aus den Seiten des Seitenbaums
 HMENU – Hierarchical Menu
 TMENU – text-basiertes Menü
 GMENU – grafisches Menü (aus Seitentitel werden autom.
Bilder erzeugt)
 GMENU_LAYERS/TMENU_LAYERS
 GMENU_FOLDOUT
 IMG_MENU – erzeugt Imagemap
 JSMENU – Klassisches Klappmenü
 Alle Menüs haben eigene aber auch gemeinsame
Eigenschaften (NO, ACT, RO)
Wiebke Peters - CampusOnline
41
TMENU
Linke Navigation
Rootline-Menu (Pfad)
Infomenü (Sitemap, Kontakt, Impressum)
 Siehe Handout
Wiebke Peters - CampusOnline
42
Seiteninhalt ausgeben
 Voraussetzung: Basistemplates CSS-Styled-Content im
Template - Record einbinden
 Damit steht das vordefinierte Objekt styles.content.get
zur Verfügung, das den Inhalt der Spalte Normal rendert
subpart.INHALT < styles.content.get
Die anderen Spalten:
styles.content.getLeft
styles.content.getRight
styles.content.getBorder
styles.content.get=CONTENT
styles.content.get{
table=tt_content
select.orderBy=sorting
select.where=colPos=0
select.languageField=sys_language_uid
}
Wiebke Peters - CampusOnline
43
Objekt in Subparts kopieren
page.10=TEMPLATE
page.10{
template=FILE
template.file=fileadmin/schulung/vorlagen/index.html
workOnSubpart=DOCUMENT_BODY
#Subparts & Marker mit Inhalte befüllen
subparts.INHALT < styles.content.get
subparts.MENULINKS< temp.mymenu
…
marks.COPY < temp.copyright
}
Wiebke Peters - CampusOnline
44
Weitere Elemente
Header-Image
Pagetitel
Seitentitel
Bild zu jeder Seite
Copyright
Siehe Handout
Wiebke Peters - CampusOnline
45
Extension einbinden – tt_news
 Download der Extension
 Über Extenstionmanager
 Von der typo3.org Webseite http://typo3.org/extensions/
 Installation der Extension
 tt_news Template und ggf. Default-CSS unter „include static“
hinzufügen
 Sysordner erstellen für Pressemitteilungen
 Auf Newsseite Seiteninhalt Plugin tt_news anlegen und einstellen
 Seite für Single-Ansicht anlegen und Plugin entsprechend
konfigurieren
 News anlegen; Cache löschen! Ansehen.
 Doku: http://typo3.org/documentation/document-library/tt_news/
 Layout-Template und CSS lassen sich individuell anpassen
Wiebke Peters - CampusOnline
46
Web-Quellen
 http://typo3.org – Offizielle Typo3 Webseite und
Community
 http://wiki.typo3.org – Typo3 WiKi
 http://www.typo3.net
 http://www.jweiland.net
 http://www.typo3server.com – mittwaldmedien
services – Agentur für Typo3
 http://typo3.org/documentation/documentlibrary/doc_tut_editor_ger/ - Handbuch für
Redakteure
 Google! Stichwort: Typo3 (ca. 706.000 Suchergebnisse)
Wiebke Peters - CampusOnline
47
Literaturhinweise
 TYPO3 Enterprise Content
Management
von Werner Altmann, Rene Fritz,
Daniel Hinderink
Verlag: Open Source Press
Erscheinungsdatum: September 2004
ISBN: 3937514015
 Typo3 Praxiswissen
Von Robert Meyer
O'Reilly
Erscheinungsdatum: April 2005
ISBN: 389721394X
 Typo3 - Content-Management
von Christoph Lindemann, Maik Caro
Verlag: Franzis
Erscheinungsdatum: März 2005
ISBN: 377236909X
 Das Einsteigerseminar TYPO3
von Hubert Partl, Tobias MüllerProthmann
Verlag: Vmi Buch
Erscheinungsdatum: März 2005
ISBN: 3826673735
 TYPO3 Content Management, m. CDROM
von Alwin Viereck
Verlag: Mitp-Verlag
Erscheinungsdatum: März 2005
ISBN: 382661478X
 Einstieg in TYPO3, m. CD-ROM
von Andreas Stöckl, Frank Bongers
Verlag: Galileo Press
Erscheinungsdatum: Februar 2005
ISBN: 3898426041
Wiebke Peters - CampusOnline
48
Fragen und Austausch
Wiebke Peters - CampusOnline
49