Guide zum Relaunch der Universitätswebsite · Im oberen Feld Bild, wählen Sie mit der bereits...

34
Guide zum Relaunch der Universitätswebsite Stand: 12.08.2013 Website: http://typo3.uni-trier.de E-Mail: [email protected] Telefon: 0651-201-3442 (Nur für den internen Gebrauch) Michael Sachse Manuel Eiden Patrick Heiliger Sandro Kreten Patrik Pauly Markus Ullrich Daniel Wittkowsky

Transcript of Guide zum Relaunch der Universitätswebsite · Im oberen Feld Bild, wählen Sie mit der bereits...

Page 1: Guide zum Relaunch der Universitätswebsite · Im oberen Feld Bild, wählen Sie mit der bereits bekannten Auswahl über den Fileadmin Ihr gewünschtes Bild aus. Zusätzlich können

Guide zum Relaunch der Universitätswebsite

Stand: 12.08.2013

Website: http://typo3.uni-trier.de

E-Mail: [email protected]

Telefon: 0651-201-3442

(Nur für den internen Gebrauch)

Michael Sachse

Manuel Eiden

Patrick Heiliger

Sandro Kreten

Patrik Pauly

Markus Ullrich

Daniel Wittkowsky

Page 2: Guide zum Relaunch der Universitätswebsite · Im oberen Feld Bild, wählen Sie mit der bereits bekannten Auswahl über den Fileadmin Ihr gewünschtes Bild aus. Zusätzlich können
Page 3: Guide zum Relaunch der Universitätswebsite · Im oberen Feld Bild, wählen Sie mit der bereits bekannten Auswahl über den Fileadmin Ihr gewünschtes Bild aus. Zusätzlich können

3 2 Einstieg

Inhaltsverzeichnis

1 Das neue System im Überblick .................................................................................................... 4

2 Templates im neuen System ......................................................................................................... 5

2.1 Standard-Inhaltsseite ............................................................................................................. 5

2.2 Personenseite ......................................................................................................................... 7

3 Mitarbeiterliste & Visitenkarte ................................................................................................... 11

3.1 Mitarbeiterliste..................................................................................................................... 11

3.2 Visitenkarten ........................................................................................................................ 11

4 Kachel-Extension ....................................................................................................................... 14

4.1 Inhalts-Kachel ...................................................................................................................... 16

4.2 Bild-Text-Kachel ................................................................................................................. 18

4.3 News-Kachel ....................................................................................................................... 20

4.4 Toplinks-Kachel .................................................................................................................. 22

4.5 Bildergalerie-Kachel ............................................................................................................ 23

4.6 Social-Media-Kachel ........................................................................................................... 24

4.7 Youtube-Kachel ................................................................................................................... 25

5 Die ZIMK Bildergalerie ............................................................................................................. 27

5.1 Upload einer ZIP-Datei ....................................................................................................... 27

5.2 Erweiterte Bilderverwaltung mit Systemordner .................................................................. 28

5.3 Synchronisation mit einem Dropbox-Ordner ...................................................................... 28

5.4 Frontend-Ansicht ................................................................................................................. 30

6 Startseite ..................................................................................................................................... 31

6.1 Aufteilung ............................................................................................................................ 31

6.2 Meine Uni ............................................................................................................................ 32

7 Die „neue Suche“ ....................................................................................................................... 33

Page 4: Guide zum Relaunch der Universitätswebsite · Im oberen Feld Bild, wählen Sie mit der bereits bekannten Auswahl über den Fileadmin Ihr gewünschtes Bild aus. Zusätzlich können

4

1 Das neue System im Überblick

Im Rahmen der Umgestaltung der Homepage www.uni-trier.de wurde das bestehende Typo3-

System um verschiedene Features erweitert. Diese Erweiterungen sollen zum einen ein modernes

und benutzerfreundliches Erscheinungsbild der Universitätswebsite gewährleisten, als auch die

Arbeit der Redakteure noch weiter vereinfachen und zusätzliche Funktionalitäten ermöglichen.

Insgesamt ergeben sich dadurch folgende konkrete Vorteile:

- Übersichtliche Präsentation der Startseite in einem modernen Design

- Auswahlmöglichkeit für Layouts durch verschiedene Templates

- Einheitliche Verlinkung von Social-Media-Angeboten

- Vielfalt an Multimedia-Erweiterungen im Kacheldesign

- Integration von Benutzer- und Vorlesungsdaten direkt aus LSF

- Unterstützung aller gängigen Zeichenkodierungen mittels UTF-8

- Personalisierungsfunktion „Meine Uni“

- Eine neue Suche mit erweiterten Funktionalitäten und gewährleisteter Treffsicherheit

Page 5: Guide zum Relaunch der Universitätswebsite · Im oberen Feld Bild, wählen Sie mit der bereits bekannten Auswahl über den Fileadmin Ihr gewünschtes Bild aus. Zusätzlich können

5 2 Templates im neuen System

2 Templates im neuen System

