Extensions für RedakteurInnen. Zentraler Informatikdienst Eva Birnbacher

Transkript

1 Extensions für RedakteurInnen Zentraler Informatikdienst Eva Birnbacher

2 TYPO3 Extensions für RedakteurInnen Zentraler Informatikdienst der Universität Wien Eva Birnbacher Stand: Dezember 2008 Dieses Skriptum gilt als Begleitunterlage der Seminare des Zentralen Informatikdienstes der Universität Wien. Es ersetzt das Original Handbuch in keiner Art und Weise. Die in diesem Dokument enthaltene Information kann ohne Vorankündigung geändert werden. Die einzelnen Arbeitsschritte wurden von der Autorin mit größter Sorgfalt erarbeitet bzw. zusammengestellt. Trotzdem sind Fehler nicht auszuschließen. Der Zentrale Informatikdienst der Universität Wien sieht sich deshalb gezwungen, darauf hinzuweisen, dass weder eine Garantie noch die juristische Verantwortung oder irgendeine Haftung für Folgen, die auf fehlerhafte Angaben zurückgehen, übernommen werden kann. Für die Mitteilung eventueller Fehler ist die Autorin jederzeit dankbar. Alle Rechte vorbehalten. Kein Teil dieses Dokumentes darf in irgendeiner Form (Druck, Fotokopie oder einem anderen Verfahren) ohne schriftliche Genehmigung des Zentralen Informatikdienstes der Universität Wien reproduziert oder unter Verwendung elektronischer Systeme (Scanner,...) vervielfältigt oder verbreitet werden.

3 Inhaltsverzeichnis Inhaltsverzeichnis 1 FLEXIBLE CONTENT ELEMENT GRUNDLAGEN ARBEITEN MIT FLEXIBLE CONTENT ELEMENTEN ARBEITEN MIT BILDERN IN FLEXIBLE CONTENT ELEMENTEN DIE NEWS EXTENSION GRUNDLAGEN ARBEITEN MIT NEWS - VORARBEITEN ARBEITEN MIT NEWS BEARBEITEN DER EINZELNEN ELEMENTE Tipps & Tricks zu Bearbeitung DAS NEWS-PLUGIN Einzelansicht definieren ÜBUNG NEWS ELEMENTE & FLEXIBLE CONTENT FAQ FREQUENTLY ASKED QUESTIONS DAS FAQ-PLUGIN SORTIEREN DER EINZELNEN FAQ-EINTRÄGE FILEUPLOAD PER DRAG& DROP BILDER AUS DEM INTERNET VIA MASS UPLOAD HOCHLADEN POWERMAIL GRUNDLAGEN ARBEITEN MIT POWERMAIL - VORARBEITEN ARBEITEN MIT POWERMAIL BEARBEITEN EINZELNER ELEMENTE DIE FORMULARERSTELLUNG TIPPS & TRICKS Verwendung von Radiobuttons Beispiel für eine Bestätigungsseite... 31

4

5 Flexible Content Element 1 Flexible Content Element 1.1 Grundlagen Unter einem Flexible Content Element versteht man ein Inhaltselement, das jeder TYPO3-Benutzer selbst definieren kann. Im Prinzip steckt ein Tabellenraster dahinter, mit dem Sie beispielsweise Texte und Grafiken in zwei oder mehreren definierten Spaltenbereichen anordnen können. Dadurch, dass die einzelnen Flexible Content Element auch untereinander verschachtelt werden können, gibt es eine Vielzahl von Gestaltungsmöglichkeiten, die mit den herkömmlichen Mitteln nicht realisierbar wären. Flexible Content ist im Prinzip eine Tabelle zum Gestalten im Prinzip ein Raster. Mit Flexible Content besteht die Möglichkeit Inhalt nochmals zu unterteilen. Z.B. kann der Hauptinhalt nochmals unterteilt werden (z.b. 2-spaltig) Nachfolgend finden Sie zwei Beispiele, wie Seiten mit Hilfe von Flexible Content Elementen unterteilt werden können. Beispiel 1 Strukturieren mit Flexible Content Elementen Beispiel 2 Strukturieren mit Flexible Content Elementen 1

6 Flexible Content Element 1.2 Arbeiten mit Flexible Content Elementen Nachfolgend wird gezeigt, wie eine Seite mit Hilfe von Flexible Content Elementen strukturiert werden kann. 1. Suchen Sie im Seitenbaum die Seite unter bzw. neben der Sie eine neue Seite anlegen wollen und klicken sie mit der rechten Maustaste auf den Namen, um das Kontextmenü aufzurufen. In unserem Fall ist es die Website mit der Bezeichnung Institut für TYPO3-Schulung. 2. Es öffnet sich das Kontextmenü aus dem Sie den Eintrag Neu durch Anklicken auswählen. 3. Die Arbeitsfläche mit der Bezeichnung Neuer Datensatz wird angezeigt und stellt sämtliche Optionen für das Anlegen einer neuen Seite bereit. Abbildung 1: Neue Seite anlegen 4. Sie können Ihre neue Seite wahlweise eine Ebene unter dem Ausgangspunkt anlegen dazu klicken Sie auf die Option Seite (in). Alternativ können Sie Ihre Seite aber auch auf der Ebene des Ausgangspunktes anlegen dazu klicken Sie auf die Option Seite (nach). 5. Sie erhalten als nächstes die Maske für die Erfassung der grundlegenden Seiteninformationen. Geben Sie in das Eingabefeld Seitentitel den gewünschten Seitentitel ein und sichern Sie das Dokument mit einem Klick auf die Schaltfläche Dokument sichern. 6. Klicken Sie auf die neu erstelle Seite im Seitenbaum. Die Arbeitsfläche zeigt eine Übersicht der Seite an, die allerdings noch leer ist. 7. Um ein neues Inhaltselement einzufügen, klicken Sie auf das Symbol Neues Element anlegen. 8. Im Bereich Flexibler Inhalt finden Sie die Möglichkeiten, wie Sie Ihre Seite unterteilen können. 2

