Typo3 Workshop Hochschule Neubrandenburg

Präsentation zum Thema: "Typo3 Workshop Hochschule Neubrandenburg"—  Präsentation transkript:

1 Typo3 Workshop Hochschule Neubrandenburg
Wiebke Peters Projekt CampusOnline Wiebke Peters - CampusOnline

2 Wiebke Peters - CampusOnline
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

3 Überblick/ Leistungsumfang
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 Zum Leistungsumfang solcher Systeme gehört standardmäßig: Trennung von Inhalt und Layout für den Web-Auftritt Freie Gestaltung der Layout-Vorgaben mit modernen Web-Seiten-Gestaltungsprogrammen (Photoshop, Dreamweaver, GoLive) Erstellung eines einheitlichen Layouts (Corporate Design) für den Web-Auftritt Durchgängige Struktur des Web-Auftritts mit entsprechenden Navigations- und Such-Funktionen Moderne Features eines Web-Auftritts wie News-Letter, Direct-Mail, Gästebücher, Sitemaps, Foren sind einfach zu intergrieren Administration des Systems (Verwaltung der Redakteure und deren Rechte, Arbeitsabläufe, Content-Verwaltung, System-Einstellungen) ist mit jedem modernen WWW-Browser möglich, Einfache Bearbeitung der Inhalte mit »Front-End-Editing« auch durch Redakteure ohne HTML-Kenntnisse 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 ( 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 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 GIFBULDER: Erstellung Grafischer Menus Bildskalierung RTE  Standardmäßig wird für den IE ein RTE mitgeliefert, dieser ist konfigurierbar Auch für andere Browser existieren RTE-Erweiterungen, bspw. htmlarea Mit CSS-Styled-Content und weiteren Extension wurde ein Schritt in Richung barrierefrei und Accessebility unternommen Wiebke Peters - CampusOnline

8 Einführung in die Typo3-Nutzung am Beispiel-Webauftritt
Typo3 Workshop Einführung in die Typo3-Nutzung am Beispiel-Webauftritt Wiebke Peters - CampusOnline

9 Wiebke Peters - CampusOnline
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

10 Das Backend - Arbeitsoberfläche
Verlinkung des Bildes auf das Backend, bzw. weiter im Backend und kurze Erläuterung der einzelnen Module und Ansichten 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 Inhaltselemente
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 Wiebke Peters - CampusOnline
Typo3 Workshop Rechte und Benutzer Wiebke Peters - CampusOnline

14 Wiebke Peters - CampusOnline
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

15 Einführung in die Begriffe TypoScript und Templates
Typo3 Workshop Einführung in die Begriffe TypoScript und Templates Wiebke Peters - CampusOnline

16 Wiebke Peters - CampusOnline
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 Wiebke Peters - CampusOnline
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 Template-Record angelegt Man unterscheidet Root-Templates und Extension-Templates Wiebke Peters - CampusOnline

18 Wiebke Peters - CampusOnline
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 Wiebke Peters - CampusOnline
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 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

22 Wiebke Peters - CampusOnline
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
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 = HTML myObject.value = <BLINK> HTML - code </BLINK> page.10=TEXT page.10.value= Ich bin ein Text Wiebke Peters - CampusOnline

27 TypoScript-Syntax - Kommentare
# oder / einzeiliger Kommentar /* mehrzeiliger Kommentar*/ Wiebke Peters - CampusOnline

28 Wiebke Peters - CampusOnline
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

29 Wiebke Peters - CampusOnline
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 mycontant=mein text temp.menu=HMENU temp.menu.1=TMENU temp.menu.1{ wrap=<ul> | </ul> NO{ linkWrap=<li>| </li> } page=PAGE page.typeNum=0 page.10 < temp.menu temp.menu wird also nach page.10 kopiert Wiebke Peters - CampusOnline

30 Wiebke Peters - CampusOnline
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 Wiebke Peters - CampusOnline
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=PAGE page.typeNum=0 [browser=msie] page{ 10=TEXT 10.value=Hui ein Internet Explorer! } [else] 20=TEXT 20.value= Irgend ein anderer Browser! [end] !!! Bedingungen können nicht innerhalb von mit {} geschachtelten Eigenschaften gesetzt werden !!! Wiebke Peters - CampusOnline

32 Hilfreiche Dokumente:
TypoScript by Example TypoScript Syntax and In-depth Study TypoScript Templates TSref – TypoScript Reference Wiebke Peters - CampusOnline

33 Erstellen einer Webseite – am Beispiel
Typo3 Workshop Erstellen einer Webseite – am Beispiel Wiebke Peters - CampusOnline

34 Wiebke Peters - CampusOnline
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

35 Wiebke Peters - CampusOnline
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 Wiebke Peters - CampusOnline
Template-Konzepte Standard-Templates  Out-of-the-Box Reine TypoScript-Templates TypoScript und Einbinden einer HTML-Vorlage und CSS-Stylesheets Template Auto-Parser TemplaVoila 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 Wiebke Peters - CampusOnline
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 Wiebke Peters - CampusOnline
TMENU Linke Navigation Rootline-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 styles.content.get=CONTENT styles.content.get{ table=tt_content select.orderBy=sorting select.where=colPos=0 select.languageField=sys_language_uid } Die anderen Spalten: styles.content.getLeft styles.content.getRight styles.content.getBorder Wiebke Peters - CampusOnline

44 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

45 Wiebke Peters - CampusOnline
Weitere Elemente Header-Image Pagetitel Seitentitel Bild zu jeder Seite Copyright Siehe Handout Wiebke Peters - CampusOnline

46 Extension einbinden – tt_news
Download der Extension Über Extenstionmanager Von der typo3.org Webseite 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: Layout-Template und CSS lassen sich individuell anpassen Wiebke Peters - CampusOnline

47 Wiebke Peters - CampusOnline
Web-Quellen – Offizielle Typo3 Webseite und Community – Typo3 WiKi – mittwaldmedien services – Agentur für Typo3 - Handbuch für Redakteure Google! Stichwort: Typo3 (ca Suchergebnisse) Wiebke Peters - CampusOnline

48 Wiebke Peters - CampusOnline
Literaturhinweise TYPO3 Enterprise Content Management von Werner Altmann, Rene Fritz, Daniel Hinderink Verlag: Open Source Press Erscheinungsdatum: September 2004 ISBN: Typo3 - Content-Management von Christoph Lindemann, Maik Caro Verlag: Franzis Erscheinungsdatum: März 2005 ISBN: X TYPO3 Content Management, m. CD-ROM von Alwin Viereck Verlag: Mitp-Verlag Erscheinungsdatum: März 2005 ISBN: X Typo3 Praxiswissen Von Robert Meyer O'Reilly Erscheinungsdatum: April 2005 ISBN: X Das Einsteigerseminar TYPO3 von Hubert Partl, Tobias Müller-Prothmann Verlag: Vmi Buch Erscheinungsdatum: März 2005 ISBN: Einstieg in TYPO3, m. CD-ROM von Andreas Stöckl, Frank Bongers Verlag: Galileo Press Erscheinungsdatum: Februar 2005 ISBN: Wiebke Peters - CampusOnline

49 Wiebke Peters - CampusOnline
Fragen und Austausch Wiebke Peters - CampusOnline