Das neue System verfügt über zwei Templates, die jeweils unterschiedlichen

Benutzeranforderungen gerecht werden und von den Typo3-Redakteueren verwendet werden

können. So können zum einen Personenseiten mit dem Template Personenseite generiert

werden, während für die übrigen Fälle das Standardtemplate verwendet wird.

Um eine neue Seite mit einem bestimmten Template zu erstellen, wird wie folgt vorgegangen:

1. Anlegen einer neuen Seite (durch im Modulbereich „Seite“)

2. Daraufhin erscheint folgendes Menü, in dem das Template ausgewählt werden kann.

2.1 Standard-Inhaltsseite

Bei Auswahl des Templates Standardseite wird dann im folgenden Menü der Titel der Seite

spezifiziert und die Seite durch Betätigen eines der verschiedenen Speicher-Icons

angelegt.

Als Ergebnis wird eine neue Seite mit dem eingegeben Seitentitel angelegt, für die nun Inhalte

gepflegt werden können. Hierzu bietet das System zwei Bereiche an, den Main-Content-Bereich

(grün umrandet) und den Kachelbereich (gelb umrandet). Während der Main-Content-Bereich

das Editieren verschiedener Contentelemente wie z.B. Tabellen, Bilder, Texte, Extensions etc.

bietet der Kachelbereich Platz für drei Kachelelemente, die in Abschnitt 3 näher beschrieben

werden.

Page 6: Guide zum Relaunch der Universitätswebsite · Im oberen Feld Bild, wählen Sie mit der bereits bekannten Auswahl über den Fileadmin Ihr gewünschtes Bild aus. Zusätzlich können

6

Durch Betätigen des entsprechenden Hinzufügen-Icons kann die Seite um ein Element an

der jeweiligen Position ergänzt werden. Im Folgenden soll dies für das Hinzufügen eines Main-

Content-Elements exemplarisch vorgestellt werden, während das Bearbeiten eines

Kachelelements in Abschnitt 3 vorgestellt wird:

Wird das Hinzufüge-Icon betätigt, so erscheint folgende Maske, in der der Typ des jeweiligen

Elements weiter bestimmt werden kann. Hierzu werden verschiedene Tabs (rot umrandet)

angeboten, die jeweils eine Auswahl verschiedener Elementtypen anbieten.

Page 7: Guide zum Relaunch der Universitätswebsite · Im oberen Feld Bild, wählen Sie mit der bereits bekannten Auswahl über den Fileadmin Ihr gewünschtes Bild aus. Zusätzlich können

7 2 Templates im neuen System

Typischer Seiteninhalt gruppiert dabei verschiedene Standardelement wie Texte und

Tabellen

Spezielle Elemente listet Elemente wie Dateilinks und Sitemap auf

Formulare bietet verschiedene Formulare an

Plugins gibt eine Übersicht über spezielle Extensions wie z.B. FAQs und Nachrichten

Nach Auswahl eines entsprechenden Typs kann der Inhalt entsprechend konfiguriert werden. Bei

Auswahl des Typs Text wird beispielsweise folgende Maske angezeigt, in der ein Textelement

konfiguriert werden kann:

Wird dieses Element gespeichert, so findet man es sowohl in der Seitenübersicht im Backend als

auch auf der Seite im Frontend.

2.2 Personenseite

Eine Personenseite dient der Präsentation der einzelnen Mitarbeiter der Universität. Um eine

solche zu erstellen, wird beim Anlegen einer neuen Seite das Template Personenseite

ausgewählt (siehe Abschnitt 2). Im nachfolgenden Menü wird der Seitentitel eingegeben. Nach

erfolgreichem Abspeichern ist die Personenseite angelegt. Dieser Seite muss nun noch eine

Person zugewiesen werden. Dazu wird nach einem Rechtsklick auf die Seite der Menüpunkt

ausgewählt. Im Reiter Person wird dann die entsprechende Person ausgewählt.

Dazu gibt es zwei Möglichkeiten. Zum einen kann die Person über das Dropdown-Menü

ausgewählt werden. Da hier allerdings sehr viele Datensätze existieren gibt es auch die

Möglichkeit, die entsprechende Person über eine Freitextsuche zu finden. Die gelbe Ergebnisbox

dieser Freitextsuche gibt die Ergebnisse in der Form Nachname, Vorname, Einrichtung, E-Mail

ohne Suffix @uni-trier.de und Raum zurück.

Page 8: Guide zum Relaunch der Universitätswebsite · Im oberen Feld Bild, wählen Sie mit der bereits bekannten Auswahl über den Fileadmin Ihr gewünschtes Bild aus. Zusätzlich können

8

Nun ist die Personenseite erfolgreich mit der entsprechenden Person verbunden.

Eine Personenseite hat drei feste, nicht austauschbare Kacheln in der rechten Spalte.

Die erste Kachel ist ein Bild der jeweiligen Person. Ist noch kein Personenbild gesetzt, so