7 Flexible Content Element Abbildung 2: Auswahl Flexible Content Element 9. Wählen Sie beispielsweise die Option FCE 50%-50% durch Anklicken aus, worauf die Arbeitsfläche wiederum die Eingabefelder für die Erfassung von Seiteninformationen zur Verfügung stellt. Abbildung 3: Seiteneigenschaften für Flexible Content Elemente 10. Im Bereich Typ ist bereits die Einstellung Flexibler Inhalt zu finden. 11. Geben Sie im Bereich Überschrift in das Eingabefeld die gewünschte Überschrift ein. 12. Im Bereich Datenstruktur finden Sie die gewählte Vorlage angezeigt. Mit Hilfe der Dropdown-Liste in diesem Bereich können Sie unterschiedliche Einstellungen im Hinblick auf die Spaltengröße wählen. 3

8 Flexible Content Element 13. Wenn Sie die gewünschten Einträge gemacht haben, klicken Sie auf die Schaltfläche Dokument sichern und schließen. 14. Wie Sie anhand der untenstehenden Abbildung erkennen können, ist das Inhaltelement bereits in zwei Teile geteilt. 15. Sie können nun wahlweise das Inhaltselement im Bereich Links oder Rechts anklicken und nachdem Sie gewählt haben, welche Art von Inhalt Sie einfügen wollen an gewünschter Stelle Text bzw. Grafiken wie gewohnt einfügen. Abbildung 4: Flexible Content Inhaltselement in 2 Spalten geteilt 16. Wenn Sie mit der Texterfassung fertig sind bzw. wenn Sie alle Grafiken eingefügt haben, dann klicken Sie auf die Schaltfläche Dokument sichern und Webseite anzeigen. Abbildung 5: Flexible Content - 2spaltiger Text 4

9 Flexible Content Element 17. In der Vorschau sollte nun die nachfolgend gezeigte Aufteilung der Webseite angezeigt werden. Abbildung 6: Webansicht Flexible Content 2spaltig 18. Damit die Spaltenaufteilung besser zum Vorschein kommt, ist es mitunter sinnvoll den Text mit Blocksatz zu formatieren. 1.3 Arbeiten mit Bildern in Flexible Content Elementen Neben herkömmlichem Text können Sie auch Grafiken innerhalb einer Seite, die mit Flexible Content Elementen strukturiert ist, verwenden. Dazu gehen Sie wie nachfolgend beschrieben vor. 1. Wählen Sie im Seitenbaum die Seite, die mit Flexible Content Elementen bereits strukturiert wurde, oder erstellen Sie eine neue Seite. 2. Die Arbeitsfläche zeigt eine Übersicht der Seite an, die bereits Inhaltselemente vom Typ Text beinhaltet. 3. Um ein neues Inhaltselement einzufügen, klicken Sie wahlweise im Bereich Links oder Rechts unterhalb des bereits bestehenden Textes auf das Symbol Neues Element anlegen. 4. Als nächstes müssen Sie den Typ des Inhaltselements festlegen. Wählen Sie hier beispielsweise den Eintrag Text mit darunterliegendem Bild. 5. Die Arbeitsfläche stellt nun die entsprechenden Eingabemöglichkeiten zur Verfügung. 6. Wenn Sie mit der Texterfassung fertig sind bzw. wenn Sie alle Grafiken eingefügt haben, dann klicken Sie auf die Schaltfläche Dokument sichern und Webseite anzeigen. 7. In der Vorschau sollte nun Text in Kombination mit einem Bild sichtbar sein. 5

10 Flexible Content Element 8. Allerdings werden Sie feststellen, dass das Bild verzerrt dargestellt wird. Daher ist es wichtig innerhalb der Bildeigenschaften zumindest die Breite des Bildes in px zu definieren (idr ist 300px ein brauchbarer Wert). Abbildung 7: Flexible Content - Text und Bild mit fixer Breite 300px aufgeteilt auf 2 Spalten 6

