Webrelaunch 2014 TYPO3 CMS 6.2 für RedakteurInnen. 11. Juni 2014

Transkript

1 Webrelaunch 2014 TYPO3 CMS 6.2 für RedakteurInnen 11. Juni 2014

2 Status quo 2

3 Verschiedene Endgeräte mit unterschiedlichen Anforderungen 3

4 Kursthemen Design (Frontend) Aufbau einer Seite Darstellungsformen Elemente Strukturierung von Seiten Redaktionelle Umsetzung (Backend) Gestaltung mit Layouts, Inhaltselementen und Boxen Übung Analyse bestehender Inhalte, Struktur und Navigation Designideen entwickeln Ausprobieren 4

5 Kursmaterial Design-Handbuch Webseite_fin_A4.pdf (Stand: 3.Juni 2014) Schulungsfolien als PDF im Schulungsverzeichnis Ordner 00_Unterlagen in der Dateiliste (Modul DATEI) 5

6 Design (Frontend)

7 Eine Seite verschiedene Ansichten Desktop Tablet Smartphone 7

8 Ein Menü verschiedene Geräte 8

9 Grundsätzlicher Aufbau einer Seite Seitenkopf (Header) Informationsbereich (Seiteninhalt) Seitenfuß (Footer) 9

10 Aufbau der zentralen Startseite (Desktop-Ansicht) Elisabeth Holzapfel, Dipl. Medienwiss. 10

11 Aufbau der zentralen Startseite (Tablet- und Smartphone-Ansicht) 11

12 Inhaltselemente und Erscheinungsbild

13 Welche Seiteninhaltselemente gibt es (derzeit)? Elisabeth Holzapfel, Dipl. Medienwiss. 13

14 Inhaltselement Text mit Bild Das Bild kann rechts oder links neben den Text gesetzt werden Der Textbereich kann je nach Layout ein- oder zweispaltig sein 14

15 Inhaltselement Text mit Bild Eine Seite kann als Inhalt einen oder mehrere Textbereiche enthalten Das Inhaltselement Text mit Bild kann mit oder ohne Bilder und Tabellen verwendet werden 15

16 Inhaltselement Themenfeld mit Links Für Übersichtsseiten - zur Darstellung von Themen oder Seitenbereichen Neben Text und Hyperlinks können mehrere Bilder eingefügt werden (rechts oder links vom Text) 16

17 Inhaltselemente: Typen von Boxen Hinweisbox mit Icon Hinweisbox für Video Hinweis auf Aktionen, wichtige Termine, Informationsmöglichkeiten Es stehen verschiedene Icons zur Auswahl Titel ist frei wählbar und kann verlinkt werden Hinweis auf ein Video mit kurzer Zusatzinformation Überschrift kann verlinkt werden 17

18 Inhaltselemente: Typen von Boxen Hinweisbox mit Bild Hinweis auf beliebigen Inhalt mit einem Bild und einfachem Text Titel kann frei gewählt und verlinkt werden ggf. auch Verlinkung im Text 18

19 Spezialbox Sie interessieren sich für Navigations- oder Menübox mit einer Liste verlinkter interner Seiten Die Box ist an das Erscheinungsbild Inhaltsseite mit Menü gebunden Verlinkt werden können entweder pauschal alle oder ausgewählte Unterseiten (bis zu 10) Der Titel ist nicht änderbar! 19

20 Inhaltselemente: Typen von Boxen Hinweisbox Kontakt Verschiedene Sorten in Arbeit 20

21 Inhaltselement - Tabellen Tabellen können über den Editor eingefügt werden 21

22 Welche Layouts/Vorlagen gibt es (derzeit)? Auswahl Erscheinungsbild Inhaltsseite 100% Inhaltsseite mit Menü links/oben 33% - 66% (Standard) Inhaltsseite 4 Reihen 33% 33% - 33% Inhaltsseite 100 % und 3 Reihen 33%-33%-33% Inhaltsseite mit Menü rechts/unten 66% - 33% Inhaltsseite 100% 33% - 33% - 33% 22

23 Beispiel Inhaltsseite 100% 33% - 33% - 33% 23

24 Beispiel Inhaltsseite mit Menü rechts/unten 66% - 33% Elisabeth Holzapfel, Dipl. Medienwiss. Es können mehrere Inhaltselemente und Boxen untereinander eingefügt werden 24

25 Beispiel Inhaltsseite mit Menü rechts/unten 66% - 33% Elisabeth Holzapfel, Dipl. Medienwiss. 25

26 Beispiel Inhaltsseite mit Menü links/oben M-66% Elisabeth Holzapfel, Dipl. Medienwiss. Hier können keine weiteren Boxen eingefügt werden! 26

27 Inhaltselement - Pressemitteilungen Die Uni-Homepage enthält Boxen für aktuelle Pressemitteilungen sowie eine Listenansicht für vergangene Meldungen Vorerst nur für die Uni- Startseite verfügbar, andere Bereiche auf Anfrage 28

28 Inhaltselement - Veranstaltungen Für die Uni-Homepage ist die Möglichkeit der Veranstaltungsankündigung geplant (für andere Bereiche auf Anfrage) 29

