Effizienter Aufbau eines TYPO3 Projektes

Transkript

1 Effizienter Aufbau eines TYPO3 Projektes

2 Vortragende Susanne Moog Marc Wöhlken Patrick Rodacker

3 Usergroup Bremen gegründet Februar 2006 regelmäßiger Stammtisch jeden 2. Mittwoch im Monat (un)regelmäßige Workshops Kooperation mit dem TZI

4 Hinweis 45 min Vortrag, 10 min Pause, 45 min Vortrag Raucherecke unten? Kaffeekasse Handy aus! Klingeln 5,- EURO für die Kaffeekasse Fragen jederzeit zulässig vertiefende Fragen ggf für später merken Folien und Beispielsystem auf Website

5 Übersicht Seitenaufbau Menüs, Daten, Templates Multisites Datei Organisation Backend Anpassung Layout, Benutzer, Rechte, Task Center

6 Begriffe Template vs. HTML Vorlage Multisite

7 Seitenaufbau Übersicht Beispiel Produktgruppe A

8 Seitenaufbau Menüs Header Hauptmenü Klickpfad Inhalt Sektionsbild Hauptbereich Linke Spalte Footer

9 Seitenaufbau Ziel: (Fast) alle Aspekte der Website durch einen Redakteur editierbar machen Seitenstruktur spiegelt sich im Seitenbaum wieder

10 Menüs Header links Header rechts Hauptmenü

11 Menüs Auslagerung Redakteur kann Navigation ändern flexibe Möglichkeiten über Shortcuts, Mountpoints und normale Seiten

12 Datensätze Frontend user News Inhalt linke Spalte (permanent) Footer

13 Datensätze Bild unterhalb des Hauptmenüs Inhalt linke Spalte realisiert als Container für beliebig viele Inhaltselemente Footer analog Inhalt des SysOrdners Permanenter Inhalt linke Spalte (id=95)

14 Template Organisation Template Ansatz: Ordnerstruktur Templates HTML Vorlage mit Markern Gruppierung in thematische Bereiche

15 Template Organisation Ziele: Übersicht Wiederverwendung exzessive Vererbung Aufteilung in logische Einheiten Template Analyzer: Hierarchie auf Root Ebene

16 Template Organisation include all templates für Bereiche zur einfachen Einbindung Inhalte SysOrdner navigation (id=50) Includes Standard Template (id=7)

17 Template Organisation Kontrolle via Template Analyzer TypoScript Object Browser Ausschnit TS ObjectBrowser mit Mouseover Template Analyzer: Ansicht TS Code im Setup des lib.navigation.main (id=18) Templates

18 Template Organisation t3editor im Einsatz t3editor seit 4.2 mit ausgeliefert, aber nicht vorinstalliert Syntaxhighlighting Bracket Handling Ausblick: code completion

19 Template Organisation Auslagerung Templates ins Dateisystem <INCLUDE_TYPOSCRIPT: source="file: EXT:fileadmin/templates/firma_abc/ts/tt_content.image.copyright.txt" > Beispiel: tt_content.image.copyright interessant für die Integration in Versionsverwaltung (Subversion, CVS, etc.) Verwendung externer Editoren

20 Template Organisation TypoScript Datei im UltraEdit Externe Editoren UltraEdit, BBEdit Coda, EditPlus HomeSite, jedit Kate, Notepad++ SubEthaEdit, PSPad mit SweeTS Textmate

21 Template Recycling Erstellen einer Website auf Basis einer anderen, z.b.: Tochterfirma Microsite für Produkt Nur wenige Werte müssen geändert werden Pflege per Typoscript? Jein! Oft besser / einfacher per Constant-Editor

22 Der Constant-Editor Beispiel: Template Content

23 Verwendung von Konstanten Constants (Definition): name_konstante = wert_konstante Setup (Anwendung): 10 = TEXT 10.value = {$name_konstante} Eingabefeld erzeugen: #cat=kategorie/gruppe/sortierung; type=typ; label=beschriftung name_constante = vorgabewert