11 Die News Extension 2 Die News Extension 2.1 Grundlagen Um mit News zu arbeiten, sind folgende Elemente notwendig: SysOrdner (sog. Systemordner; hier sind die News und Kategorien abgelegt) Listenansicht (Plugin & Liste der News) Newsseite (hierin findet sich der Einzelinhalt) 2.2 Arbeiten mit News - Vorarbeiten Die nachfolgend beschriebenen Schritte zählen zu den nötigen Vorarbeiten, damit mit dem News Plugin sinnvoll gearbeitet werden kann. 1. Ausgehend von einer bereits angelegten Seite klicken Sie im Modulbereich Web auf das Modul Funktionen. 2. Die Arbeitsfläche zeigt nun die Eingabefelder für Erweiterte Funktionen an. 3. Im Bereich Erzeuge mehrere Seiten können nun die benötigten drei Elemente/Seiten eingegeben werden. 4. Im Eingabefeld Seite 1 wird beispielsweise eine Seite für die Listenansicht mit der Bezeichnung Liste erstellt. 5. Im Eingabefeld Seite 2 wird eine Seite für die Detailinformation mit der Bezeichnung Einzelansicht erstellt. 6. Im Eingabefeld Seite 3 wird zu guter letzt der SysOrdner mit der Bezeichnung sys_news erstellt. Abbildung 8: Erzeugen der Seiten für News 7

12 Die News Extension 7. Mit einem Klick auf die Schaltfläche Seite anlegen wird eine Sicherheitsabfrage gestartet, die mit einem Klick auf OK zu bestätigen ist. Danach werden die entsprechenden Seiten erstellt und sind im Seitenbaum sichtbar. Abbildung 9: Sicherheitsabfrage beim Erstellen mehrere Seiten 2.3 Arbeiten mit News Bearbeiten der einzelnen Elemente Nachdem alle benötigten Seiten angelegt und im Seitenbaum sichtbar sind, gilt es deren Eigenschaften wie nachfolgend beschrieben zu bearbeiten. 1. Wählen Sie im Seitenbaum die Seite mit der Bezeichnung Einzelseite aus und rufen Sie durch Anklicken mit der rechten Maustaste das Kontextmenü auf. 2. Wählen Sie aus dem Kontextmenü die Option Seiteneigenschaften bearbeiten. 3. Die Arbeitsfläche stellt nun die entsprechenden Optionen für die Festlegung der Seiteneigenschaften zur Verfügung. 4. Ändern Sie durch Auswahl aus der Dropdown-Liste im Bereich Typ die Voreinstellung Standard auf Nicht im Menü ab. 5. Sie erhalten einen Hinweis, der mit einem Klick auf OK zu bestätigen ist. Abbildung 10: Bestätigung einer Änderung des Typs. 6. Alternativ zu obiger Vorgangsweise können Sie auch im Bereich Im Menü verstecken durch Anklicken des Kästchen die Option aktivieren der Effekt ist in beiden Fällen der gleiche die Seite wird nicht im Menü angezeigt. 9. Sie müssen die getroffenen Einstellungen mit einem Klick auf die Schaltfläche Dokument sichern und schließen speichern. 7. Als nächstes wird via Seitenbaum der SysOrdner mit der Bezeichnung sys_news ausgewählt und via Kontextmenü die Option Seiteneigenschaften bearbeiten aufgerufen. 8

13 Die News Extension 8. Ändern Sie durch Auswahl aus der Dropdown-Liste im Bereich Typ die Voreinstellung Standard auf SysOrdner ab. Abbildung 11: SysOrdner erstellen 9. Sie erhalten wiederum einen Hinweis, der mit einem Klick auf OK zu bestätigen ist. 10. Geben Sie im Bedarfsfall weitere Einträge ein und klicken Sie abschließend auf die Schaltfläche Dokument sichern und schließen. 11. Jetzt müssen innerhalb des SysOrdners die Kategorien und Newsartikel erfasst werden. 12. Da SysOrdner nur in der Listenansicht bearbeitet werden können, müssen Sie im Modulbereich Web auf das Modul Liste klicken, worauf sich die Arbeitsfläche wie folgt abändert. Abbildung 12: Arbeiten mit dem SysOrdner 13. Beim Anlegen von Kategorien und Newsartikel ist es wichtig die richtige Reihenfolge einzuhalten. ZUERST werden die einzelnen Kategorien angelegt und erst DANACH die Newsartikel. 14. Klicken Sie auf das Symbol Neuen Datensatz anlegen, das sich am rechten oberen Rand befindet, worauf die Arbeitsfläche die nachfolgend dargestellten Optionen bietet. 9

14 Die News Extension Abbildung 13: Anlegen einer News Kategorie 15. Klicken Sie auf die Option News Kategorie worauf die Arbeitsfläche die entsprechende Eingabemaske zur Verfügung stellt. 16. Geben Sie im Eingabefeld Titel einen beliebigen Namen für die Newskategorie ein (die Bezeichnung ist idr vollkommen zu vernachlässigen, da alles weitere über die ID gesteuert wird) und klicken Sie auf das Symbol Dokument sichern und schließen. Abbildung 14: Benennen der News Kategorie 17. Im nächsten Schritt geht es darum die passende Newsmeldung zu erfassen. Dazu klicken Sie erneut auf das Symbol Neuen Datensatz anlegen, das sich am rechten oberen Rand befindet. 18. Klicken Sie auf die Option News, worauf die Arbeitsfläche die entsprechenden Eingabefelder zur Verfügung stellt Geben Sie im Eingabefeld Titel den gewünschten Titel für die erste Newsmeldung ein. Achten Sie darauf, dass die Einstellungen in den Bereichen Verstecken/Start/Stop bzw. Datum und Zeit korrekt gesetzt sind. Hier sind die häufigsten Fehlerquellen zu finden, wenn News nicht angezeigt werden.