erscheint an dieser Stelle eine Standardkachel. Um dieses persönliche Bild abzuändern, muss

sich die betreffende Person unter der URL https://www.uni-trier.de/index.php?id=49542 mit

Page 9: Guide zum Relaunch der Universitätswebsite · Im oberen Feld Bild, wählen Sie mit der bereits bekannten Auswahl über den Fileadmin Ihr gewünschtes Bild aus. Zusätzlich können

9 2 Templates im neuen System

dem eigenen ZIMK-Login einloggen. Danach wird ein jpg-Bild vom Computer ausgewählt und

hochgeladen. Zusätzlich besteht auch die Möglichkeit, ein Bild per Webcam oder Handykamera

aufzunehmen. Abschließend wird aus diesem Bild ein quadratischer Bereich ausgewählt. Dazu

klickt man mit der linken Maustaste in das Bild und markiert den entsprechenden Bereich. Die

Markierung wird automatisch quadratisch gezogen. Nach erfolgreichem Abspeichern wird das

persönliche Bild ersetzt.

Außerdem bietet sich an dieser Stelle ebenfalls die Möglichkeit, die jeweiligen Sprechstunden

anzupassen. Diese Anpassung wird mit einem Klick auf Ändern übernommen.

Die zweite Kachel ist die Kontakt-Kachel, die dritte die Veranstaltungen-Kachel. In der

Page 10: Guide zum Relaunch der Universitätswebsite · Im oberen Feld Bild, wählen Sie mit der bereits bekannten Auswahl über den Fileadmin Ihr gewünschtes Bild aus. Zusätzlich können

10

Kontakt-Kachel werden Informationen zu Raum, Telefonnummer, Faxnummer, E-Mail und

Sprechstunde angezeigt. Die Veranstaltungen-Kachel beinhaltet Informationen zu den

Veranstaltungen, die die Person im laufenden Semester hält, beispielsweise Vorlesungen oder

Übungen. Die Daten, die die Kontakt-Kachel und die Veranstaltungen-Kachel beinhalten,

werden automatisch über Schnittstellen zum LSF ausgelesen und auf den Personenseiten

platziert. Hier muss von redaktioneller Seite aus keine Arbeit geleistet werden.

Page 11: Guide zum Relaunch der Universitätswebsite · Im oberen Feld Bild, wählen Sie mit der bereits bekannten Auswahl über den Fileadmin Ihr gewünschtes Bild aus. Zusätzlich können

11 3 Mitarbeiterliste & Visitenkarte

3 Mitarbeiterliste & Visitenkarte

Zur besseren Darstellung der Mitarbeiter, wurden die Plug-Ins Mitarbeiterliste und

Visitenkarte hinzugefügt. Sie erleichtern den Redakteuren die Arbeit und fördern ein

einheitliches Design.

3.1 Mitarbeiterliste

Um eine Liste an Personen, welche in einem Fachbereich arbeiten oder zu einer bestimmten

Dienststelle gehören, zu erhalten, ist es nicht mehr nötig eine Tabelle zu erstellen und Name,

Raum sowie Telefonnummer selber einzutragen. Mit Hilfe des neuen Plug-Ins Mitarbeiter-

Liste, ist es möglich alle Personen, die eine untergeordnete Personenseite besitzen aufzulisten.

Erstellen Sie also auf einer hypothetisch existierenden Seite Mitarbeiter die Mitarbeiter-Liste,

die folgendermaßen im Backend angezeigt werden würde,

so würden Sie auf Ihrer Seite die nachfolgende Ansicht erhalten:

Bei Auswahl der Mitarbeiter-Liste, müssen Sie keinerlei Einstellungen treffen. Das Plug-In

konfiguriert sich automatisch und nimmt Ihnen somit bisherige Arbeit ab.

3.2 Visitenkarten

Im neuen TYPO3-System der Universität können auf einfache und schnelle Art und Weise eine

oder mehrere Visitenkarten auf einmal erstellt werden. Hierfür müssen Sie lediglich das Plug-In

Visitenkarte laden.

Page 12: Guide zum Relaunch der Universitätswebsite · Im oberen Feld Bild, wählen Sie mit der bereits bekannten Auswahl über den Fileadmin Ihr gewünschtes Bild aus. Zusätzlich können

12

Hier können Sie zu allererst eine Überschrift wählen. Klicken Sie nun auf den Reiter Plug-In.

Hier erhalten Sie folgende Ansicht:

Hier können im Bereich Verfügbare Objekte oder über das Suchfeld Mitarbeiter der Universität

gefunden werden. Über einen Doppelklick auf den Namen, wird dieser zum Feld Ausgewählte

Objekte hinzugefügt. Nach dem Abspeichern erhält man auf seiner Seite nun die gewünschte

Auswahl an Visitenkarten. Die obigen Beispiel getroffen Auswahl würde sich wie folgt

darstellen:

Page 13: Guide zum Relaunch der Universitätswebsite · Im oberen Feld Bild, wählen Sie mit der bereits bekannten Auswahl über den Fileadmin Ihr gewünschtes Bild aus. Zusätzlich können

13 3 Mitarbeiterliste & Visitenkarte

Page 14: Guide zum Relaunch der Universitätswebsite · Im oberen Feld Bild, wählen Sie mit der bereits bekannten Auswahl über den Fileadmin Ihr gewünschtes Bild aus. Zusätzlich können

14

4 Kachel-Extension

Wie bereits in Abschnitt 2.1 erklärt, bietet auch das Standardtemplate drei seitlich angelegte

Kacheln (siehe untere Abbildung: roter Kasten).

Im Vergleich zu den Startseitenkacheln existieren für diese Kacheln auch sieben Erweiterungen.

Bei diesen handelt es sich um die Inhalts-, Text&Bild-, News-, Toplinks, Slideshow-, Social-

Media- und Youtube(oder Video)-Kachel. Im Folgenden wird jede der sieben unterschiedlichen

Erweiterungen bezüglich ihres Designs und der Anwendung beschreiben.

Die drei Kacheln der rechten Seite werden allesamt vererbt. Sollten also auf einer Unterseite

keine oder weniger als drei neue Kacheln angelegt worden sein, so werden die Kacheln der

oberen Ebene geerbt, um leere Kacheln zu verhindern.

Um Kacheln ändern und erstellen zu können, wechselt man in die Seitenansicht der zu

ändernden Seite. Hier findet man eine eigene Spalte für die Kacheln (siehe untere Abbildung:

gelber Kasten).

Page 15: Guide zum Relaunch der Universitätswebsite · Im oberen Feld Bild, wählen Sie mit der bereits bekannten Auswahl über den Fileadmin Ihr gewünschtes Bild aus. Zusätzlich können

15 4 Kachel-Extension

In diesem Bereich kann durch Klicken auf im jeweiligen Kachelsegment (beispielsweise

Kachel 1) eine neue Kachel erstellt werden. Nun erscheint der nachfolgende Bildschirm, indem

Sie auf den Reiter Kachel klicken.

Nun öffnet sich die Auswahl der Kachel-Extensions und Sie können eine der aufgelisteten

Kacheltypen wählen.

Kachelsegmente

Page 16: Guide zum Relaunch der Universitätswebsite · Im oberen Feld Bild, wählen Sie mit der bereits bekannten Auswahl über den Fileadmin Ihr gewünschtes Bild aus. Zusätzlich können

16

Innerhalb eines jeden Kachelsegments können beliebig viele Kacheln erstellt werden, jedoch

wird nur die erste Kachel eines jeden Segments auf der Seite angezeigt. Via Drag-and-Drop

können die Kacheln einfach verschoben werden. Somit ist ein schnelles Wechseln aktueller

Kacheln möglich.

Zusätzlich ist zu erwähnen, dass Sie die Kachel-Extensions in beliebiger Kombination und

Reihenfolge anlegen können. So könnten Sie beispielhaft eine Inhalts-, eine Video- und eine

News-Kachel auf Ihrer Seite verwenden.

In den nachfolgenden Unterabschnitten werden die Möglichkeiten der Kacheln betrachtet und

der Umgang mit den Kachel-Extensions erläutert.

4.1 Inhalts-Kachel

Weiterhin wird es möglich sein, Text auf der rechten Seite anzuzeigen um verschiedene Inhalte,

wie Informationen, Kurztexte oder Termine darzustellen. Dafür wählen Sie die Inhalts-Kachel

aus. Nun ist der nachfolgende Bildausschnitt sichtbar, indem Sie die Überschrift der Kachel und

den Inhaltstext dieser mittels des bereits bekannten Rich-Text-Editors festlegen können.

Page 17: Guide zum Relaunch der Universitätswebsite · Im oberen Feld Bild, wählen Sie mit der bereits bekannten Auswahl über den Fileadmin Ihr gewünschtes Bild aus. Zusätzlich können

17 4 Kachel-Extension

Des Weiteren ist es möglich eines der vorgegebenen Hintergrundbilder für die Kachel

festzulegen. Hierbei handelt es sich um die Bilder Kontakt, Info und Stelle, welche sich wie folgt

darstellen:

Ein Beispiel für eine fertige Inhalts-Kachel könnte wie folgt aussehen:

Page 18: Guide zum Relaunch der Universitätswebsite · Im oberen Feld Bild, wählen Sie mit der bereits bekannten Auswahl über den Fileadmin Ihr gewünschtes Bild aus. Zusätzlich können

18

4.2 Bild-Text-Kachel

Die Bild-Text-Kachel erlaubt es, eine Kachel so aufzuteilen, dass auf der linken Seite ein kleines

Bild und auf der rechten Seite ein kurzer Text angezeigt werden kann. Alternativ lässt sich das

Bild auch im oberen Bereich der Kachel anzeigen mit einem anschließenden kurzen Text unter