29 Redaktionelle Umsetzung (Backend)

30 Die Test- und Schulungsumgebung Anmeldung unter Benutzer: schulung Passwort: w9n3.4tc Uni-Login (Benutzername + Passwort)

31 Einstellungen und Bedienung

32 Benutzerwerkzeuge - Einstellungen Beim Aufbau vom Backend hat sich grundsätzlich nicht viel verändert Module Seitenverzeichnis Seiteninhaltsansicht Es gibt lediglich kleine Unterschiede, z. B. bei den Einstellungen 33

33 Benutzerwerkzeuge: Einstellungen Persönliche Daten und Sprache TYPO3 CMS 6.2 TYPO Hier kann wie gehabt die Sprache für das Backend ausgewählt werden 34

34 Benutzerwerkzeuge: Einstellungen Bearbeiten und erweiterte Funktionen TYPO3 CMS 6.2 TYPO

35 Anzeigen und Vorschau Vorschau unter: Die Auswahl von Anzeigen in verschiedenen (Geräte-) Varianten ist über das Modul WEB Anzeigen möglich 36

36 Seiten: Layouts und Inhalte

37 Wichtige Schritte auf dem Weg zur neuen Seite 1. Seite erzeugen (per Symbol oder Kontextmenü) Elisabeth Holzapfel, Dipl. Medienwiss. 2. ggf. Position im Seitenbaum bestimmen 3. Seiteneinstellungen vornehmen Titel eingeben (Reiter Allgemein) Sichtbarkeit (Reiter Zugriff) Layout festlegen (Reiter Erscheinungsbild) 4. Speichern und schließen 38

38 Anlegen einer neuen Seite per Rechtsklick im Kontextmenü oder per Symbol und Drag & Drop 39

39 Anlegen einer neuen Seite - im Vergleich TYPO TYPO3 CMS

40 Seite bearbeiten Reiter Allgemein 41

41 Seite bearbeiten Reiter Zugriff Seite verstecken oder sichtbar machen Zeitgesteuerte Veröffentlichung 42

42 Seite bearbeiten Reiter Metadaten Die Metadaten dienen der besseren Auffindbarkeit und Bewertung durch Suchmaschinen Kann, muss aber nicht ausgefüllt werden 43

43 Seite bearbeiten Reiter Erscheinungsbild Auswahl des Seitenlayouts Slider oder Bild editieren Je nach Layout: Navigationsbox editieren 44

44 Diese Layouts stehen aktuell zur Verfügung Seiteneinstellungen: Auswahl im Reiter Erscheinungsbild Inhaltsseite 100% Inhaltsseite mit Menü links/oben 33% - 66% (Standard) Inhaltsseite 4 Reihen 33% 33% - 33% Inhaltsseite 100 % und 3 Reihen 33%-33%-33% Inhaltsseite 50% -50% Inhaltsseite mit Menü rechts/unten 66% - 33% Inhaltsseite 100% 33% - 33% - 33% 48

45 Inhaltsseite 100% 49

46 Inhaltsseite mit Menü links/oben 33% - 66% Hier können weitere Textfelder eingefügt werden, jedoch keine Boxen 50

47 Inhaltsseite mit Menü rechts/unten 66% - 33% Hier können weitere Textfelder eingefügt werden, jedoch keine Boxen 51

48 Inhaltsseite 4 Reihen 33% - 33% - 33% 52

49 Inhaltsseite 100 % und 3 Reihen 33%-33%-33% Elisabeth Holzapfel, Dipl. Medienwiss. 53

50 Arbeitstechniken, Tipps und Tricks

51 Schritte zur Gestaltung einer Seite zusammenfassende Übersicht 1. Layout / Erscheinungsbild (legt die Struktur und den grundsätzlichen Aufbau fest) 2. Auswahl von Seiteninhaltselementen (Anordnung und Definition von Elementen auf der Seite) 3. Inhalte erstellen oder einfügen 4. ggf. Positionen verändern oder Inhalte löschen 55

52 Eine neue Seite gestalten Eine neue Seite hat standardmäßig das Layout aus Inhaltsbereich und einer Spalte mit Menübox (rechts) Menü = Navigationsbox Sie interessieren sich für Per Klick auf das Symbol können weitere Datensätze an der entsprechenden Stelle hinzugefügt werden 56

53 Neue Inhaltselemente erstellen Nach dem Erstellen und Speichern einer neuen Seite werden im nächsten Schritt Datensätze hinzugefügt, hierfür muss der Inhaltstyp der Elemente definiert werden anschließend wird der Editor zur weiteren Bearbeitung geöffnet 57

54 Seiteninhalt neu erstellen (Datensätze anlegen) Elisabeth Holzapfel, Dipl. Medienwiss. Bilder hinzufügen Layout-Vorlagen für Überschriften 58

55 Der Richtext Editor TYPO TYPO3 CMS Der Editor ist übersichtlicher geworden, es kann u.a. nicht mehr auf die HTML-Ansicht umgeschaltet werden 59