15 Die News Extension 20. Füllen Sie weiters alle gewünschten/benötigen Felder entsprechend aus und geben Sie im Bereich Text den gewünschten Text für die Newsmeldung ein. Abbildung 15: Erfassen von News 21. Nun müssen Sie die Newsmeldung noch der richtigen Kategorie zuordnen. Dazu klicken Sie auf das Register Relations. 22. Im Bereich Category wählen Sie aus der Liste der Objekte Ihre zuvor angelegte News Kategorie aus, die daraufhin im Bereich Ausgewählt erscheint. Beachten Sie, dass es hier keinerlei Sortierung innerhalb der Kategorieliste gibt die zuletzt angelegten Kategorien werden immer am Ender der Liste angezeigt. 23. Fügen Sie nun unter Bilder eventuell gewünschte Bilder hinzu bzw. befüllen Sie die restlichen Eingabefelder, wenn gewünscht. 24. Abschließend klicken Sie auf das Symbol Dokument sichern und schließen. 11

16 Die News Extension Tipps & Tricks zur Bearbeitung Mitunter kann es passieren, dass die einzelnen Newsartikel keiner Kategorie zugeordnet wurden. Einen guten Überblick über fehlende Kategorisierung erhält man, 1. indem man im Bereich News auf das Symbol mit dem Pluszeichen klickt. 2. Es öffnet sich eine Liste mit allen Feldern, die wahlweise angezeigt werden können. 3. Wählen Sie aus der Liste den Eintrag Kategorie und klicken Sie auf die Schaltfläche Felder setzen. Abbildung 16: Zusätzliche Felder anzeigen 4. Neben den einzelnen Newsartikel werden nun die entsprechenden Kategorien (sofern vorhanden) angezeigt. 5. Sollte die eine oder andere Kategorie fehlen, so können Sie diese einfach über Anklicken des Bearbeitungssymbols (Bleistift) links neben dem Eintrag Kategorie erledigen. 6. Es werden sämtliche Newsartikel in Listenform angezeigt. Darunter befindet sich die Möglichkeit die Kategorie zu wählen. 12 Abbildung 17: Nachträgliche Zuordnung von Kategorien 7. Ist jedem Artikel die richtige Kategorie zugeordnet, müssen Sie abschließend auf das Symbol Dokument sichern und schließen klicken.

17 Die News Extension 2.4 Das News-Plugin Nachdem sämtliche Elemente für die Verwendung von News erstellt und bearbeitet wurden, wird im nächsten Schritt auf das News-Plugin zugegriffen. 1. Klicken Sie im Bereich Web auf das Modul Seite. Im Seitenbaum klicken Sie auf die Seite mit der Bezeichnung Liste. 2. Klicken Sie auf das Symbol Neues Element anlegen und wählen Sie aus dem Bereich Erweiterungen den Eintrag News durch Anklicken aus, worauf die Arbeitsfläche die nötigen Eingabebereiche für das News- Plugin zur Verfügung stellt, wie nachfolgende Abbildung zeigt. Abbildung 18: Eingabemaske für News-Plugin 3. Geben Sie im Bereich Plugin Optionen innerhalb der Registerkarte Allgemeine Einstellungen die nachfolgenden Informationen ein. 4. Wählen Sie im Bereich Ansicht aus der Liste den Eintrag LIST aus. 5. Im Bereich Kategoriemodus wählen Sie aus der Dropdown-Liste den Eintrag Zeige alle Beiträge (ignoriere folgende Auswahl) aus. 6. Im Bereich Archiveinstellungen legen Sie den Eintrag Egal fest. 7. Als Ausgangspunkt definieren Sie den zuvor erstellten SysOrdner. 8. Als nächstes wechseln Sie zum Register Sonstige Einstellungen. 9. Im Bereich Seite für die Single-Anzeige (Newsdetails) muss die Seite ausgewählt werden, die die einzelnen Newseinträge beinhaltet. 13