dem selbigen. Zudem besteht die Möglichkeit das Bild über die gesamte Kachel anzuzeigen.

Jedoch entfällt hier der Text. Beim Bearbeiten der Seite erhalten Sie wie schon bei der

Inhaltskachel die folgende Ansicht:

Page 19: Guide zum Relaunch der Universitätswebsite · Im oberen Feld Bild, wählen Sie mit der bereits bekannten Auswahl über den Fileadmin Ihr gewünschtes Bild aus. Zusätzlich können

19 4 Kachel-Extension

Lediglich der Bild-Reiter ändert sich. Hier ergeben sich nachfolgenden Einstellungs-

möglichkeiten:

Im oberen Feld Bild, wählen Sie mit der bereits bekannten Auswahl über den Fileadmin Ihr

gewünschtes Bild aus. Zusätzlich können Sie über das Feld Verlinkung einen Link auf das von

Ihnen ausgewählte Bild legen. So wird der Nutzer durch einen Klick auf das Bild zur

gewünschten Seite weitergeleitet. Im Menü Position können Sie folgende Auswahlen Treffen um

die nachfolgenden Kachel-Layouts zu erhalten:

Page 20: Guide zum Relaunch der Universitätswebsite · Im oberen Feld Bild, wählen Sie mit der bereits bekannten Auswahl über den Fileadmin Ihr gewünschtes Bild aus. Zusätzlich können

20

1. Bild links, Text rechts:

2. Bild oben, Text unten:

3. Nur Bild:

4.3 News-Kachel

Wählt man die News-Kachel, so hat man die Möglichkeit den Inhalt eines News-Ordner, der

bereits aus dem Vorgängersystem bekannt ist, anzuzeigen. Die Einstellungsmöglichkeiten sind

daher, wie das folgende Bild zeigt, auf Überschrift und Ordnerwahl beschränkt.

Page 21: Guide zum Relaunch der Universitätswebsite · Im oberen Feld Bild, wählen Sie mit der bereits bekannten Auswahl über den Fileadmin Ihr gewünschtes Bild aus. Zusätzlich können

21 4 Kachel-Extension

Durch klicken auf das Ordnersymbol gelangt man in Typo3-Element-Browser. Hier zeigt

sich einem der zur Verfügung stehende Seitenbaum, auf welchem man seinen durch das Symbol

gekennzeichneten News-Ordner auswählen kann.

Hat man seinen Ordner gewählt und die Überschrift festgelegt, präsentiert sich das Ergebnis wie

folgt auf der Seite:

Page 22: Guide zum Relaunch der Universitätswebsite · Im oberen Feld Bild, wählen Sie mit der bereits bekannten Auswahl über den Fileadmin Ihr gewünschtes Bild aus. Zusätzlich können

22

Sind dabei mehr News im News-Ordner enthalten als die Kachel darstellen kann, so werden die

angezeigten News nach wenigen Augenblicken durch eine Auto-Scroll-Funktion verändert.

4.4 Toplinks-Kachel

Um eine Liste an Links in passender Formatierung innerhalb einer Kachel anzeigen zu lassen,

wählen sie Toplinks-Kachel. Sie haben die Möglichkeit bis zu acht Links anzugeben. Dabei kann

neben der Überschrift der Kachel auch eine optionale Linkbeschriftung angegeben werden,

sodass nicht die URL des Links in der Kachel angezeigt wird.

Die Kachel könnte auf der Seite nun solcherart dargestellt sein:

Page 23: Guide zum Relaunch der Universitätswebsite · Im oberen Feld Bild, wählen Sie mit der bereits bekannten Auswahl über den Fileadmin Ihr gewünschtes Bild aus. Zusätzlich können

23 4 Kachel-Extension

4.5 Bildergalerie-Kachel

Die Bildergalerie-Kachel bietet die Möglichkeit, die Bilder innerhalb eines Ordners im

Fileadmin in einer Kachel anzuzeigen. Dabei werden die Bilder automatisch mittels einer Auto-

Scroll-Funktion durchgeblättert und bildet damit eine Art Slideshow. Zusätzlich besteht für den

Seitenbesucher die Möglichkeit, mittels der Pfeilsymbole vor- und zurück zu blättern. Somit

muss nur ein Ordner ausgewählt werden, indem sich die gewünschten Bilder befinden.

Nun erscheint das folgende Fenster:

Optional kann auch hier eine Kachelüberschrift gewählt werden. Durch einen Klick auf ,

wird das Fileadmin-Fenster angezeigt.

Page 24: Guide zum Relaunch der Universitätswebsite · Im oberen Feld Bild, wählen Sie mit der bereits bekannten Auswahl über den Fileadmin Ihr gewünschtes Bild aus. Zusätzlich können

24

Hier können Sie nun den Ordner, der die gewünschten Bilder enthält, auswählen. Haben Sie

diese Auswahl getätigt, könnte die Slideshow-Kachel dieserart Bestandteil der Website sein:

4.6 Social-Media-Kachel

Die Social-Media-Kachel erlaubt es, die fünf Social-Media-Symbole innerhalb einer Kachel

anzuzeigen und somit zu Seiten in den sozialen Netzwerken zu verweisen. Die Social-Media-

Kachel stellt sich wie folgt dar:

Page 25: Guide zum Relaunch der Universitätswebsite · Im oberen Feld Bild, wählen Sie mit der bereits bekannten Auswahl über den Fileadmin Ihr gewünschtes Bild aus. Zusätzlich können

25 4 Kachel-Extension

Bei der Auswahl der Social-Media-Kachel können Sie nur die Überschrift der Kachel wählen.

Um die Links der Symbole festzulegen, wählen Sie im linken Menü den Reiter

Hier erwartet Sie folgende Ansicht:

Nach dem Speichern, können Nutzer über die Social-Media-Kachel Ihre Seiten in den sozialen

Netzwerken erreichen.

4.7 Youtube-Kachel

Zusätzlich zu Bildern, ist es möglich, ein Youtube-Video innerhalb einer anzuzeigen und

abzuspielen. Hierzu wählt man den Typ Videokachel aus. Nach der Auswahl zeigt sich folgender

Bildschirm:

Page 26: Guide zum Relaunch der Universitätswebsite · Im oberen Feld Bild, wählen Sie mit der bereits bekannten Auswahl über den Fileadmin Ihr gewünschtes Bild aus. Zusätzlich können

26

Auch hier kann die Überschrift der Kachel festgelegt werden. Um ein Video anzuzeigen, muss

einfach, wie im obigen Bild, die URL des Videos oder die Youtube Video-ID angegeben werden.

Auf der Website zeigt sich die Kachel nun wie folgt:

Page 27: Guide zum Relaunch der Universitätswebsite · Im oberen Feld Bild, wählen Sie mit der bereits bekannten Auswahl über den Fileadmin Ihr gewünschtes Bild aus. Zusätzlich können

27 5 Die ZIMK Bildergalerie

5 Die ZIMK Bildergalerie

Mit der ZIMK Bildergalerie-Extension können Sie schnell und unkompliziert Fotos im JPG-

Format auf die Website laden und präsentieren.

WICHTIG: Sie als Ersteller der Bildergalerie sind für die Einhaltung und Achtung des

geltenden Urheberrechts verantwortlich. Geben Sie daher stets einen Urheberrechtshinweis zum

Bild an. Verwenden Sie außerdem nur Bilder, von denen Sie eine Erlaubnis zur Veröffentlichung

haben. Sind Sie sich nicht sicher, wer der Urheber des betreffenden Bildes ist, so sollten Sie von

einer Veröffentlichung absehen. Die Veröffentlichung von Bildern mit Personen darauf ist nur

gestattet, wenn Sie die Erlaubnis der betreffenden Personen haben.

Um eine ZIMK Bildergalerie zu erstellen, gibt es grundsätzlich drei Möglichkeiten, die im

Folgenden vorgestellt werden:

1. Upload einer ZIP-Datei

2. Erweiterte Bilderverwaltung mit Systemordner

3. Synchronisation mit einem Dropbox-Ordner

5.1 Upload einer ZIP-Datei

Benennen Sie den ZIP-Ordner so, wie der spätere Titel der Bildergalerie lauten soll, z.B. Uni-

Bilder.zip. Die einzelnen Bilddateien benennen Sie ebenfalls so, wie die späteren Namen lauten

sollen. Unterstiche werden hierbei als Leerzeichen interpretiert, der Name der Bilddatei

„Bibliothek_Innenraum“ würde z.B. in der finalen Ansicht als „Bibliothek Innenraum“

dargestellt.

Um die Bildergalerie mit Hilfe eines ZIP-Ordners einzubinden wählen Sie zunächst „Neues

Element anlegen“ in der Seitenansicht im Backend aus. Danach wechseln Sie in den Reiter

„Spezielle Elemente“ und wählen das Element „Bildergalerie“ (Einfache Bildergalerie erstellen).

Page 28: Guide zum Relaunch der Universitätswebsite · Im oberen Feld Bild, wählen Sie mit der bereits bekannten Auswahl über den Fileadmin Ihr gewünschtes Bild aus. Zusätzlich können

28

Im Folgenden Fenster können Sie eine Überschrift, sowie einen Copyright-Hinweis eingeben.

Außerdem können Sie hier mittels des Buttons „Durchsuchen“ den zuvor auf Ihrem Rechner

angelegten ZIP-Ordner auswählen. Klicken Sie abschließend auf „Hochladen“ und vergessen Sie

nicht, die durchgeführten Änderungen abzuspeichern.

5.2 Erweiterte Bilderverwaltung mit Systemordner

Die Erstellung einer Bildergalerie mittels Systemordner bietet weitreichendere

Einstellungsmöglichkeiten als der Upload einer ZIP-Datei oder die Synchronisation mit einem

