Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

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

Ähnliche Präsentationen


Präsentation zum Thema: "Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline"—  Präsentation transkript:

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

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

3 Wiebke Peters - CampusOnline3 Typo3 Workshop Überblick/ Leistungsumfang

4 Wiebke Peters - CampusOnline4 Ü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

5 Wiebke Peters - CampusOnline5 Ü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 Coummunitywww.typo3.org Entstehung seit Ende der 90iger - Geistiger Vater und zentraler Entwickler ist der Däne Kasper Skårhøj Aktuelle Typo3 Version: Typo3 3.8

6 Wiebke Peters - CampusOnline6 Ü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

7 Wiebke Peters - CampusOnline7 Ü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

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

9 Wiebke Peters - CampusOnline9 Voraussetzungen Aktueller Browser - empfohlen werden Internet Explorer, Mozilla, Firefox Cookies müssen aktiviert sein Popups müssen erlaubt sein Login: URL + /typo3 Backend = Arbeitsfläche Frontend = Webseite

10 Wiebke Peters - CampusOnline10 Das Backend - Arbeitsoberfläche Modulleiste Navigationsleiste Detailansicht

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

12 Wiebke Peters - CampusOnline12 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

13 Wiebke Peters - CampusOnline13 Typo3 Workshop Rechte und Benutzer

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

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

16 Wiebke Peters - CampusOnline16 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

17 Wiebke Peters - CampusOnline17 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 Templates in Typo3

18 Wiebke Peters - CampusOnline18 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)

19 Wiebke Peters - CampusOnline19 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

20 Wiebke Peters - CampusOnline20 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

21 Wiebke Peters - CampusOnline21 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

22 Wiebke Peters - CampusOnline22 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

23 Wiebke Peters - CampusOnline23 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

24 Wiebke Peters - CampusOnline24 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!

25 Wiebke Peters - CampusOnline25 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

26 Wiebke Peters - CampusOnline26 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 = HTML - code page.10=TEXT page.10.value= Ich bin ein Text

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

28 Wiebke Peters - CampusOnline28 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( EINE TABELLE )…

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

30 Wiebke Peters - CampusOnline30 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

31 Wiebke Peters - CampusOnline31 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] page{ 20=TEXT 20.value= Irgend ein anderer Browser! } [end] !!! Bedingungen können nicht innerhalb von mit {} geschachtelten Eigenschaften gesetzt werden !!!

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

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

34 Wiebke Peters - CampusOnline34 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)

35 Wiebke Peters - CampusOnline35 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

36 Wiebke Peters - CampusOnline36 Template-Konzepte Standard-Templates Out-of-the-Box Reine TypoScript-Templates TypoScript und Einbinden einer HTML- Vorlage und CSS-Stylesheets Template Auto-Parser TemplaVoila

37 Wiebke Peters - CampusOnline37 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 Marker: Werden nur einzeln verwendet und durch die Ausgabe der TS-Konfiguration ersetzt ###MARKER### (Bsp.: ###COPYRIGHT###) Groß-/Kleinschreibung beachten!

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

39 Wiebke Peters - CampusOnline39 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 -Tags CSS Styled Content (CSC) Rendering basiert auf CSS CSC wird sich langfristig durchsetzen

40 Wiebke Peters - CampusOnline40 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

41 Wiebke Peters - CampusOnline41 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)

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

43 Wiebke Peters - CampusOnline43 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 }

44 Wiebke Peters - CampusOnline44 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 }

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

46 Wiebke Peters - CampusOnline46 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

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

48 Wiebke Peters - CampusOnline48 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:

49 Wiebke Peters - CampusOnline49 Fragen und Austausch


Herunterladen ppt "Wiebke Peters - CampusOnline1 Typo3 Workshop Hochschule Neubrandenburg Wiebke Peters Projekt CampusOnline"

Ähnliche Präsentationen


Google-Anzeigen