18 Die News Extension Abbildung 19: Sonstige Einstellungen 10. Dazu auf die Schaltfläche Durch Datensätze browsen klicken, worauf sich ein zusätzliches Fenster öffnet, das den Seitenbaum anzeigt. 11. Wählen Sie durch Anklicken die gewünschte Seite innerhalb des Seitenbaums aus (in unserem Beispiel ist es die Seite mit der Bezeichnung Einzelansicht), worauf diese automatisch in das entsprechende Eingabefeld übertragen wird. 12. Abschließend klicken Sie auf das Symbol Dokument sichern und schließen. 13. Überprüfen Sie das Ergebnis im Frontend, um zu sehen, ob das Zusammenspiel der einzelnen News- Elemente auch wirklich funktioniert Einzelansicht definieren Im nächsten Schritt ist der Zugriff auf die einzelnen Newsbeiträge zu definieren. 1. Wählen Sie dazu innerhalb des Seitenbaums die Seite mit der Bezeichnung Einzelansicht aus und klicken Sie auf das Symbol Neues Element anlegen. 2. Wählen Sie aus dem Bereich Erweiterungen den Eintrag News durch Anklicken aus, worauf die Arbeitsfläche die nötigen Eingabebereiche für das News-Plugin zur Verfügung stellt. Sie benötigen hier keine Überschrift! 3. Geben Sie im Bereich Plugin Optionen innerhalb der Registerkarte Allgemeine Einstellungen die nachfolgenden Informationen ein. 4. Wählen Sie im Bereich Ansicht aus der Liste den Eintrag SINGLE aus. 5. Im Bereich Kategoriemodus wählen Sie aus der Dropdown-Liste den Eintrag Zeige alle Beiträge (ignoriere folgende Auswahl) aus. 6. Im Bereich Archiveinstellungen legen Sie den Eintrag Egal fest. 7. Als Ausgangspunkt definieren Sie den zuvor erstellten SysOrdner. 8. Abschließend klicken Sie auf das Symbol Dokument sichern und schließen. 14

19 Die News Extension 9. Überprüfen Sie das Ergebnis im Frontend, um zu sehen, ob das Zusammenspiel der einzelnen News- Elemente auch wirklich funktioniert. Abbildung 20: Die fertige News-Seite 2.5 Übung News Elemente & Flexible Content Nachfolgend soll an einem Beispiel gezeigt werden, wie ein News Element in Verbindung mit Flexible Content optimal genutzt werden können. 1. Legen Sie wie im Kapitel Arbeiten mit Flexible Content Elementen auf Seite 2 beschrieben ein FCE50%-50% Flexible Content Element an. 2. Fügen Sie im linken Bereich eine Grafik ein. 3. Im rechten Bereich soll ein News-Element eingefügt werden mit folgenden Einstellungen: Ansicht = Latest Kategoriemodus = Zeige alle Beiträge (ignoriere Folgende Auswahl) Archiveinstellungen = Egal Ausgangspunkt = SysOrdner 4. Vergessen Sie nicht innerhalb des Registers Sonstige Einstellungen im Bereich Seite für die Single-Anzeige (Newsdetails) die richtige Seite mit den einzelnen News-Beiträgen zu definieren. 15

20 FAQ Frequently Asked Questions 3 FAQ Frequently Asked Questions Unter FAQs versteht man eine Zusammenstellung von oft gestellten Fragen und den dazugehörigen Antworten zu einem Thema. Auch innerhalb von Typo3 gibt es die Möglichkeit mit FAQs zu arbeiten. 1. Zeigen Sie im Seitenbaum auf die Seite unter bzw. neben der Sie eine neue Seite anlegen wollen und klicken sie mit der rechten Maustaste auf den Namen, um das Kontextmenü aufzurufen. In unserem Fall ist es die Website mit der Bezeichnung Institut für TYPO3-Schulung. 2. Es öffnet sich das Kontextmenü aus dem Sie den Eintrag Neu durch Anklicken auswählen. 3. Die Arbeitsfläche mit der Bezeichnung Neuer Datensatz wird angezeigt und stellt sämtliche Optionen für das Anlegen einer neuen Seite bereit. Abbildung 21: Neue Seite anlegen 4. Sie können Ihre neue Seite wahlweise eine Ebene unter dem Ausgangspunkt anlegen dazu klicken Sie auf die Option Seite (in). Alternativ können Sie Ihre Seite aber auch auf der Ebene des Ausgangspunktes anlegen dazu klicken Sie auf die Option Seite (nach). 5. Sie erhalten als nächstes die Maske für die Erfassung der grundlegenden Seiteninformationen. Geben Sie in das Eingabefeld Seitentitel den gewünschten Seitentitel (z.b. FAQs) ein und sichern Sie das Dokument mit einem Klick auf die Schaltfläche Dokument sichern. 6. Klicken Sie auf die neu erstellte Seite im Seitenbaum. Die Arbeitsfläche zeigt eine Übersicht der Seite an, die allerdings noch leer ist. 7. Klicken Sie im Modulbereich Web auf das Modul Liste, worauf Sie die nachfolgende Darstellung erhalten. 16

21 FAQ Frequently Asked Questions Abbildung 22: FAQ-Seite 8. Klicken Sie auf das Symbol Neuen Datensatz anlegen. 9. Die Arbeitsfläche zeigt nun die verschiedenen Möglichkeiten für das Anlegen eines neuen Datensatzes. Wählen Sie hier die Option FAQ durch Anklicken aus. Abbildung 23: Auswählen der Option FAQ 10. Die Arbeitsfläche bietet nun die entsprechenden Eingabefelder für das Anlegen von FAQs. 17