Dropbox-Ordner.

In einem ersten Schritt erstellen Sie daher einen Systemordner oder nutzen einen bereits

vorhandenen für die Zwecke der Bildergalerie. Wechseln Sie zur Listenansicht des

Systemordners. Dort klicken Sie auf „Neuen Datensatz erstellen“ und wählen beim

Unterpunkt „ZIMK Bildergalerie“ das Element „Bildergalerie Bild“ aus.

Im folgenden Fenster können Sie die Bilddatei über einen Klick auf das Ordner-Symbol aus dem

Fileadmin auswählen. Zusätzlich können Sie den Titel, eine Beschreibung und das Copyright

angeben. Vergessen Sie das Abspeichern nicht.

Bestehende Einträge können Sie in der Listenansicht des Systemordners durch einen Klick auf

den Stift bearbeiten. Durch einen Klick auf das Papierkorb-Symbol können die Einträge

einzeln gelöscht werden. Die Reihenfolge kann mittels Pfeil-Symbolen verändert werden.

Um die im Systemordner erstellten Bilder nun im Frontend einzubinden gehen Sie analog zur

Vorgehensweise in Abschnitt 5.1 vor. Allerdings wählen Sie hier als spezielles Inhaltselement

nicht die einfache Bildergalerie, sondern „Bildergalerie (erweitert)“ aus.

Im nachfolgenden Fenster können Sie wieder eine Überschrift eingeben und außerdem den

Ordner mit den einzubindenden Bildern im Fileadmin auswählen.

5.3 Synchronisation mit einem Dropbox-Ordner

Die dritte Möglichkeit zur Erstellung einer Bildergalerie ist die Synchronisation mit einem

bestehenden Dropbox-Ordner. So können z.B. unterwegs mit dem Smartphone Bilder

Page 29: Guide zum Relaunch der Universitätswebsite · Im oberen Feld Bild, wählen Sie mit der bereits bekannten Auswahl über den Fileadmin Ihr gewünschtes Bild aus. Zusätzlich können

29 5 Die ZIMK Bildergalerie

geschossen werden, die dann via App automatisch zu Dropbox übertragen werden und somit

auch in der Bildergalerie landen.

Zuerst erstellen Sie bei Dropbox einen Ordner, in den Sie dann die entsprechenden Bilder

hochladen. Den Link zu diesem Ordner müssen Sie nun freigeben. Merken bzw. kopieren Sie

sich an dieser Stelle den Link zum Dropbox-Ordner. Informationen und Hilfestellungen zum

Umgang mit Dropbox erhalten Sie auf der Supportseite des Unternehmens