56 Mit dem Editor arbeiten Formatierung von Überschriften mit Vorlagen Nützlich für kopierten Text: Formatierung entfernen Tabellen einfügen 60

57 Bilder verwenden Das Einfügen von Bildern ist einfacher geworden Es wird ein Ordner im Modul DATEI - Dateiliste benötigt, in dem die Bilder u. a. Dateien liegen Ordner anlegen und Dateien hochladen Bilder können hier ausgeschnitten und verschoben, aber nicht gelöscht werden, wenn sie bereits auf einer Seite verwendet wurden 61

58 Bilder in Textfelder einfügen Um ein Bild einzufügen wird das Inhaltselement Text mit Bild gewählt und anschließend über den Reiter Bilder ausgewählt und positioniert 62

59 Eine Hinweisbox erstellen 63

60 Eine Hinweisbox mit Bild erstellen Über den Reiter Allgemein wird der Box ein Titel gegeben, der mit einer internen Seite verlinkt sein kann 64

61 Der Hinweisbox ein Bild hinzufügen Über den Button Bild hinzufügen im Reiter Bilder wird der Verzeichnisbaum geöffnet, in dem sich die Ordner aus dem Modul DATEI Dateiliste befinden und ein Bild ausgewählt wird 65

62 Eine Hinweisbox mit Icon erstellen Zunächst Datensatz hinzufügen, dann Hinweisbox mit Icon wählen Es stehen verschiedene vordefinierte Symbole zur Verfügung 66

63 Die Navigationsbox Sie interessieren sich für Wird standardmäßig verwendet (und leer angezeigt) beim Layout Inhaltsseite mit Menü 66%-M33% Elisabeth Holzapfel, Dipl. Medienwiss. Aktivierung und Befüllung über die Seiteneinstellungen: Erscheinungsbild -> Seitenmenu 67

64 Die Navigationsbox Sie interessieren sich für bearbeiten Standard: Box wird leer angezeigt Auswahl: max. 10 beliebige Seiten werden angezeigt Subseiten: 10 automatisch ausgewählte Unterseiten werden angezeigt Verbergen: Box wird nicht angezeigt 68

65 Tipp: Die Spaltenansicht verwenden Hier wird die Anordnung der Seiteninhaltselemente angezeigt und kann einfach verändert werden 69

66 Inhaltselemente hinzufügen und bearbeiten Datensätze können über die Symbole in der Spaltenansicht hinzugefügt, unsichtbar gemacht oder entfernt werden 70

67 Drag and Drop von Inhaltselementen Elemente können durch Ziehen mit gedrückter Maustaste auf der Seite bewegt werden Hier ist Fingerspitzengefühl gefragt: Die Maustaste erst loslassen, wenn sich der Balken dunkelgrün gefärbt hat! 71

68 Fehlerpotential Werden Elemente an Stellen eingefügt, die dafür laut Erscheinungsbild der Seite nicht vorgesehen sind, z. B. ein Themenfeld anstatt einer Hinweisbox, wehrt sich das System mit unschönen Überschneidungen 72

69 Englischsprachige Inhalte In Arbeit 73

70 Amtliche Mitteilungen Wichtige Dokumente, Formulare und Co. werden zukünftig als Link in TYPO3 eingefügt und vom Publikationsservice der Universität zur Verfügung gestellt (in Arbeit) 74

71 Die Systemordner

72 Die Systemordner Für einige Seitenelemente gibt es spezielle Ordner im Seitenbaum, z. B. Quicklinks für die Links im Schnellzugriff Zurzeit kann davon nur der Slider editiert werden 76

73 Slider Der Bilderordner Im oberen Inhaltsbereich können wechselnde Bilder eingeblendet werden 77

74 Den Slider bearbeiten 78

75 Den Slider bearbeiten: Eine Dateisammlung erstellen Elisabeth Holzapfel, Dipl. Medienwiss

76 Den Slider bearbeiten: Eine Sammlung von Bildern verwenden

77 Den Slider bearbeiten: In den Seiteneinstellungen auswählen

78 Der Schnellzugriff Die Verknüpfung wird in den Seiteneinstellungen hergestellt Es können nur die unteren Links bearbeitet werden 82

79 Das Kontextmenü Hierfür wird in den Seiteneinstellungen ein Verweis erzeugt Das Kontextmenü ist z. B. als Zielgruppennavigation nutzbar 83

80 Der Footer (Seitenfuß) 84

81 Die Hauptnavigation (Mega-Dropdown) Ist nur von einzelnen Redakteuren editierbar 85

82 Konfiguration des Mega-Dropdown 86

83 Nachrichten-Ordner Ist derzeit nur für Redakteure ausgewählter Bereiche verwendbar 87

84 - Übung - Elisabeth Holzapfel, Dipl. Medienwiss. Analyse bestehender Inhalte, Strukturen, Navigation Designideen entwickeln Neue Struktur und Funktionalität planen Umsetzung: Inhalte transferieren

85 Kontakt Testen in der Schulungsumgebung Technische Probleme und sonstige Rückmeldungen bitte an: [Betreff: Webrelaunch]