22 FAQ Frequently Asked Questions Abbildung 24: Erfassen von FAQs 11. Geben Sie im Eingabefeld Frage die gewünschte Frage ein. 12. Darunter befindet sich der Bereich Antwort, wo Sie die gewünschte Antwort erfassen müssen. 13. Abschließend klicken Sie auf das Symbol Dokument sichern und schließen. 14. Fahren Sie wie oben beschrieben fort, um weitere Fragen und die dazugehörigen Antworten einzugeben. 15. Schneller geht es, wenn Sie gleich im FAQ-Bereich auf das Symbol Datensatz anlegen klicken und die FAQs der Reihe nach erfassen. 3.1 Das FAQ-Plugin Als nächstes muss das entsprechende FAQ-Plugin eingebaut werden. 1. Nach erfolgter Eingabe aller Fragen und Antworten im Modulbereich Web auf die Option Seite klicken und die FAQ-Seite auswählen. 2. Im Bereich des Hauptinhaltes auf das Symbol Neues Element anlegen klicken. 3. Im Bereich Erweiterungen die Option Moderne FAQ auswählen und in der Maske, die die Arbeitsfläche daraufhin zur Verfügung steht keinerlei Einträge tätigen. 18

23 FAQ Frequently Asked Questions Abbildung 25: das FAQ-Plugin 4. Lediglich auf das Symbol Dokument sichern und schließen klicken, worauf die FAQs bereits funktionieren sollten. 5. Wenn gewünscht kann für die FAQ Seite auch eine Überschrift vergeben werden, die dann oberhalb des Frage/Antwort-Spiels angezeigt wird. 6. Im Bereich Plugin Optionen findet sich unter anderem die Möglichkeit von dynamischer auf statische Anzeige umzustellen, was empfehlenswert ist, wenn nicht so viele Fragen gestellt wurden. Abbildung 26: Wechsel zwischen statischer und dynamischer Ansicht 19

24 FAQ Frequently Asked Questions 3.2 Sortieren der einzelnen FAQ-Einträge Nachdem die gewünschten Fragen und Antworten erfaßt worden sind, stellt sich oft die Frage, wie diese in die gewünschte Reihenfolge gebracht werden können. Dazu geht man folgendermaßen vor: 1. Klicken Sie im Modulbereich Web auf das Modul Liste, worauf Sie nachfolgende Darstellung erhalten. Abbildung 27: Sortieren von FAQs 2. Im Bereich FAQ finden Sie sämtliche, bereits erfaßte FAQs aufgelistet. Neben den bereits bekannten Symbolen für die Bearbeitung, etc. finden sich Symbole für das Nach oben verschieben bzw. Nach unten verschieben. 20

25 FILEUPLOAD per Drag& Drop 4 FILEUPLOAD per Drag& Drop Neben der herkömmlichen Art und Weise Bilder und Dateien über den Bereich Datei und die Option Dateiliste upzuloaden, gibt es nunmehr auch die Möglichkeit eines sogenannten Mass uploads, die wie nachfolgend beschrieben funktioniert. 1. Zuerst muss auf einem lokalen PC-Laufwerk ein Ordner angelegt werden. Zu beachten ist, dass dieser Ordner weder Leer- noch Sonderzeichen beinhalten darf. 2. In diesem Ordner werden im nächsten Schritt die gewünschten Dateien und Bilder abgelegt. 3. Als nächstes klicken Sie im Modulbereich Datei auf den Eintrag Mass upload. Stellen Sie sicher, dass im Seitenbaum der richtige Zielordner (z.b. Bilder) markiert ist. 4. Es erscheint eine Meldung von wegen ungültiges Zertifikat, die einfach durch Anklicken der Schaltfläche Ausführen zu bestätigen ist. Abbildung 28: Ausführen der Anwendung 5. Innerhalb der Arbeitsfläche erscheint das Typo3-Logo mit einer Anweisung was zu tun ist, die unterhalb angezeigt wird: Drop files/folders on the image above. Abbildung 29: Mass upload via Drag & Drop. 21