24 Syntax Constant-Editor 1 Kategorie: Im Prinzip frei wählbar, einige vordefiniert advanced basic content menu page plugin.extension_key

25 Syntax Constant-Editor 2 Gruppe: /enable = Enable Features /dims = Dimensions, width, height, pixels /file = Files /typo = Typography /color = Colors /other = Others

26 Syntax Constant-Editor 3 Sortierung: alphanumerischer Wert Label: Freier String, bis Zeilenende Typ: boolean, int, int+, int[m-n], offset text, small Wrap color file[mime_typ] options[text1=wert1,text2=wert2,...]

27 Beispiel Farbauswahl #cat=workshop/color/c000; type=color; label= Hintergrundfarbe ws.background = ff0000 page.10.marks.bgcolor = {$ws.background}

28 Beispiel Options # cat=workshop/others/c001; type=options[xhtml 1.0 transitional=xhtml_trans,xhtml 1.0 strict=xtml_strict]; label= DOCTYPE ws.doctype = xhtml_strict config.doctype = {$ws.doctype}

29 Bilder als Erläuterung

30 Das Finale 1/2 # cat=workshop/file/c001; type=file[jpg]; label= Kopfgrafik ws.headimg = # cat=workshop/color/c002; type=color; label= Hintergrund ws.background = green