(https://www.dropbox.com/help).

Im Backend von TYPO3 erstellen Sie nun das spezielle Inhaltselement „Bildergalerie Dropbox“.

Dazu gehen Sie analog zu den Anweisungen in Abschnitt 5.1 vor.

Im nun erscheinenden Formular können Sie wieder eine Überschrift und einen Hinweis zum

Copyright hinzufügen. Außerdem fügen Sie hier Ihren zuvor kopierten Link zum Dropbox-

Ordner ein. Mit einem Klick auf „Jetzt vollständig synchronisieren“ werden die Bilder aus Ihrem

Dropbox-Ordner übertragen und eingebunden. Im Feld „Automatische Synchronisation“ können

Sie auswählen, was bei Änderungen in Ihrem Dropbox-Ordner auf der Uni-Homepage

geschehen soll.

Nur Änderungen: Neu hinzugefügte Dateien werden automatisch übernommen,

gelöschte entfernt. Die schnellste und effizienteste Methode der Synchronisation.

Vollständig: Alle (!) Bilder, die sich im betreffenden Dropbox-Ordner befinden, werden

im Prozess der automatischen Synchronisation erneut übertragen. Dieser Vorgang ist sehr

zeitaufwändig und wird nur in Ausnahmefällen benötigt.

Ausschalten: Es findet keine automatische Synchronisation statt. Die Bildergalerie wird

in ihrem aktuellen Zustand eingefroren. Eine Synchronisation kann nur manuell

ausgeführt werden (über den bereits erklärten Button „Jetzt vollständig

synchronisieren“).

Page 30: Guide zum Relaunch der Universitätswebsite · Im oberen Feld Bild, wählen Sie mit der bereits bekannten Auswahl über den Fileadmin Ihr gewünschtes Bild aus. Zusätzlich können

30

5.4 Frontend-Ansicht

Im Frontend wird die Bildergalerie, wie in der Abbildung dargestellt, angezeigt. Im oberen

Bereich (gelb umrandet) wird das gerade betrachtete Bild groß dargestellt. Über einen Klick auf

den Pfeil (links oben) kann die automatische Diashow gestartet bzw. ausgeschaltet werden. Über

das Maximieren-Symbol (rechts oben) kann das Bild als Vollbild dargestellt werden, falls der

genutzte Browser dies unterstützt. Wir empfehlen Mozilla Firefox in der aktuellsten Version.

Links unten wird die Überschrift des Bildes angezeigt, rechts unten die Copyright-Hinweise.

Fährt der Benutzer mit der Maus über das Bild, so werden links und rechts mittig Pfeile

angezeigt, über die eine Navigation durch die einzelnen Bilder möglich ist.

Im unteren Bereich (rot umrandet) werden die einzelnen Bilder als Miniaturansicht dargestellt.

Diese können angeklickt werden und erscheinen dann als großes Bild im oberen Bereich.

Page 31: Guide zum Relaunch der Universitätswebsite · Im oberen Feld Bild, wählen Sie mit der bereits bekannten Auswahl über den Fileadmin Ihr gewünschtes Bild aus. Zusätzlich können

31 6 Startseite

6 Startseite

Die Startseite der Universität Trier hat ein komplett neues Design erhalten. Dieser Abschnitt

stellt die wichtigsten Veränderungen kurz vor.

6.1 Aufteilung

Grundsätzlich verwendet das neue Design der Startseite Kacheln. Diese können in drei

verschiedene Bereiche eingeteilt werden.

Den ersten Bereich stellen die acht Inhaltskacheln (grün umrandet) dar. Hier finden sich

aktuelle Informationen rund um die Universität, einzelne Fächer, Wettbewerbe etc. Der Inhalt

dieser Kacheln wird seitens der Pressestelle redaktionell gepflegt.

In Bereich zwei sind vier Schnelleinstiegskacheln (rot umrandet) angesiedelt. Diese Kacheln

dienen als schnelle Zugangsmöglichkeit zu weiterführenden Informationen für verschiedene

Nutzergruppen. Die Schnelleinstiegskacheln sind ein möglicher Ansatzpunkt um tiefer in die

Seitenhierarchie der Universität zu gelangen.

Page 32: Guide zum Relaunch der Universitätswebsite · Im oberen Feld Bild, wählen Sie mit der bereits bekannten Auswahl über den Fileadmin Ihr gewünschtes Bild aus. Zusätzlich können

32

Der dritte Bereich wird durch drei Infokacheln (gelb umrandet) gebildet. Hier stehen Campus-

News, wichtige Termine und Stellenangebote. Diese drei rechten Kacheln werden automatisch

auf alle Unterseiten vererbt, es sei denn sie werden überschrieben (siehe Abschnitt 3).

Eine neue Funktion, die in der bisherigen Website der Universität Trier nicht vorhanden war,

heißt Meine Uni (schwarzer Pfeil). Diese wird im Folgenden Abschnitt näher erläutert.

6.2 Meine Uni

Um die Website der Universität individueller und persönlicher zu gestalten wurde die Funktion

Meine Uni entwickelt. Einzelne Inhaltselemente und auch ganze Seiten können über die oben

rechts platzierte grüne Pinnadel auf der Seite Meine Uni gepinnt werden (orangener Pfeil).

Wird diese Seite aufgerufen, so finden sich die zuvor gepinnten Elemente bzw. Seiten als kleine

Kacheln wieder. Durch einen Klick auf diese Kacheln findet eine Weiterleitung zu den

entsprechenden Elementen bzw. Seiten statt. Soll eine Kachel wieder entfernt werden, so genügt

ein Klick auf das kleine X am rechten oberen Rand (rote Pfeile). Die Kachel verschwindet nun

und der Inhalt ist wieder ungepinnt.

Die Funktionalität Meine Uni kann als eine Art Lesezeichen bzw. personalisierter

Schnelleinstieg angesehen werden.

Page 33: Guide zum Relaunch der Universitätswebsite · Im oberen Feld Bild, wählen Sie mit der bereits bekannten Auswahl über den Fileadmin Ihr gewünschtes Bild aus. Zusätzlich können

33 7 Die „neue Suche“

7 Die „neue Suche“

Die neue Suchfunktion befindet sich im oberen Bereich der Service-Kachel (grün umrandet).

Hier können Sie direkt Ihren gewünschten Suchbegriff eingeben.

Die neue Suche zeichnet sich, im Vergleich zu der alten Suche, durch eine wesentlich höhere

Treffsicherheit aus. Sie können sowohl Personendaten (inkl. E-Mail und Telefon), als auch

Inhaltselemente durchsuchen. Dafür benötigen Sie ausschließlich dieses eine Suchfenster, ein

Wechsel (wie im alten System) ist nicht mehr notwendig.

Page 34: Guide zum Relaunch der Universitätswebsite · Im oberen Feld Bild, wählen Sie mit der bereits bekannten Auswahl über den Fileadmin Ihr gewünschtes Bild aus. Zusätzlich können

34

Auf der nachfolgenden Ergebnisseite werden zuerst die zur Suchanfrage passenden Personen

aufgeführt (orange umrandet). Darunter befinden sich die Treffer zu Inhaltselementen (rot

umrandet). Über die Suchleiste (blau umrandet) kann eine neue Suchanfrage gestartet werden.