26 FILEUPLOAD per Drag& Drop 6. Das bedeutet, dass Sie in einem separaten Fenster den zuvor angelegten Ordner mit den Bild- und Textdateien anzeigen lassen. 7. Klicken Sie mit der linken Maustaste auf den Ordnernamen und halten Sie die linke Maustaste gedrückt. 8. Ziehen Sie den Ordner in Richtung Typo3-Logo und lassen Sie die linke Maustaste los. Der gesamte Ordnerinhalt wird nun in einem Zuge hochgeladen. 9. Die hochgeladenen Dateien werden inklusive Ordner in den zuvor gewählten Zielordner geladen und können nun innerhalb Ihrer Typo3-Website verwendet werden. 10. Diese Vorgangsweise funktioniert auch mit Einzelbildern, indem man diese zuvor mittels gedrückt gehaltener Taste Strg markiert und dann via Drag & Drop auf das Typ3-Logo zieht. 11. Zuletzt sollte über den Modulbereich Datei und die Option Dateiliste kontrolliert werden, ob der Upload in gewünschter Art und Weise funktioniert hat. 4.1 Bilder aus dem Internet via Mass upload hochladen Auf die zuvor beschriebene Art und Weise können auch sehr einfach Bilder aus dem Internet in Ihre Typo3-WebSite integriert werden. 1. Öffnen Sie ein separates Browserfenster und suchen Sie beispielsweise via Google ( das gewünschte Bild. 2. Stellen Sie sicher, dass innerhalb Ihrer Typo3-WebSite der Mass upload aktiviert und der gewünschte Zielordner ausgewählt ist. 3. Ziehen Sie nun das ausgewählte Bild aus dem Browserfenster via Drag & Drop auf das Typo3-Logo, worauf der Dateiupload startet und das Bild im entsprechend gewählten Zielordner zu finden ist. 22

27 POWERMAIL 5 POWERMAIL 5.1 Grundlagen Damit die Extension PowerMail reibungslos funktioniert, benötigen Sie folgende Voraussetzungen: SysOrdner Normale Seite Seite für das Plugin PowerMail 5.2 Arbeiten mit PowerMail - Vorarbeiten Die nachfolgend beschriebenen Schritte zählen zu den nötigen Vorarbeiten, damit mit dem PowerMail Plugin sinnvoll gearbeitet werden kann. 1. Ausgehend von einer bereits angelegten Seite klicken Sie im Modulbereich Web auf das Modul Funktionen. 2. Die Arbeitsfläche zeigt nun die Eingabefelder für Erweiterte Funktionen an. 3. Im Bereich Erzeuge mehrere Seiten, können nun die benötigten Elemente/Seiten eingegeben werden. 4. Im Eingabefeld Seite 1 wird eine Seite für die Erfassung des Mailformulars erstellt. 5. Im Eingabefeld Seite 2 wird eine Seite für das PowerMail Plugin erstellt. 6. Im Eingabefeld Seite 3 wird zu guter letzt der SysOrdner mit der Bezeichnung sys_mail erstellt. Abbildung 30: Anlegen der nötigen Seiten für PowerMail 23

28 POWERMAIL 5.3 Arbeiten mit PowerMail Bearbeiten einzelner Elemente Nachdem alle benötigten Seiten angelegt und im Seitenbaum sichtbar sind, gilt es deren Eigenschaften wie nachfolgend beschrieben zu bearbeiten. 1. Wählen Sie im Seitenbaum die Seite mit der Bezeichnung sys_mail aus und rufen Sie durch Anklicken mit der rechten Maustaste das Kontextmenü auf. 2. Wählen Sie aus dem Kontextmenü die Option Seiteneigenschaften bearbeiten aus. 3. Die Arbeitsfläche stellt nun die entsprechenden Optionen für die Festlegung der Seiteneigenschaften zur Verfügung. Abbildung 31: Ändern des Typs auf SysOrdner 4. Ändern Sie durch Auswahl aus der Dropdown-Liste im Bereich Typ die Voreinstellung Standard auf SysOrdner ab. 5. Sie erhalten einen Hinweis, der mit einem Klick auf OK zu bestätigen ist. Abbildung 32: Bestätigung einer Änderung des Typs 6. Geben Sie im Bedarfsfall weitere Einträge ein und klicken Sie abschließend auf die Schaltfläche Dokument sichern und schließen. 24

29 POWERMAIL 5.4 Die Formularerstellung Im nächsten Schritt wird auf das PowerMail-Plugin zugegriffen. 1. Klicken Sie im Bereich Web auf das Modul Seite. Im Seitenbaum klicken Sie auf die Seite mit der von Ihnen gewählten Bezeichnung (in diesem Fall die Seite mit der Bezeichnung Mein_PowerMail). 2. Klicken Sie auf das Symbol Neues Element anlegen und wählen Sie aus dem Bereich Erweiterungen den Eintrag PowerMail durch Anklicken aus, worauf die Arbeitsfläche die nötigen Eingabebereiche für das PowerMail-Plugin zur Verfügung stellt, wie nachfolgende Abbildung zeigt. Abbildung 33: Eingabemaske für PowerMail-Plugin 3. Tragen Sie im Eingabefeld Überschrift eine von Ihnen gewählte Überschrift ein und wählen Sie unter Justierung bzw. Typ die gewünschten Einstellungen aus. 4. Im Bereich Formularname ist in das mit einem gelben Rufzeichen gekennzeichnete Pflichtfeld ein Name für das Formular einzugeben. 5. Im Bereich Speicherort für Mails ist der zuvor angelegte SysOrdner auszuwählen (in diesem Fall mit der Bezeichnung sys_mail). 25

30 POWERMAIL Abbildung 34: Benötigte Dateneingabe für PowerMail 6. Im Bereich Formularseiten werden nun die einzelnen Formularseiten angelegt. Dazu auf das Symbol Neu anlegen Formularfelder klicken. Abbildung 35: Formularfelder anlegen 26

31 POWERMAIL 7. Im Bereich Formularseiten wird jetzt der Eintrag [Kein Titel] angezeigt. Mit der linken Maustaste darauf klicken und in das erscheinende Eingabefeld den gewünschten Titel eingeben. 8. Danach im Bereich Felder auf das Symbol Neu anlegen Formularfelder klicken. In das Eingabefeld Beschriftung die gewünschte Bezeichnung für das Feld eingeben (z.b. Vorname). 9. Da die Eingabemaske zuklappt, muss man erneut auf das soeben bezeichnete Formularfeld (z.b. Vorname) klicken, um dann die restlichen Einstellungen vornehmen zu können. 10. Wichtig ist im Bereich Feldtyp den richtigen Typ (z.b. Textfeld) auszuwählen. 11. Ebenso können unter Einstellungen die gewünschten Einträge durchgeführt werden. 12. Geben Sie wie oben beschrieben die weiteren, gewünschten Formularfelder ein. 13. So kann beispielsweise auch ein Feld für die Eingabe einer -adresse erzeugt werden. 14. Unter Einstellungen kann im Bereich Dieses Feld überprüfen nach aus der Liste der Eintrag -Adresse ausgewählt werden, womit die vom User eingegebenen Daten auf Gültigkeit überprüft werden können. 15. Mit Hilfe der Pfeilschaltflächen Nach oben verschieben bzw. Nach unten verschieben kann die Reihenfolge beeinflußt werden. Z.B. kann das Feld -adresse ganz nach oben verschoben werden. 16. Einträge in den einzelnen Bereichen, die den Absender betreffen, müssen nicht ausgefüllt werden sind also nicht verpflichtend. 17. Hingegen sind die Eingabebereiche, die den/die Empfänger betreffen, unbedingt auszufüllen. Abbildung 36: Erfassen der Empfängerdaten 18. Wahlweise kann auch im Bereich Antworttext, der innerhalb der Website angezeigt wird, eine Mitteilung für den User eingegeben werden. Ist aber ebenfalls nicht verpflichtend. 27

32 POWERMAIL Abbildung 37: Antworttext für Website 19. Mit einem Klick auf die Schaltfläche Dokument sichern und Webseite anzeigen, erhalten Sie einen Überblick über Ihr bis dato erstelltes Formular, wie nachstehende Abbildung zeigt. Abbildung 38: Das fertige Formular 20. Als nächstes muss eine Senden Schaltfläche eingefügt werden. 21. Dazu entweder ein neues Formularfeld gleich unterhalb anlegen oder eine neue Formularseite (also einen eigenen Bereich dafür) und dazu passend ein neues Formularfeld. 22. Für das Formularfeld in das Eingabefeld Beschriftung beispielsweise die Bezeichnung SENDEN eingeben. Wichtig ist die Auswahl des korrekten Feldtyps, nämlich Abschicken Button. 28

33 POWERMAIL Abbildung 39: Senden Button definieren 23. Mit einem Klick auf die Schaltfläche Dokument sichern und Webseite anzeigen, erhalten Sie einen Überblick über das fertige Formular. Abbildung 40: Formular mit der Schaltfläche Senden 29

34 POWERMAIL 5.5 Tipps & Tricks Verwendung von Radiobuttons Wenn Sie mit Radiobuttons arbeiten wollen, müssen die entsprechenden Entweder/Oder- Möglichkeiten im Bereich Einstellungen unter Optionen eingegeben werden. Nehmen wir als Beispiel eine Abfrage nach dem Geschlecht her. Hier wären im Bereich Optionen die Einträge männlich oder weiblich zu erfassen. Abbildung 41: Verwendung von Radiobuttons 30

35 POWERMAIL Beispiel für eine Bestätigungsseite Wie schon zuvor erwähnt, ist es nicht verpflichtend eine Bestätigungsseite zu erstellen. Im Sinne der Userfreundlichkeit sollten Sie aber dennoch dafür sorgen, dass der User zumindest eine kurze Information erhält, dass beispielsweise der Sendevorgang funktioniert hat. 1. Wenn Sie die Variable ###POWERMAIL_ALL### beispielsweise für Ihre Bestätigungsseite belassen, dann werden automatisch alle vom User ausgefüllte Daten angezeigt, wie nachfolgende Abbildung zeigt. Abbildung 42: Bestätigung vor dem Abschicken eines Formulars 2. Mit einem Mausklick auf die Schaltfläche Angaben abschicken, wird der Versandvorgang gestartet. Alternativ steht mit einem Klick auf die Schaltfläche Zurück eine Korrekturmöglichkeit zur Verfügung. 3. Erst danach erhält der User die von Ihnen via Antwortseite erfaßte Meldung. 4. Diese kann insofern modifiziert werden, dass die Angabe ###POWERMAIL_ALL### gelöscht wird und durch die Angabe eines Formularfeldes ersetzt wird. Somit wird eine persönliche Anrede des Users ermöglicht. Abbildung 43: Variablen für Vorname und Nachname auf der Antwortseite 31

36 5. Dazu klicken Sie auf das Formularfeld, welches als Variable innerhalb der Bestätigungsseite verwendet werden soll. 6. Im Bereich Einstellungen finden Sie unter Name für Templates die entsprechende UID samt Formatierung. 7. Kopieren Sie diese UID an die gewünschte Stelle auf der Antwortseite und schon werden die entsprechenden Daten angezeigt. Abbildung 44: Beispieltext für Antwortseite 32