Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline campusonline@hs-wismar.de Wiebke Peters - CampusOnline

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

Überblick/ Leistungsumfang Typo3 Workshop Überblick/ Leistungsumfang Wiebke Peters - CampusOnline

Ü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

Ü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

Ü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

Ü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

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

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

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

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

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

Wiebke Peters - CampusOnline Typo3 Workshop Rechte und Benutzer Wiebke Peters - CampusOnline

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Vorbereitung der Layout-Vorlage (2) Ausgezeichnete HTML-Vorlage Wiebke Peters - CampusOnline

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

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

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

Wiebke Peters - CampusOnline TMENU Linke Navigation Rootline-Menu (Pfad) Infomenü (Sitemap, Kontakt, Impressum)  Siehe Handout Wiebke Peters - CampusOnline

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

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

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

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

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

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

Wiebke Peters - CampusOnline Fragen und Austausch Wiebke Peters - CampusOnline