31 Das Finale 2/2 TSConstantEditor.workshop { header = Template Elemente description = Hinweise zur Benutzung bulletlist = Logo-Format sollte 16:9 sein // Hintergrund nicht zu dunkel! image = gfx/business_basic.gif 1 = ws.headimg 2 = ws.background }

32 Organisation von Dateien Direkter Dateiupload per Inhaltselement File Modul: 1:1 Abbildung auf Dateisystem DAM (Digital Asset managment): Pro: Kategorisierung, Meta-Daten, Verwaltung per Referenz Contra: Nicht alle Extensions unterstützen DAM Umgewöhnung für Redakteure (Noch) Probleme unter TYPO3 V 4.2

33 DAM Installation Extensions:

34 DAM Upload

35 DAM Upload

36 DAM Upload

37 DAM Upload

38 DAM Suche

39 DAM Suche

40 DAM: Meta-Daten Extension: dam_index Übernahme von Metadaten (IPTC) Weitere Formate per Extension EXIF PDF Info Word, Excel Metaangaben Umsetzung über Services = Erweiterbar

41 DAM: Meta-Daten

42 DAM: Meta-Daten

43 DAM: Meta-Daten

44 DAM: Meta-Daten

45 DAM: Meta-Daten

46 Backend-Anpassungen Komplexität reduzieren Übersicht erhöhen Routineaufgaben beschleunigen Lernen vereinfachen 46

47 Übersicht TS-Config Rechteverwaltung Task-Center Shortcuts 47

48 TS-Config Page-TS-Config Anpassungen auf Seitenebene User-TS-Config Anpassungen auf Benutzerebene Referenz: doc_core_tsconfig 48

49 Page-TS-Config Unbenutzte Spalten ausblenden Ausblenden von überflüssigen Optionen Umbenennen von Optionen Beschränkungen für neue Datensätze Listenansicht für viele Datensätze RTE-Konfiguration 49

50 Unbenutzte Spalten ausblenden mod.web_layout { tt_content.colpos_list = 0 } 0 = normal 1 = links 2 = rechts 3 = Rand 50

51 Ausblenden von überflüssigen Optionen mod { web_layout { tt_content.colpos_list = 0 disablesearchbox = 1 } }

52 Page-Modul alt

53 Page-Modul neu

54 Umbenennen von Optionen TCEFORM { tt_content { colpos { removeitems = 1,2,3 altlabels.0 = Inhalt } } }

55 Umbenennen von Optionen

56 Beschränkungen für neue Datensätze mod { web_list { allowednewtables = pages, tt_news } }

57 Beschränkung für neue Datensätze

58 Listenansicht, vereinfacht mod { web_list { allowednewtables = pages,tt_content,tt_news listonlyinsingletableview = 1 } }

59 Listenansicht, vereinfacht

60 RTE-Konfiguration # Buttons die gezeigt/versteckt werden ## Use stylesheet file rather than the above mainstyleoverride and inlinestyle properties to style the contents (htmlarea RTE only) showbuttons = textstyle, textstylelabel, blockstyle, blockstylelabel, bold, italic, underline, left, center, right, orderedlist, unorderedlist, insertcharacter, line, link, image, removeformat, findreplace, insertcharacter, undo, redo, subscript, superscript, acronym, copy, cut, paste, showhelp ignoremainstyleoverride = 1 proc { hidebuttons = cellinsertafter, celldelete, cellsplit, cellmerge, about, table, toggleborders, tableproperties, rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, columninsertbefore, columninsertafter, columndelete, columnsplit, cellproperties, cellinsertbefore, fontstyle, formatblock, fontsize, strikethrough,lefttoright, righttoleft, textcolor, bgcolor, textindicator, emoticon, user, spellcheck, chmode, inserttag, outdent, indent, justifyfull # tags die erlaubt / verboten sind allowtags = table, tbody, tr, th, td, h1, h2, h3, h4, h5, h6, div, p, br, span, ul, ol, li, re, blockquote, strong, em, b, i, u, sub, sup, strike, a, img, nobr, hr, tt, q, cite, abbr, acronym, center Vielleicht im nächsten Workshop denytags = font # Hält die RTE Icons gegroupt zusammen # br wird nicht zu p konvertiert keepbuttongrouptogether = 1 dontconvbrtoparagraph = 0 # blendet Statusbar in htmlarea aus showstatusbar = 0 # Do not allow insertion of the following tags hidetags = font ## Add styles Left, center and right alignment of text in paragraphs and cells. inlinestyle.text-alignment ( # Tabellen Optionen in der RTE Toolbar p.align-left, h1.align-left, h2.align-left, h3.align-left, h4.align-left, h5.align-left, h6.alignleft, td.align-left { text-align: left; } hidetableoperationsintoolbar= 0 p.align-center, h1.align-center, h2.align-center, h3.align-center, h4.align-center, h5.aligncenter, h6.align-center, td.align-center { text-align: center; } keeptogglebordersintoolbar= 1 p.align-right, h1.align-right, h2.align-right, h3.align-right, h4.align-right, h5.align-right, h6.align-right, td.align-right { text-align: right; } # Tabellen Editierungs-Optionen (cellspacing/ cellpadding / border) disablespacingfieldsetintableoperations = 1 }

61 RTE-Konfiguration

62 Konfiguration überprüfen Web>Info, Auswahl TS-Config Mögliche Optionen herausfinden: Konfiguration unter Admin-Funktionen

63 User-TS-Config Syntax gleich mit Page-TS-Config Nur Benutzer- / Gruppenebene

64 Nützliche Optionen options { pagetree.showpageidwithtitle= 1 clipboardnumberpads = 1 alertpopups = 4 savedocnew = 1 } setup.override { titlelen = 200 }

65 nützliche Optionen

66 Standardwerte TCAdefaults { pages.hidden = 0 pages.title = Änder' mich tt_news.author = Hannelore }

67 Standardwerte

68 Rechte & Gruppen Benötigte Gruppen Gruppenhierarchie und Vererbung Rechte zuweisen

69 Beispielgruppen Allgemeine Redakteure Chefredakteure Administratoren Redakteur Personalabteilung Redakteure Produktlinien

70 Rechte zuweisen auf Gruppenebene auf Benutzerebene erblich addierend