Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt...

transcript

Wiebke Peters - CampusOnline 1

Typo3 Workshop Hochschule Neubrandenburg

Wiebke Peters

Projekt CampusOnline

campusonline@hs-wismar.de

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

Typo3 Workshop

Überblick/ Leistungsumfang

Ü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

Ü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

Ü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

Ü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

Typo3 Workshop

Einführung in die Typo3-Nutzung am Beispiel-Webauftritt

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

Das Backend - Arbeitsoberfläche

Modulleiste Navigationsleiste Detailansicht

Seite und Seiteninhalt anlegen

- auf Seitenicon klicken - „Neu“ wählen- über den Assistenten Seite oder Seiteninhalt auswählen- Eingabemaske ausfüllen

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

Typo3 Workshop

Rechte und Benutzer

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

Typo3 Workshop

Einführung in die Begriffe TypoScript und Templates

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

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

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)

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

Steuerung der Frontend-Ausgabe

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

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

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

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

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!

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

TypoScript am Beispiel - Syntax

Verallgemeinerte Schreibweise:

[Objektpfad].[Eigenschaft] [Operator] [Wert]

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

TypoScript-Syntax - Kommentare

# oder / einzeiliger Kommentar

/* mehrzeiliger Kommentar*/

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>

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

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

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!}

!!! Bedingungen können nicht innerhalb von mit {} geschachtelten Eigenschaften gesetzt werden !!!

Hilfreiche Dokumente:

http://typo3.org/documentation/document-library TypoScript by Example TypoScript Syntax and In-depth Study TypoScript Templates TSref – TypoScript Reference

Typo3 Workshop

Erstellen einer Webseite – am Beispiel

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)

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

Template-KonzepteStandard-Templates Out-of-the-BoxReine TypoScript-TemplatesTypoScript und Einbinden einer HTML-

Vorlage und CSS-StylesheetsTemplate Auto-ParserTemplaVoila

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!

Vorbereitung der Layout-Vorlage (2) Ausgezeichnete HTML-Vorlage

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

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

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)

Linke NavigationRootline-Menu (Pfad)Infomenü (Sitemap, Kontakt, Impressum) Siehe Handout

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}

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

Weitere Elemente

Header-ImagePagetitelSeitentitelBild zu jeder SeiteCopyrightSiehe Handout

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

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)

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

Fragen und Austausch

Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt...

Documents