Date post: | 05-Apr-2015 |
Category: |
Documents |
Upload: | schwanhild-stillinger |
View: | 118 times |
Download: | 4 times |
Wiebke Peters - CampusOnline 1
Typo3 Workshop Hochschule Neubrandenburg
Wiebke Peters
Projekt CampusOnline
Wiebke Peters - CampusOnline 2
Agenda1.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 3
Typo3 Workshop
Überblick/ Leistungsumfang
Wiebke Peters - CampusOnline 4
Überblick/ Leistungsumfang (1) Sog. Enterprise Web CMS
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
Kostenlose und kommerzielle WebCMS
Wiebke Peters - CampusOnline 5
Ü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 6
Ü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 7
Ü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 8
Typo3 Workshop
Einführung in die Typo3-Nutzung am Beispiel-Webauftritt
Wiebke Peters - CampusOnline 9
Voraussetzungen
Aktueller Browser - empfohlen werden Internet Explorer, Mozilla, Firefox
Cookies müssen aktiviert seinPopups müssen erlaubt sein
Login: URL + /typo3
Backend = ArbeitsflächeFrontend = Webseite
Wiebke Peters - CampusOnline 10
Das Backend - Arbeitsoberfläche
Modulleiste Navigationsleiste Detailansicht
Wiebke Peters - CampusOnline 11
Seite und Seiteninhalt anlegen
- auf Seitenicon klicken - „Neu“ wählen- über den Assistenten Seite oder Seiteninhalt auswählen- Eingabemaske ausfüllen
Wiebke Peters - CampusOnline 12
Seitentypen und InhaltselementeSeitentypen 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 13
Typo3 Workshop
Rechte und Benutzer
Wiebke Peters - CampusOnline 14
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 einStudiengangsverantwortlicher pflegt Studiengänge
Wiebke Peters - CampusOnline 15
Typo3 Workshop
Einführung in die Begriffe TypoScript und Templates
Wiebke Peters - CampusOnline 16
Ziel Einführung in die Begriffe Template und
Typoscript Kennenlernen der Tools zur Template-
Bearbeitung Temlate-Analyzer TypoScript Object Browser Template Datensatz Editior
TypoScript anhand einfacher Beispiele Grundlegendes zur TypoScript-Syntax Erstellen einer Beispiel-Webseite
Wiebke Peters - CampusOnline 17
steuern die Web - Darstellung von Seitenbilden das Grundgerüst jeder Typo3
Webseitewerden über TypoScript konfiguriertsind KEINE HTML-Vorlagen werden in einem sogenannten Template-
Record angelegtMan unterscheidet Root-Templates und
Extension-Templates
Templates in Typo3
Wiebke Peters - CampusOnline 18
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 19
TypoScript + Template = TypoScript-Templates
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 20
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 21
TypoScript am BeispielDas 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 22
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 Neuer Template-Datendatz
Wiebke Peters - CampusOnline 23
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 24
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 25
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 26
TypoScript am Beispiel - Syntax
Verallgemeinerte Schreibweise:
[Objektpfad].[Eigenschaft] [Operator] [Wert]
Bsp.:
TypoScript unterscheidet Groß-/Kleinschreibung
myObject = [value 1]myObject.myProperty = [value 2]myObject.myProperty.firstProperty = [value 3]myObject.myProperty.secondProperty = [value 4]
myObject = HTMLmyObject.value = <BLINK> HTML - code </BLINK>
page.10=TEXTpage.10.value= Ich bin ein Text
Wiebke Peters - CampusOnline 27
TypoScript-Syntax - Kommentare
# oder / einzeiliger Kommentar
/* mehrzeiliger Kommentar*/
Wiebke Peters - CampusOnline 28
TypoScript-Syntax – Operatoren (1){ } dienen der Strukturierung
page =PAGEpage{
typeNum=010=TEXT10{ 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 29
TypoScript-Syntax – Operatoren (2)
= Zuweisungsoperator
< Kopieren TS-Anweisungen werden
an einer Stelle festgelegt und an eine andere Position kopiert
Es können Eigenschaften oder ganze Objekte kopiert werden
temp.menu=HMENUtemp.menu.1=TMENUtemp.menu.1{wrap=<ul> | </ul>NO{linkWrap=<li>| </li>}}
page=PAGEpage.typeNum=0page.10 < temp.menu
temp.menu wird also nach page.10 kopiert
mycontant=mein text
Wiebke Peters - CampusOnline 30
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 31
TypoScript-Syntax - Bedingungen
Bedingungen werden durch [eineBedingung] eingeleitet [else] – Verzweigung [end] – Beendet die Bedingung [global] - setzt alle Bedingungen
zurück und kehrt zur obersten TypoScript-Ebene
page=PAGEpage.typeNum=0[browser=msie]page{
10=TEXT10.value=Hui ein Internet Explorer!}
[else]page{
20=TEXT20.value= Irgend ein anderer Browser!}
[end]
!!! Bedingungen können nicht innerhalb von mit {} geschachtelten Eigenschaften gesetzt werden !!!
Wiebke Peters - CampusOnline 32
Hilfreiche Dokumente:
http://typo3.org/documentation/document-library TypoScript by Example TypoScript Syntax and In-depth Study TypoScript Templates TSref – TypoScript Reference
Wiebke Peters - CampusOnline 33
Typo3 Workshop
Erstellen einer Webseite – am Beispiel
Wiebke Peters - CampusOnline 34
Gliederung (1)Template-KonzepteVorbereitung der Layout-Vorlage
Marker und Subparts
Seitestruktur anlegenRoot-Seite auswählenRoot-Template anlegenTemplate-Record (Name etc.) bearbeitenInclude Static (content (default) vs. CSS
Styled Content)
Wiebke Peters - CampusOnline 35
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 36
Template-KonzepteStandard-Templates Out-of-the-BoxReine TypoScript-TemplatesTypoScript und Einbinden einer HTML-
Vorlage und CSS-StylesheetsTemplate Auto-ParserTemplaVoila
Wiebke Peters - CampusOnline 37
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 38
Vorbereitung der Layout-Vorlage (2) Ausgezeichnete HTML-Vorlage
Wiebke Peters - CampusOnline 39
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 40
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 41
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 42
TMENU
Linke NavigationRootline-Menu (Pfad)Infomenü (Sitemap, Kontakt, Impressum) Siehe Handout
Wiebke Peters - CampusOnline 43
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=CONTENTstyles.content.get{table=tt_contentselect.orderBy=sortingselect.where=colPos=0select.languageField=sys_language_uid}
Wiebke Peters - CampusOnline 44
Objekt in Subparts kopierenpage.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 45
Weitere Elemente
Header-ImagePagetitelSeitentitelBild zu jeder SeiteCopyrightSiehe Handout
Wiebke Peters - CampusOnline 46
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 47
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/document-library/
doc_tut_editor_ger/ - Handbuch für Redakteure
Google! Stichwort: Typo3 (ca. 706.000 Suchergebnisse)
Wiebke Peters - CampusOnline 48
Literaturhinweise
TYPO3 Enterprise Content Managementvon Werner Altmann, Rene Fritz, Daniel HinderinkVerlag: Open Source Press Erscheinungsdatum: September 2004ISBN: 3937514015
Typo3 - Content-Managementvon Christoph Lindemann, Maik CaroVerlag: Franzis Erscheinungsdatum: März 2005ISBN: 377236909X
TYPO3 Content Management, m. CD-ROMvon Alwin ViereckVerlag: Mitp-Verlag Erscheinungsdatum: März 2005ISBN: 382661478X
Typo3 PraxiswissenVon Robert MeyerO'ReillyErscheinungsdatum: April 2005ISBN: 389721394X
Das Einsteigerseminar TYPO3von Hubert Partl, Tobias Müller-ProthmannVerlag: Vmi Buch Erscheinungsdatum: März 2005ISBN: 3826673735
Einstieg in TYPO3, m. CD-ROMvon Andreas Stöckl, Frank BongersVerlag: Galileo Press Erscheinungsdatum: Februar 2005ISBN: 3898426041
Wiebke Peters - CampusOnline 49
Fragen und Austausch