Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der...

58
Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg 2 47057 Duisburg Telefon: (0203) 379-1481 [email protected] www.uni-due.de

Transcript of Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der...

Page 1: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

Redakteursleitfaden Styleguide zum Internetauftritt

der Universitaumlt Duisburg-Essen

Ressort Presse Webredaktion

Stabsstelle des Rektorats

Forsthausweg 2

47057 Duisburg

Telefon (0203) 379-1481

webredaktionuni-duede

wwwuni-duede

S e i t e | 1

Inhalt

1 Einleitung Ein einheitliches Gesicht der Universitaumlt Seite 2

2 Schluumlsselelemente des Corporate Design Seite 3

3 Technische Plattform Zugang zum CMS Seite 5

4 Grundsaumltze der Webseitengestaltung Seitenaufbau Seite 7

5 Bestandteile von Webseiten Seite 9

51 Die Organisationsbezeichnung Seite 10

52 Die Zielgruppennavigation Seite 12

53 Die Navigation Seite 13

6 Webseiten gestalten Seite 15

61 Uumlber allem Die Brotkrumennavigation Seite 17

62 (TinyMCE)-Texteditor Seite 18

63 A-Z verwalten Seite 23

64 Code editieren Seite 25

65 Codebaustein einfuumlgen Seite 26

66 DBAdmin Seite 27

67 Doppelcontainer Seite 28

68 Flickr nutzen Seite 30

69 Formulare Seite 31

610 Google-Maps Seite 34

611 Image-Gallery Seite 36

612 Mailinglisten Seite 37

613 Mitarbeiter-Seite Seite 38

614 Mitarbeiter-Publikationsliste Seite 39

615 Mitarbeiter-Liste Seite 40

616 Randlose Grafik Seite 41

617 RSS-Feed-Agent Seite 42

618 RSS-Feed-Administration Seite 44

619 Tube Audio-VideoPlayer Seite 44

620 Veranstaltungskalender Seite 46

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit Seite 49

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum Seite 51

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo Seite 54

S e i t e | 2

1 Einleitung Ein einheitliches Gesicht der Universitaumlt

Eindeutig und unverwechselbar ist die Universitaumlt Duisburg-Essen (UDE) Praumlgend fuumlr ihren Charakter

in Forschung Lehre und Service sind Innovation und Dynamik sowie Weltoffenheit und Vernetzung

Damit diese Staumlrken auch optisch in Erscheinung treten folgt der Internetauftritt der Hochschule dem

generellen Corporate Design der Universitaumlt Der neue Auftritt ist Teil eines

Kommunikationsprozesses den die UDE im Jahr 2010 initiiert hat Anstoszlig war der Wunsch nach einer

sichtbaren und kommunizierbaren Identitaumlt nach einem einheitlichen und glaubhaften Bild der UDE

in der Oumlffentlichkeit

Um dieses Ziel zu erreichen benoumltigt die Hochschule die Mitarbeit jedes einzelnen

Internetredakteurs in den unterschiedlichen Bereichen der UDE Sie werden feststellen dass das

neue Corporate Design viele Freiheiten im Umgang laumlsst und offen fuumlr Ideen und Kreativitaumlt ist

Das neue Gesicht der Hochschule ist inzwischen in vielen Bereichen sukzessive umgesetzt worden Im

Internet praumlsentiert es sich als offenes und zugleich puristisches Design das mit einer

vergleichsweise kleinen Zahl von Gestaltungselementen auskommt und damit die Pflege der Seiten

erleichtert Statt grafisch uumlberladener Seiten bietet die UDE einfache aber funktionale Navigations-

und Gestaltungselemente Diese Grundidee durchgaumlngig umzusetzen wird in der Zukunft weiter zu

verfolgen sein

In diesem Leitfaden sind die Grundregeln fuumlr den einheitlichen Gesamtauftritt der UDE im World

Wide Web niedergelegt Er soll ihnen dabei helfen die wichtigsten Elemente zu identifizieren und sie

in Ihrem praktischen Alltag umzusetzen

Wenn Sie Fragen zu diesem Bereich haben Wenden Sie sich an die Webredaktion in der Pressestelle

an das Hochschulmarketing oder an den Bereich IT-Infrastruktur im Zentrum fuumlr Informations- und

Mediendienste (ZIM)

Weitere Informationen amp Ansprechpartner

bull Ulrike Eichweber Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-2461 -1481 webredaktionuni-duede

bull Dr Olivia Jazwinski (Stabsstelle des Rektorats Marketing)

Telefon (0203) 379-4747 oliviajazwinskiuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

S e i t e | 3

2 Schluumlsselelemente des Corporate Design

Das Webdesign der Universitaumlt greift an praumlgnanter Stelle und auf den ersten Blick wahrnehmbar die

Schluumlsselelemente des neuen Hochschuldesigns auf Den Webauftritt praumlgen

bull die Wortmarke das Logo mit Claim

bull der Himmel als hervorstechendes bdquoKey-Visualldquo

bull die vier abgestimmten UDE-Grundfarben

bull (die im Netz genutzte Schriftart)

Die UDE-Wortmarke mit dem Claim bdquoOffen im Denkenldquo (wahlweise im Englischen bdquoOpen mindedldquo) ist

der wichtigste Bestandteil der Corporate Identity der Hochschule Der Claim unterstreicht auf

emotionale Art dass die Universitaumlt Duisburg-Essen keine geschlossene lebensferne Gesellschaft ist

sondern genau das Gegenteil Sie ist anfassbar nahe dran an der Gesellschaft nah an den Menschen

und deren individuellen Faumlhigkeiten

Die Konstellation aus Wortmarke und Claim ist verbindlich zu verwenden Die Wortmarke wird

nicht ohne Claim eingesetzt

Der Claim hat den Abstand eines Versals zum Logo zur Wortmarke Die Konstellation bdquoWortmarke

und Claimldquo ist fix und darf in sich nicht veraumlndert werden

Der Himmel als Schluumlsselreiz (Key-Visual) steht als Metapher fuumlr bdquoOffen im Denkenldquo und damit fuumlr

die Universitaumlt selbst Die UDE setzt keine Barrieren fuumlr Forschung und Lehre keine Grenzen im

Denken Als aufmerksamkeitsstarkes Irritationselement taucht der Himmel auszligerdem auch dort auf

wo er normalerweise nicht ist Collagen spielen mit Gewohntem und Ungewoumlhnlichem Szenen die

eigentlich jeder kennt demonstrieren auf ungewoumlhnliche Art und Weise wie die UDE bdquoticktldquo

S e i t e | 4

Das Himmel-Motiv uumlberfuumlhrt die seit der Gruumlndung 2003 entwickelte blau-weiszlige Farbenwelt der

Hochschule in einen neuen Layout-Kontext Im weiterentwickelten Design existieren vier

aufeinander abgestimmte Farben

bull Blau gemaumlszlig Hexadezimalcode 004c93

bull Beige gemaumlszlig Hexadezimalcode efe4bf

bull Hellblau gemaumlszlig Hexadezimalcode dfe4f2

bull Schwarz gemaumlszlig Hexadezimalcode 000000

bull (Graue Elemente erscheinen gemaumlszlig Hexadezimalcode 58585a)

S e i t e | 5

Saumlmtliche Farben werden vom System automatisch gesetzt Sie koumlnnen jedoch im Inhaltsbereich

Ihrer Webseiten Module unterschiedlich einfaumlrben Sie haben dort die Wahl zwischen weiszliger

(Standardeinstellung) sandfarbener oder hellblauer Hinterlegung

Als Schriftart kommt auf der UDE-Website ausschlieszliglich Arial zum Einsatz Die Basisschriftgroumlszlige ist

12px die uumlberwiegende Schriftfarbe Schwarz

Weiterfuumlhrende Informationen amp Downloads

bull UDE-Markenhandbuch

httpwwwuni-

duedeimperiamdcontentdokumenteoffen_im_denkenude_markenhandbuchpdf

bull Wortmarke Logo mit Claim in unterschiedlichen Formaten

httpwwwuni-duedeoffen-im-denkenlogodownloadphp

bull Schmuckelemente (Grafiken Schriften)

httpwwwuni-duedeoffen-im-denkenschmuckelementephp

3 Technische Plattform Zugang zum CMS

Die UDE betreibt einen zentralen Webserver der von allen Einrichtungen und Mitgliedern der

Universitaumlt genutzt werden kann Fuumlr den Server wird eine hohe Erreichbarkeit auch unter Last

gewaumlhrleistet Der Webserver wird uumlber das Content Management System (CMS) bdquoIMPERIAldquo das ndash

nach einer landesweiten Ausschreibung ndash von vielen Hochschulen benutzt wird mit Webseiten

befuumlllt

Einen Zugang zum CMS IMPERIA erhalten Sie uumlber das Zentrum fuumlr Informations- und Mediendienste

(ZIM) Das ZIM bietet neben dem technischen Support auch Einfuumlhrungskurse in die Erstellung von

Webseiten

S e i t e | 6

Weitere Informationen

bull Zugang zum UDE-System IMPERIA-Rubriken Web-Verzeichnisse

Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

bull Anwenderschulung

Hartmut Prause (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0201) 183-4115 hartmutprauseuni-duede

bull Termine der Einfuumlhrungskurse

httpwwwuni-duedezimservicesweiterbildungkurse

Neben IMPERIA wird an Einrichtungen der UDE auch mit anderen Content Management Systemen

gearbeitet die spezifische Eigenschaften aufweisen Genutzt werden unter anderen die Open Source

Produkte Typo3 Drupal oder Joomla Mit welchem System die jeweilige UDE-Einrichtung arbeitet ist

dezentral zu entscheiden Gleichwohl sollte auch bei einer Entscheidung fuumlr ein alternatives System

bedacht werden wie die Ausfallsicherheit die Kontinuitaumlt der Weiterentwicklung sowie die

Darstellung im Design der Hochschule gewaumlhrleistet werden koumlnnen

S e i t e | 7

4 Grundsaumltze der Webseitengestaltung Seitenaufbau

Um der sich staumlndig veraumlndernden Landschaft an Ausgabegeraumlten (Desktops Netbooks Tablets

Smartphoneshellip) Rechnung zu tragen passt sich das neue (adaptive) Layout der UDE-Website

dynamisch an unterschiedliche Bildschirm- bzw Browserfenstergroumlszligen an Die bdquonormaleldquo

Desktopansicht aumlndert so auf einem kleineren Bildschirm wie beispielsweise einem aumllteren iPad im

Querformat die Breite so dass horizontales Scrollen vermieden wird Bei kleineren Bildschirmen bricht

die rechte Spalte um und wird unterhalb des Hauptinhaltes angezeigt Auf Mobiltelefonen schlieszliglich

entfaumlllt die Spaltenanordnung komplett und saumlmtliche Inhalte werden untereinander angezeigt

Dieses Verhalten ist dadurch moumlglich dass alle Groumlszligenangaben im System nur relativ angegeben

sind Verwenden Sie daher keine eigenen fixen Groumlszligenangaben die diese Vorlagen uumlberschreiben

In der bdquonormalenldquo Desktopansicht folgt der Webseitenaufbau im Internetangebot der Universitaumlt

einem festen Raster dass Ihnen bei Verwendung des CMS IMPERIA automatisch vorgegeben wird

bull Die Webseite der UDE liegt als weiszliges bdquoBlattldquo zentriert auf einem sandfarbenen Hintergrund

Der Container der dieses bdquoBlattldquo optisch darstellt beginnt in einem Abstand von 15 Pixeln

S e i t e | 8

zum oberen Seitenrand und setzt immer am unteren Seitenrand auf Der linke der obere und

der rechte Containerrand erzeugen einen leichten Schatteneffekt

bull Links in der Kopfzeile begruumlszligt immer an erster Stelle der Schriftzug bdquoUNIVERSITAumlT

DUISBURG-ESSENldquo die Seitenbesucher Auf jeder Seite der Universitaumlt genuumlgt ein Mausklick

auf den Schriftzug um zuruumlck auf die UDE-Startseite zu gelangen

bull Die gruppenspezifische Aufarbeitung von Informationen gilt inzwischen ndash zu Recht ndash als ein

Qualitaumltsmerkmal von Internetseiten Jede UDE-Webseite erhaumllt deshalb in der Kopfzeile

eine Zielgruppennavigation In Bereichen die keine eigene Zielgruppennavigation erstellen

erscheinen dort die entsprechenden Inhalte des zentralen Angebotes der Universitaumlt

bull Unterhalb der Kopfzeile erscheint auf jeder Seite der Universitaumlt eine Impressionsgrafik Das

System IMPERIA gibt Ihnen diese Grafik vor Sie greift mit ihrem Motiv (Himmel und Wolken)

das beherrschende Key-Visual des Corporate Design der Hochschule auf Zentral am unteren

Rand des Bildes wird vor einem uumlberlagernden weiszligen Kasten der Titel der jeweiligen

Webseite angezeigt Die Houmlhe der Impressionsgrafik veraumlndert sich wenn der eingefuumlgte

Seitentitel mehrzeilig wird

bull Innerhalb der Impressionsgrafik koumlnnen Sie auf der linken Seite eine ein- oder zweizeilige

Bezeichnung Ihres Bereiches einfuumlgen Diese individuelle Organisationsangabe sitzt so im

Gesamtlayout direkt unter dem Schriftzug bdquoUNIVERSITAumlT DUISBURG-ESSENldquo und gibt den

Seitenbesuchern auf den ersten Blick die Orientierung daruumlber wo sie sich eigentlich gerade

befinden Sie koumlnnen sie individuell verlinken

bull Das Universitaumlts-Logo sitzt rechtsbuumlndig in der Impressionsgrafik Es ist so einzurichten dass

ein Mausklick genuumlgt um auf die UDE-Homepage zu gelangen Das Logo darf nicht ohne den

Claim bdquoOffen im Denkenldquo (wahlweise im Englischen bdquoOpen mindedldquo) verwendet werden

bull In der linken Spalte kann der jeweilige Seitenanbieter eine frei editierbare Navigation

einbinden Die Navigation umfasst maximal zwei Ebenen Durch die bewusst reduzierte

Menuumlstruktur signalisiert die Internetpraumlsenz Klarheit und Transparenz Die

Hauptmenuumleintraumlge sind in Groszligbuchstaben (Versalien) ausgefuumlhrt Eintraumlge von

Untermenuumls sind eingeruumlckt und in Normalschrift formatiert Auf beiden Ebenen wird die

Schrift beim Uumlberfahren mit der Maus bzw beim Antabben auf Touch-Screens weiszlig vor

blauem Hintergrund Gleiches gilt fuumlr den jeweils aktiven Menuumlpunkt (Im Jahr 2013 wird auf

jeder mit dem CMS IMPERIA im aktuellen Template erzeugten Webseite uumlber der

Hauptnavigation das Jubilaumlumsfaumlhnchen zum zehnjaumlhrigen Bestehen der Universitaumlt

eingeblendet verlinkt auf httpwwwuni-duede10jahre)

bull Unterhalb der eigenen Navigation wird immer die zentrale Suche (Volltextsuche

Personensuche) der Universitaumlt verlinkt An dieser Stelle koumlnnen Sie zudem wahlweise (und

S e i t e | 9

auf jeder Seite einzeln) einen Link auf eine individuelle A-Z-Seite undoder auf einen eigenen

Intranet-Bereich sowie mit Landesfahnen gekennzeichnete Hinweise auf parallel angebotene

fremdsprachige Inhalte einfuumlgen

bull Zwischen Seitentitel und ndashinhalt koumlnnen Sie auf jeder Seite eine individuelle

Brotkrumennavigation editieren die den Nutzern eine schnelle Uumlbersicht daruumlber

ermoumlglicht wie sie auf die gerade aufgerufene Webseite gelangt sind

bull Der eigentliche Inhaltsbereich (Content) der Webseite kann bei der Seitenerzeugung ein-

oder zweispaltig angelegt werden Der Wechsel zwischen Ein- und Zweispaltigkeit einer Seite

ist uumlber den IMPERIA -Workflow jederzeit moumlglich Bei einem zweispaltigen Contentbereich

ist die schmale rechte Spalte fuumlr Zusatzinformationen vorgesehen die nicht direkt zum

Hauptinhalt gehoumlren bspw Veranstaltungskalender Banner oder RSS-Feeds Fuumlr die

Gestaltung des Inhalts steht eine groszlige Anzahl statischer wie dynamischer Elemente

(Module) zur Verfuumlgung Die einzelnen Module des Inhaltsbereiches koumlnnen unterschiedlich

eingefaumlrbt werden Sie haben die Wahl zwischen weiszliger (Standardeinstellung) sandfarbener

oder hellblauer Hinterlegung

bull In der Fuszligzeile angedockt an den unteren Seitenrand erscheint auf allen Seiten der

Hochschule ein Link auf das zentrale UDE-Impressum Wahlweise (und auf jeder Seite

einzeln) koumlnnen Sie einen Kontakt-Link einfuumlgen

bull Den Abschluss der Webseite bildet die E-Mail-Adresse des zustaumlndigen technischen

Seitenredakteurs die fuumlr Ruumlckfragen oder fuumlr redaktionelle Hinweise genutzt werden kann

Dieses Feld ist individuell beschreibbar ndash sollte jedoch niemals leer und immer auf dem

aktuellen Stand sein Hierfuumlr eignen sich Funktions-E-Mail-Adressen besser als Ihr

persoumlnlicher Account

5 Bestandteile von Webseiten

Um eine Webseite in der Internetpraumlsenz der Universitaumlt vollstaumlndig zu praumlsentieren benoumltigen Sie

(solange Sie mit dem CMS IMPERIA arbeiten) vier Elemente von denen Sie jedoch drei Elemente nur

einmal fuumlr Ihren gesamten Webbereich anlegen muumlssen und danach zentral pflegen koumlnnen

Eine Webseite setzt sich zusammen aus

bull Einer eigenen Organisationsbezeichnung Ihres Bereiches

bull Einer individuellen Zielgruppennavigation In Bereichen die keine eigene

Zielgruppennavigation erstellen erscheinen dort die entsprechenden Inhalte des zentralen

Angebotes der Universitaumlt

S e i t e | 10

bull Einer Navigation Sie koumlnnen in Ihrem Webbereich auch eine Vielzahl unterschiedlicher

Navigationen erstellen und diese je nach Bedarf einbinden

bull Der Seite (dem Dokument) selbst in der Sie Ihren Inhalt und Funktionen bearbeiten und die

vorherigen Elemente einfuumlgen koumlnnen

51 Die Organisationsbezeichnung

Die individuelle Bezeichnung Ihres Bereiches (Organisationsbezeichnung) erscheint auf Ihren

Webseiten links oben innerhalb der Impressionsgrafik direkt unter dem Schriftzug bdquoUNIVERSITAumlT

DUISBURG-ESSENldquo

Organisationsbezeichnungen erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

Sie koumlnnen Organisationsbezeichnungen in der Bearbeitungsebene ein- oder zweizeilig gestalten

S e i t e | 11

bull Der Eintrag in der ersten Zeile (bdquoOrganisationsbezeichnungldquo) erscheint groumlszliger und in weiszliger

fett-gesetzter Schrift

bull Ein Eintrag in der zweiten Zeile (bdquoZusatzldquo) erscheint in weiszliger normal gesetzter Schrift

Unter bdquoVerweis zur Organisationseinheit (URL)ldquo koumlnnen Sie das Sprungziel der

Organisationsbezeichnung bestimmen Tragen Sie diese Verknuumlpfung bitte als relativen Link ohne

Verweis auf den Webserver der Universitaumlt ein

bull Beispiel ihrverzeichnis anstatt httpwwwuni-duedeihrverzeichnis

Eine spaumltere Bearbeitung der Organisationsbezeichnung ist im CMS IMPERIA nicht uumlber das Tool

bdquoQuickEditldquo moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente

bearbeitenldquo im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichnisorganisation_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere

Organisationsbezeichnungen im selben Verzeichnis erstellen diesen einen jeweils moumlglichst

aussagekraumlftigen Dateititel zu geben

S e i t e | 12

52 Die Zielgruppennavigation

Eine individuelle Zielgruppennavigation in der Kopfzeile Ihrer Webseite erstellen Sie uumlber das

IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

Die editierte und veroumlffentlichte Zielgruppennavigation erscheint automatisch auf allen Seiten Ihres

Verzeichnisses

Tragen Sie bitte auch dort die Verknuumlpfungen als relative Links ohne Verweis auf den Webserver der

Universitaumlt ein Verwenden Sie dieses Instrument auszligerdem bitte nicht als moumlgliche zusaumltzliche

Quernavigation sondern ausschlieszliglich als Hilfe und zur Verlinkung gruppenspezifischer

Informationsaufarbeitung

Auch die spaumltere Bearbeitung der Zielgruppennavigation ist im CMS IMPERIA nicht uumlber das Tool

bdquoQuickEditldquo moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente

bearbeitenldquo im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Zielgruppennavigation lautet

ihrverzeichnistargetsshtml

S e i t e | 13

Beachten Sie beim Import bitte Folgendes Anders als seit Beginn des Wintersemesters 2007

gehandhabt kann mit dem UDE-Webrelaunch im Oktober 2011 pro Verzeichnis nur noch eine

anstelle von zwei Zielgruppennavigationen erstellt werden die zudem automatisch in Ihrer Webseite

eingesetzt wird In Verzeichnissen die zwischen 2007 und 2011 angelegt wurden existiert oft

(zusaumltzlich oder ausschlieszliglich) eine sogenannte bdquoerweiterte Zielgruppennavigationldquo

(ihrverzeichnisetargetsshtml) Der Webserver der Universitaumlt sucht bei der Ausgabe Ihrer

Internetseiten im ersten Schritt nach der Datei bdquotargetsshtmlldquo im zweiten Schritt nach der Datei

bdquoetargetsshtmlldquo in Ihrem Verzeichnis und gibt die Zielgruppennavigation dieser Prioritaumlt nach aus

Fehlen beide Dateien so erscheinen die entsprechenden Inhalte des zentralen Angebotes der

Universitaumlt

53 Die Navigation

Navigationen in der linken Spalte Ihrer Webseite sind maximal zwei Ebenen tief

bull In der ersten Ebene ist die Schrift in Versalien (Groszligbuchstaben) gesetzt Schreiben Sie Ihre

Links bitte dennoch bdquonormalldquo Die Transformation in Groszligbuchstaben erfolgt automatisch

durch das System Die Navigationspunkte der ersten Ebene sind mit einem blauen Rechteck

versehen das am linken Seitenrand anliegt

bull Die zweite Navigationsebene erscheint in der Ausgabe nach rechts geruumlckt und regulaumlr in

Groszlig- und Kleinschreibung gesetzt

Links in Navigationen veraumlndern sich beim Uumlberfahren mit der Maus bzw beim Antabben auf

Touchpads Die Schrift erscheint dann weiszlig auf einem blauen Hintergrund Das Gleiche gilt fuumlr den

jeweils aktiven Menuumlpunkt Dieser ist in der Navigation dauerhaft weiszlig mit blauer Hinterlegung

Navigationen erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 14

Zum Aufbau Ihrer Navigation stehen Ihnen die Module bdquoNavigationslinkldquo und

bdquoNavigationsuntermenuumlldquo zur Verfuumlgung Ein Navigationslink erscheint einzeln auf der ersten Ebene

versehen mit einem vorgelagerten blauen Rechteck Mit dem Navigationsuntermenuuml koumlnnen Sie

Menuumlpunkte erzeugen die neben dieser ersten Position uumlber eine zweite eingeruumlckte Ebene

verfuumlgen Dort lassen sich beliebig viele Unterpunkte einsetzen Je nachdem ob Sie den

uumlbergeordneten Eintrag im Navigationsuntermenuuml mit einer Zieladresse (URL) versehen erscheint

dieser verlinkt oder als einfache Uumlberschrift uumlber die nachgelagerten Inhaltspunkte

Selbstverstaumlndlich lassen sich die einzelnen Einheiten in ihrer Position jederzeit verschieben Tragen

Sie interne Links in Ihren Navigationen bitte als relative Verknuumlpfungen ohne Verweis auf den

Webserver der Universitaumlt ein

Editierte und veroumlffentlichte Navigation erscheinen innerhalb der Rubrik in der sie angelegt wurden

automatisch zur Auswahl im linken Bereich der Bearbeitungsebene Ihrer Webseite

Die spaumltere Bearbeitung von Navigationen ist im CMS IMPERIA auf zwei Wegen moumlglich Die

entsprechende Datei kann zum einen uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo im

IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Navigationen folgt folgendem Muster

ihrverzeichnisnav_12345shtml

S e i t e | 15

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Navigationen im selben

Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

Zum anderen koumlnnen Sie auch aus der Bearbeitungsebene einer Webseite heraus dort ausgewaumlhlte

Navigationen aufrufen und editieren Beachten Sie jedoch dass nach dem Speichern der

bearbeiteten Navigation sowohl die Navigationsdatei als auch die Datei der Ursprungsseite auf Ihrem

Schreibtisch liegen

6 Webseiten gestalten

Fuumlr die Gestaltung Ihres Inhalts steht Ihnen eine groszlige Anzahl statischer wie dynamischer Elemente

(Module) zur Verfuumlgung Welche Elemente Sie im Einzelnen nutzen koumlnnen haumlngt davon ab welchen

Dateityp Sie bei der Dokumentenerzeugung fuumlr Ihre Webseite waumlhlen Das Content Management

System der Hochschule bietet Ihnen die Moumlglichkeit Ihr Dokument als HTML-Web-Seite oder als

PHP-Skript zu erzeugen Beachten Sie bitte von Anfang an dass diese Auswahl Einfluss auf die URL

(Internetadresse) der jeweiligen Seite hat Bei einer nachtraumlglichen Aumlnderung aumlndert sich auch die

Internetadresse unter der Ihre Seite im Netz zu finden ist Sie muumlssen dann eventuell Verlinkungen

an vielen Stellen aumlndern

bull Internetadresse einer HTML-Web-Seite wwwuni-duedebereichihreseiteshtml

bull Internetadresse eines PHP-Skripts wwwuni-duedebereichihreseitephp

Je nachdem ob Sie Ihr Dokument als HTML-Web-Seite oder als PHP-Skript erzeugen koumlnnen Sie

folgende Elemente nutzen

Linke Spalte des Inhaltsbereiches

bull (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

bull A-Z verwalten PHP-Skript HTML-Web-Seite

bull Code editieren PHP-Skript HTML-Web-Seite

bull Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

bull DBAdmin PHP-Skript

bull Doppelcontainer PHP-Skript HTML-Web-Seite

bull Flickr nutzen PHP-Skript

bull Formular schlieszligen PHP-Skript

bull Formular oumlffnen PHP-Skript

S e i t e | 16

bull Formular Element PHP-Skript

bull Formulareingabe in DB speichern PHP-Skript

bull Google-Maps (v30) PHP-Skript HTML-Web-Seite

bull Image-Gallery (v21) PHP-Skript HTML-Web-Seite

bull Mailinglisten PHP-Skript

bull Mitarbeiter-Liste PHP-Skript

bull Mitarbeiter-Publikationsliste PHP-Skript

bull Mitarbeiter-Seite PHP-Skript

bull Randlose Grafik PHP-Skript HTML-Web-Seite

bull RSS-Feed-Administration PHP-Skript

bull RSS-Feed-Agent PHP-Skript

bull Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

bull Veranstaltungskalender Kalendermodul PHP-Skript

bull Veranstaltungskalender Veranstaltungsmodul PHP-Skript

Rechte Spalte des Inhaltsbereiches

bull (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

bull Code editieren PHP-Skript HTML-Web-Seite

bull Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

bull Flickr nutzen PHP-Skript

bull Mitarbeiter-Seite PHP-Skript

bull Randlose Grafik PHP-Skript HTML-Web-Seite

bull RSS-Feed-Agent PHP-Skript

bull Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

bull Veranstaltungskalender Kalendermodul PHP-Skript

Beim Erstellen Ihrer Webseite koumlnnen Sie diese einzelnen Module nach Bedarf (auch mehrfach)

erzeugen und in der gewuumlnschten Reihenfolge platzieren wobei die gewaumlhlte Reihenfolge jederzeit

veraumlnderbar ist Mit wenigen Ausnahmen lassen sich die einzelnen Einheiten weiszlig blau oder beige

einfaumlrben (Ausnahme randlose Grafik) Sie werden vom System dann als voneinander abgesetzte

Bloumlcke ausgegeben

Um innerhalb eines Dokuments zu navigieren koumlnnen Sie wenn noumltig die einzelnen Elemente auch

mit einem Link-Anker versehen (Ausnahmen randlose Grafik Mitarbeiter-Liste -Publikationsliste

und ndashSeite Veranstaltungskalender Veranstaltungs- sowie Kalendermodul) Den Ankernamen

S e i t e | 17

koumlnnen Sie frei vergeben er darf jedoch keine Leer- oder Sonderzeichen enthalten Das erste Zeichen

muss auszligerdem ein Buchstabe sein

61 Uumlber allem Die Brotkrumennavigation

Zwischen Seitentitel und ndashinhalt koumlnnen Sie auf jeder Seite eine individuelle Brotkrumennavigation

editieren die den Nutzern eine schnelle Uumlbersicht daruumlber ermoumlglicht wie sie auf die gerade

aufgerufene Webseite gelangt sind Verwenden Sie dieses Instrument bitte nicht als moumlgliche

zusaumltzliche Quernavigation sondern ausschlieszliglich als Hilfe im vorgesehenen Sinne

Der letzte Eintrag der Brotkrumennavigation der uumlblicherweise die aktuell aufgerufene Seite

benennt sollte nicht mit einer Zieladresse (URL) versehen werden Der Eintrag erscheint dann als

regulaumlr schwarz formatierter Text nicht als blau ausgezeichneter Link

S e i t e | 18

62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

Mit dem TinyMCE-Texteditor stellt Ihnen das Content Management System der UDE einen auf

JavaScript basierenden WYSIWYG-Editor (bdquoWhat You See Is What You Getldquo) zur Verfuumlgung Mit Hilfe

dieses Moduls ist es moumlglich ohne HTML- oder weitergehende Programmierkenntnisse Beitraumlge zu

verfassen und Seiten zu formatieren Die Bedienung mittels einer Textbox orientiert sich stark an

gaumlngiger und bekannter Textverarbeitungs-Software

Texte formatieren

Selbstverstaumlndlich bietet der TinyMCE-Editor die uumlblichen Arten Texte zu formatieren Neben den

Befehlen fett (bdquoBoldldquo) kursiv (bdquoItalicldquo) unterstrichen (bdquoUnderlineldquo) sowie hoch- bzw tiefgestellt

bietet Ihnen das System uumlber das Ω-Symbol eine breite Palette an Sonderzeichen uumlber die

Listenfunktion die Erstellung einfacher oder nummerierter Aufzaumlhlungslisten an Mittels einer Select-

S e i t e | 19

Box koumlnnen Sie auszligerdem auf im Hochschullayout vorgegebene Uumlberschriftarten (bdquoHeadingsldquo)

zuruumlckgreifen

Als weitere Moumlglichkeiten steht Ihnen frei

bull ein Datum undoder eine Uhrzeit einzufuumlgen

bull Blockzitate zu kennzeichnen oder

bull geschuumltzte Leerzeichen (bdquoNon-breaking Space Characterldquo) zu definieren

bull Das Ankersymbol (bdquoInsertEdit Anchorldquo) erlaubt die Definition von Sprungzielen innerhalb

laumlngerer Texte

Im Notfall hilft Ihnen das Radiergummi-Symbol (bdquoRemove Formatting) saumlmtliche Formatierungen zu

entfernen

Bereits formatierten Text einfuumlgen

Uumlber diese Formatierungsarten hinaus koumlnnen Sie auch bereits vorformatierte Texte aus Ihrer

Textverarbeitung in den Editor kopieren Zum Einfuumlgen nutzen Sie jedoch bitte nicht den einfachen

Copy amp Paste-Befehl sondern die im Modul bereitgestellte Funktion bdquoPaste from Wordldquo (Sie finden

das entsprechende bdquoWldquo-Symbol unter der Texteingabe-Box) ndash und zwar auch dann wenn Ihr

Ursprungstext nicht aus Microsoft Word sondern einer anderen Textverarbeitungssoftware

importiert wird Schriftformatierungen Verlinkungen und Aumlhnliches werden dann 11 uumlbernommen

Achten Sie bitte dennoch darauf dass dieser Funktion Grenzen gesetzt sind und arbeiten Sie mit

moumlglichst einfachen Formatvorlagen

HTML-Ansicht

Fuumlr Redakteure die sich in der Seitenprogrammierung sicherer fuumlhlen als in der Textverarbeitung

haumllt das Modul TinyMCE-Texteditor uumlber den Button bdquoHTMLldquo einen HTML Source Editor bereit mit

dem direkt auf den Quelltext und die Codierung dieses Teils der Webseite zugegriffen werden kann

Diese Funktion eignet sich auszligerdem besonders zur Uumlberpruumlfung und Fehlersuche Zur

Programmierung eigener Funktionen nutzen Sie jedoch bitte das Modul bdquoCode editierenldquo

S e i t e | 20

Links

Die uumlber die Symbole bdquoInsertEdit Linkldquo (Link einfuumlgen oder bearbeiten) in Ihre Texte oder

Aufzaumlhlungslisten eingefuumlgten Hyperlinks formatiert das System selbststaumlndig im fuumlr die UDE

vorgesehehen Layout Tragen Sie Links auf Seiten innerhalb von wwwuni-duede bitte als relative

Verknuumlpfungen ohne Verweis auf den Webserver der Universitaumlt ein also

bull depresse

anstelle von

bull httpwwwuni-duededepresseindexphp

Zeichnen sie auszligerdem Ihre Verlinkungen im Sinne der Barrierefreiheit mit sprechenden Titeln aus

und uumlberlegen Sie sich ob das Sprungziel im selben oder in einem neuen Browserfenster geoumlffnet

werden soll

Uumlber das Symbol bdquoUnlinkldquo entfernen Sie die entsprechende Verlinkung

Bilder

Der TinyMCE-Texteditor bietet Ihnen zwei Moumlglichkeiten Bilder in Ihre Texte einzubinden

S e i t e | 21

bull Uumlber die Funktion bdquoInsertEdit Imageldquo (Icon unter der Texteingabe-Box) koumlnnen Sie den

relativen Pfad auf das entsprechende Bild aus der IMPERIA-Mediendatenbank einfuumlgen

(Formatbeispiel imperiamdimageswebredaktion2013parentservicejpg)

bull Die Funktion bdquoVorschaubild waumlhlenldquo laumlsst Sie direkt auf die IMPERIA-Mediendatenbank

zugreifen und dort die gewuumlnschte Grafik per Klick auswaumlhlen Uumlber die Funktion bdquoVollbild

waumlhlenldquo koumlnnen Sie das Bild optional zu einer groumlszligeren Ansicht verlinken die sich als

bdquoLightboxldquo uumlber der aktiven Webseite oumlffnet Der Befehl bdquoBild zuruumlcksetzenldquo entfernt die

gewaumlhlte Grafik aus Ihrer Webseite

Waumlhrend Sie mittels bdquoInsertEdit Imageldquo die Anzeige-Groumlszlige Ihres Bildes (bis maximal 480 Pixel

Breite) selbst bestimmen koumlnnen werden Grafiken uumlber die Funktion bdquoVorschaubild waumlhlenldquo beim

Einfuumlgen automatisch auf die passende Groumlszlige skaliert (162 Pixel Breite in der linken und 204 Pixel

Breite in der rechten Content-Spalte) In diesem Fall koumlnnen Sie zudem waumlhlen ob der Text an dieser

Stelle das Bild umflieszligt oder aber rechts daneben angezeigt wird Das Vollbild wird bei der Eingabe

nicht skaliert Nutzen Sie daher bitte Bilder mit einer bildschirmtauglichen Groumlszlige (maximal 1024

Pixel)

S e i t e | 22

Tabellen

Uumlber das Icon bdquoInsertEdit Tableldquo fuumlgen Sie an der gewuumlnschten Stelle Tabellen in Ihren Texteditor

ein Unter den Reitern bdquoGeneralldquo und bdquoAdvancedldquo koumlnnen Sie diese Tabellen gemaumlszlig den uumlblichen

HTML-Konventionen erstellen formatieren und bearbeiten

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig gemaumlszlig den Vorgaben der Barrierefreiheit als

solche aus Der Text-Editor stellt Ihnen diese Optionen zur Verfuumlgung

bull Beachten Sie dass die Hintergrundfarbe der Tabellen je nach gewaumlhlter Einfaumlrbung des

Moduls variiert

S e i t e | 23

Texte mit bdquoVerfallsdatumldquo

Grundsaumltzlich steht Ihnen das Modul bdquo(TinyMCE)-Texteditorldquo sowohl auf shtml-Seiten als auch in

php-Skripten zur Verfuumlgung Auf php-Seiten laumlsst sich jedoch eine zusaumltzliche Option nutzen Fuumlr

Texte die nur fuumlr einen gewissen Zeitraum auf Ihrer Webseite erscheinen sollen koumlnnen Sie ein

Start- und Enddatum setzen

63 A-Z verwalten PHP-Skript HTML-Web-Seite

Das Modul bdquoA-Z verwaltenldquo ermoumlglicht den Redakteuren A-Z-Listen relativ einfach zu erzeugen und

zu pflegen

S e i t e | 24

Fuumlr jeden Eintrag in der Stichwortliste muss im Eingabefeld eine einzelne Zeile eingefuumlgt werden Die

Eingabe folgt einem festen Schema

bull Stichwort||URL (Internetadresse)||

oder

bull Stichwort||URL (Internetadresse)||eventuell ein kurzer Beschreibungstext

wobei auf den Beschreibungstext auch verzichtet werden kann Die sogenannten bdquoPipe-Zeichenldquo (||)

dienen als Feldtrenner Sie erzeugen sie uumlber den Tastaturbefehl bdquoAltGr amp das Groumlszligerzeichenldquo

Wahlweise kopieren Sie die entsprechenden Zeichen aus bisherigen Eintraumlgen

Auch hier gilt Tragen Sie interne Links in Ihrer A-Z-Liste bitte als relative Verknuumlpfungen ohne

Verweis auf den Webserver der Universitaumlt ein also

bull Abiturjahrgang 2013||doppelter_abiturjahrgang||

anstelle von

bull Abiturjahrgang 2013||httpwwwuni-duededoppelter_abiturjahrgang||

Externe Links (wie etwa bdquoGlassbooth ||httpwwwglassboothde||ldquo) werden auf der

ausgegebenen Webseite entsprechend gekennzeichnet

S e i t e | 25

Die Eintraumlge im Modul bdquoA-Z verwaltenldquo sortiert das Content Management System automatisch nach

Ziffernreihenfolge bzw dem Alphabet Um die Eintraumlge spaumlter einfach aufzufinden und bearbeiten zu

koumlnnen empfiehlt es sich jedoch bereits im Eingabefeld selbst eine alphabetische Sortierung

vorzunehmen

64 Code editieren PHP-Skript HTML-Web-Seite

Das Modul bdquoCode editierenldquo eroumlffnet Ihnen die Moumlglichkeit in Ihrem Internetauftritt eigene PHP-

oder HTML-Codeschnipsel zu erstellen und zu nutzen oder Programmierungen eigener Funktionen

vorzunehmen

Nutzen Sie dieses Modul bitte nicht um Funktionen zu simulieren die Ihnen das CMS IMPERIA bereits

als vorgefertigte Module zur Verfuumlgung stellt Das freie Code-Eingabefeld ist ebenfalls nicht dazu

S e i t e | 26

vorgesehen auf diesem Wege vom Corporate Design der Universitaumlt abweichende eigene Layouts zu

entwickeln

65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

Uumlber das Modul bdquoCodebaustein einfuumlgenldquo ist es moumlglich vorgefertigte Bloumlcke oder bdquoBauteileldquo in Ihre

Webseite zu integrieren Codebausteine eignen sich dazu bestimmte Informationen die auf vielen

Webseiten wiederkehren an einer Stelle zentral zu pflegen In der Bearbeitungsebene bietet Ihnen

das Modul die in der aktuellen Rubrik vorhandenen Bausteine zur Auswahl an

Codebausteine erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 27

Sie koumlnnen in Codebausteinen wie beim uumlblichen Seitenaufbau gewohnt unterschiedliche Module

kombinieren und positionieren Zur Verfuumlgung stehen die Elemente

bull (TinyMCE)-Texteditor

bull Code editieren

bull die Formularmodule

bull Randlose Grafik

bull RSS-Feed-Agent

bull Tube Audio-VideoPlayer

Eine spaumltere Bearbeitung der Codebausteine ist im CMS IMPERIA nicht uumlber das Tool bdquoQuickEditldquo

moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo

im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichniscode_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Codebausteine im

selben Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

66 DBAdmin PHP-Skript

Mit Hilfe des Moduls bdquoDBAdminldquo lassen sich Datenbank direkt in Tabellenform auf Ihrer Webseite

darstellen Uumlber die Funktion bdquoOptionen anzeigenldquo erhalten Sie zudem die Moumlglichkeit eine

Webseite zur Pflege Ihrer Datenbank zu erstellen Dort koumlnnen Sie die entsprechende Tabelle

editieren d h Eintraumlge einzeln erstellen bearbeiten oder loumlschen

S e i t e | 28

Zur Nutzung dieses Moduls sind folgende Angaben notwendig

bull Datenbank-Server Name oder IP-Adresse des Servers auf dem die anzusprechende

Datenbank liegt (bspw bdquodbuni-duedeldquo)

bull Datenbank-Name

bull Tabellen-Name Name der speziellen Tabelle die innerhalb der Datenbank angesprochen

werden soll

bull Datenbank-Benutzer und Datenbank-Passwort

Datenbanken auf einem UDE-Server koumlnnen Universitaumltsangehoumlrige unter Nutzung ihrer

Hochschulkennung online beim Zentrum fuumlr Informations- und Mediendienste (ZIM) beantragen

unter httpwwwuni-duedezimserviceshomepagesmysqlshtml

67 Doppelcontainer PHP-Skript HTML-Web-Seite

Das Modul bdquoDoppelcontainerldquo ermoumlglicht es Ihnen auf Ihrer Webseite zwei Textebloumlcke (je nach

Wunsch mit oder ohne Bilder) nebeneinander zu setzen

Auf zweispaltig angelegten Webseiten ist die Anlage eines Doppelcontainers nur in der linken Spalte

moumlglich Bilder erscheinen dort in einer Breite von 246 Pixeln Auf einspaltig angelegten Webseiten

werden die einzelnen Bloumlcke (und dementsprechend die verwendeten Bilder) in einer Breite von 366

Pixeln angezeigt Die Bildhoumlhe ist in beiden Faumlllen frei waumlhlbar sollte jedoch in beiden Containern

identisch sein

S e i t e | 29

Zur Texteingabe stehen Ihnen die Optionen bdquoTeaserldquo (mit Zeichenbegrenzung) sowie bdquoStandardldquo

(ohne Zeichenbegrenzung) zur Verfuumlgung Waumlhlen Sie bdquoTeaserldquo so erhalten Sie Platz fuumlr 300 Zeichen

ndash ein Zeichenzaumlhler neben der Texteingabe-Box erleichtert das Mitzaumlhlen Der Text wird gelb

unterlegt wenn er nach dem naumlchsten Leerzeichen abgeschnitten wird Rot erscheint das Textfeld

wenn die Zeichenzahl bereits uumlberschritten wurde

Beachten Sie bitte dass das Modul HTML-Tags (URLs Mailadressen etc) automatisch filtert Sie

werden daher nicht angezeigt Um Ihren Text zu verlinken koumlnnen Sie das Eingabefeld bdquoMehr-Linkldquo

nutzen

Beide Bloumlcke innerhalb eines Doppelcontainers lassen sich individuell auf die uumlbliche Weise (weiszlig

hellblau sandfarben) hinterlegen

S e i t e | 30

68 Flickr nutzen PHP-Skript

Das Modul bdquoFlickr nutzenldquo ermoumlglicht es Ihnen im Sinne einer crossmedialen Verwertung Bilder aus

Ihrem Flickr-Account in Ihre IMPERIA-Webseite einzubinden Fuumlr diese Funktion benoumltigen Sie einen

sogenannten API-Key den Sie in Ihrem Flick-Auftritt unter

bull httpwwwflickrcomservicesappscreateapply

erzeugen lassen koumlnnen Tragen Sie dann diesen Key in die entsprechende Eingabemaske des Moduls

ein Anschlieszligend haben Sie die Moumlglichkeit ganze Fotosets (Alben) oder Einzelbilder einzubinden

Photoset anzeigen

S e i t e | 31

Zum Anzeigen von Photosets wird die entsprechende Photoset-ID ins Modul eingetragen Diese ID ist

Teil der Link-Adresse des entsprechenden Albums bei Flickr (die erscheint wenn Sie das Album

angeklickt haben) Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAMEsets12340954909

Die Photoset-ID verbirgt sich hinter den Ziffern am Ende der URL Sie koumlnnen auswaumlhlen wie viele

Fotos auf einer Webseite erscheinen sollen Dafuumlr uumlbernimmt das Modul die Bilder in der

quadratischen Aufloumlsung von Flickr also in einer Groumlszlige von 75 x 75 Pixeln Reicht der Platz dafuumlr

nicht aus wird eine zusaumltzliche Blaumltterfunktion angeboten Photoset- und Bild-Beschreibungen

koumlnnen aus dem Flickr-Account automatisch uumlbernommen werden wenn die entsprechenden

Optionen mit einem Haken aktiviert wurden

Einzelbild anzeigen

Um ein einzelnes Bild anzuzeigen benoumltigen Sie die entsprechen Flickr-Foto-ID Diese verbirgt sich

hinter der ersten Zahl in der Link-Adresse des entsprechenden Bildes Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAME5841603851inset-72157626981464896

Ein Einzelbild kann in einer hohen oder einer geringen Aufloumlsung eingebunden werden Bei einer

zweispaltig angelegten Webseite wird das Bild in der linken Inhaltsspalte auf eine Breite von 480

Pixel bei einer einspaltig angelegten Webseite auf eine Breite von 721 Pixel skaliert

69 Formulare

Mit IMPERIA haben Sie die Moumlglichkeit Formulare auf Ihrer Webseite zu platzieren In der

Bearbeitungsebene Ihrer Seite finden Sie im Bereich bdquoNeues Modulldquo den Menupunkt UDE ndash

Formular oumlffnen

Nach dem Festlegen der Hintergrundfarbe koumlnnen Sie im Bereich bdquoLegendeldquo den Titel Ihres

Formulars waumlhlen Wenn Sie die Funktion bdquoMailer-Funktionalitaumltldquo aktivieren koumlnnen Sie die Adresse

Ihres Mailscripts eingeben Anderenfalls belassen Sie es bitte beim Vorgabewert

Im Bereich bdquoNexturlldquo kann angegeben werden welche Seite nach dem Abschicken des Formulars

aufgerufen werden soll Daruumlber hinaus werden der Titel der E-Mail die Absender-Adresse sowie die

Empfaumlnger-Adresse definiert Optional kann eine Bestaumltigungs-E-Mail mit frei waumlhlbarem Text

versendet werden

S e i t e | 32

Um dem erstellten Formular Eingabefelder hinzuzufuumlgen ist das Modul bdquoUDE Formular Elementldquo zu

waumlhlen Waumlhlen Sie das Element bdquoTextldquo um ein Eingabefeld zu erzeugen Die Option bdquoBezeichnerldquo

beschreibt den sichtbaren Text im fertigen Formular zum Beispiel bdquoIhr Nameldquo Weitergehend koumlnnen

Sie die zulaumlssigen Inhalte der Nutzereingaben definieren sowie markieren ob das Element ein

Pflichtfeld sein soll

S e i t e | 33

Um ein Texteingabefeld innerhalb des Formulars zu erzeugen waumlhlen Sie das Element bdquoTextarealdquo

Sie koumlnnen die Groumlszlige des Textfeldes definieren (Zeilen x Spalten) und optional erneut eine Pruumlfung

zulaumlssiger Nutzereingaben aktivieren Weiterhin koumlnnen Sie waumlhlen ob der eingegebene Wert des

Formularelements in die Datenbank eingetragen werden soll Wenn Sie fuumlr Ihre Formulare auf eine

Datenbank zuruumlckgreifen moumlchten koumlnnen Sie sich hier informieren httpwwwuni-

duedezimserviceshomepagesmysqlshtml

Insgesamt stehen folgende Elemente zur Verfuumlgung

bull Checkbox Hidden Password Select Anfang Select Option einfuumlgen Select Ende Submit

Text Datum Textarea Radio Reset Leerzeile Kommentarzeile Neuer Abschnitt mit

Bezeichner sowie Datei-Upload

Ein Formular muss mit dem Modul bdquoUDE Formular schlieszligenldquo abgeschlossen werden An dieser

Stelle koumlnnen Sie einen Send-Button hinzufuumlgen dessen Name frei waumlhlbar ist Der eingegebene Text

wird als Beschriftung des Buttons angezeigt Erst durch das Hinzufuumlgen dieses Moduls wird das

Formular auf Ihrer Seite sichtbar und kann nach der Veroumlffentlichung genutzt werden

S e i t e | 34

610 Google-Maps (v30) PHP-Skript HTML-Web-Seite

Dieses Modul bringt eine Grafik von Google-Maps auf die Webseite entweder in Kartenoptik oder als

Satellitenbild Sie haben zwei Moumlglichkeiten eine solche zu generieren Uumlber die konkreten GPS-

Koordinaten oder durch das Angeben einer Adresse (zB Forsthausweg 2 47057 Duisburg) Sie

koumlnnen aus zwoumllf Vergroumlszligerungsstufen fuumlr den gewuumlnschten Ausschnitt zwei Kartengroumlszligen und

zwei Kartenformaten waumlhlen

S e i t e | 35

Kartengroumlszlige bdquogroszligldquo skaliert die Graphik auf 480 Pixel Breite auf einer zweispaltigen Seite bzw auf

721 Pixel auf einer einspaltigen Seite Die Option bdquokleinldquo verringert die Breite auf etwa die Haumllfte Die

beiden Optionen beim Kartenformat beeinflussen die Houmlhe der Grafik

S e i t e | 36

611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite

Das Modul Image-Gallery ermoumlglicht die Integration einer komfortablen Bildergallerie uumlber IMPERIA

Per Klick auf bdquoNeues Modulldquo -gt bdquoUDE Image-Gallery (v21)ldquo kann die entsprechende Gallerie an der

gewuumlnschten Position eingefuumlgt werden Generell sollten nur Bilder verwendet werden die

entweder auf 640 x 480 Pixel oder maximal auf 900 x 600 Pixel skaliert sind Aufgrund einer hohen

Dateigroumlszlige sollten Bilder einer Digitalkamera vor dem Upload komprimiert werden

Innerhalb des Moduls kann zunaumlchst die Hintergrundfarbe der Gallerie wahlweise zwischen Beige

Blau und Weiszlig eingestellt werden Um die Gallerie mit Bildern zu fuumlllen ist das entsprechende

Verzeichnis der Mediendatenbank anzugeben Aufgrund der geaumlnderten Syntax wird das Verzeichnis

ohne images angegeben Die Suchmaske fuumlr die Bilderauswahl deklariert die Dateiformate die mit

einbezogen werden sollen Schlieszliglich koumlnnen Sie die Bilder alphabetisch sortiert anzeigen lassen

sowie einen kleinen und einen groszligen Titel fuumlr Ihre Bildergallerie vergeben

Grundsaumltzlich ist es empfehlenswert groumlszligere Bildmengen auf mehrere Seiten zu verteilen um

einerseits die Darstellung auf mobilen Geraumlten zu vereinfachen und andererseits geringeren

Bandbreiten Rechnung zu tragen

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 2: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 1

Inhalt

1 Einleitung Ein einheitliches Gesicht der Universitaumlt Seite 2

2 Schluumlsselelemente des Corporate Design Seite 3

3 Technische Plattform Zugang zum CMS Seite 5

4 Grundsaumltze der Webseitengestaltung Seitenaufbau Seite 7

5 Bestandteile von Webseiten Seite 9

51 Die Organisationsbezeichnung Seite 10

52 Die Zielgruppennavigation Seite 12

53 Die Navigation Seite 13

6 Webseiten gestalten Seite 15

61 Uumlber allem Die Brotkrumennavigation Seite 17

62 (TinyMCE)-Texteditor Seite 18

63 A-Z verwalten Seite 23

64 Code editieren Seite 25

65 Codebaustein einfuumlgen Seite 26

66 DBAdmin Seite 27

67 Doppelcontainer Seite 28

68 Flickr nutzen Seite 30

69 Formulare Seite 31

610 Google-Maps Seite 34

611 Image-Gallery Seite 36

612 Mailinglisten Seite 37

613 Mitarbeiter-Seite Seite 38

614 Mitarbeiter-Publikationsliste Seite 39

615 Mitarbeiter-Liste Seite 40

616 Randlose Grafik Seite 41

617 RSS-Feed-Agent Seite 42

618 RSS-Feed-Administration Seite 44

619 Tube Audio-VideoPlayer Seite 44

620 Veranstaltungskalender Seite 46

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit Seite 49

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum Seite 51

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo Seite 54

S e i t e | 2

1 Einleitung Ein einheitliches Gesicht der Universitaumlt

Eindeutig und unverwechselbar ist die Universitaumlt Duisburg-Essen (UDE) Praumlgend fuumlr ihren Charakter

in Forschung Lehre und Service sind Innovation und Dynamik sowie Weltoffenheit und Vernetzung

Damit diese Staumlrken auch optisch in Erscheinung treten folgt der Internetauftritt der Hochschule dem

generellen Corporate Design der Universitaumlt Der neue Auftritt ist Teil eines

Kommunikationsprozesses den die UDE im Jahr 2010 initiiert hat Anstoszlig war der Wunsch nach einer

sichtbaren und kommunizierbaren Identitaumlt nach einem einheitlichen und glaubhaften Bild der UDE

in der Oumlffentlichkeit

Um dieses Ziel zu erreichen benoumltigt die Hochschule die Mitarbeit jedes einzelnen

Internetredakteurs in den unterschiedlichen Bereichen der UDE Sie werden feststellen dass das

neue Corporate Design viele Freiheiten im Umgang laumlsst und offen fuumlr Ideen und Kreativitaumlt ist

Das neue Gesicht der Hochschule ist inzwischen in vielen Bereichen sukzessive umgesetzt worden Im

Internet praumlsentiert es sich als offenes und zugleich puristisches Design das mit einer

vergleichsweise kleinen Zahl von Gestaltungselementen auskommt und damit die Pflege der Seiten

erleichtert Statt grafisch uumlberladener Seiten bietet die UDE einfache aber funktionale Navigations-

und Gestaltungselemente Diese Grundidee durchgaumlngig umzusetzen wird in der Zukunft weiter zu

verfolgen sein

In diesem Leitfaden sind die Grundregeln fuumlr den einheitlichen Gesamtauftritt der UDE im World

Wide Web niedergelegt Er soll ihnen dabei helfen die wichtigsten Elemente zu identifizieren und sie

in Ihrem praktischen Alltag umzusetzen

Wenn Sie Fragen zu diesem Bereich haben Wenden Sie sich an die Webredaktion in der Pressestelle

an das Hochschulmarketing oder an den Bereich IT-Infrastruktur im Zentrum fuumlr Informations- und

Mediendienste (ZIM)

Weitere Informationen amp Ansprechpartner

bull Ulrike Eichweber Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-2461 -1481 webredaktionuni-duede

bull Dr Olivia Jazwinski (Stabsstelle des Rektorats Marketing)

Telefon (0203) 379-4747 oliviajazwinskiuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

S e i t e | 3

2 Schluumlsselelemente des Corporate Design

Das Webdesign der Universitaumlt greift an praumlgnanter Stelle und auf den ersten Blick wahrnehmbar die

Schluumlsselelemente des neuen Hochschuldesigns auf Den Webauftritt praumlgen

bull die Wortmarke das Logo mit Claim

bull der Himmel als hervorstechendes bdquoKey-Visualldquo

bull die vier abgestimmten UDE-Grundfarben

bull (die im Netz genutzte Schriftart)

Die UDE-Wortmarke mit dem Claim bdquoOffen im Denkenldquo (wahlweise im Englischen bdquoOpen mindedldquo) ist

der wichtigste Bestandteil der Corporate Identity der Hochschule Der Claim unterstreicht auf

emotionale Art dass die Universitaumlt Duisburg-Essen keine geschlossene lebensferne Gesellschaft ist

sondern genau das Gegenteil Sie ist anfassbar nahe dran an der Gesellschaft nah an den Menschen

und deren individuellen Faumlhigkeiten

Die Konstellation aus Wortmarke und Claim ist verbindlich zu verwenden Die Wortmarke wird

nicht ohne Claim eingesetzt

Der Claim hat den Abstand eines Versals zum Logo zur Wortmarke Die Konstellation bdquoWortmarke

und Claimldquo ist fix und darf in sich nicht veraumlndert werden

Der Himmel als Schluumlsselreiz (Key-Visual) steht als Metapher fuumlr bdquoOffen im Denkenldquo und damit fuumlr

die Universitaumlt selbst Die UDE setzt keine Barrieren fuumlr Forschung und Lehre keine Grenzen im

Denken Als aufmerksamkeitsstarkes Irritationselement taucht der Himmel auszligerdem auch dort auf

wo er normalerweise nicht ist Collagen spielen mit Gewohntem und Ungewoumlhnlichem Szenen die

eigentlich jeder kennt demonstrieren auf ungewoumlhnliche Art und Weise wie die UDE bdquoticktldquo

S e i t e | 4

Das Himmel-Motiv uumlberfuumlhrt die seit der Gruumlndung 2003 entwickelte blau-weiszlige Farbenwelt der

Hochschule in einen neuen Layout-Kontext Im weiterentwickelten Design existieren vier

aufeinander abgestimmte Farben

bull Blau gemaumlszlig Hexadezimalcode 004c93

bull Beige gemaumlszlig Hexadezimalcode efe4bf

bull Hellblau gemaumlszlig Hexadezimalcode dfe4f2

bull Schwarz gemaumlszlig Hexadezimalcode 000000

bull (Graue Elemente erscheinen gemaumlszlig Hexadezimalcode 58585a)

S e i t e | 5

Saumlmtliche Farben werden vom System automatisch gesetzt Sie koumlnnen jedoch im Inhaltsbereich

Ihrer Webseiten Module unterschiedlich einfaumlrben Sie haben dort die Wahl zwischen weiszliger

(Standardeinstellung) sandfarbener oder hellblauer Hinterlegung

Als Schriftart kommt auf der UDE-Website ausschlieszliglich Arial zum Einsatz Die Basisschriftgroumlszlige ist

12px die uumlberwiegende Schriftfarbe Schwarz

Weiterfuumlhrende Informationen amp Downloads

bull UDE-Markenhandbuch

httpwwwuni-

duedeimperiamdcontentdokumenteoffen_im_denkenude_markenhandbuchpdf

bull Wortmarke Logo mit Claim in unterschiedlichen Formaten

httpwwwuni-duedeoffen-im-denkenlogodownloadphp

bull Schmuckelemente (Grafiken Schriften)

httpwwwuni-duedeoffen-im-denkenschmuckelementephp

3 Technische Plattform Zugang zum CMS

Die UDE betreibt einen zentralen Webserver der von allen Einrichtungen und Mitgliedern der

Universitaumlt genutzt werden kann Fuumlr den Server wird eine hohe Erreichbarkeit auch unter Last

gewaumlhrleistet Der Webserver wird uumlber das Content Management System (CMS) bdquoIMPERIAldquo das ndash

nach einer landesweiten Ausschreibung ndash von vielen Hochschulen benutzt wird mit Webseiten

befuumlllt

Einen Zugang zum CMS IMPERIA erhalten Sie uumlber das Zentrum fuumlr Informations- und Mediendienste

(ZIM) Das ZIM bietet neben dem technischen Support auch Einfuumlhrungskurse in die Erstellung von

Webseiten

S e i t e | 6

Weitere Informationen

bull Zugang zum UDE-System IMPERIA-Rubriken Web-Verzeichnisse

Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

bull Anwenderschulung

Hartmut Prause (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0201) 183-4115 hartmutprauseuni-duede

bull Termine der Einfuumlhrungskurse

httpwwwuni-duedezimservicesweiterbildungkurse

Neben IMPERIA wird an Einrichtungen der UDE auch mit anderen Content Management Systemen

gearbeitet die spezifische Eigenschaften aufweisen Genutzt werden unter anderen die Open Source

Produkte Typo3 Drupal oder Joomla Mit welchem System die jeweilige UDE-Einrichtung arbeitet ist

dezentral zu entscheiden Gleichwohl sollte auch bei einer Entscheidung fuumlr ein alternatives System

bedacht werden wie die Ausfallsicherheit die Kontinuitaumlt der Weiterentwicklung sowie die

Darstellung im Design der Hochschule gewaumlhrleistet werden koumlnnen

S e i t e | 7

4 Grundsaumltze der Webseitengestaltung Seitenaufbau

Um der sich staumlndig veraumlndernden Landschaft an Ausgabegeraumlten (Desktops Netbooks Tablets

Smartphoneshellip) Rechnung zu tragen passt sich das neue (adaptive) Layout der UDE-Website

dynamisch an unterschiedliche Bildschirm- bzw Browserfenstergroumlszligen an Die bdquonormaleldquo

Desktopansicht aumlndert so auf einem kleineren Bildschirm wie beispielsweise einem aumllteren iPad im

Querformat die Breite so dass horizontales Scrollen vermieden wird Bei kleineren Bildschirmen bricht

die rechte Spalte um und wird unterhalb des Hauptinhaltes angezeigt Auf Mobiltelefonen schlieszliglich

entfaumlllt die Spaltenanordnung komplett und saumlmtliche Inhalte werden untereinander angezeigt

Dieses Verhalten ist dadurch moumlglich dass alle Groumlszligenangaben im System nur relativ angegeben

sind Verwenden Sie daher keine eigenen fixen Groumlszligenangaben die diese Vorlagen uumlberschreiben

In der bdquonormalenldquo Desktopansicht folgt der Webseitenaufbau im Internetangebot der Universitaumlt

einem festen Raster dass Ihnen bei Verwendung des CMS IMPERIA automatisch vorgegeben wird

bull Die Webseite der UDE liegt als weiszliges bdquoBlattldquo zentriert auf einem sandfarbenen Hintergrund

Der Container der dieses bdquoBlattldquo optisch darstellt beginnt in einem Abstand von 15 Pixeln

S e i t e | 8

zum oberen Seitenrand und setzt immer am unteren Seitenrand auf Der linke der obere und

der rechte Containerrand erzeugen einen leichten Schatteneffekt

bull Links in der Kopfzeile begruumlszligt immer an erster Stelle der Schriftzug bdquoUNIVERSITAumlT

DUISBURG-ESSENldquo die Seitenbesucher Auf jeder Seite der Universitaumlt genuumlgt ein Mausklick

auf den Schriftzug um zuruumlck auf die UDE-Startseite zu gelangen

bull Die gruppenspezifische Aufarbeitung von Informationen gilt inzwischen ndash zu Recht ndash als ein

Qualitaumltsmerkmal von Internetseiten Jede UDE-Webseite erhaumllt deshalb in der Kopfzeile

eine Zielgruppennavigation In Bereichen die keine eigene Zielgruppennavigation erstellen

erscheinen dort die entsprechenden Inhalte des zentralen Angebotes der Universitaumlt

bull Unterhalb der Kopfzeile erscheint auf jeder Seite der Universitaumlt eine Impressionsgrafik Das

System IMPERIA gibt Ihnen diese Grafik vor Sie greift mit ihrem Motiv (Himmel und Wolken)

das beherrschende Key-Visual des Corporate Design der Hochschule auf Zentral am unteren

Rand des Bildes wird vor einem uumlberlagernden weiszligen Kasten der Titel der jeweiligen

Webseite angezeigt Die Houmlhe der Impressionsgrafik veraumlndert sich wenn der eingefuumlgte

Seitentitel mehrzeilig wird

bull Innerhalb der Impressionsgrafik koumlnnen Sie auf der linken Seite eine ein- oder zweizeilige

Bezeichnung Ihres Bereiches einfuumlgen Diese individuelle Organisationsangabe sitzt so im

Gesamtlayout direkt unter dem Schriftzug bdquoUNIVERSITAumlT DUISBURG-ESSENldquo und gibt den

Seitenbesuchern auf den ersten Blick die Orientierung daruumlber wo sie sich eigentlich gerade

befinden Sie koumlnnen sie individuell verlinken

bull Das Universitaumlts-Logo sitzt rechtsbuumlndig in der Impressionsgrafik Es ist so einzurichten dass

ein Mausklick genuumlgt um auf die UDE-Homepage zu gelangen Das Logo darf nicht ohne den

Claim bdquoOffen im Denkenldquo (wahlweise im Englischen bdquoOpen mindedldquo) verwendet werden

bull In der linken Spalte kann der jeweilige Seitenanbieter eine frei editierbare Navigation

einbinden Die Navigation umfasst maximal zwei Ebenen Durch die bewusst reduzierte

Menuumlstruktur signalisiert die Internetpraumlsenz Klarheit und Transparenz Die

Hauptmenuumleintraumlge sind in Groszligbuchstaben (Versalien) ausgefuumlhrt Eintraumlge von

Untermenuumls sind eingeruumlckt und in Normalschrift formatiert Auf beiden Ebenen wird die

Schrift beim Uumlberfahren mit der Maus bzw beim Antabben auf Touch-Screens weiszlig vor

blauem Hintergrund Gleiches gilt fuumlr den jeweils aktiven Menuumlpunkt (Im Jahr 2013 wird auf

jeder mit dem CMS IMPERIA im aktuellen Template erzeugten Webseite uumlber der

Hauptnavigation das Jubilaumlumsfaumlhnchen zum zehnjaumlhrigen Bestehen der Universitaumlt

eingeblendet verlinkt auf httpwwwuni-duede10jahre)

bull Unterhalb der eigenen Navigation wird immer die zentrale Suche (Volltextsuche

Personensuche) der Universitaumlt verlinkt An dieser Stelle koumlnnen Sie zudem wahlweise (und

S e i t e | 9

auf jeder Seite einzeln) einen Link auf eine individuelle A-Z-Seite undoder auf einen eigenen

Intranet-Bereich sowie mit Landesfahnen gekennzeichnete Hinweise auf parallel angebotene

fremdsprachige Inhalte einfuumlgen

bull Zwischen Seitentitel und ndashinhalt koumlnnen Sie auf jeder Seite eine individuelle

Brotkrumennavigation editieren die den Nutzern eine schnelle Uumlbersicht daruumlber

ermoumlglicht wie sie auf die gerade aufgerufene Webseite gelangt sind

bull Der eigentliche Inhaltsbereich (Content) der Webseite kann bei der Seitenerzeugung ein-

oder zweispaltig angelegt werden Der Wechsel zwischen Ein- und Zweispaltigkeit einer Seite

ist uumlber den IMPERIA -Workflow jederzeit moumlglich Bei einem zweispaltigen Contentbereich

ist die schmale rechte Spalte fuumlr Zusatzinformationen vorgesehen die nicht direkt zum

Hauptinhalt gehoumlren bspw Veranstaltungskalender Banner oder RSS-Feeds Fuumlr die

Gestaltung des Inhalts steht eine groszlige Anzahl statischer wie dynamischer Elemente

(Module) zur Verfuumlgung Die einzelnen Module des Inhaltsbereiches koumlnnen unterschiedlich

eingefaumlrbt werden Sie haben die Wahl zwischen weiszliger (Standardeinstellung) sandfarbener

oder hellblauer Hinterlegung

bull In der Fuszligzeile angedockt an den unteren Seitenrand erscheint auf allen Seiten der

Hochschule ein Link auf das zentrale UDE-Impressum Wahlweise (und auf jeder Seite

einzeln) koumlnnen Sie einen Kontakt-Link einfuumlgen

bull Den Abschluss der Webseite bildet die E-Mail-Adresse des zustaumlndigen technischen

Seitenredakteurs die fuumlr Ruumlckfragen oder fuumlr redaktionelle Hinweise genutzt werden kann

Dieses Feld ist individuell beschreibbar ndash sollte jedoch niemals leer und immer auf dem

aktuellen Stand sein Hierfuumlr eignen sich Funktions-E-Mail-Adressen besser als Ihr

persoumlnlicher Account

5 Bestandteile von Webseiten

Um eine Webseite in der Internetpraumlsenz der Universitaumlt vollstaumlndig zu praumlsentieren benoumltigen Sie

(solange Sie mit dem CMS IMPERIA arbeiten) vier Elemente von denen Sie jedoch drei Elemente nur

einmal fuumlr Ihren gesamten Webbereich anlegen muumlssen und danach zentral pflegen koumlnnen

Eine Webseite setzt sich zusammen aus

bull Einer eigenen Organisationsbezeichnung Ihres Bereiches

bull Einer individuellen Zielgruppennavigation In Bereichen die keine eigene

Zielgruppennavigation erstellen erscheinen dort die entsprechenden Inhalte des zentralen

Angebotes der Universitaumlt

S e i t e | 10

bull Einer Navigation Sie koumlnnen in Ihrem Webbereich auch eine Vielzahl unterschiedlicher

Navigationen erstellen und diese je nach Bedarf einbinden

bull Der Seite (dem Dokument) selbst in der Sie Ihren Inhalt und Funktionen bearbeiten und die

vorherigen Elemente einfuumlgen koumlnnen

51 Die Organisationsbezeichnung

Die individuelle Bezeichnung Ihres Bereiches (Organisationsbezeichnung) erscheint auf Ihren

Webseiten links oben innerhalb der Impressionsgrafik direkt unter dem Schriftzug bdquoUNIVERSITAumlT

DUISBURG-ESSENldquo

Organisationsbezeichnungen erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

Sie koumlnnen Organisationsbezeichnungen in der Bearbeitungsebene ein- oder zweizeilig gestalten

S e i t e | 11

bull Der Eintrag in der ersten Zeile (bdquoOrganisationsbezeichnungldquo) erscheint groumlszliger und in weiszliger

fett-gesetzter Schrift

bull Ein Eintrag in der zweiten Zeile (bdquoZusatzldquo) erscheint in weiszliger normal gesetzter Schrift

Unter bdquoVerweis zur Organisationseinheit (URL)ldquo koumlnnen Sie das Sprungziel der

Organisationsbezeichnung bestimmen Tragen Sie diese Verknuumlpfung bitte als relativen Link ohne

Verweis auf den Webserver der Universitaumlt ein

bull Beispiel ihrverzeichnis anstatt httpwwwuni-duedeihrverzeichnis

Eine spaumltere Bearbeitung der Organisationsbezeichnung ist im CMS IMPERIA nicht uumlber das Tool

bdquoQuickEditldquo moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente

bearbeitenldquo im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichnisorganisation_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere

Organisationsbezeichnungen im selben Verzeichnis erstellen diesen einen jeweils moumlglichst

aussagekraumlftigen Dateititel zu geben

S e i t e | 12

52 Die Zielgruppennavigation

Eine individuelle Zielgruppennavigation in der Kopfzeile Ihrer Webseite erstellen Sie uumlber das

IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

Die editierte und veroumlffentlichte Zielgruppennavigation erscheint automatisch auf allen Seiten Ihres

Verzeichnisses

Tragen Sie bitte auch dort die Verknuumlpfungen als relative Links ohne Verweis auf den Webserver der

Universitaumlt ein Verwenden Sie dieses Instrument auszligerdem bitte nicht als moumlgliche zusaumltzliche

Quernavigation sondern ausschlieszliglich als Hilfe und zur Verlinkung gruppenspezifischer

Informationsaufarbeitung

Auch die spaumltere Bearbeitung der Zielgruppennavigation ist im CMS IMPERIA nicht uumlber das Tool

bdquoQuickEditldquo moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente

bearbeitenldquo im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Zielgruppennavigation lautet

ihrverzeichnistargetsshtml

S e i t e | 13

Beachten Sie beim Import bitte Folgendes Anders als seit Beginn des Wintersemesters 2007

gehandhabt kann mit dem UDE-Webrelaunch im Oktober 2011 pro Verzeichnis nur noch eine

anstelle von zwei Zielgruppennavigationen erstellt werden die zudem automatisch in Ihrer Webseite

eingesetzt wird In Verzeichnissen die zwischen 2007 und 2011 angelegt wurden existiert oft

(zusaumltzlich oder ausschlieszliglich) eine sogenannte bdquoerweiterte Zielgruppennavigationldquo

(ihrverzeichnisetargetsshtml) Der Webserver der Universitaumlt sucht bei der Ausgabe Ihrer

Internetseiten im ersten Schritt nach der Datei bdquotargetsshtmlldquo im zweiten Schritt nach der Datei

bdquoetargetsshtmlldquo in Ihrem Verzeichnis und gibt die Zielgruppennavigation dieser Prioritaumlt nach aus

Fehlen beide Dateien so erscheinen die entsprechenden Inhalte des zentralen Angebotes der

Universitaumlt

53 Die Navigation

Navigationen in der linken Spalte Ihrer Webseite sind maximal zwei Ebenen tief

bull In der ersten Ebene ist die Schrift in Versalien (Groszligbuchstaben) gesetzt Schreiben Sie Ihre

Links bitte dennoch bdquonormalldquo Die Transformation in Groszligbuchstaben erfolgt automatisch

durch das System Die Navigationspunkte der ersten Ebene sind mit einem blauen Rechteck

versehen das am linken Seitenrand anliegt

bull Die zweite Navigationsebene erscheint in der Ausgabe nach rechts geruumlckt und regulaumlr in

Groszlig- und Kleinschreibung gesetzt

Links in Navigationen veraumlndern sich beim Uumlberfahren mit der Maus bzw beim Antabben auf

Touchpads Die Schrift erscheint dann weiszlig auf einem blauen Hintergrund Das Gleiche gilt fuumlr den

jeweils aktiven Menuumlpunkt Dieser ist in der Navigation dauerhaft weiszlig mit blauer Hinterlegung

Navigationen erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 14

Zum Aufbau Ihrer Navigation stehen Ihnen die Module bdquoNavigationslinkldquo und

bdquoNavigationsuntermenuumlldquo zur Verfuumlgung Ein Navigationslink erscheint einzeln auf der ersten Ebene

versehen mit einem vorgelagerten blauen Rechteck Mit dem Navigationsuntermenuuml koumlnnen Sie

Menuumlpunkte erzeugen die neben dieser ersten Position uumlber eine zweite eingeruumlckte Ebene

verfuumlgen Dort lassen sich beliebig viele Unterpunkte einsetzen Je nachdem ob Sie den

uumlbergeordneten Eintrag im Navigationsuntermenuuml mit einer Zieladresse (URL) versehen erscheint

dieser verlinkt oder als einfache Uumlberschrift uumlber die nachgelagerten Inhaltspunkte

Selbstverstaumlndlich lassen sich die einzelnen Einheiten in ihrer Position jederzeit verschieben Tragen

Sie interne Links in Ihren Navigationen bitte als relative Verknuumlpfungen ohne Verweis auf den

Webserver der Universitaumlt ein

Editierte und veroumlffentlichte Navigation erscheinen innerhalb der Rubrik in der sie angelegt wurden

automatisch zur Auswahl im linken Bereich der Bearbeitungsebene Ihrer Webseite

Die spaumltere Bearbeitung von Navigationen ist im CMS IMPERIA auf zwei Wegen moumlglich Die

entsprechende Datei kann zum einen uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo im

IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Navigationen folgt folgendem Muster

ihrverzeichnisnav_12345shtml

S e i t e | 15

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Navigationen im selben

Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

Zum anderen koumlnnen Sie auch aus der Bearbeitungsebene einer Webseite heraus dort ausgewaumlhlte

Navigationen aufrufen und editieren Beachten Sie jedoch dass nach dem Speichern der

bearbeiteten Navigation sowohl die Navigationsdatei als auch die Datei der Ursprungsseite auf Ihrem

Schreibtisch liegen

6 Webseiten gestalten

Fuumlr die Gestaltung Ihres Inhalts steht Ihnen eine groszlige Anzahl statischer wie dynamischer Elemente

(Module) zur Verfuumlgung Welche Elemente Sie im Einzelnen nutzen koumlnnen haumlngt davon ab welchen

Dateityp Sie bei der Dokumentenerzeugung fuumlr Ihre Webseite waumlhlen Das Content Management

System der Hochschule bietet Ihnen die Moumlglichkeit Ihr Dokument als HTML-Web-Seite oder als

PHP-Skript zu erzeugen Beachten Sie bitte von Anfang an dass diese Auswahl Einfluss auf die URL

(Internetadresse) der jeweiligen Seite hat Bei einer nachtraumlglichen Aumlnderung aumlndert sich auch die

Internetadresse unter der Ihre Seite im Netz zu finden ist Sie muumlssen dann eventuell Verlinkungen

an vielen Stellen aumlndern

bull Internetadresse einer HTML-Web-Seite wwwuni-duedebereichihreseiteshtml

bull Internetadresse eines PHP-Skripts wwwuni-duedebereichihreseitephp

Je nachdem ob Sie Ihr Dokument als HTML-Web-Seite oder als PHP-Skript erzeugen koumlnnen Sie

folgende Elemente nutzen

Linke Spalte des Inhaltsbereiches

bull (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

bull A-Z verwalten PHP-Skript HTML-Web-Seite

bull Code editieren PHP-Skript HTML-Web-Seite

bull Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

bull DBAdmin PHP-Skript

bull Doppelcontainer PHP-Skript HTML-Web-Seite

bull Flickr nutzen PHP-Skript

bull Formular schlieszligen PHP-Skript

bull Formular oumlffnen PHP-Skript

S e i t e | 16

bull Formular Element PHP-Skript

bull Formulareingabe in DB speichern PHP-Skript

bull Google-Maps (v30) PHP-Skript HTML-Web-Seite

bull Image-Gallery (v21) PHP-Skript HTML-Web-Seite

bull Mailinglisten PHP-Skript

bull Mitarbeiter-Liste PHP-Skript

bull Mitarbeiter-Publikationsliste PHP-Skript

bull Mitarbeiter-Seite PHP-Skript

bull Randlose Grafik PHP-Skript HTML-Web-Seite

bull RSS-Feed-Administration PHP-Skript

bull RSS-Feed-Agent PHP-Skript

bull Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

bull Veranstaltungskalender Kalendermodul PHP-Skript

bull Veranstaltungskalender Veranstaltungsmodul PHP-Skript

Rechte Spalte des Inhaltsbereiches

bull (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

bull Code editieren PHP-Skript HTML-Web-Seite

bull Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

bull Flickr nutzen PHP-Skript

bull Mitarbeiter-Seite PHP-Skript

bull Randlose Grafik PHP-Skript HTML-Web-Seite

bull RSS-Feed-Agent PHP-Skript

bull Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

bull Veranstaltungskalender Kalendermodul PHP-Skript

Beim Erstellen Ihrer Webseite koumlnnen Sie diese einzelnen Module nach Bedarf (auch mehrfach)

erzeugen und in der gewuumlnschten Reihenfolge platzieren wobei die gewaumlhlte Reihenfolge jederzeit

veraumlnderbar ist Mit wenigen Ausnahmen lassen sich die einzelnen Einheiten weiszlig blau oder beige

einfaumlrben (Ausnahme randlose Grafik) Sie werden vom System dann als voneinander abgesetzte

Bloumlcke ausgegeben

Um innerhalb eines Dokuments zu navigieren koumlnnen Sie wenn noumltig die einzelnen Elemente auch

mit einem Link-Anker versehen (Ausnahmen randlose Grafik Mitarbeiter-Liste -Publikationsliste

und ndashSeite Veranstaltungskalender Veranstaltungs- sowie Kalendermodul) Den Ankernamen

S e i t e | 17

koumlnnen Sie frei vergeben er darf jedoch keine Leer- oder Sonderzeichen enthalten Das erste Zeichen

muss auszligerdem ein Buchstabe sein

61 Uumlber allem Die Brotkrumennavigation

Zwischen Seitentitel und ndashinhalt koumlnnen Sie auf jeder Seite eine individuelle Brotkrumennavigation

editieren die den Nutzern eine schnelle Uumlbersicht daruumlber ermoumlglicht wie sie auf die gerade

aufgerufene Webseite gelangt sind Verwenden Sie dieses Instrument bitte nicht als moumlgliche

zusaumltzliche Quernavigation sondern ausschlieszliglich als Hilfe im vorgesehenen Sinne

Der letzte Eintrag der Brotkrumennavigation der uumlblicherweise die aktuell aufgerufene Seite

benennt sollte nicht mit einer Zieladresse (URL) versehen werden Der Eintrag erscheint dann als

regulaumlr schwarz formatierter Text nicht als blau ausgezeichneter Link

S e i t e | 18

62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

Mit dem TinyMCE-Texteditor stellt Ihnen das Content Management System der UDE einen auf

JavaScript basierenden WYSIWYG-Editor (bdquoWhat You See Is What You Getldquo) zur Verfuumlgung Mit Hilfe

dieses Moduls ist es moumlglich ohne HTML- oder weitergehende Programmierkenntnisse Beitraumlge zu

verfassen und Seiten zu formatieren Die Bedienung mittels einer Textbox orientiert sich stark an

gaumlngiger und bekannter Textverarbeitungs-Software

Texte formatieren

Selbstverstaumlndlich bietet der TinyMCE-Editor die uumlblichen Arten Texte zu formatieren Neben den

Befehlen fett (bdquoBoldldquo) kursiv (bdquoItalicldquo) unterstrichen (bdquoUnderlineldquo) sowie hoch- bzw tiefgestellt

bietet Ihnen das System uumlber das Ω-Symbol eine breite Palette an Sonderzeichen uumlber die

Listenfunktion die Erstellung einfacher oder nummerierter Aufzaumlhlungslisten an Mittels einer Select-

S e i t e | 19

Box koumlnnen Sie auszligerdem auf im Hochschullayout vorgegebene Uumlberschriftarten (bdquoHeadingsldquo)

zuruumlckgreifen

Als weitere Moumlglichkeiten steht Ihnen frei

bull ein Datum undoder eine Uhrzeit einzufuumlgen

bull Blockzitate zu kennzeichnen oder

bull geschuumltzte Leerzeichen (bdquoNon-breaking Space Characterldquo) zu definieren

bull Das Ankersymbol (bdquoInsertEdit Anchorldquo) erlaubt die Definition von Sprungzielen innerhalb

laumlngerer Texte

Im Notfall hilft Ihnen das Radiergummi-Symbol (bdquoRemove Formatting) saumlmtliche Formatierungen zu

entfernen

Bereits formatierten Text einfuumlgen

Uumlber diese Formatierungsarten hinaus koumlnnen Sie auch bereits vorformatierte Texte aus Ihrer

Textverarbeitung in den Editor kopieren Zum Einfuumlgen nutzen Sie jedoch bitte nicht den einfachen

Copy amp Paste-Befehl sondern die im Modul bereitgestellte Funktion bdquoPaste from Wordldquo (Sie finden

das entsprechende bdquoWldquo-Symbol unter der Texteingabe-Box) ndash und zwar auch dann wenn Ihr

Ursprungstext nicht aus Microsoft Word sondern einer anderen Textverarbeitungssoftware

importiert wird Schriftformatierungen Verlinkungen und Aumlhnliches werden dann 11 uumlbernommen

Achten Sie bitte dennoch darauf dass dieser Funktion Grenzen gesetzt sind und arbeiten Sie mit

moumlglichst einfachen Formatvorlagen

HTML-Ansicht

Fuumlr Redakteure die sich in der Seitenprogrammierung sicherer fuumlhlen als in der Textverarbeitung

haumllt das Modul TinyMCE-Texteditor uumlber den Button bdquoHTMLldquo einen HTML Source Editor bereit mit

dem direkt auf den Quelltext und die Codierung dieses Teils der Webseite zugegriffen werden kann

Diese Funktion eignet sich auszligerdem besonders zur Uumlberpruumlfung und Fehlersuche Zur

Programmierung eigener Funktionen nutzen Sie jedoch bitte das Modul bdquoCode editierenldquo

S e i t e | 20

Links

Die uumlber die Symbole bdquoInsertEdit Linkldquo (Link einfuumlgen oder bearbeiten) in Ihre Texte oder

Aufzaumlhlungslisten eingefuumlgten Hyperlinks formatiert das System selbststaumlndig im fuumlr die UDE

vorgesehehen Layout Tragen Sie Links auf Seiten innerhalb von wwwuni-duede bitte als relative

Verknuumlpfungen ohne Verweis auf den Webserver der Universitaumlt ein also

bull depresse

anstelle von

bull httpwwwuni-duededepresseindexphp

Zeichnen sie auszligerdem Ihre Verlinkungen im Sinne der Barrierefreiheit mit sprechenden Titeln aus

und uumlberlegen Sie sich ob das Sprungziel im selben oder in einem neuen Browserfenster geoumlffnet

werden soll

Uumlber das Symbol bdquoUnlinkldquo entfernen Sie die entsprechende Verlinkung

Bilder

Der TinyMCE-Texteditor bietet Ihnen zwei Moumlglichkeiten Bilder in Ihre Texte einzubinden

S e i t e | 21

bull Uumlber die Funktion bdquoInsertEdit Imageldquo (Icon unter der Texteingabe-Box) koumlnnen Sie den

relativen Pfad auf das entsprechende Bild aus der IMPERIA-Mediendatenbank einfuumlgen

(Formatbeispiel imperiamdimageswebredaktion2013parentservicejpg)

bull Die Funktion bdquoVorschaubild waumlhlenldquo laumlsst Sie direkt auf die IMPERIA-Mediendatenbank

zugreifen und dort die gewuumlnschte Grafik per Klick auswaumlhlen Uumlber die Funktion bdquoVollbild

waumlhlenldquo koumlnnen Sie das Bild optional zu einer groumlszligeren Ansicht verlinken die sich als

bdquoLightboxldquo uumlber der aktiven Webseite oumlffnet Der Befehl bdquoBild zuruumlcksetzenldquo entfernt die

gewaumlhlte Grafik aus Ihrer Webseite

Waumlhrend Sie mittels bdquoInsertEdit Imageldquo die Anzeige-Groumlszlige Ihres Bildes (bis maximal 480 Pixel

Breite) selbst bestimmen koumlnnen werden Grafiken uumlber die Funktion bdquoVorschaubild waumlhlenldquo beim

Einfuumlgen automatisch auf die passende Groumlszlige skaliert (162 Pixel Breite in der linken und 204 Pixel

Breite in der rechten Content-Spalte) In diesem Fall koumlnnen Sie zudem waumlhlen ob der Text an dieser

Stelle das Bild umflieszligt oder aber rechts daneben angezeigt wird Das Vollbild wird bei der Eingabe

nicht skaliert Nutzen Sie daher bitte Bilder mit einer bildschirmtauglichen Groumlszlige (maximal 1024

Pixel)

S e i t e | 22

Tabellen

Uumlber das Icon bdquoInsertEdit Tableldquo fuumlgen Sie an der gewuumlnschten Stelle Tabellen in Ihren Texteditor

ein Unter den Reitern bdquoGeneralldquo und bdquoAdvancedldquo koumlnnen Sie diese Tabellen gemaumlszlig den uumlblichen

HTML-Konventionen erstellen formatieren und bearbeiten

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig gemaumlszlig den Vorgaben der Barrierefreiheit als

solche aus Der Text-Editor stellt Ihnen diese Optionen zur Verfuumlgung

bull Beachten Sie dass die Hintergrundfarbe der Tabellen je nach gewaumlhlter Einfaumlrbung des

Moduls variiert

S e i t e | 23

Texte mit bdquoVerfallsdatumldquo

Grundsaumltzlich steht Ihnen das Modul bdquo(TinyMCE)-Texteditorldquo sowohl auf shtml-Seiten als auch in

php-Skripten zur Verfuumlgung Auf php-Seiten laumlsst sich jedoch eine zusaumltzliche Option nutzen Fuumlr

Texte die nur fuumlr einen gewissen Zeitraum auf Ihrer Webseite erscheinen sollen koumlnnen Sie ein

Start- und Enddatum setzen

63 A-Z verwalten PHP-Skript HTML-Web-Seite

Das Modul bdquoA-Z verwaltenldquo ermoumlglicht den Redakteuren A-Z-Listen relativ einfach zu erzeugen und

zu pflegen

S e i t e | 24

Fuumlr jeden Eintrag in der Stichwortliste muss im Eingabefeld eine einzelne Zeile eingefuumlgt werden Die

Eingabe folgt einem festen Schema

bull Stichwort||URL (Internetadresse)||

oder

bull Stichwort||URL (Internetadresse)||eventuell ein kurzer Beschreibungstext

wobei auf den Beschreibungstext auch verzichtet werden kann Die sogenannten bdquoPipe-Zeichenldquo (||)

dienen als Feldtrenner Sie erzeugen sie uumlber den Tastaturbefehl bdquoAltGr amp das Groumlszligerzeichenldquo

Wahlweise kopieren Sie die entsprechenden Zeichen aus bisherigen Eintraumlgen

Auch hier gilt Tragen Sie interne Links in Ihrer A-Z-Liste bitte als relative Verknuumlpfungen ohne

Verweis auf den Webserver der Universitaumlt ein also

bull Abiturjahrgang 2013||doppelter_abiturjahrgang||

anstelle von

bull Abiturjahrgang 2013||httpwwwuni-duededoppelter_abiturjahrgang||

Externe Links (wie etwa bdquoGlassbooth ||httpwwwglassboothde||ldquo) werden auf der

ausgegebenen Webseite entsprechend gekennzeichnet

S e i t e | 25

Die Eintraumlge im Modul bdquoA-Z verwaltenldquo sortiert das Content Management System automatisch nach

Ziffernreihenfolge bzw dem Alphabet Um die Eintraumlge spaumlter einfach aufzufinden und bearbeiten zu

koumlnnen empfiehlt es sich jedoch bereits im Eingabefeld selbst eine alphabetische Sortierung

vorzunehmen

64 Code editieren PHP-Skript HTML-Web-Seite

Das Modul bdquoCode editierenldquo eroumlffnet Ihnen die Moumlglichkeit in Ihrem Internetauftritt eigene PHP-

oder HTML-Codeschnipsel zu erstellen und zu nutzen oder Programmierungen eigener Funktionen

vorzunehmen

Nutzen Sie dieses Modul bitte nicht um Funktionen zu simulieren die Ihnen das CMS IMPERIA bereits

als vorgefertigte Module zur Verfuumlgung stellt Das freie Code-Eingabefeld ist ebenfalls nicht dazu

S e i t e | 26

vorgesehen auf diesem Wege vom Corporate Design der Universitaumlt abweichende eigene Layouts zu

entwickeln

65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

Uumlber das Modul bdquoCodebaustein einfuumlgenldquo ist es moumlglich vorgefertigte Bloumlcke oder bdquoBauteileldquo in Ihre

Webseite zu integrieren Codebausteine eignen sich dazu bestimmte Informationen die auf vielen

Webseiten wiederkehren an einer Stelle zentral zu pflegen In der Bearbeitungsebene bietet Ihnen

das Modul die in der aktuellen Rubrik vorhandenen Bausteine zur Auswahl an

Codebausteine erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 27

Sie koumlnnen in Codebausteinen wie beim uumlblichen Seitenaufbau gewohnt unterschiedliche Module

kombinieren und positionieren Zur Verfuumlgung stehen die Elemente

bull (TinyMCE)-Texteditor

bull Code editieren

bull die Formularmodule

bull Randlose Grafik

bull RSS-Feed-Agent

bull Tube Audio-VideoPlayer

Eine spaumltere Bearbeitung der Codebausteine ist im CMS IMPERIA nicht uumlber das Tool bdquoQuickEditldquo

moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo

im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichniscode_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Codebausteine im

selben Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

66 DBAdmin PHP-Skript

Mit Hilfe des Moduls bdquoDBAdminldquo lassen sich Datenbank direkt in Tabellenform auf Ihrer Webseite

darstellen Uumlber die Funktion bdquoOptionen anzeigenldquo erhalten Sie zudem die Moumlglichkeit eine

Webseite zur Pflege Ihrer Datenbank zu erstellen Dort koumlnnen Sie die entsprechende Tabelle

editieren d h Eintraumlge einzeln erstellen bearbeiten oder loumlschen

S e i t e | 28

Zur Nutzung dieses Moduls sind folgende Angaben notwendig

bull Datenbank-Server Name oder IP-Adresse des Servers auf dem die anzusprechende

Datenbank liegt (bspw bdquodbuni-duedeldquo)

bull Datenbank-Name

bull Tabellen-Name Name der speziellen Tabelle die innerhalb der Datenbank angesprochen

werden soll

bull Datenbank-Benutzer und Datenbank-Passwort

Datenbanken auf einem UDE-Server koumlnnen Universitaumltsangehoumlrige unter Nutzung ihrer

Hochschulkennung online beim Zentrum fuumlr Informations- und Mediendienste (ZIM) beantragen

unter httpwwwuni-duedezimserviceshomepagesmysqlshtml

67 Doppelcontainer PHP-Skript HTML-Web-Seite

Das Modul bdquoDoppelcontainerldquo ermoumlglicht es Ihnen auf Ihrer Webseite zwei Textebloumlcke (je nach

Wunsch mit oder ohne Bilder) nebeneinander zu setzen

Auf zweispaltig angelegten Webseiten ist die Anlage eines Doppelcontainers nur in der linken Spalte

moumlglich Bilder erscheinen dort in einer Breite von 246 Pixeln Auf einspaltig angelegten Webseiten

werden die einzelnen Bloumlcke (und dementsprechend die verwendeten Bilder) in einer Breite von 366

Pixeln angezeigt Die Bildhoumlhe ist in beiden Faumlllen frei waumlhlbar sollte jedoch in beiden Containern

identisch sein

S e i t e | 29

Zur Texteingabe stehen Ihnen die Optionen bdquoTeaserldquo (mit Zeichenbegrenzung) sowie bdquoStandardldquo

(ohne Zeichenbegrenzung) zur Verfuumlgung Waumlhlen Sie bdquoTeaserldquo so erhalten Sie Platz fuumlr 300 Zeichen

ndash ein Zeichenzaumlhler neben der Texteingabe-Box erleichtert das Mitzaumlhlen Der Text wird gelb

unterlegt wenn er nach dem naumlchsten Leerzeichen abgeschnitten wird Rot erscheint das Textfeld

wenn die Zeichenzahl bereits uumlberschritten wurde

Beachten Sie bitte dass das Modul HTML-Tags (URLs Mailadressen etc) automatisch filtert Sie

werden daher nicht angezeigt Um Ihren Text zu verlinken koumlnnen Sie das Eingabefeld bdquoMehr-Linkldquo

nutzen

Beide Bloumlcke innerhalb eines Doppelcontainers lassen sich individuell auf die uumlbliche Weise (weiszlig

hellblau sandfarben) hinterlegen

S e i t e | 30

68 Flickr nutzen PHP-Skript

Das Modul bdquoFlickr nutzenldquo ermoumlglicht es Ihnen im Sinne einer crossmedialen Verwertung Bilder aus

Ihrem Flickr-Account in Ihre IMPERIA-Webseite einzubinden Fuumlr diese Funktion benoumltigen Sie einen

sogenannten API-Key den Sie in Ihrem Flick-Auftritt unter

bull httpwwwflickrcomservicesappscreateapply

erzeugen lassen koumlnnen Tragen Sie dann diesen Key in die entsprechende Eingabemaske des Moduls

ein Anschlieszligend haben Sie die Moumlglichkeit ganze Fotosets (Alben) oder Einzelbilder einzubinden

Photoset anzeigen

S e i t e | 31

Zum Anzeigen von Photosets wird die entsprechende Photoset-ID ins Modul eingetragen Diese ID ist

Teil der Link-Adresse des entsprechenden Albums bei Flickr (die erscheint wenn Sie das Album

angeklickt haben) Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAMEsets12340954909

Die Photoset-ID verbirgt sich hinter den Ziffern am Ende der URL Sie koumlnnen auswaumlhlen wie viele

Fotos auf einer Webseite erscheinen sollen Dafuumlr uumlbernimmt das Modul die Bilder in der

quadratischen Aufloumlsung von Flickr also in einer Groumlszlige von 75 x 75 Pixeln Reicht der Platz dafuumlr

nicht aus wird eine zusaumltzliche Blaumltterfunktion angeboten Photoset- und Bild-Beschreibungen

koumlnnen aus dem Flickr-Account automatisch uumlbernommen werden wenn die entsprechenden

Optionen mit einem Haken aktiviert wurden

Einzelbild anzeigen

Um ein einzelnes Bild anzuzeigen benoumltigen Sie die entsprechen Flickr-Foto-ID Diese verbirgt sich

hinter der ersten Zahl in der Link-Adresse des entsprechenden Bildes Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAME5841603851inset-72157626981464896

Ein Einzelbild kann in einer hohen oder einer geringen Aufloumlsung eingebunden werden Bei einer

zweispaltig angelegten Webseite wird das Bild in der linken Inhaltsspalte auf eine Breite von 480

Pixel bei einer einspaltig angelegten Webseite auf eine Breite von 721 Pixel skaliert

69 Formulare

Mit IMPERIA haben Sie die Moumlglichkeit Formulare auf Ihrer Webseite zu platzieren In der

Bearbeitungsebene Ihrer Seite finden Sie im Bereich bdquoNeues Modulldquo den Menupunkt UDE ndash

Formular oumlffnen

Nach dem Festlegen der Hintergrundfarbe koumlnnen Sie im Bereich bdquoLegendeldquo den Titel Ihres

Formulars waumlhlen Wenn Sie die Funktion bdquoMailer-Funktionalitaumltldquo aktivieren koumlnnen Sie die Adresse

Ihres Mailscripts eingeben Anderenfalls belassen Sie es bitte beim Vorgabewert

Im Bereich bdquoNexturlldquo kann angegeben werden welche Seite nach dem Abschicken des Formulars

aufgerufen werden soll Daruumlber hinaus werden der Titel der E-Mail die Absender-Adresse sowie die

Empfaumlnger-Adresse definiert Optional kann eine Bestaumltigungs-E-Mail mit frei waumlhlbarem Text

versendet werden

S e i t e | 32

Um dem erstellten Formular Eingabefelder hinzuzufuumlgen ist das Modul bdquoUDE Formular Elementldquo zu

waumlhlen Waumlhlen Sie das Element bdquoTextldquo um ein Eingabefeld zu erzeugen Die Option bdquoBezeichnerldquo

beschreibt den sichtbaren Text im fertigen Formular zum Beispiel bdquoIhr Nameldquo Weitergehend koumlnnen

Sie die zulaumlssigen Inhalte der Nutzereingaben definieren sowie markieren ob das Element ein

Pflichtfeld sein soll

S e i t e | 33

Um ein Texteingabefeld innerhalb des Formulars zu erzeugen waumlhlen Sie das Element bdquoTextarealdquo

Sie koumlnnen die Groumlszlige des Textfeldes definieren (Zeilen x Spalten) und optional erneut eine Pruumlfung

zulaumlssiger Nutzereingaben aktivieren Weiterhin koumlnnen Sie waumlhlen ob der eingegebene Wert des

Formularelements in die Datenbank eingetragen werden soll Wenn Sie fuumlr Ihre Formulare auf eine

Datenbank zuruumlckgreifen moumlchten koumlnnen Sie sich hier informieren httpwwwuni-

duedezimserviceshomepagesmysqlshtml

Insgesamt stehen folgende Elemente zur Verfuumlgung

bull Checkbox Hidden Password Select Anfang Select Option einfuumlgen Select Ende Submit

Text Datum Textarea Radio Reset Leerzeile Kommentarzeile Neuer Abschnitt mit

Bezeichner sowie Datei-Upload

Ein Formular muss mit dem Modul bdquoUDE Formular schlieszligenldquo abgeschlossen werden An dieser

Stelle koumlnnen Sie einen Send-Button hinzufuumlgen dessen Name frei waumlhlbar ist Der eingegebene Text

wird als Beschriftung des Buttons angezeigt Erst durch das Hinzufuumlgen dieses Moduls wird das

Formular auf Ihrer Seite sichtbar und kann nach der Veroumlffentlichung genutzt werden

S e i t e | 34

610 Google-Maps (v30) PHP-Skript HTML-Web-Seite

Dieses Modul bringt eine Grafik von Google-Maps auf die Webseite entweder in Kartenoptik oder als

Satellitenbild Sie haben zwei Moumlglichkeiten eine solche zu generieren Uumlber die konkreten GPS-

Koordinaten oder durch das Angeben einer Adresse (zB Forsthausweg 2 47057 Duisburg) Sie

koumlnnen aus zwoumllf Vergroumlszligerungsstufen fuumlr den gewuumlnschten Ausschnitt zwei Kartengroumlszligen und

zwei Kartenformaten waumlhlen

S e i t e | 35

Kartengroumlszlige bdquogroszligldquo skaliert die Graphik auf 480 Pixel Breite auf einer zweispaltigen Seite bzw auf

721 Pixel auf einer einspaltigen Seite Die Option bdquokleinldquo verringert die Breite auf etwa die Haumllfte Die

beiden Optionen beim Kartenformat beeinflussen die Houmlhe der Grafik

S e i t e | 36

611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite

Das Modul Image-Gallery ermoumlglicht die Integration einer komfortablen Bildergallerie uumlber IMPERIA

Per Klick auf bdquoNeues Modulldquo -gt bdquoUDE Image-Gallery (v21)ldquo kann die entsprechende Gallerie an der

gewuumlnschten Position eingefuumlgt werden Generell sollten nur Bilder verwendet werden die

entweder auf 640 x 480 Pixel oder maximal auf 900 x 600 Pixel skaliert sind Aufgrund einer hohen

Dateigroumlszlige sollten Bilder einer Digitalkamera vor dem Upload komprimiert werden

Innerhalb des Moduls kann zunaumlchst die Hintergrundfarbe der Gallerie wahlweise zwischen Beige

Blau und Weiszlig eingestellt werden Um die Gallerie mit Bildern zu fuumlllen ist das entsprechende

Verzeichnis der Mediendatenbank anzugeben Aufgrund der geaumlnderten Syntax wird das Verzeichnis

ohne images angegeben Die Suchmaske fuumlr die Bilderauswahl deklariert die Dateiformate die mit

einbezogen werden sollen Schlieszliglich koumlnnen Sie die Bilder alphabetisch sortiert anzeigen lassen

sowie einen kleinen und einen groszligen Titel fuumlr Ihre Bildergallerie vergeben

Grundsaumltzlich ist es empfehlenswert groumlszligere Bildmengen auf mehrere Seiten zu verteilen um

einerseits die Darstellung auf mobilen Geraumlten zu vereinfachen und andererseits geringeren

Bandbreiten Rechnung zu tragen

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 3: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 2

1 Einleitung Ein einheitliches Gesicht der Universitaumlt

Eindeutig und unverwechselbar ist die Universitaumlt Duisburg-Essen (UDE) Praumlgend fuumlr ihren Charakter

in Forschung Lehre und Service sind Innovation und Dynamik sowie Weltoffenheit und Vernetzung

Damit diese Staumlrken auch optisch in Erscheinung treten folgt der Internetauftritt der Hochschule dem

generellen Corporate Design der Universitaumlt Der neue Auftritt ist Teil eines

Kommunikationsprozesses den die UDE im Jahr 2010 initiiert hat Anstoszlig war der Wunsch nach einer

sichtbaren und kommunizierbaren Identitaumlt nach einem einheitlichen und glaubhaften Bild der UDE

in der Oumlffentlichkeit

Um dieses Ziel zu erreichen benoumltigt die Hochschule die Mitarbeit jedes einzelnen

Internetredakteurs in den unterschiedlichen Bereichen der UDE Sie werden feststellen dass das

neue Corporate Design viele Freiheiten im Umgang laumlsst und offen fuumlr Ideen und Kreativitaumlt ist

Das neue Gesicht der Hochschule ist inzwischen in vielen Bereichen sukzessive umgesetzt worden Im

Internet praumlsentiert es sich als offenes und zugleich puristisches Design das mit einer

vergleichsweise kleinen Zahl von Gestaltungselementen auskommt und damit die Pflege der Seiten

erleichtert Statt grafisch uumlberladener Seiten bietet die UDE einfache aber funktionale Navigations-

und Gestaltungselemente Diese Grundidee durchgaumlngig umzusetzen wird in der Zukunft weiter zu

verfolgen sein

In diesem Leitfaden sind die Grundregeln fuumlr den einheitlichen Gesamtauftritt der UDE im World

Wide Web niedergelegt Er soll ihnen dabei helfen die wichtigsten Elemente zu identifizieren und sie

in Ihrem praktischen Alltag umzusetzen

Wenn Sie Fragen zu diesem Bereich haben Wenden Sie sich an die Webredaktion in der Pressestelle

an das Hochschulmarketing oder an den Bereich IT-Infrastruktur im Zentrum fuumlr Informations- und

Mediendienste (ZIM)

Weitere Informationen amp Ansprechpartner

bull Ulrike Eichweber Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-2461 -1481 webredaktionuni-duede

bull Dr Olivia Jazwinski (Stabsstelle des Rektorats Marketing)

Telefon (0203) 379-4747 oliviajazwinskiuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

S e i t e | 3

2 Schluumlsselelemente des Corporate Design

Das Webdesign der Universitaumlt greift an praumlgnanter Stelle und auf den ersten Blick wahrnehmbar die

Schluumlsselelemente des neuen Hochschuldesigns auf Den Webauftritt praumlgen

bull die Wortmarke das Logo mit Claim

bull der Himmel als hervorstechendes bdquoKey-Visualldquo

bull die vier abgestimmten UDE-Grundfarben

bull (die im Netz genutzte Schriftart)

Die UDE-Wortmarke mit dem Claim bdquoOffen im Denkenldquo (wahlweise im Englischen bdquoOpen mindedldquo) ist

der wichtigste Bestandteil der Corporate Identity der Hochschule Der Claim unterstreicht auf

emotionale Art dass die Universitaumlt Duisburg-Essen keine geschlossene lebensferne Gesellschaft ist

sondern genau das Gegenteil Sie ist anfassbar nahe dran an der Gesellschaft nah an den Menschen

und deren individuellen Faumlhigkeiten

Die Konstellation aus Wortmarke und Claim ist verbindlich zu verwenden Die Wortmarke wird

nicht ohne Claim eingesetzt

Der Claim hat den Abstand eines Versals zum Logo zur Wortmarke Die Konstellation bdquoWortmarke

und Claimldquo ist fix und darf in sich nicht veraumlndert werden

Der Himmel als Schluumlsselreiz (Key-Visual) steht als Metapher fuumlr bdquoOffen im Denkenldquo und damit fuumlr

die Universitaumlt selbst Die UDE setzt keine Barrieren fuumlr Forschung und Lehre keine Grenzen im

Denken Als aufmerksamkeitsstarkes Irritationselement taucht der Himmel auszligerdem auch dort auf

wo er normalerweise nicht ist Collagen spielen mit Gewohntem und Ungewoumlhnlichem Szenen die

eigentlich jeder kennt demonstrieren auf ungewoumlhnliche Art und Weise wie die UDE bdquoticktldquo

S e i t e | 4

Das Himmel-Motiv uumlberfuumlhrt die seit der Gruumlndung 2003 entwickelte blau-weiszlige Farbenwelt der

Hochschule in einen neuen Layout-Kontext Im weiterentwickelten Design existieren vier

aufeinander abgestimmte Farben

bull Blau gemaumlszlig Hexadezimalcode 004c93

bull Beige gemaumlszlig Hexadezimalcode efe4bf

bull Hellblau gemaumlszlig Hexadezimalcode dfe4f2

bull Schwarz gemaumlszlig Hexadezimalcode 000000

bull (Graue Elemente erscheinen gemaumlszlig Hexadezimalcode 58585a)

S e i t e | 5

Saumlmtliche Farben werden vom System automatisch gesetzt Sie koumlnnen jedoch im Inhaltsbereich

Ihrer Webseiten Module unterschiedlich einfaumlrben Sie haben dort die Wahl zwischen weiszliger

(Standardeinstellung) sandfarbener oder hellblauer Hinterlegung

Als Schriftart kommt auf der UDE-Website ausschlieszliglich Arial zum Einsatz Die Basisschriftgroumlszlige ist

12px die uumlberwiegende Schriftfarbe Schwarz

Weiterfuumlhrende Informationen amp Downloads

bull UDE-Markenhandbuch

httpwwwuni-

duedeimperiamdcontentdokumenteoffen_im_denkenude_markenhandbuchpdf

bull Wortmarke Logo mit Claim in unterschiedlichen Formaten

httpwwwuni-duedeoffen-im-denkenlogodownloadphp

bull Schmuckelemente (Grafiken Schriften)

httpwwwuni-duedeoffen-im-denkenschmuckelementephp

3 Technische Plattform Zugang zum CMS

Die UDE betreibt einen zentralen Webserver der von allen Einrichtungen und Mitgliedern der

Universitaumlt genutzt werden kann Fuumlr den Server wird eine hohe Erreichbarkeit auch unter Last

gewaumlhrleistet Der Webserver wird uumlber das Content Management System (CMS) bdquoIMPERIAldquo das ndash

nach einer landesweiten Ausschreibung ndash von vielen Hochschulen benutzt wird mit Webseiten

befuumlllt

Einen Zugang zum CMS IMPERIA erhalten Sie uumlber das Zentrum fuumlr Informations- und Mediendienste

(ZIM) Das ZIM bietet neben dem technischen Support auch Einfuumlhrungskurse in die Erstellung von

Webseiten

S e i t e | 6

Weitere Informationen

bull Zugang zum UDE-System IMPERIA-Rubriken Web-Verzeichnisse

Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

bull Anwenderschulung

Hartmut Prause (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0201) 183-4115 hartmutprauseuni-duede

bull Termine der Einfuumlhrungskurse

httpwwwuni-duedezimservicesweiterbildungkurse

Neben IMPERIA wird an Einrichtungen der UDE auch mit anderen Content Management Systemen

gearbeitet die spezifische Eigenschaften aufweisen Genutzt werden unter anderen die Open Source

Produkte Typo3 Drupal oder Joomla Mit welchem System die jeweilige UDE-Einrichtung arbeitet ist

dezentral zu entscheiden Gleichwohl sollte auch bei einer Entscheidung fuumlr ein alternatives System

bedacht werden wie die Ausfallsicherheit die Kontinuitaumlt der Weiterentwicklung sowie die

Darstellung im Design der Hochschule gewaumlhrleistet werden koumlnnen

S e i t e | 7

4 Grundsaumltze der Webseitengestaltung Seitenaufbau

Um der sich staumlndig veraumlndernden Landschaft an Ausgabegeraumlten (Desktops Netbooks Tablets

Smartphoneshellip) Rechnung zu tragen passt sich das neue (adaptive) Layout der UDE-Website

dynamisch an unterschiedliche Bildschirm- bzw Browserfenstergroumlszligen an Die bdquonormaleldquo

Desktopansicht aumlndert so auf einem kleineren Bildschirm wie beispielsweise einem aumllteren iPad im

Querformat die Breite so dass horizontales Scrollen vermieden wird Bei kleineren Bildschirmen bricht

die rechte Spalte um und wird unterhalb des Hauptinhaltes angezeigt Auf Mobiltelefonen schlieszliglich

entfaumlllt die Spaltenanordnung komplett und saumlmtliche Inhalte werden untereinander angezeigt

Dieses Verhalten ist dadurch moumlglich dass alle Groumlszligenangaben im System nur relativ angegeben

sind Verwenden Sie daher keine eigenen fixen Groumlszligenangaben die diese Vorlagen uumlberschreiben

In der bdquonormalenldquo Desktopansicht folgt der Webseitenaufbau im Internetangebot der Universitaumlt

einem festen Raster dass Ihnen bei Verwendung des CMS IMPERIA automatisch vorgegeben wird

bull Die Webseite der UDE liegt als weiszliges bdquoBlattldquo zentriert auf einem sandfarbenen Hintergrund

Der Container der dieses bdquoBlattldquo optisch darstellt beginnt in einem Abstand von 15 Pixeln

S e i t e | 8

zum oberen Seitenrand und setzt immer am unteren Seitenrand auf Der linke der obere und

der rechte Containerrand erzeugen einen leichten Schatteneffekt

bull Links in der Kopfzeile begruumlszligt immer an erster Stelle der Schriftzug bdquoUNIVERSITAumlT

DUISBURG-ESSENldquo die Seitenbesucher Auf jeder Seite der Universitaumlt genuumlgt ein Mausklick

auf den Schriftzug um zuruumlck auf die UDE-Startseite zu gelangen

bull Die gruppenspezifische Aufarbeitung von Informationen gilt inzwischen ndash zu Recht ndash als ein

Qualitaumltsmerkmal von Internetseiten Jede UDE-Webseite erhaumllt deshalb in der Kopfzeile

eine Zielgruppennavigation In Bereichen die keine eigene Zielgruppennavigation erstellen

erscheinen dort die entsprechenden Inhalte des zentralen Angebotes der Universitaumlt

bull Unterhalb der Kopfzeile erscheint auf jeder Seite der Universitaumlt eine Impressionsgrafik Das

System IMPERIA gibt Ihnen diese Grafik vor Sie greift mit ihrem Motiv (Himmel und Wolken)

das beherrschende Key-Visual des Corporate Design der Hochschule auf Zentral am unteren

Rand des Bildes wird vor einem uumlberlagernden weiszligen Kasten der Titel der jeweiligen

Webseite angezeigt Die Houmlhe der Impressionsgrafik veraumlndert sich wenn der eingefuumlgte

Seitentitel mehrzeilig wird

bull Innerhalb der Impressionsgrafik koumlnnen Sie auf der linken Seite eine ein- oder zweizeilige

Bezeichnung Ihres Bereiches einfuumlgen Diese individuelle Organisationsangabe sitzt so im

Gesamtlayout direkt unter dem Schriftzug bdquoUNIVERSITAumlT DUISBURG-ESSENldquo und gibt den

Seitenbesuchern auf den ersten Blick die Orientierung daruumlber wo sie sich eigentlich gerade

befinden Sie koumlnnen sie individuell verlinken

bull Das Universitaumlts-Logo sitzt rechtsbuumlndig in der Impressionsgrafik Es ist so einzurichten dass

ein Mausklick genuumlgt um auf die UDE-Homepage zu gelangen Das Logo darf nicht ohne den

Claim bdquoOffen im Denkenldquo (wahlweise im Englischen bdquoOpen mindedldquo) verwendet werden

bull In der linken Spalte kann der jeweilige Seitenanbieter eine frei editierbare Navigation

einbinden Die Navigation umfasst maximal zwei Ebenen Durch die bewusst reduzierte

Menuumlstruktur signalisiert die Internetpraumlsenz Klarheit und Transparenz Die

Hauptmenuumleintraumlge sind in Groszligbuchstaben (Versalien) ausgefuumlhrt Eintraumlge von

Untermenuumls sind eingeruumlckt und in Normalschrift formatiert Auf beiden Ebenen wird die

Schrift beim Uumlberfahren mit der Maus bzw beim Antabben auf Touch-Screens weiszlig vor

blauem Hintergrund Gleiches gilt fuumlr den jeweils aktiven Menuumlpunkt (Im Jahr 2013 wird auf

jeder mit dem CMS IMPERIA im aktuellen Template erzeugten Webseite uumlber der

Hauptnavigation das Jubilaumlumsfaumlhnchen zum zehnjaumlhrigen Bestehen der Universitaumlt

eingeblendet verlinkt auf httpwwwuni-duede10jahre)

bull Unterhalb der eigenen Navigation wird immer die zentrale Suche (Volltextsuche

Personensuche) der Universitaumlt verlinkt An dieser Stelle koumlnnen Sie zudem wahlweise (und

S e i t e | 9

auf jeder Seite einzeln) einen Link auf eine individuelle A-Z-Seite undoder auf einen eigenen

Intranet-Bereich sowie mit Landesfahnen gekennzeichnete Hinweise auf parallel angebotene

fremdsprachige Inhalte einfuumlgen

bull Zwischen Seitentitel und ndashinhalt koumlnnen Sie auf jeder Seite eine individuelle

Brotkrumennavigation editieren die den Nutzern eine schnelle Uumlbersicht daruumlber

ermoumlglicht wie sie auf die gerade aufgerufene Webseite gelangt sind

bull Der eigentliche Inhaltsbereich (Content) der Webseite kann bei der Seitenerzeugung ein-

oder zweispaltig angelegt werden Der Wechsel zwischen Ein- und Zweispaltigkeit einer Seite

ist uumlber den IMPERIA -Workflow jederzeit moumlglich Bei einem zweispaltigen Contentbereich

ist die schmale rechte Spalte fuumlr Zusatzinformationen vorgesehen die nicht direkt zum

Hauptinhalt gehoumlren bspw Veranstaltungskalender Banner oder RSS-Feeds Fuumlr die

Gestaltung des Inhalts steht eine groszlige Anzahl statischer wie dynamischer Elemente

(Module) zur Verfuumlgung Die einzelnen Module des Inhaltsbereiches koumlnnen unterschiedlich

eingefaumlrbt werden Sie haben die Wahl zwischen weiszliger (Standardeinstellung) sandfarbener

oder hellblauer Hinterlegung

bull In der Fuszligzeile angedockt an den unteren Seitenrand erscheint auf allen Seiten der

Hochschule ein Link auf das zentrale UDE-Impressum Wahlweise (und auf jeder Seite

einzeln) koumlnnen Sie einen Kontakt-Link einfuumlgen

bull Den Abschluss der Webseite bildet die E-Mail-Adresse des zustaumlndigen technischen

Seitenredakteurs die fuumlr Ruumlckfragen oder fuumlr redaktionelle Hinweise genutzt werden kann

Dieses Feld ist individuell beschreibbar ndash sollte jedoch niemals leer und immer auf dem

aktuellen Stand sein Hierfuumlr eignen sich Funktions-E-Mail-Adressen besser als Ihr

persoumlnlicher Account

5 Bestandteile von Webseiten

Um eine Webseite in der Internetpraumlsenz der Universitaumlt vollstaumlndig zu praumlsentieren benoumltigen Sie

(solange Sie mit dem CMS IMPERIA arbeiten) vier Elemente von denen Sie jedoch drei Elemente nur

einmal fuumlr Ihren gesamten Webbereich anlegen muumlssen und danach zentral pflegen koumlnnen

Eine Webseite setzt sich zusammen aus

bull Einer eigenen Organisationsbezeichnung Ihres Bereiches

bull Einer individuellen Zielgruppennavigation In Bereichen die keine eigene

Zielgruppennavigation erstellen erscheinen dort die entsprechenden Inhalte des zentralen

Angebotes der Universitaumlt

S e i t e | 10

bull Einer Navigation Sie koumlnnen in Ihrem Webbereich auch eine Vielzahl unterschiedlicher

Navigationen erstellen und diese je nach Bedarf einbinden

bull Der Seite (dem Dokument) selbst in der Sie Ihren Inhalt und Funktionen bearbeiten und die

vorherigen Elemente einfuumlgen koumlnnen

51 Die Organisationsbezeichnung

Die individuelle Bezeichnung Ihres Bereiches (Organisationsbezeichnung) erscheint auf Ihren

Webseiten links oben innerhalb der Impressionsgrafik direkt unter dem Schriftzug bdquoUNIVERSITAumlT

DUISBURG-ESSENldquo

Organisationsbezeichnungen erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

Sie koumlnnen Organisationsbezeichnungen in der Bearbeitungsebene ein- oder zweizeilig gestalten

S e i t e | 11

bull Der Eintrag in der ersten Zeile (bdquoOrganisationsbezeichnungldquo) erscheint groumlszliger und in weiszliger

fett-gesetzter Schrift

bull Ein Eintrag in der zweiten Zeile (bdquoZusatzldquo) erscheint in weiszliger normal gesetzter Schrift

Unter bdquoVerweis zur Organisationseinheit (URL)ldquo koumlnnen Sie das Sprungziel der

Organisationsbezeichnung bestimmen Tragen Sie diese Verknuumlpfung bitte als relativen Link ohne

Verweis auf den Webserver der Universitaumlt ein

bull Beispiel ihrverzeichnis anstatt httpwwwuni-duedeihrverzeichnis

Eine spaumltere Bearbeitung der Organisationsbezeichnung ist im CMS IMPERIA nicht uumlber das Tool

bdquoQuickEditldquo moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente

bearbeitenldquo im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichnisorganisation_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere

Organisationsbezeichnungen im selben Verzeichnis erstellen diesen einen jeweils moumlglichst

aussagekraumlftigen Dateititel zu geben

S e i t e | 12

52 Die Zielgruppennavigation

Eine individuelle Zielgruppennavigation in der Kopfzeile Ihrer Webseite erstellen Sie uumlber das

IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

Die editierte und veroumlffentlichte Zielgruppennavigation erscheint automatisch auf allen Seiten Ihres

Verzeichnisses

Tragen Sie bitte auch dort die Verknuumlpfungen als relative Links ohne Verweis auf den Webserver der

Universitaumlt ein Verwenden Sie dieses Instrument auszligerdem bitte nicht als moumlgliche zusaumltzliche

Quernavigation sondern ausschlieszliglich als Hilfe und zur Verlinkung gruppenspezifischer

Informationsaufarbeitung

Auch die spaumltere Bearbeitung der Zielgruppennavigation ist im CMS IMPERIA nicht uumlber das Tool

bdquoQuickEditldquo moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente

bearbeitenldquo im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Zielgruppennavigation lautet

ihrverzeichnistargetsshtml

S e i t e | 13

Beachten Sie beim Import bitte Folgendes Anders als seit Beginn des Wintersemesters 2007

gehandhabt kann mit dem UDE-Webrelaunch im Oktober 2011 pro Verzeichnis nur noch eine

anstelle von zwei Zielgruppennavigationen erstellt werden die zudem automatisch in Ihrer Webseite

eingesetzt wird In Verzeichnissen die zwischen 2007 und 2011 angelegt wurden existiert oft

(zusaumltzlich oder ausschlieszliglich) eine sogenannte bdquoerweiterte Zielgruppennavigationldquo

(ihrverzeichnisetargetsshtml) Der Webserver der Universitaumlt sucht bei der Ausgabe Ihrer

Internetseiten im ersten Schritt nach der Datei bdquotargetsshtmlldquo im zweiten Schritt nach der Datei

bdquoetargetsshtmlldquo in Ihrem Verzeichnis und gibt die Zielgruppennavigation dieser Prioritaumlt nach aus

Fehlen beide Dateien so erscheinen die entsprechenden Inhalte des zentralen Angebotes der

Universitaumlt

53 Die Navigation

Navigationen in der linken Spalte Ihrer Webseite sind maximal zwei Ebenen tief

bull In der ersten Ebene ist die Schrift in Versalien (Groszligbuchstaben) gesetzt Schreiben Sie Ihre

Links bitte dennoch bdquonormalldquo Die Transformation in Groszligbuchstaben erfolgt automatisch

durch das System Die Navigationspunkte der ersten Ebene sind mit einem blauen Rechteck

versehen das am linken Seitenrand anliegt

bull Die zweite Navigationsebene erscheint in der Ausgabe nach rechts geruumlckt und regulaumlr in

Groszlig- und Kleinschreibung gesetzt

Links in Navigationen veraumlndern sich beim Uumlberfahren mit der Maus bzw beim Antabben auf

Touchpads Die Schrift erscheint dann weiszlig auf einem blauen Hintergrund Das Gleiche gilt fuumlr den

jeweils aktiven Menuumlpunkt Dieser ist in der Navigation dauerhaft weiszlig mit blauer Hinterlegung

Navigationen erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 14

Zum Aufbau Ihrer Navigation stehen Ihnen die Module bdquoNavigationslinkldquo und

bdquoNavigationsuntermenuumlldquo zur Verfuumlgung Ein Navigationslink erscheint einzeln auf der ersten Ebene

versehen mit einem vorgelagerten blauen Rechteck Mit dem Navigationsuntermenuuml koumlnnen Sie

Menuumlpunkte erzeugen die neben dieser ersten Position uumlber eine zweite eingeruumlckte Ebene

verfuumlgen Dort lassen sich beliebig viele Unterpunkte einsetzen Je nachdem ob Sie den

uumlbergeordneten Eintrag im Navigationsuntermenuuml mit einer Zieladresse (URL) versehen erscheint

dieser verlinkt oder als einfache Uumlberschrift uumlber die nachgelagerten Inhaltspunkte

Selbstverstaumlndlich lassen sich die einzelnen Einheiten in ihrer Position jederzeit verschieben Tragen

Sie interne Links in Ihren Navigationen bitte als relative Verknuumlpfungen ohne Verweis auf den

Webserver der Universitaumlt ein

Editierte und veroumlffentlichte Navigation erscheinen innerhalb der Rubrik in der sie angelegt wurden

automatisch zur Auswahl im linken Bereich der Bearbeitungsebene Ihrer Webseite

Die spaumltere Bearbeitung von Navigationen ist im CMS IMPERIA auf zwei Wegen moumlglich Die

entsprechende Datei kann zum einen uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo im

IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Navigationen folgt folgendem Muster

ihrverzeichnisnav_12345shtml

S e i t e | 15

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Navigationen im selben

Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

Zum anderen koumlnnen Sie auch aus der Bearbeitungsebene einer Webseite heraus dort ausgewaumlhlte

Navigationen aufrufen und editieren Beachten Sie jedoch dass nach dem Speichern der

bearbeiteten Navigation sowohl die Navigationsdatei als auch die Datei der Ursprungsseite auf Ihrem

Schreibtisch liegen

6 Webseiten gestalten

Fuumlr die Gestaltung Ihres Inhalts steht Ihnen eine groszlige Anzahl statischer wie dynamischer Elemente

(Module) zur Verfuumlgung Welche Elemente Sie im Einzelnen nutzen koumlnnen haumlngt davon ab welchen

Dateityp Sie bei der Dokumentenerzeugung fuumlr Ihre Webseite waumlhlen Das Content Management

System der Hochschule bietet Ihnen die Moumlglichkeit Ihr Dokument als HTML-Web-Seite oder als

PHP-Skript zu erzeugen Beachten Sie bitte von Anfang an dass diese Auswahl Einfluss auf die URL

(Internetadresse) der jeweiligen Seite hat Bei einer nachtraumlglichen Aumlnderung aumlndert sich auch die

Internetadresse unter der Ihre Seite im Netz zu finden ist Sie muumlssen dann eventuell Verlinkungen

an vielen Stellen aumlndern

bull Internetadresse einer HTML-Web-Seite wwwuni-duedebereichihreseiteshtml

bull Internetadresse eines PHP-Skripts wwwuni-duedebereichihreseitephp

Je nachdem ob Sie Ihr Dokument als HTML-Web-Seite oder als PHP-Skript erzeugen koumlnnen Sie

folgende Elemente nutzen

Linke Spalte des Inhaltsbereiches

bull (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

bull A-Z verwalten PHP-Skript HTML-Web-Seite

bull Code editieren PHP-Skript HTML-Web-Seite

bull Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

bull DBAdmin PHP-Skript

bull Doppelcontainer PHP-Skript HTML-Web-Seite

bull Flickr nutzen PHP-Skript

bull Formular schlieszligen PHP-Skript

bull Formular oumlffnen PHP-Skript

S e i t e | 16

bull Formular Element PHP-Skript

bull Formulareingabe in DB speichern PHP-Skript

bull Google-Maps (v30) PHP-Skript HTML-Web-Seite

bull Image-Gallery (v21) PHP-Skript HTML-Web-Seite

bull Mailinglisten PHP-Skript

bull Mitarbeiter-Liste PHP-Skript

bull Mitarbeiter-Publikationsliste PHP-Skript

bull Mitarbeiter-Seite PHP-Skript

bull Randlose Grafik PHP-Skript HTML-Web-Seite

bull RSS-Feed-Administration PHP-Skript

bull RSS-Feed-Agent PHP-Skript

bull Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

bull Veranstaltungskalender Kalendermodul PHP-Skript

bull Veranstaltungskalender Veranstaltungsmodul PHP-Skript

Rechte Spalte des Inhaltsbereiches

bull (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

bull Code editieren PHP-Skript HTML-Web-Seite

bull Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

bull Flickr nutzen PHP-Skript

bull Mitarbeiter-Seite PHP-Skript

bull Randlose Grafik PHP-Skript HTML-Web-Seite

bull RSS-Feed-Agent PHP-Skript

bull Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

bull Veranstaltungskalender Kalendermodul PHP-Skript

Beim Erstellen Ihrer Webseite koumlnnen Sie diese einzelnen Module nach Bedarf (auch mehrfach)

erzeugen und in der gewuumlnschten Reihenfolge platzieren wobei die gewaumlhlte Reihenfolge jederzeit

veraumlnderbar ist Mit wenigen Ausnahmen lassen sich die einzelnen Einheiten weiszlig blau oder beige

einfaumlrben (Ausnahme randlose Grafik) Sie werden vom System dann als voneinander abgesetzte

Bloumlcke ausgegeben

Um innerhalb eines Dokuments zu navigieren koumlnnen Sie wenn noumltig die einzelnen Elemente auch

mit einem Link-Anker versehen (Ausnahmen randlose Grafik Mitarbeiter-Liste -Publikationsliste

und ndashSeite Veranstaltungskalender Veranstaltungs- sowie Kalendermodul) Den Ankernamen

S e i t e | 17

koumlnnen Sie frei vergeben er darf jedoch keine Leer- oder Sonderzeichen enthalten Das erste Zeichen

muss auszligerdem ein Buchstabe sein

61 Uumlber allem Die Brotkrumennavigation

Zwischen Seitentitel und ndashinhalt koumlnnen Sie auf jeder Seite eine individuelle Brotkrumennavigation

editieren die den Nutzern eine schnelle Uumlbersicht daruumlber ermoumlglicht wie sie auf die gerade

aufgerufene Webseite gelangt sind Verwenden Sie dieses Instrument bitte nicht als moumlgliche

zusaumltzliche Quernavigation sondern ausschlieszliglich als Hilfe im vorgesehenen Sinne

Der letzte Eintrag der Brotkrumennavigation der uumlblicherweise die aktuell aufgerufene Seite

benennt sollte nicht mit einer Zieladresse (URL) versehen werden Der Eintrag erscheint dann als

regulaumlr schwarz formatierter Text nicht als blau ausgezeichneter Link

S e i t e | 18

62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

Mit dem TinyMCE-Texteditor stellt Ihnen das Content Management System der UDE einen auf

JavaScript basierenden WYSIWYG-Editor (bdquoWhat You See Is What You Getldquo) zur Verfuumlgung Mit Hilfe

dieses Moduls ist es moumlglich ohne HTML- oder weitergehende Programmierkenntnisse Beitraumlge zu

verfassen und Seiten zu formatieren Die Bedienung mittels einer Textbox orientiert sich stark an

gaumlngiger und bekannter Textverarbeitungs-Software

Texte formatieren

Selbstverstaumlndlich bietet der TinyMCE-Editor die uumlblichen Arten Texte zu formatieren Neben den

Befehlen fett (bdquoBoldldquo) kursiv (bdquoItalicldquo) unterstrichen (bdquoUnderlineldquo) sowie hoch- bzw tiefgestellt

bietet Ihnen das System uumlber das Ω-Symbol eine breite Palette an Sonderzeichen uumlber die

Listenfunktion die Erstellung einfacher oder nummerierter Aufzaumlhlungslisten an Mittels einer Select-

S e i t e | 19

Box koumlnnen Sie auszligerdem auf im Hochschullayout vorgegebene Uumlberschriftarten (bdquoHeadingsldquo)

zuruumlckgreifen

Als weitere Moumlglichkeiten steht Ihnen frei

bull ein Datum undoder eine Uhrzeit einzufuumlgen

bull Blockzitate zu kennzeichnen oder

bull geschuumltzte Leerzeichen (bdquoNon-breaking Space Characterldquo) zu definieren

bull Das Ankersymbol (bdquoInsertEdit Anchorldquo) erlaubt die Definition von Sprungzielen innerhalb

laumlngerer Texte

Im Notfall hilft Ihnen das Radiergummi-Symbol (bdquoRemove Formatting) saumlmtliche Formatierungen zu

entfernen

Bereits formatierten Text einfuumlgen

Uumlber diese Formatierungsarten hinaus koumlnnen Sie auch bereits vorformatierte Texte aus Ihrer

Textverarbeitung in den Editor kopieren Zum Einfuumlgen nutzen Sie jedoch bitte nicht den einfachen

Copy amp Paste-Befehl sondern die im Modul bereitgestellte Funktion bdquoPaste from Wordldquo (Sie finden

das entsprechende bdquoWldquo-Symbol unter der Texteingabe-Box) ndash und zwar auch dann wenn Ihr

Ursprungstext nicht aus Microsoft Word sondern einer anderen Textverarbeitungssoftware

importiert wird Schriftformatierungen Verlinkungen und Aumlhnliches werden dann 11 uumlbernommen

Achten Sie bitte dennoch darauf dass dieser Funktion Grenzen gesetzt sind und arbeiten Sie mit

moumlglichst einfachen Formatvorlagen

HTML-Ansicht

Fuumlr Redakteure die sich in der Seitenprogrammierung sicherer fuumlhlen als in der Textverarbeitung

haumllt das Modul TinyMCE-Texteditor uumlber den Button bdquoHTMLldquo einen HTML Source Editor bereit mit

dem direkt auf den Quelltext und die Codierung dieses Teils der Webseite zugegriffen werden kann

Diese Funktion eignet sich auszligerdem besonders zur Uumlberpruumlfung und Fehlersuche Zur

Programmierung eigener Funktionen nutzen Sie jedoch bitte das Modul bdquoCode editierenldquo

S e i t e | 20

Links

Die uumlber die Symbole bdquoInsertEdit Linkldquo (Link einfuumlgen oder bearbeiten) in Ihre Texte oder

Aufzaumlhlungslisten eingefuumlgten Hyperlinks formatiert das System selbststaumlndig im fuumlr die UDE

vorgesehehen Layout Tragen Sie Links auf Seiten innerhalb von wwwuni-duede bitte als relative

Verknuumlpfungen ohne Verweis auf den Webserver der Universitaumlt ein also

bull depresse

anstelle von

bull httpwwwuni-duededepresseindexphp

Zeichnen sie auszligerdem Ihre Verlinkungen im Sinne der Barrierefreiheit mit sprechenden Titeln aus

und uumlberlegen Sie sich ob das Sprungziel im selben oder in einem neuen Browserfenster geoumlffnet

werden soll

Uumlber das Symbol bdquoUnlinkldquo entfernen Sie die entsprechende Verlinkung

Bilder

Der TinyMCE-Texteditor bietet Ihnen zwei Moumlglichkeiten Bilder in Ihre Texte einzubinden

S e i t e | 21

bull Uumlber die Funktion bdquoInsertEdit Imageldquo (Icon unter der Texteingabe-Box) koumlnnen Sie den

relativen Pfad auf das entsprechende Bild aus der IMPERIA-Mediendatenbank einfuumlgen

(Formatbeispiel imperiamdimageswebredaktion2013parentservicejpg)

bull Die Funktion bdquoVorschaubild waumlhlenldquo laumlsst Sie direkt auf die IMPERIA-Mediendatenbank

zugreifen und dort die gewuumlnschte Grafik per Klick auswaumlhlen Uumlber die Funktion bdquoVollbild

waumlhlenldquo koumlnnen Sie das Bild optional zu einer groumlszligeren Ansicht verlinken die sich als

bdquoLightboxldquo uumlber der aktiven Webseite oumlffnet Der Befehl bdquoBild zuruumlcksetzenldquo entfernt die

gewaumlhlte Grafik aus Ihrer Webseite

Waumlhrend Sie mittels bdquoInsertEdit Imageldquo die Anzeige-Groumlszlige Ihres Bildes (bis maximal 480 Pixel

Breite) selbst bestimmen koumlnnen werden Grafiken uumlber die Funktion bdquoVorschaubild waumlhlenldquo beim

Einfuumlgen automatisch auf die passende Groumlszlige skaliert (162 Pixel Breite in der linken und 204 Pixel

Breite in der rechten Content-Spalte) In diesem Fall koumlnnen Sie zudem waumlhlen ob der Text an dieser

Stelle das Bild umflieszligt oder aber rechts daneben angezeigt wird Das Vollbild wird bei der Eingabe

nicht skaliert Nutzen Sie daher bitte Bilder mit einer bildschirmtauglichen Groumlszlige (maximal 1024

Pixel)

S e i t e | 22

Tabellen

Uumlber das Icon bdquoInsertEdit Tableldquo fuumlgen Sie an der gewuumlnschten Stelle Tabellen in Ihren Texteditor

ein Unter den Reitern bdquoGeneralldquo und bdquoAdvancedldquo koumlnnen Sie diese Tabellen gemaumlszlig den uumlblichen

HTML-Konventionen erstellen formatieren und bearbeiten

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig gemaumlszlig den Vorgaben der Barrierefreiheit als

solche aus Der Text-Editor stellt Ihnen diese Optionen zur Verfuumlgung

bull Beachten Sie dass die Hintergrundfarbe der Tabellen je nach gewaumlhlter Einfaumlrbung des

Moduls variiert

S e i t e | 23

Texte mit bdquoVerfallsdatumldquo

Grundsaumltzlich steht Ihnen das Modul bdquo(TinyMCE)-Texteditorldquo sowohl auf shtml-Seiten als auch in

php-Skripten zur Verfuumlgung Auf php-Seiten laumlsst sich jedoch eine zusaumltzliche Option nutzen Fuumlr

Texte die nur fuumlr einen gewissen Zeitraum auf Ihrer Webseite erscheinen sollen koumlnnen Sie ein

Start- und Enddatum setzen

63 A-Z verwalten PHP-Skript HTML-Web-Seite

Das Modul bdquoA-Z verwaltenldquo ermoumlglicht den Redakteuren A-Z-Listen relativ einfach zu erzeugen und

zu pflegen

S e i t e | 24

Fuumlr jeden Eintrag in der Stichwortliste muss im Eingabefeld eine einzelne Zeile eingefuumlgt werden Die

Eingabe folgt einem festen Schema

bull Stichwort||URL (Internetadresse)||

oder

bull Stichwort||URL (Internetadresse)||eventuell ein kurzer Beschreibungstext

wobei auf den Beschreibungstext auch verzichtet werden kann Die sogenannten bdquoPipe-Zeichenldquo (||)

dienen als Feldtrenner Sie erzeugen sie uumlber den Tastaturbefehl bdquoAltGr amp das Groumlszligerzeichenldquo

Wahlweise kopieren Sie die entsprechenden Zeichen aus bisherigen Eintraumlgen

Auch hier gilt Tragen Sie interne Links in Ihrer A-Z-Liste bitte als relative Verknuumlpfungen ohne

Verweis auf den Webserver der Universitaumlt ein also

bull Abiturjahrgang 2013||doppelter_abiturjahrgang||

anstelle von

bull Abiturjahrgang 2013||httpwwwuni-duededoppelter_abiturjahrgang||

Externe Links (wie etwa bdquoGlassbooth ||httpwwwglassboothde||ldquo) werden auf der

ausgegebenen Webseite entsprechend gekennzeichnet

S e i t e | 25

Die Eintraumlge im Modul bdquoA-Z verwaltenldquo sortiert das Content Management System automatisch nach

Ziffernreihenfolge bzw dem Alphabet Um die Eintraumlge spaumlter einfach aufzufinden und bearbeiten zu

koumlnnen empfiehlt es sich jedoch bereits im Eingabefeld selbst eine alphabetische Sortierung

vorzunehmen

64 Code editieren PHP-Skript HTML-Web-Seite

Das Modul bdquoCode editierenldquo eroumlffnet Ihnen die Moumlglichkeit in Ihrem Internetauftritt eigene PHP-

oder HTML-Codeschnipsel zu erstellen und zu nutzen oder Programmierungen eigener Funktionen

vorzunehmen

Nutzen Sie dieses Modul bitte nicht um Funktionen zu simulieren die Ihnen das CMS IMPERIA bereits

als vorgefertigte Module zur Verfuumlgung stellt Das freie Code-Eingabefeld ist ebenfalls nicht dazu

S e i t e | 26

vorgesehen auf diesem Wege vom Corporate Design der Universitaumlt abweichende eigene Layouts zu

entwickeln

65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

Uumlber das Modul bdquoCodebaustein einfuumlgenldquo ist es moumlglich vorgefertigte Bloumlcke oder bdquoBauteileldquo in Ihre

Webseite zu integrieren Codebausteine eignen sich dazu bestimmte Informationen die auf vielen

Webseiten wiederkehren an einer Stelle zentral zu pflegen In der Bearbeitungsebene bietet Ihnen

das Modul die in der aktuellen Rubrik vorhandenen Bausteine zur Auswahl an

Codebausteine erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 27

Sie koumlnnen in Codebausteinen wie beim uumlblichen Seitenaufbau gewohnt unterschiedliche Module

kombinieren und positionieren Zur Verfuumlgung stehen die Elemente

bull (TinyMCE)-Texteditor

bull Code editieren

bull die Formularmodule

bull Randlose Grafik

bull RSS-Feed-Agent

bull Tube Audio-VideoPlayer

Eine spaumltere Bearbeitung der Codebausteine ist im CMS IMPERIA nicht uumlber das Tool bdquoQuickEditldquo

moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo

im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichniscode_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Codebausteine im

selben Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

66 DBAdmin PHP-Skript

Mit Hilfe des Moduls bdquoDBAdminldquo lassen sich Datenbank direkt in Tabellenform auf Ihrer Webseite

darstellen Uumlber die Funktion bdquoOptionen anzeigenldquo erhalten Sie zudem die Moumlglichkeit eine

Webseite zur Pflege Ihrer Datenbank zu erstellen Dort koumlnnen Sie die entsprechende Tabelle

editieren d h Eintraumlge einzeln erstellen bearbeiten oder loumlschen

S e i t e | 28

Zur Nutzung dieses Moduls sind folgende Angaben notwendig

bull Datenbank-Server Name oder IP-Adresse des Servers auf dem die anzusprechende

Datenbank liegt (bspw bdquodbuni-duedeldquo)

bull Datenbank-Name

bull Tabellen-Name Name der speziellen Tabelle die innerhalb der Datenbank angesprochen

werden soll

bull Datenbank-Benutzer und Datenbank-Passwort

Datenbanken auf einem UDE-Server koumlnnen Universitaumltsangehoumlrige unter Nutzung ihrer

Hochschulkennung online beim Zentrum fuumlr Informations- und Mediendienste (ZIM) beantragen

unter httpwwwuni-duedezimserviceshomepagesmysqlshtml

67 Doppelcontainer PHP-Skript HTML-Web-Seite

Das Modul bdquoDoppelcontainerldquo ermoumlglicht es Ihnen auf Ihrer Webseite zwei Textebloumlcke (je nach

Wunsch mit oder ohne Bilder) nebeneinander zu setzen

Auf zweispaltig angelegten Webseiten ist die Anlage eines Doppelcontainers nur in der linken Spalte

moumlglich Bilder erscheinen dort in einer Breite von 246 Pixeln Auf einspaltig angelegten Webseiten

werden die einzelnen Bloumlcke (und dementsprechend die verwendeten Bilder) in einer Breite von 366

Pixeln angezeigt Die Bildhoumlhe ist in beiden Faumlllen frei waumlhlbar sollte jedoch in beiden Containern

identisch sein

S e i t e | 29

Zur Texteingabe stehen Ihnen die Optionen bdquoTeaserldquo (mit Zeichenbegrenzung) sowie bdquoStandardldquo

(ohne Zeichenbegrenzung) zur Verfuumlgung Waumlhlen Sie bdquoTeaserldquo so erhalten Sie Platz fuumlr 300 Zeichen

ndash ein Zeichenzaumlhler neben der Texteingabe-Box erleichtert das Mitzaumlhlen Der Text wird gelb

unterlegt wenn er nach dem naumlchsten Leerzeichen abgeschnitten wird Rot erscheint das Textfeld

wenn die Zeichenzahl bereits uumlberschritten wurde

Beachten Sie bitte dass das Modul HTML-Tags (URLs Mailadressen etc) automatisch filtert Sie

werden daher nicht angezeigt Um Ihren Text zu verlinken koumlnnen Sie das Eingabefeld bdquoMehr-Linkldquo

nutzen

Beide Bloumlcke innerhalb eines Doppelcontainers lassen sich individuell auf die uumlbliche Weise (weiszlig

hellblau sandfarben) hinterlegen

S e i t e | 30

68 Flickr nutzen PHP-Skript

Das Modul bdquoFlickr nutzenldquo ermoumlglicht es Ihnen im Sinne einer crossmedialen Verwertung Bilder aus

Ihrem Flickr-Account in Ihre IMPERIA-Webseite einzubinden Fuumlr diese Funktion benoumltigen Sie einen

sogenannten API-Key den Sie in Ihrem Flick-Auftritt unter

bull httpwwwflickrcomservicesappscreateapply

erzeugen lassen koumlnnen Tragen Sie dann diesen Key in die entsprechende Eingabemaske des Moduls

ein Anschlieszligend haben Sie die Moumlglichkeit ganze Fotosets (Alben) oder Einzelbilder einzubinden

Photoset anzeigen

S e i t e | 31

Zum Anzeigen von Photosets wird die entsprechende Photoset-ID ins Modul eingetragen Diese ID ist

Teil der Link-Adresse des entsprechenden Albums bei Flickr (die erscheint wenn Sie das Album

angeklickt haben) Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAMEsets12340954909

Die Photoset-ID verbirgt sich hinter den Ziffern am Ende der URL Sie koumlnnen auswaumlhlen wie viele

Fotos auf einer Webseite erscheinen sollen Dafuumlr uumlbernimmt das Modul die Bilder in der

quadratischen Aufloumlsung von Flickr also in einer Groumlszlige von 75 x 75 Pixeln Reicht der Platz dafuumlr

nicht aus wird eine zusaumltzliche Blaumltterfunktion angeboten Photoset- und Bild-Beschreibungen

koumlnnen aus dem Flickr-Account automatisch uumlbernommen werden wenn die entsprechenden

Optionen mit einem Haken aktiviert wurden

Einzelbild anzeigen

Um ein einzelnes Bild anzuzeigen benoumltigen Sie die entsprechen Flickr-Foto-ID Diese verbirgt sich

hinter der ersten Zahl in der Link-Adresse des entsprechenden Bildes Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAME5841603851inset-72157626981464896

Ein Einzelbild kann in einer hohen oder einer geringen Aufloumlsung eingebunden werden Bei einer

zweispaltig angelegten Webseite wird das Bild in der linken Inhaltsspalte auf eine Breite von 480

Pixel bei einer einspaltig angelegten Webseite auf eine Breite von 721 Pixel skaliert

69 Formulare

Mit IMPERIA haben Sie die Moumlglichkeit Formulare auf Ihrer Webseite zu platzieren In der

Bearbeitungsebene Ihrer Seite finden Sie im Bereich bdquoNeues Modulldquo den Menupunkt UDE ndash

Formular oumlffnen

Nach dem Festlegen der Hintergrundfarbe koumlnnen Sie im Bereich bdquoLegendeldquo den Titel Ihres

Formulars waumlhlen Wenn Sie die Funktion bdquoMailer-Funktionalitaumltldquo aktivieren koumlnnen Sie die Adresse

Ihres Mailscripts eingeben Anderenfalls belassen Sie es bitte beim Vorgabewert

Im Bereich bdquoNexturlldquo kann angegeben werden welche Seite nach dem Abschicken des Formulars

aufgerufen werden soll Daruumlber hinaus werden der Titel der E-Mail die Absender-Adresse sowie die

Empfaumlnger-Adresse definiert Optional kann eine Bestaumltigungs-E-Mail mit frei waumlhlbarem Text

versendet werden

S e i t e | 32

Um dem erstellten Formular Eingabefelder hinzuzufuumlgen ist das Modul bdquoUDE Formular Elementldquo zu

waumlhlen Waumlhlen Sie das Element bdquoTextldquo um ein Eingabefeld zu erzeugen Die Option bdquoBezeichnerldquo

beschreibt den sichtbaren Text im fertigen Formular zum Beispiel bdquoIhr Nameldquo Weitergehend koumlnnen

Sie die zulaumlssigen Inhalte der Nutzereingaben definieren sowie markieren ob das Element ein

Pflichtfeld sein soll

S e i t e | 33

Um ein Texteingabefeld innerhalb des Formulars zu erzeugen waumlhlen Sie das Element bdquoTextarealdquo

Sie koumlnnen die Groumlszlige des Textfeldes definieren (Zeilen x Spalten) und optional erneut eine Pruumlfung

zulaumlssiger Nutzereingaben aktivieren Weiterhin koumlnnen Sie waumlhlen ob der eingegebene Wert des

Formularelements in die Datenbank eingetragen werden soll Wenn Sie fuumlr Ihre Formulare auf eine

Datenbank zuruumlckgreifen moumlchten koumlnnen Sie sich hier informieren httpwwwuni-

duedezimserviceshomepagesmysqlshtml

Insgesamt stehen folgende Elemente zur Verfuumlgung

bull Checkbox Hidden Password Select Anfang Select Option einfuumlgen Select Ende Submit

Text Datum Textarea Radio Reset Leerzeile Kommentarzeile Neuer Abschnitt mit

Bezeichner sowie Datei-Upload

Ein Formular muss mit dem Modul bdquoUDE Formular schlieszligenldquo abgeschlossen werden An dieser

Stelle koumlnnen Sie einen Send-Button hinzufuumlgen dessen Name frei waumlhlbar ist Der eingegebene Text

wird als Beschriftung des Buttons angezeigt Erst durch das Hinzufuumlgen dieses Moduls wird das

Formular auf Ihrer Seite sichtbar und kann nach der Veroumlffentlichung genutzt werden

S e i t e | 34

610 Google-Maps (v30) PHP-Skript HTML-Web-Seite

Dieses Modul bringt eine Grafik von Google-Maps auf die Webseite entweder in Kartenoptik oder als

Satellitenbild Sie haben zwei Moumlglichkeiten eine solche zu generieren Uumlber die konkreten GPS-

Koordinaten oder durch das Angeben einer Adresse (zB Forsthausweg 2 47057 Duisburg) Sie

koumlnnen aus zwoumllf Vergroumlszligerungsstufen fuumlr den gewuumlnschten Ausschnitt zwei Kartengroumlszligen und

zwei Kartenformaten waumlhlen

S e i t e | 35

Kartengroumlszlige bdquogroszligldquo skaliert die Graphik auf 480 Pixel Breite auf einer zweispaltigen Seite bzw auf

721 Pixel auf einer einspaltigen Seite Die Option bdquokleinldquo verringert die Breite auf etwa die Haumllfte Die

beiden Optionen beim Kartenformat beeinflussen die Houmlhe der Grafik

S e i t e | 36

611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite

Das Modul Image-Gallery ermoumlglicht die Integration einer komfortablen Bildergallerie uumlber IMPERIA

Per Klick auf bdquoNeues Modulldquo -gt bdquoUDE Image-Gallery (v21)ldquo kann die entsprechende Gallerie an der

gewuumlnschten Position eingefuumlgt werden Generell sollten nur Bilder verwendet werden die

entweder auf 640 x 480 Pixel oder maximal auf 900 x 600 Pixel skaliert sind Aufgrund einer hohen

Dateigroumlszlige sollten Bilder einer Digitalkamera vor dem Upload komprimiert werden

Innerhalb des Moduls kann zunaumlchst die Hintergrundfarbe der Gallerie wahlweise zwischen Beige

Blau und Weiszlig eingestellt werden Um die Gallerie mit Bildern zu fuumlllen ist das entsprechende

Verzeichnis der Mediendatenbank anzugeben Aufgrund der geaumlnderten Syntax wird das Verzeichnis

ohne images angegeben Die Suchmaske fuumlr die Bilderauswahl deklariert die Dateiformate die mit

einbezogen werden sollen Schlieszliglich koumlnnen Sie die Bilder alphabetisch sortiert anzeigen lassen

sowie einen kleinen und einen groszligen Titel fuumlr Ihre Bildergallerie vergeben

Grundsaumltzlich ist es empfehlenswert groumlszligere Bildmengen auf mehrere Seiten zu verteilen um

einerseits die Darstellung auf mobilen Geraumlten zu vereinfachen und andererseits geringeren

Bandbreiten Rechnung zu tragen

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 4: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 3

2 Schluumlsselelemente des Corporate Design

Das Webdesign der Universitaumlt greift an praumlgnanter Stelle und auf den ersten Blick wahrnehmbar die

Schluumlsselelemente des neuen Hochschuldesigns auf Den Webauftritt praumlgen

bull die Wortmarke das Logo mit Claim

bull der Himmel als hervorstechendes bdquoKey-Visualldquo

bull die vier abgestimmten UDE-Grundfarben

bull (die im Netz genutzte Schriftart)

Die UDE-Wortmarke mit dem Claim bdquoOffen im Denkenldquo (wahlweise im Englischen bdquoOpen mindedldquo) ist

der wichtigste Bestandteil der Corporate Identity der Hochschule Der Claim unterstreicht auf

emotionale Art dass die Universitaumlt Duisburg-Essen keine geschlossene lebensferne Gesellschaft ist

sondern genau das Gegenteil Sie ist anfassbar nahe dran an der Gesellschaft nah an den Menschen

und deren individuellen Faumlhigkeiten

Die Konstellation aus Wortmarke und Claim ist verbindlich zu verwenden Die Wortmarke wird

nicht ohne Claim eingesetzt

Der Claim hat den Abstand eines Versals zum Logo zur Wortmarke Die Konstellation bdquoWortmarke

und Claimldquo ist fix und darf in sich nicht veraumlndert werden

Der Himmel als Schluumlsselreiz (Key-Visual) steht als Metapher fuumlr bdquoOffen im Denkenldquo und damit fuumlr

die Universitaumlt selbst Die UDE setzt keine Barrieren fuumlr Forschung und Lehre keine Grenzen im

Denken Als aufmerksamkeitsstarkes Irritationselement taucht der Himmel auszligerdem auch dort auf

wo er normalerweise nicht ist Collagen spielen mit Gewohntem und Ungewoumlhnlichem Szenen die

eigentlich jeder kennt demonstrieren auf ungewoumlhnliche Art und Weise wie die UDE bdquoticktldquo

S e i t e | 4

Das Himmel-Motiv uumlberfuumlhrt die seit der Gruumlndung 2003 entwickelte blau-weiszlige Farbenwelt der

Hochschule in einen neuen Layout-Kontext Im weiterentwickelten Design existieren vier

aufeinander abgestimmte Farben

bull Blau gemaumlszlig Hexadezimalcode 004c93

bull Beige gemaumlszlig Hexadezimalcode efe4bf

bull Hellblau gemaumlszlig Hexadezimalcode dfe4f2

bull Schwarz gemaumlszlig Hexadezimalcode 000000

bull (Graue Elemente erscheinen gemaumlszlig Hexadezimalcode 58585a)

S e i t e | 5

Saumlmtliche Farben werden vom System automatisch gesetzt Sie koumlnnen jedoch im Inhaltsbereich

Ihrer Webseiten Module unterschiedlich einfaumlrben Sie haben dort die Wahl zwischen weiszliger

(Standardeinstellung) sandfarbener oder hellblauer Hinterlegung

Als Schriftart kommt auf der UDE-Website ausschlieszliglich Arial zum Einsatz Die Basisschriftgroumlszlige ist

12px die uumlberwiegende Schriftfarbe Schwarz

Weiterfuumlhrende Informationen amp Downloads

bull UDE-Markenhandbuch

httpwwwuni-

duedeimperiamdcontentdokumenteoffen_im_denkenude_markenhandbuchpdf

bull Wortmarke Logo mit Claim in unterschiedlichen Formaten

httpwwwuni-duedeoffen-im-denkenlogodownloadphp

bull Schmuckelemente (Grafiken Schriften)

httpwwwuni-duedeoffen-im-denkenschmuckelementephp

3 Technische Plattform Zugang zum CMS

Die UDE betreibt einen zentralen Webserver der von allen Einrichtungen und Mitgliedern der

Universitaumlt genutzt werden kann Fuumlr den Server wird eine hohe Erreichbarkeit auch unter Last

gewaumlhrleistet Der Webserver wird uumlber das Content Management System (CMS) bdquoIMPERIAldquo das ndash

nach einer landesweiten Ausschreibung ndash von vielen Hochschulen benutzt wird mit Webseiten

befuumlllt

Einen Zugang zum CMS IMPERIA erhalten Sie uumlber das Zentrum fuumlr Informations- und Mediendienste

(ZIM) Das ZIM bietet neben dem technischen Support auch Einfuumlhrungskurse in die Erstellung von

Webseiten

S e i t e | 6

Weitere Informationen

bull Zugang zum UDE-System IMPERIA-Rubriken Web-Verzeichnisse

Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

bull Anwenderschulung

Hartmut Prause (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0201) 183-4115 hartmutprauseuni-duede

bull Termine der Einfuumlhrungskurse

httpwwwuni-duedezimservicesweiterbildungkurse

Neben IMPERIA wird an Einrichtungen der UDE auch mit anderen Content Management Systemen

gearbeitet die spezifische Eigenschaften aufweisen Genutzt werden unter anderen die Open Source

Produkte Typo3 Drupal oder Joomla Mit welchem System die jeweilige UDE-Einrichtung arbeitet ist

dezentral zu entscheiden Gleichwohl sollte auch bei einer Entscheidung fuumlr ein alternatives System

bedacht werden wie die Ausfallsicherheit die Kontinuitaumlt der Weiterentwicklung sowie die

Darstellung im Design der Hochschule gewaumlhrleistet werden koumlnnen

S e i t e | 7

4 Grundsaumltze der Webseitengestaltung Seitenaufbau

Um der sich staumlndig veraumlndernden Landschaft an Ausgabegeraumlten (Desktops Netbooks Tablets

Smartphoneshellip) Rechnung zu tragen passt sich das neue (adaptive) Layout der UDE-Website

dynamisch an unterschiedliche Bildschirm- bzw Browserfenstergroumlszligen an Die bdquonormaleldquo

Desktopansicht aumlndert so auf einem kleineren Bildschirm wie beispielsweise einem aumllteren iPad im

Querformat die Breite so dass horizontales Scrollen vermieden wird Bei kleineren Bildschirmen bricht

die rechte Spalte um und wird unterhalb des Hauptinhaltes angezeigt Auf Mobiltelefonen schlieszliglich

entfaumlllt die Spaltenanordnung komplett und saumlmtliche Inhalte werden untereinander angezeigt

Dieses Verhalten ist dadurch moumlglich dass alle Groumlszligenangaben im System nur relativ angegeben

sind Verwenden Sie daher keine eigenen fixen Groumlszligenangaben die diese Vorlagen uumlberschreiben

In der bdquonormalenldquo Desktopansicht folgt der Webseitenaufbau im Internetangebot der Universitaumlt

einem festen Raster dass Ihnen bei Verwendung des CMS IMPERIA automatisch vorgegeben wird

bull Die Webseite der UDE liegt als weiszliges bdquoBlattldquo zentriert auf einem sandfarbenen Hintergrund

Der Container der dieses bdquoBlattldquo optisch darstellt beginnt in einem Abstand von 15 Pixeln

S e i t e | 8

zum oberen Seitenrand und setzt immer am unteren Seitenrand auf Der linke der obere und

der rechte Containerrand erzeugen einen leichten Schatteneffekt

bull Links in der Kopfzeile begruumlszligt immer an erster Stelle der Schriftzug bdquoUNIVERSITAumlT

DUISBURG-ESSENldquo die Seitenbesucher Auf jeder Seite der Universitaumlt genuumlgt ein Mausklick

auf den Schriftzug um zuruumlck auf die UDE-Startseite zu gelangen

bull Die gruppenspezifische Aufarbeitung von Informationen gilt inzwischen ndash zu Recht ndash als ein

Qualitaumltsmerkmal von Internetseiten Jede UDE-Webseite erhaumllt deshalb in der Kopfzeile

eine Zielgruppennavigation In Bereichen die keine eigene Zielgruppennavigation erstellen

erscheinen dort die entsprechenden Inhalte des zentralen Angebotes der Universitaumlt

bull Unterhalb der Kopfzeile erscheint auf jeder Seite der Universitaumlt eine Impressionsgrafik Das

System IMPERIA gibt Ihnen diese Grafik vor Sie greift mit ihrem Motiv (Himmel und Wolken)

das beherrschende Key-Visual des Corporate Design der Hochschule auf Zentral am unteren

Rand des Bildes wird vor einem uumlberlagernden weiszligen Kasten der Titel der jeweiligen

Webseite angezeigt Die Houmlhe der Impressionsgrafik veraumlndert sich wenn der eingefuumlgte

Seitentitel mehrzeilig wird

bull Innerhalb der Impressionsgrafik koumlnnen Sie auf der linken Seite eine ein- oder zweizeilige

Bezeichnung Ihres Bereiches einfuumlgen Diese individuelle Organisationsangabe sitzt so im

Gesamtlayout direkt unter dem Schriftzug bdquoUNIVERSITAumlT DUISBURG-ESSENldquo und gibt den

Seitenbesuchern auf den ersten Blick die Orientierung daruumlber wo sie sich eigentlich gerade

befinden Sie koumlnnen sie individuell verlinken

bull Das Universitaumlts-Logo sitzt rechtsbuumlndig in der Impressionsgrafik Es ist so einzurichten dass

ein Mausklick genuumlgt um auf die UDE-Homepage zu gelangen Das Logo darf nicht ohne den

Claim bdquoOffen im Denkenldquo (wahlweise im Englischen bdquoOpen mindedldquo) verwendet werden

bull In der linken Spalte kann der jeweilige Seitenanbieter eine frei editierbare Navigation

einbinden Die Navigation umfasst maximal zwei Ebenen Durch die bewusst reduzierte

Menuumlstruktur signalisiert die Internetpraumlsenz Klarheit und Transparenz Die

Hauptmenuumleintraumlge sind in Groszligbuchstaben (Versalien) ausgefuumlhrt Eintraumlge von

Untermenuumls sind eingeruumlckt und in Normalschrift formatiert Auf beiden Ebenen wird die

Schrift beim Uumlberfahren mit der Maus bzw beim Antabben auf Touch-Screens weiszlig vor

blauem Hintergrund Gleiches gilt fuumlr den jeweils aktiven Menuumlpunkt (Im Jahr 2013 wird auf

jeder mit dem CMS IMPERIA im aktuellen Template erzeugten Webseite uumlber der

Hauptnavigation das Jubilaumlumsfaumlhnchen zum zehnjaumlhrigen Bestehen der Universitaumlt

eingeblendet verlinkt auf httpwwwuni-duede10jahre)

bull Unterhalb der eigenen Navigation wird immer die zentrale Suche (Volltextsuche

Personensuche) der Universitaumlt verlinkt An dieser Stelle koumlnnen Sie zudem wahlweise (und

S e i t e | 9

auf jeder Seite einzeln) einen Link auf eine individuelle A-Z-Seite undoder auf einen eigenen

Intranet-Bereich sowie mit Landesfahnen gekennzeichnete Hinweise auf parallel angebotene

fremdsprachige Inhalte einfuumlgen

bull Zwischen Seitentitel und ndashinhalt koumlnnen Sie auf jeder Seite eine individuelle

Brotkrumennavigation editieren die den Nutzern eine schnelle Uumlbersicht daruumlber

ermoumlglicht wie sie auf die gerade aufgerufene Webseite gelangt sind

bull Der eigentliche Inhaltsbereich (Content) der Webseite kann bei der Seitenerzeugung ein-

oder zweispaltig angelegt werden Der Wechsel zwischen Ein- und Zweispaltigkeit einer Seite

ist uumlber den IMPERIA -Workflow jederzeit moumlglich Bei einem zweispaltigen Contentbereich

ist die schmale rechte Spalte fuumlr Zusatzinformationen vorgesehen die nicht direkt zum

Hauptinhalt gehoumlren bspw Veranstaltungskalender Banner oder RSS-Feeds Fuumlr die

Gestaltung des Inhalts steht eine groszlige Anzahl statischer wie dynamischer Elemente

(Module) zur Verfuumlgung Die einzelnen Module des Inhaltsbereiches koumlnnen unterschiedlich

eingefaumlrbt werden Sie haben die Wahl zwischen weiszliger (Standardeinstellung) sandfarbener

oder hellblauer Hinterlegung

bull In der Fuszligzeile angedockt an den unteren Seitenrand erscheint auf allen Seiten der

Hochschule ein Link auf das zentrale UDE-Impressum Wahlweise (und auf jeder Seite

einzeln) koumlnnen Sie einen Kontakt-Link einfuumlgen

bull Den Abschluss der Webseite bildet die E-Mail-Adresse des zustaumlndigen technischen

Seitenredakteurs die fuumlr Ruumlckfragen oder fuumlr redaktionelle Hinweise genutzt werden kann

Dieses Feld ist individuell beschreibbar ndash sollte jedoch niemals leer und immer auf dem

aktuellen Stand sein Hierfuumlr eignen sich Funktions-E-Mail-Adressen besser als Ihr

persoumlnlicher Account

5 Bestandteile von Webseiten

Um eine Webseite in der Internetpraumlsenz der Universitaumlt vollstaumlndig zu praumlsentieren benoumltigen Sie

(solange Sie mit dem CMS IMPERIA arbeiten) vier Elemente von denen Sie jedoch drei Elemente nur

einmal fuumlr Ihren gesamten Webbereich anlegen muumlssen und danach zentral pflegen koumlnnen

Eine Webseite setzt sich zusammen aus

bull Einer eigenen Organisationsbezeichnung Ihres Bereiches

bull Einer individuellen Zielgruppennavigation In Bereichen die keine eigene

Zielgruppennavigation erstellen erscheinen dort die entsprechenden Inhalte des zentralen

Angebotes der Universitaumlt

S e i t e | 10

bull Einer Navigation Sie koumlnnen in Ihrem Webbereich auch eine Vielzahl unterschiedlicher

Navigationen erstellen und diese je nach Bedarf einbinden

bull Der Seite (dem Dokument) selbst in der Sie Ihren Inhalt und Funktionen bearbeiten und die

vorherigen Elemente einfuumlgen koumlnnen

51 Die Organisationsbezeichnung

Die individuelle Bezeichnung Ihres Bereiches (Organisationsbezeichnung) erscheint auf Ihren

Webseiten links oben innerhalb der Impressionsgrafik direkt unter dem Schriftzug bdquoUNIVERSITAumlT

DUISBURG-ESSENldquo

Organisationsbezeichnungen erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

Sie koumlnnen Organisationsbezeichnungen in der Bearbeitungsebene ein- oder zweizeilig gestalten

S e i t e | 11

bull Der Eintrag in der ersten Zeile (bdquoOrganisationsbezeichnungldquo) erscheint groumlszliger und in weiszliger

fett-gesetzter Schrift

bull Ein Eintrag in der zweiten Zeile (bdquoZusatzldquo) erscheint in weiszliger normal gesetzter Schrift

Unter bdquoVerweis zur Organisationseinheit (URL)ldquo koumlnnen Sie das Sprungziel der

Organisationsbezeichnung bestimmen Tragen Sie diese Verknuumlpfung bitte als relativen Link ohne

Verweis auf den Webserver der Universitaumlt ein

bull Beispiel ihrverzeichnis anstatt httpwwwuni-duedeihrverzeichnis

Eine spaumltere Bearbeitung der Organisationsbezeichnung ist im CMS IMPERIA nicht uumlber das Tool

bdquoQuickEditldquo moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente

bearbeitenldquo im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichnisorganisation_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere

Organisationsbezeichnungen im selben Verzeichnis erstellen diesen einen jeweils moumlglichst

aussagekraumlftigen Dateititel zu geben

S e i t e | 12

52 Die Zielgruppennavigation

Eine individuelle Zielgruppennavigation in der Kopfzeile Ihrer Webseite erstellen Sie uumlber das

IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

Die editierte und veroumlffentlichte Zielgruppennavigation erscheint automatisch auf allen Seiten Ihres

Verzeichnisses

Tragen Sie bitte auch dort die Verknuumlpfungen als relative Links ohne Verweis auf den Webserver der

Universitaumlt ein Verwenden Sie dieses Instrument auszligerdem bitte nicht als moumlgliche zusaumltzliche

Quernavigation sondern ausschlieszliglich als Hilfe und zur Verlinkung gruppenspezifischer

Informationsaufarbeitung

Auch die spaumltere Bearbeitung der Zielgruppennavigation ist im CMS IMPERIA nicht uumlber das Tool

bdquoQuickEditldquo moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente

bearbeitenldquo im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Zielgruppennavigation lautet

ihrverzeichnistargetsshtml

S e i t e | 13

Beachten Sie beim Import bitte Folgendes Anders als seit Beginn des Wintersemesters 2007

gehandhabt kann mit dem UDE-Webrelaunch im Oktober 2011 pro Verzeichnis nur noch eine

anstelle von zwei Zielgruppennavigationen erstellt werden die zudem automatisch in Ihrer Webseite

eingesetzt wird In Verzeichnissen die zwischen 2007 und 2011 angelegt wurden existiert oft

(zusaumltzlich oder ausschlieszliglich) eine sogenannte bdquoerweiterte Zielgruppennavigationldquo

(ihrverzeichnisetargetsshtml) Der Webserver der Universitaumlt sucht bei der Ausgabe Ihrer

Internetseiten im ersten Schritt nach der Datei bdquotargetsshtmlldquo im zweiten Schritt nach der Datei

bdquoetargetsshtmlldquo in Ihrem Verzeichnis und gibt die Zielgruppennavigation dieser Prioritaumlt nach aus

Fehlen beide Dateien so erscheinen die entsprechenden Inhalte des zentralen Angebotes der

Universitaumlt

53 Die Navigation

Navigationen in der linken Spalte Ihrer Webseite sind maximal zwei Ebenen tief

bull In der ersten Ebene ist die Schrift in Versalien (Groszligbuchstaben) gesetzt Schreiben Sie Ihre

Links bitte dennoch bdquonormalldquo Die Transformation in Groszligbuchstaben erfolgt automatisch

durch das System Die Navigationspunkte der ersten Ebene sind mit einem blauen Rechteck

versehen das am linken Seitenrand anliegt

bull Die zweite Navigationsebene erscheint in der Ausgabe nach rechts geruumlckt und regulaumlr in

Groszlig- und Kleinschreibung gesetzt

Links in Navigationen veraumlndern sich beim Uumlberfahren mit der Maus bzw beim Antabben auf

Touchpads Die Schrift erscheint dann weiszlig auf einem blauen Hintergrund Das Gleiche gilt fuumlr den

jeweils aktiven Menuumlpunkt Dieser ist in der Navigation dauerhaft weiszlig mit blauer Hinterlegung

Navigationen erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 14

Zum Aufbau Ihrer Navigation stehen Ihnen die Module bdquoNavigationslinkldquo und

bdquoNavigationsuntermenuumlldquo zur Verfuumlgung Ein Navigationslink erscheint einzeln auf der ersten Ebene

versehen mit einem vorgelagerten blauen Rechteck Mit dem Navigationsuntermenuuml koumlnnen Sie

Menuumlpunkte erzeugen die neben dieser ersten Position uumlber eine zweite eingeruumlckte Ebene

verfuumlgen Dort lassen sich beliebig viele Unterpunkte einsetzen Je nachdem ob Sie den

uumlbergeordneten Eintrag im Navigationsuntermenuuml mit einer Zieladresse (URL) versehen erscheint

dieser verlinkt oder als einfache Uumlberschrift uumlber die nachgelagerten Inhaltspunkte

Selbstverstaumlndlich lassen sich die einzelnen Einheiten in ihrer Position jederzeit verschieben Tragen

Sie interne Links in Ihren Navigationen bitte als relative Verknuumlpfungen ohne Verweis auf den

Webserver der Universitaumlt ein

Editierte und veroumlffentlichte Navigation erscheinen innerhalb der Rubrik in der sie angelegt wurden

automatisch zur Auswahl im linken Bereich der Bearbeitungsebene Ihrer Webseite

Die spaumltere Bearbeitung von Navigationen ist im CMS IMPERIA auf zwei Wegen moumlglich Die

entsprechende Datei kann zum einen uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo im

IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Navigationen folgt folgendem Muster

ihrverzeichnisnav_12345shtml

S e i t e | 15

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Navigationen im selben

Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

Zum anderen koumlnnen Sie auch aus der Bearbeitungsebene einer Webseite heraus dort ausgewaumlhlte

Navigationen aufrufen und editieren Beachten Sie jedoch dass nach dem Speichern der

bearbeiteten Navigation sowohl die Navigationsdatei als auch die Datei der Ursprungsseite auf Ihrem

Schreibtisch liegen

6 Webseiten gestalten

Fuumlr die Gestaltung Ihres Inhalts steht Ihnen eine groszlige Anzahl statischer wie dynamischer Elemente

(Module) zur Verfuumlgung Welche Elemente Sie im Einzelnen nutzen koumlnnen haumlngt davon ab welchen

Dateityp Sie bei der Dokumentenerzeugung fuumlr Ihre Webseite waumlhlen Das Content Management

System der Hochschule bietet Ihnen die Moumlglichkeit Ihr Dokument als HTML-Web-Seite oder als

PHP-Skript zu erzeugen Beachten Sie bitte von Anfang an dass diese Auswahl Einfluss auf die URL

(Internetadresse) der jeweiligen Seite hat Bei einer nachtraumlglichen Aumlnderung aumlndert sich auch die

Internetadresse unter der Ihre Seite im Netz zu finden ist Sie muumlssen dann eventuell Verlinkungen

an vielen Stellen aumlndern

bull Internetadresse einer HTML-Web-Seite wwwuni-duedebereichihreseiteshtml

bull Internetadresse eines PHP-Skripts wwwuni-duedebereichihreseitephp

Je nachdem ob Sie Ihr Dokument als HTML-Web-Seite oder als PHP-Skript erzeugen koumlnnen Sie

folgende Elemente nutzen

Linke Spalte des Inhaltsbereiches

bull (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

bull A-Z verwalten PHP-Skript HTML-Web-Seite

bull Code editieren PHP-Skript HTML-Web-Seite

bull Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

bull DBAdmin PHP-Skript

bull Doppelcontainer PHP-Skript HTML-Web-Seite

bull Flickr nutzen PHP-Skript

bull Formular schlieszligen PHP-Skript

bull Formular oumlffnen PHP-Skript

S e i t e | 16

bull Formular Element PHP-Skript

bull Formulareingabe in DB speichern PHP-Skript

bull Google-Maps (v30) PHP-Skript HTML-Web-Seite

bull Image-Gallery (v21) PHP-Skript HTML-Web-Seite

bull Mailinglisten PHP-Skript

bull Mitarbeiter-Liste PHP-Skript

bull Mitarbeiter-Publikationsliste PHP-Skript

bull Mitarbeiter-Seite PHP-Skript

bull Randlose Grafik PHP-Skript HTML-Web-Seite

bull RSS-Feed-Administration PHP-Skript

bull RSS-Feed-Agent PHP-Skript

bull Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

bull Veranstaltungskalender Kalendermodul PHP-Skript

bull Veranstaltungskalender Veranstaltungsmodul PHP-Skript

Rechte Spalte des Inhaltsbereiches

bull (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

bull Code editieren PHP-Skript HTML-Web-Seite

bull Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

bull Flickr nutzen PHP-Skript

bull Mitarbeiter-Seite PHP-Skript

bull Randlose Grafik PHP-Skript HTML-Web-Seite

bull RSS-Feed-Agent PHP-Skript

bull Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

bull Veranstaltungskalender Kalendermodul PHP-Skript

Beim Erstellen Ihrer Webseite koumlnnen Sie diese einzelnen Module nach Bedarf (auch mehrfach)

erzeugen und in der gewuumlnschten Reihenfolge platzieren wobei die gewaumlhlte Reihenfolge jederzeit

veraumlnderbar ist Mit wenigen Ausnahmen lassen sich die einzelnen Einheiten weiszlig blau oder beige

einfaumlrben (Ausnahme randlose Grafik) Sie werden vom System dann als voneinander abgesetzte

Bloumlcke ausgegeben

Um innerhalb eines Dokuments zu navigieren koumlnnen Sie wenn noumltig die einzelnen Elemente auch

mit einem Link-Anker versehen (Ausnahmen randlose Grafik Mitarbeiter-Liste -Publikationsliste

und ndashSeite Veranstaltungskalender Veranstaltungs- sowie Kalendermodul) Den Ankernamen

S e i t e | 17

koumlnnen Sie frei vergeben er darf jedoch keine Leer- oder Sonderzeichen enthalten Das erste Zeichen

muss auszligerdem ein Buchstabe sein

61 Uumlber allem Die Brotkrumennavigation

Zwischen Seitentitel und ndashinhalt koumlnnen Sie auf jeder Seite eine individuelle Brotkrumennavigation

editieren die den Nutzern eine schnelle Uumlbersicht daruumlber ermoumlglicht wie sie auf die gerade

aufgerufene Webseite gelangt sind Verwenden Sie dieses Instrument bitte nicht als moumlgliche

zusaumltzliche Quernavigation sondern ausschlieszliglich als Hilfe im vorgesehenen Sinne

Der letzte Eintrag der Brotkrumennavigation der uumlblicherweise die aktuell aufgerufene Seite

benennt sollte nicht mit einer Zieladresse (URL) versehen werden Der Eintrag erscheint dann als

regulaumlr schwarz formatierter Text nicht als blau ausgezeichneter Link

S e i t e | 18

62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

Mit dem TinyMCE-Texteditor stellt Ihnen das Content Management System der UDE einen auf

JavaScript basierenden WYSIWYG-Editor (bdquoWhat You See Is What You Getldquo) zur Verfuumlgung Mit Hilfe

dieses Moduls ist es moumlglich ohne HTML- oder weitergehende Programmierkenntnisse Beitraumlge zu

verfassen und Seiten zu formatieren Die Bedienung mittels einer Textbox orientiert sich stark an

gaumlngiger und bekannter Textverarbeitungs-Software

Texte formatieren

Selbstverstaumlndlich bietet der TinyMCE-Editor die uumlblichen Arten Texte zu formatieren Neben den

Befehlen fett (bdquoBoldldquo) kursiv (bdquoItalicldquo) unterstrichen (bdquoUnderlineldquo) sowie hoch- bzw tiefgestellt

bietet Ihnen das System uumlber das Ω-Symbol eine breite Palette an Sonderzeichen uumlber die

Listenfunktion die Erstellung einfacher oder nummerierter Aufzaumlhlungslisten an Mittels einer Select-

S e i t e | 19

Box koumlnnen Sie auszligerdem auf im Hochschullayout vorgegebene Uumlberschriftarten (bdquoHeadingsldquo)

zuruumlckgreifen

Als weitere Moumlglichkeiten steht Ihnen frei

bull ein Datum undoder eine Uhrzeit einzufuumlgen

bull Blockzitate zu kennzeichnen oder

bull geschuumltzte Leerzeichen (bdquoNon-breaking Space Characterldquo) zu definieren

bull Das Ankersymbol (bdquoInsertEdit Anchorldquo) erlaubt die Definition von Sprungzielen innerhalb

laumlngerer Texte

Im Notfall hilft Ihnen das Radiergummi-Symbol (bdquoRemove Formatting) saumlmtliche Formatierungen zu

entfernen

Bereits formatierten Text einfuumlgen

Uumlber diese Formatierungsarten hinaus koumlnnen Sie auch bereits vorformatierte Texte aus Ihrer

Textverarbeitung in den Editor kopieren Zum Einfuumlgen nutzen Sie jedoch bitte nicht den einfachen

Copy amp Paste-Befehl sondern die im Modul bereitgestellte Funktion bdquoPaste from Wordldquo (Sie finden

das entsprechende bdquoWldquo-Symbol unter der Texteingabe-Box) ndash und zwar auch dann wenn Ihr

Ursprungstext nicht aus Microsoft Word sondern einer anderen Textverarbeitungssoftware

importiert wird Schriftformatierungen Verlinkungen und Aumlhnliches werden dann 11 uumlbernommen

Achten Sie bitte dennoch darauf dass dieser Funktion Grenzen gesetzt sind und arbeiten Sie mit

moumlglichst einfachen Formatvorlagen

HTML-Ansicht

Fuumlr Redakteure die sich in der Seitenprogrammierung sicherer fuumlhlen als in der Textverarbeitung

haumllt das Modul TinyMCE-Texteditor uumlber den Button bdquoHTMLldquo einen HTML Source Editor bereit mit

dem direkt auf den Quelltext und die Codierung dieses Teils der Webseite zugegriffen werden kann

Diese Funktion eignet sich auszligerdem besonders zur Uumlberpruumlfung und Fehlersuche Zur

Programmierung eigener Funktionen nutzen Sie jedoch bitte das Modul bdquoCode editierenldquo

S e i t e | 20

Links

Die uumlber die Symbole bdquoInsertEdit Linkldquo (Link einfuumlgen oder bearbeiten) in Ihre Texte oder

Aufzaumlhlungslisten eingefuumlgten Hyperlinks formatiert das System selbststaumlndig im fuumlr die UDE

vorgesehehen Layout Tragen Sie Links auf Seiten innerhalb von wwwuni-duede bitte als relative

Verknuumlpfungen ohne Verweis auf den Webserver der Universitaumlt ein also

bull depresse

anstelle von

bull httpwwwuni-duededepresseindexphp

Zeichnen sie auszligerdem Ihre Verlinkungen im Sinne der Barrierefreiheit mit sprechenden Titeln aus

und uumlberlegen Sie sich ob das Sprungziel im selben oder in einem neuen Browserfenster geoumlffnet

werden soll

Uumlber das Symbol bdquoUnlinkldquo entfernen Sie die entsprechende Verlinkung

Bilder

Der TinyMCE-Texteditor bietet Ihnen zwei Moumlglichkeiten Bilder in Ihre Texte einzubinden

S e i t e | 21

bull Uumlber die Funktion bdquoInsertEdit Imageldquo (Icon unter der Texteingabe-Box) koumlnnen Sie den

relativen Pfad auf das entsprechende Bild aus der IMPERIA-Mediendatenbank einfuumlgen

(Formatbeispiel imperiamdimageswebredaktion2013parentservicejpg)

bull Die Funktion bdquoVorschaubild waumlhlenldquo laumlsst Sie direkt auf die IMPERIA-Mediendatenbank

zugreifen und dort die gewuumlnschte Grafik per Klick auswaumlhlen Uumlber die Funktion bdquoVollbild

waumlhlenldquo koumlnnen Sie das Bild optional zu einer groumlszligeren Ansicht verlinken die sich als

bdquoLightboxldquo uumlber der aktiven Webseite oumlffnet Der Befehl bdquoBild zuruumlcksetzenldquo entfernt die

gewaumlhlte Grafik aus Ihrer Webseite

Waumlhrend Sie mittels bdquoInsertEdit Imageldquo die Anzeige-Groumlszlige Ihres Bildes (bis maximal 480 Pixel

Breite) selbst bestimmen koumlnnen werden Grafiken uumlber die Funktion bdquoVorschaubild waumlhlenldquo beim

Einfuumlgen automatisch auf die passende Groumlszlige skaliert (162 Pixel Breite in der linken und 204 Pixel

Breite in der rechten Content-Spalte) In diesem Fall koumlnnen Sie zudem waumlhlen ob der Text an dieser

Stelle das Bild umflieszligt oder aber rechts daneben angezeigt wird Das Vollbild wird bei der Eingabe

nicht skaliert Nutzen Sie daher bitte Bilder mit einer bildschirmtauglichen Groumlszlige (maximal 1024

Pixel)

S e i t e | 22

Tabellen

Uumlber das Icon bdquoInsertEdit Tableldquo fuumlgen Sie an der gewuumlnschten Stelle Tabellen in Ihren Texteditor

ein Unter den Reitern bdquoGeneralldquo und bdquoAdvancedldquo koumlnnen Sie diese Tabellen gemaumlszlig den uumlblichen

HTML-Konventionen erstellen formatieren und bearbeiten

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig gemaumlszlig den Vorgaben der Barrierefreiheit als

solche aus Der Text-Editor stellt Ihnen diese Optionen zur Verfuumlgung

bull Beachten Sie dass die Hintergrundfarbe der Tabellen je nach gewaumlhlter Einfaumlrbung des

Moduls variiert

S e i t e | 23

Texte mit bdquoVerfallsdatumldquo

Grundsaumltzlich steht Ihnen das Modul bdquo(TinyMCE)-Texteditorldquo sowohl auf shtml-Seiten als auch in

php-Skripten zur Verfuumlgung Auf php-Seiten laumlsst sich jedoch eine zusaumltzliche Option nutzen Fuumlr

Texte die nur fuumlr einen gewissen Zeitraum auf Ihrer Webseite erscheinen sollen koumlnnen Sie ein

Start- und Enddatum setzen

63 A-Z verwalten PHP-Skript HTML-Web-Seite

Das Modul bdquoA-Z verwaltenldquo ermoumlglicht den Redakteuren A-Z-Listen relativ einfach zu erzeugen und

zu pflegen

S e i t e | 24

Fuumlr jeden Eintrag in der Stichwortliste muss im Eingabefeld eine einzelne Zeile eingefuumlgt werden Die

Eingabe folgt einem festen Schema

bull Stichwort||URL (Internetadresse)||

oder

bull Stichwort||URL (Internetadresse)||eventuell ein kurzer Beschreibungstext

wobei auf den Beschreibungstext auch verzichtet werden kann Die sogenannten bdquoPipe-Zeichenldquo (||)

dienen als Feldtrenner Sie erzeugen sie uumlber den Tastaturbefehl bdquoAltGr amp das Groumlszligerzeichenldquo

Wahlweise kopieren Sie die entsprechenden Zeichen aus bisherigen Eintraumlgen

Auch hier gilt Tragen Sie interne Links in Ihrer A-Z-Liste bitte als relative Verknuumlpfungen ohne

Verweis auf den Webserver der Universitaumlt ein also

bull Abiturjahrgang 2013||doppelter_abiturjahrgang||

anstelle von

bull Abiturjahrgang 2013||httpwwwuni-duededoppelter_abiturjahrgang||

Externe Links (wie etwa bdquoGlassbooth ||httpwwwglassboothde||ldquo) werden auf der

ausgegebenen Webseite entsprechend gekennzeichnet

S e i t e | 25

Die Eintraumlge im Modul bdquoA-Z verwaltenldquo sortiert das Content Management System automatisch nach

Ziffernreihenfolge bzw dem Alphabet Um die Eintraumlge spaumlter einfach aufzufinden und bearbeiten zu

koumlnnen empfiehlt es sich jedoch bereits im Eingabefeld selbst eine alphabetische Sortierung

vorzunehmen

64 Code editieren PHP-Skript HTML-Web-Seite

Das Modul bdquoCode editierenldquo eroumlffnet Ihnen die Moumlglichkeit in Ihrem Internetauftritt eigene PHP-

oder HTML-Codeschnipsel zu erstellen und zu nutzen oder Programmierungen eigener Funktionen

vorzunehmen

Nutzen Sie dieses Modul bitte nicht um Funktionen zu simulieren die Ihnen das CMS IMPERIA bereits

als vorgefertigte Module zur Verfuumlgung stellt Das freie Code-Eingabefeld ist ebenfalls nicht dazu

S e i t e | 26

vorgesehen auf diesem Wege vom Corporate Design der Universitaumlt abweichende eigene Layouts zu

entwickeln

65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

Uumlber das Modul bdquoCodebaustein einfuumlgenldquo ist es moumlglich vorgefertigte Bloumlcke oder bdquoBauteileldquo in Ihre

Webseite zu integrieren Codebausteine eignen sich dazu bestimmte Informationen die auf vielen

Webseiten wiederkehren an einer Stelle zentral zu pflegen In der Bearbeitungsebene bietet Ihnen

das Modul die in der aktuellen Rubrik vorhandenen Bausteine zur Auswahl an

Codebausteine erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 27

Sie koumlnnen in Codebausteinen wie beim uumlblichen Seitenaufbau gewohnt unterschiedliche Module

kombinieren und positionieren Zur Verfuumlgung stehen die Elemente

bull (TinyMCE)-Texteditor

bull Code editieren

bull die Formularmodule

bull Randlose Grafik

bull RSS-Feed-Agent

bull Tube Audio-VideoPlayer

Eine spaumltere Bearbeitung der Codebausteine ist im CMS IMPERIA nicht uumlber das Tool bdquoQuickEditldquo

moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo

im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichniscode_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Codebausteine im

selben Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

66 DBAdmin PHP-Skript

Mit Hilfe des Moduls bdquoDBAdminldquo lassen sich Datenbank direkt in Tabellenform auf Ihrer Webseite

darstellen Uumlber die Funktion bdquoOptionen anzeigenldquo erhalten Sie zudem die Moumlglichkeit eine

Webseite zur Pflege Ihrer Datenbank zu erstellen Dort koumlnnen Sie die entsprechende Tabelle

editieren d h Eintraumlge einzeln erstellen bearbeiten oder loumlschen

S e i t e | 28

Zur Nutzung dieses Moduls sind folgende Angaben notwendig

bull Datenbank-Server Name oder IP-Adresse des Servers auf dem die anzusprechende

Datenbank liegt (bspw bdquodbuni-duedeldquo)

bull Datenbank-Name

bull Tabellen-Name Name der speziellen Tabelle die innerhalb der Datenbank angesprochen

werden soll

bull Datenbank-Benutzer und Datenbank-Passwort

Datenbanken auf einem UDE-Server koumlnnen Universitaumltsangehoumlrige unter Nutzung ihrer

Hochschulkennung online beim Zentrum fuumlr Informations- und Mediendienste (ZIM) beantragen

unter httpwwwuni-duedezimserviceshomepagesmysqlshtml

67 Doppelcontainer PHP-Skript HTML-Web-Seite

Das Modul bdquoDoppelcontainerldquo ermoumlglicht es Ihnen auf Ihrer Webseite zwei Textebloumlcke (je nach

Wunsch mit oder ohne Bilder) nebeneinander zu setzen

Auf zweispaltig angelegten Webseiten ist die Anlage eines Doppelcontainers nur in der linken Spalte

moumlglich Bilder erscheinen dort in einer Breite von 246 Pixeln Auf einspaltig angelegten Webseiten

werden die einzelnen Bloumlcke (und dementsprechend die verwendeten Bilder) in einer Breite von 366

Pixeln angezeigt Die Bildhoumlhe ist in beiden Faumlllen frei waumlhlbar sollte jedoch in beiden Containern

identisch sein

S e i t e | 29

Zur Texteingabe stehen Ihnen die Optionen bdquoTeaserldquo (mit Zeichenbegrenzung) sowie bdquoStandardldquo

(ohne Zeichenbegrenzung) zur Verfuumlgung Waumlhlen Sie bdquoTeaserldquo so erhalten Sie Platz fuumlr 300 Zeichen

ndash ein Zeichenzaumlhler neben der Texteingabe-Box erleichtert das Mitzaumlhlen Der Text wird gelb

unterlegt wenn er nach dem naumlchsten Leerzeichen abgeschnitten wird Rot erscheint das Textfeld

wenn die Zeichenzahl bereits uumlberschritten wurde

Beachten Sie bitte dass das Modul HTML-Tags (URLs Mailadressen etc) automatisch filtert Sie

werden daher nicht angezeigt Um Ihren Text zu verlinken koumlnnen Sie das Eingabefeld bdquoMehr-Linkldquo

nutzen

Beide Bloumlcke innerhalb eines Doppelcontainers lassen sich individuell auf die uumlbliche Weise (weiszlig

hellblau sandfarben) hinterlegen

S e i t e | 30

68 Flickr nutzen PHP-Skript

Das Modul bdquoFlickr nutzenldquo ermoumlglicht es Ihnen im Sinne einer crossmedialen Verwertung Bilder aus

Ihrem Flickr-Account in Ihre IMPERIA-Webseite einzubinden Fuumlr diese Funktion benoumltigen Sie einen

sogenannten API-Key den Sie in Ihrem Flick-Auftritt unter

bull httpwwwflickrcomservicesappscreateapply

erzeugen lassen koumlnnen Tragen Sie dann diesen Key in die entsprechende Eingabemaske des Moduls

ein Anschlieszligend haben Sie die Moumlglichkeit ganze Fotosets (Alben) oder Einzelbilder einzubinden

Photoset anzeigen

S e i t e | 31

Zum Anzeigen von Photosets wird die entsprechende Photoset-ID ins Modul eingetragen Diese ID ist

Teil der Link-Adresse des entsprechenden Albums bei Flickr (die erscheint wenn Sie das Album

angeklickt haben) Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAMEsets12340954909

Die Photoset-ID verbirgt sich hinter den Ziffern am Ende der URL Sie koumlnnen auswaumlhlen wie viele

Fotos auf einer Webseite erscheinen sollen Dafuumlr uumlbernimmt das Modul die Bilder in der

quadratischen Aufloumlsung von Flickr also in einer Groumlszlige von 75 x 75 Pixeln Reicht der Platz dafuumlr

nicht aus wird eine zusaumltzliche Blaumltterfunktion angeboten Photoset- und Bild-Beschreibungen

koumlnnen aus dem Flickr-Account automatisch uumlbernommen werden wenn die entsprechenden

Optionen mit einem Haken aktiviert wurden

Einzelbild anzeigen

Um ein einzelnes Bild anzuzeigen benoumltigen Sie die entsprechen Flickr-Foto-ID Diese verbirgt sich

hinter der ersten Zahl in der Link-Adresse des entsprechenden Bildes Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAME5841603851inset-72157626981464896

Ein Einzelbild kann in einer hohen oder einer geringen Aufloumlsung eingebunden werden Bei einer

zweispaltig angelegten Webseite wird das Bild in der linken Inhaltsspalte auf eine Breite von 480

Pixel bei einer einspaltig angelegten Webseite auf eine Breite von 721 Pixel skaliert

69 Formulare

Mit IMPERIA haben Sie die Moumlglichkeit Formulare auf Ihrer Webseite zu platzieren In der

Bearbeitungsebene Ihrer Seite finden Sie im Bereich bdquoNeues Modulldquo den Menupunkt UDE ndash

Formular oumlffnen

Nach dem Festlegen der Hintergrundfarbe koumlnnen Sie im Bereich bdquoLegendeldquo den Titel Ihres

Formulars waumlhlen Wenn Sie die Funktion bdquoMailer-Funktionalitaumltldquo aktivieren koumlnnen Sie die Adresse

Ihres Mailscripts eingeben Anderenfalls belassen Sie es bitte beim Vorgabewert

Im Bereich bdquoNexturlldquo kann angegeben werden welche Seite nach dem Abschicken des Formulars

aufgerufen werden soll Daruumlber hinaus werden der Titel der E-Mail die Absender-Adresse sowie die

Empfaumlnger-Adresse definiert Optional kann eine Bestaumltigungs-E-Mail mit frei waumlhlbarem Text

versendet werden

S e i t e | 32

Um dem erstellten Formular Eingabefelder hinzuzufuumlgen ist das Modul bdquoUDE Formular Elementldquo zu

waumlhlen Waumlhlen Sie das Element bdquoTextldquo um ein Eingabefeld zu erzeugen Die Option bdquoBezeichnerldquo

beschreibt den sichtbaren Text im fertigen Formular zum Beispiel bdquoIhr Nameldquo Weitergehend koumlnnen

Sie die zulaumlssigen Inhalte der Nutzereingaben definieren sowie markieren ob das Element ein

Pflichtfeld sein soll

S e i t e | 33

Um ein Texteingabefeld innerhalb des Formulars zu erzeugen waumlhlen Sie das Element bdquoTextarealdquo

Sie koumlnnen die Groumlszlige des Textfeldes definieren (Zeilen x Spalten) und optional erneut eine Pruumlfung

zulaumlssiger Nutzereingaben aktivieren Weiterhin koumlnnen Sie waumlhlen ob der eingegebene Wert des

Formularelements in die Datenbank eingetragen werden soll Wenn Sie fuumlr Ihre Formulare auf eine

Datenbank zuruumlckgreifen moumlchten koumlnnen Sie sich hier informieren httpwwwuni-

duedezimserviceshomepagesmysqlshtml

Insgesamt stehen folgende Elemente zur Verfuumlgung

bull Checkbox Hidden Password Select Anfang Select Option einfuumlgen Select Ende Submit

Text Datum Textarea Radio Reset Leerzeile Kommentarzeile Neuer Abschnitt mit

Bezeichner sowie Datei-Upload

Ein Formular muss mit dem Modul bdquoUDE Formular schlieszligenldquo abgeschlossen werden An dieser

Stelle koumlnnen Sie einen Send-Button hinzufuumlgen dessen Name frei waumlhlbar ist Der eingegebene Text

wird als Beschriftung des Buttons angezeigt Erst durch das Hinzufuumlgen dieses Moduls wird das

Formular auf Ihrer Seite sichtbar und kann nach der Veroumlffentlichung genutzt werden

S e i t e | 34

610 Google-Maps (v30) PHP-Skript HTML-Web-Seite

Dieses Modul bringt eine Grafik von Google-Maps auf die Webseite entweder in Kartenoptik oder als

Satellitenbild Sie haben zwei Moumlglichkeiten eine solche zu generieren Uumlber die konkreten GPS-

Koordinaten oder durch das Angeben einer Adresse (zB Forsthausweg 2 47057 Duisburg) Sie

koumlnnen aus zwoumllf Vergroumlszligerungsstufen fuumlr den gewuumlnschten Ausschnitt zwei Kartengroumlszligen und

zwei Kartenformaten waumlhlen

S e i t e | 35

Kartengroumlszlige bdquogroszligldquo skaliert die Graphik auf 480 Pixel Breite auf einer zweispaltigen Seite bzw auf

721 Pixel auf einer einspaltigen Seite Die Option bdquokleinldquo verringert die Breite auf etwa die Haumllfte Die

beiden Optionen beim Kartenformat beeinflussen die Houmlhe der Grafik

S e i t e | 36

611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite

Das Modul Image-Gallery ermoumlglicht die Integration einer komfortablen Bildergallerie uumlber IMPERIA

Per Klick auf bdquoNeues Modulldquo -gt bdquoUDE Image-Gallery (v21)ldquo kann die entsprechende Gallerie an der

gewuumlnschten Position eingefuumlgt werden Generell sollten nur Bilder verwendet werden die

entweder auf 640 x 480 Pixel oder maximal auf 900 x 600 Pixel skaliert sind Aufgrund einer hohen

Dateigroumlszlige sollten Bilder einer Digitalkamera vor dem Upload komprimiert werden

Innerhalb des Moduls kann zunaumlchst die Hintergrundfarbe der Gallerie wahlweise zwischen Beige

Blau und Weiszlig eingestellt werden Um die Gallerie mit Bildern zu fuumlllen ist das entsprechende

Verzeichnis der Mediendatenbank anzugeben Aufgrund der geaumlnderten Syntax wird das Verzeichnis

ohne images angegeben Die Suchmaske fuumlr die Bilderauswahl deklariert die Dateiformate die mit

einbezogen werden sollen Schlieszliglich koumlnnen Sie die Bilder alphabetisch sortiert anzeigen lassen

sowie einen kleinen und einen groszligen Titel fuumlr Ihre Bildergallerie vergeben

Grundsaumltzlich ist es empfehlenswert groumlszligere Bildmengen auf mehrere Seiten zu verteilen um

einerseits die Darstellung auf mobilen Geraumlten zu vereinfachen und andererseits geringeren

Bandbreiten Rechnung zu tragen

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 5: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 4

Das Himmel-Motiv uumlberfuumlhrt die seit der Gruumlndung 2003 entwickelte blau-weiszlige Farbenwelt der

Hochschule in einen neuen Layout-Kontext Im weiterentwickelten Design existieren vier

aufeinander abgestimmte Farben

bull Blau gemaumlszlig Hexadezimalcode 004c93

bull Beige gemaumlszlig Hexadezimalcode efe4bf

bull Hellblau gemaumlszlig Hexadezimalcode dfe4f2

bull Schwarz gemaumlszlig Hexadezimalcode 000000

bull (Graue Elemente erscheinen gemaumlszlig Hexadezimalcode 58585a)

S e i t e | 5

Saumlmtliche Farben werden vom System automatisch gesetzt Sie koumlnnen jedoch im Inhaltsbereich

Ihrer Webseiten Module unterschiedlich einfaumlrben Sie haben dort die Wahl zwischen weiszliger

(Standardeinstellung) sandfarbener oder hellblauer Hinterlegung

Als Schriftart kommt auf der UDE-Website ausschlieszliglich Arial zum Einsatz Die Basisschriftgroumlszlige ist

12px die uumlberwiegende Schriftfarbe Schwarz

Weiterfuumlhrende Informationen amp Downloads

bull UDE-Markenhandbuch

httpwwwuni-

duedeimperiamdcontentdokumenteoffen_im_denkenude_markenhandbuchpdf

bull Wortmarke Logo mit Claim in unterschiedlichen Formaten

httpwwwuni-duedeoffen-im-denkenlogodownloadphp

bull Schmuckelemente (Grafiken Schriften)

httpwwwuni-duedeoffen-im-denkenschmuckelementephp

3 Technische Plattform Zugang zum CMS

Die UDE betreibt einen zentralen Webserver der von allen Einrichtungen und Mitgliedern der

Universitaumlt genutzt werden kann Fuumlr den Server wird eine hohe Erreichbarkeit auch unter Last

gewaumlhrleistet Der Webserver wird uumlber das Content Management System (CMS) bdquoIMPERIAldquo das ndash

nach einer landesweiten Ausschreibung ndash von vielen Hochschulen benutzt wird mit Webseiten

befuumlllt

Einen Zugang zum CMS IMPERIA erhalten Sie uumlber das Zentrum fuumlr Informations- und Mediendienste

(ZIM) Das ZIM bietet neben dem technischen Support auch Einfuumlhrungskurse in die Erstellung von

Webseiten

S e i t e | 6

Weitere Informationen

bull Zugang zum UDE-System IMPERIA-Rubriken Web-Verzeichnisse

Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

bull Anwenderschulung

Hartmut Prause (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0201) 183-4115 hartmutprauseuni-duede

bull Termine der Einfuumlhrungskurse

httpwwwuni-duedezimservicesweiterbildungkurse

Neben IMPERIA wird an Einrichtungen der UDE auch mit anderen Content Management Systemen

gearbeitet die spezifische Eigenschaften aufweisen Genutzt werden unter anderen die Open Source

Produkte Typo3 Drupal oder Joomla Mit welchem System die jeweilige UDE-Einrichtung arbeitet ist

dezentral zu entscheiden Gleichwohl sollte auch bei einer Entscheidung fuumlr ein alternatives System

bedacht werden wie die Ausfallsicherheit die Kontinuitaumlt der Weiterentwicklung sowie die

Darstellung im Design der Hochschule gewaumlhrleistet werden koumlnnen

S e i t e | 7

4 Grundsaumltze der Webseitengestaltung Seitenaufbau

Um der sich staumlndig veraumlndernden Landschaft an Ausgabegeraumlten (Desktops Netbooks Tablets

Smartphoneshellip) Rechnung zu tragen passt sich das neue (adaptive) Layout der UDE-Website

dynamisch an unterschiedliche Bildschirm- bzw Browserfenstergroumlszligen an Die bdquonormaleldquo

Desktopansicht aumlndert so auf einem kleineren Bildschirm wie beispielsweise einem aumllteren iPad im

Querformat die Breite so dass horizontales Scrollen vermieden wird Bei kleineren Bildschirmen bricht

die rechte Spalte um und wird unterhalb des Hauptinhaltes angezeigt Auf Mobiltelefonen schlieszliglich

entfaumlllt die Spaltenanordnung komplett und saumlmtliche Inhalte werden untereinander angezeigt

Dieses Verhalten ist dadurch moumlglich dass alle Groumlszligenangaben im System nur relativ angegeben

sind Verwenden Sie daher keine eigenen fixen Groumlszligenangaben die diese Vorlagen uumlberschreiben

In der bdquonormalenldquo Desktopansicht folgt der Webseitenaufbau im Internetangebot der Universitaumlt

einem festen Raster dass Ihnen bei Verwendung des CMS IMPERIA automatisch vorgegeben wird

bull Die Webseite der UDE liegt als weiszliges bdquoBlattldquo zentriert auf einem sandfarbenen Hintergrund

Der Container der dieses bdquoBlattldquo optisch darstellt beginnt in einem Abstand von 15 Pixeln

S e i t e | 8

zum oberen Seitenrand und setzt immer am unteren Seitenrand auf Der linke der obere und

der rechte Containerrand erzeugen einen leichten Schatteneffekt

bull Links in der Kopfzeile begruumlszligt immer an erster Stelle der Schriftzug bdquoUNIVERSITAumlT

DUISBURG-ESSENldquo die Seitenbesucher Auf jeder Seite der Universitaumlt genuumlgt ein Mausklick

auf den Schriftzug um zuruumlck auf die UDE-Startseite zu gelangen

bull Die gruppenspezifische Aufarbeitung von Informationen gilt inzwischen ndash zu Recht ndash als ein

Qualitaumltsmerkmal von Internetseiten Jede UDE-Webseite erhaumllt deshalb in der Kopfzeile

eine Zielgruppennavigation In Bereichen die keine eigene Zielgruppennavigation erstellen

erscheinen dort die entsprechenden Inhalte des zentralen Angebotes der Universitaumlt

bull Unterhalb der Kopfzeile erscheint auf jeder Seite der Universitaumlt eine Impressionsgrafik Das

System IMPERIA gibt Ihnen diese Grafik vor Sie greift mit ihrem Motiv (Himmel und Wolken)

das beherrschende Key-Visual des Corporate Design der Hochschule auf Zentral am unteren

Rand des Bildes wird vor einem uumlberlagernden weiszligen Kasten der Titel der jeweiligen

Webseite angezeigt Die Houmlhe der Impressionsgrafik veraumlndert sich wenn der eingefuumlgte

Seitentitel mehrzeilig wird

bull Innerhalb der Impressionsgrafik koumlnnen Sie auf der linken Seite eine ein- oder zweizeilige

Bezeichnung Ihres Bereiches einfuumlgen Diese individuelle Organisationsangabe sitzt so im

Gesamtlayout direkt unter dem Schriftzug bdquoUNIVERSITAumlT DUISBURG-ESSENldquo und gibt den

Seitenbesuchern auf den ersten Blick die Orientierung daruumlber wo sie sich eigentlich gerade

befinden Sie koumlnnen sie individuell verlinken

bull Das Universitaumlts-Logo sitzt rechtsbuumlndig in der Impressionsgrafik Es ist so einzurichten dass

ein Mausklick genuumlgt um auf die UDE-Homepage zu gelangen Das Logo darf nicht ohne den

Claim bdquoOffen im Denkenldquo (wahlweise im Englischen bdquoOpen mindedldquo) verwendet werden

bull In der linken Spalte kann der jeweilige Seitenanbieter eine frei editierbare Navigation

einbinden Die Navigation umfasst maximal zwei Ebenen Durch die bewusst reduzierte

Menuumlstruktur signalisiert die Internetpraumlsenz Klarheit und Transparenz Die

Hauptmenuumleintraumlge sind in Groszligbuchstaben (Versalien) ausgefuumlhrt Eintraumlge von

Untermenuumls sind eingeruumlckt und in Normalschrift formatiert Auf beiden Ebenen wird die

Schrift beim Uumlberfahren mit der Maus bzw beim Antabben auf Touch-Screens weiszlig vor

blauem Hintergrund Gleiches gilt fuumlr den jeweils aktiven Menuumlpunkt (Im Jahr 2013 wird auf

jeder mit dem CMS IMPERIA im aktuellen Template erzeugten Webseite uumlber der

Hauptnavigation das Jubilaumlumsfaumlhnchen zum zehnjaumlhrigen Bestehen der Universitaumlt

eingeblendet verlinkt auf httpwwwuni-duede10jahre)

bull Unterhalb der eigenen Navigation wird immer die zentrale Suche (Volltextsuche

Personensuche) der Universitaumlt verlinkt An dieser Stelle koumlnnen Sie zudem wahlweise (und

S e i t e | 9

auf jeder Seite einzeln) einen Link auf eine individuelle A-Z-Seite undoder auf einen eigenen

Intranet-Bereich sowie mit Landesfahnen gekennzeichnete Hinweise auf parallel angebotene

fremdsprachige Inhalte einfuumlgen

bull Zwischen Seitentitel und ndashinhalt koumlnnen Sie auf jeder Seite eine individuelle

Brotkrumennavigation editieren die den Nutzern eine schnelle Uumlbersicht daruumlber

ermoumlglicht wie sie auf die gerade aufgerufene Webseite gelangt sind

bull Der eigentliche Inhaltsbereich (Content) der Webseite kann bei der Seitenerzeugung ein-

oder zweispaltig angelegt werden Der Wechsel zwischen Ein- und Zweispaltigkeit einer Seite

ist uumlber den IMPERIA -Workflow jederzeit moumlglich Bei einem zweispaltigen Contentbereich

ist die schmale rechte Spalte fuumlr Zusatzinformationen vorgesehen die nicht direkt zum

Hauptinhalt gehoumlren bspw Veranstaltungskalender Banner oder RSS-Feeds Fuumlr die

Gestaltung des Inhalts steht eine groszlige Anzahl statischer wie dynamischer Elemente

(Module) zur Verfuumlgung Die einzelnen Module des Inhaltsbereiches koumlnnen unterschiedlich

eingefaumlrbt werden Sie haben die Wahl zwischen weiszliger (Standardeinstellung) sandfarbener

oder hellblauer Hinterlegung

bull In der Fuszligzeile angedockt an den unteren Seitenrand erscheint auf allen Seiten der

Hochschule ein Link auf das zentrale UDE-Impressum Wahlweise (und auf jeder Seite

einzeln) koumlnnen Sie einen Kontakt-Link einfuumlgen

bull Den Abschluss der Webseite bildet die E-Mail-Adresse des zustaumlndigen technischen

Seitenredakteurs die fuumlr Ruumlckfragen oder fuumlr redaktionelle Hinweise genutzt werden kann

Dieses Feld ist individuell beschreibbar ndash sollte jedoch niemals leer und immer auf dem

aktuellen Stand sein Hierfuumlr eignen sich Funktions-E-Mail-Adressen besser als Ihr

persoumlnlicher Account

5 Bestandteile von Webseiten

Um eine Webseite in der Internetpraumlsenz der Universitaumlt vollstaumlndig zu praumlsentieren benoumltigen Sie

(solange Sie mit dem CMS IMPERIA arbeiten) vier Elemente von denen Sie jedoch drei Elemente nur

einmal fuumlr Ihren gesamten Webbereich anlegen muumlssen und danach zentral pflegen koumlnnen

Eine Webseite setzt sich zusammen aus

bull Einer eigenen Organisationsbezeichnung Ihres Bereiches

bull Einer individuellen Zielgruppennavigation In Bereichen die keine eigene

Zielgruppennavigation erstellen erscheinen dort die entsprechenden Inhalte des zentralen

Angebotes der Universitaumlt

S e i t e | 10

bull Einer Navigation Sie koumlnnen in Ihrem Webbereich auch eine Vielzahl unterschiedlicher

Navigationen erstellen und diese je nach Bedarf einbinden

bull Der Seite (dem Dokument) selbst in der Sie Ihren Inhalt und Funktionen bearbeiten und die

vorherigen Elemente einfuumlgen koumlnnen

51 Die Organisationsbezeichnung

Die individuelle Bezeichnung Ihres Bereiches (Organisationsbezeichnung) erscheint auf Ihren

Webseiten links oben innerhalb der Impressionsgrafik direkt unter dem Schriftzug bdquoUNIVERSITAumlT

DUISBURG-ESSENldquo

Organisationsbezeichnungen erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

Sie koumlnnen Organisationsbezeichnungen in der Bearbeitungsebene ein- oder zweizeilig gestalten

S e i t e | 11

bull Der Eintrag in der ersten Zeile (bdquoOrganisationsbezeichnungldquo) erscheint groumlszliger und in weiszliger

fett-gesetzter Schrift

bull Ein Eintrag in der zweiten Zeile (bdquoZusatzldquo) erscheint in weiszliger normal gesetzter Schrift

Unter bdquoVerweis zur Organisationseinheit (URL)ldquo koumlnnen Sie das Sprungziel der

Organisationsbezeichnung bestimmen Tragen Sie diese Verknuumlpfung bitte als relativen Link ohne

Verweis auf den Webserver der Universitaumlt ein

bull Beispiel ihrverzeichnis anstatt httpwwwuni-duedeihrverzeichnis

Eine spaumltere Bearbeitung der Organisationsbezeichnung ist im CMS IMPERIA nicht uumlber das Tool

bdquoQuickEditldquo moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente

bearbeitenldquo im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichnisorganisation_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere

Organisationsbezeichnungen im selben Verzeichnis erstellen diesen einen jeweils moumlglichst

aussagekraumlftigen Dateititel zu geben

S e i t e | 12

52 Die Zielgruppennavigation

Eine individuelle Zielgruppennavigation in der Kopfzeile Ihrer Webseite erstellen Sie uumlber das

IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

Die editierte und veroumlffentlichte Zielgruppennavigation erscheint automatisch auf allen Seiten Ihres

Verzeichnisses

Tragen Sie bitte auch dort die Verknuumlpfungen als relative Links ohne Verweis auf den Webserver der

Universitaumlt ein Verwenden Sie dieses Instrument auszligerdem bitte nicht als moumlgliche zusaumltzliche

Quernavigation sondern ausschlieszliglich als Hilfe und zur Verlinkung gruppenspezifischer

Informationsaufarbeitung

Auch die spaumltere Bearbeitung der Zielgruppennavigation ist im CMS IMPERIA nicht uumlber das Tool

bdquoQuickEditldquo moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente

bearbeitenldquo im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Zielgruppennavigation lautet

ihrverzeichnistargetsshtml

S e i t e | 13

Beachten Sie beim Import bitte Folgendes Anders als seit Beginn des Wintersemesters 2007

gehandhabt kann mit dem UDE-Webrelaunch im Oktober 2011 pro Verzeichnis nur noch eine

anstelle von zwei Zielgruppennavigationen erstellt werden die zudem automatisch in Ihrer Webseite

eingesetzt wird In Verzeichnissen die zwischen 2007 und 2011 angelegt wurden existiert oft

(zusaumltzlich oder ausschlieszliglich) eine sogenannte bdquoerweiterte Zielgruppennavigationldquo

(ihrverzeichnisetargetsshtml) Der Webserver der Universitaumlt sucht bei der Ausgabe Ihrer

Internetseiten im ersten Schritt nach der Datei bdquotargetsshtmlldquo im zweiten Schritt nach der Datei

bdquoetargetsshtmlldquo in Ihrem Verzeichnis und gibt die Zielgruppennavigation dieser Prioritaumlt nach aus

Fehlen beide Dateien so erscheinen die entsprechenden Inhalte des zentralen Angebotes der

Universitaumlt

53 Die Navigation

Navigationen in der linken Spalte Ihrer Webseite sind maximal zwei Ebenen tief

bull In der ersten Ebene ist die Schrift in Versalien (Groszligbuchstaben) gesetzt Schreiben Sie Ihre

Links bitte dennoch bdquonormalldquo Die Transformation in Groszligbuchstaben erfolgt automatisch

durch das System Die Navigationspunkte der ersten Ebene sind mit einem blauen Rechteck

versehen das am linken Seitenrand anliegt

bull Die zweite Navigationsebene erscheint in der Ausgabe nach rechts geruumlckt und regulaumlr in

Groszlig- und Kleinschreibung gesetzt

Links in Navigationen veraumlndern sich beim Uumlberfahren mit der Maus bzw beim Antabben auf

Touchpads Die Schrift erscheint dann weiszlig auf einem blauen Hintergrund Das Gleiche gilt fuumlr den

jeweils aktiven Menuumlpunkt Dieser ist in der Navigation dauerhaft weiszlig mit blauer Hinterlegung

Navigationen erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 14

Zum Aufbau Ihrer Navigation stehen Ihnen die Module bdquoNavigationslinkldquo und

bdquoNavigationsuntermenuumlldquo zur Verfuumlgung Ein Navigationslink erscheint einzeln auf der ersten Ebene

versehen mit einem vorgelagerten blauen Rechteck Mit dem Navigationsuntermenuuml koumlnnen Sie

Menuumlpunkte erzeugen die neben dieser ersten Position uumlber eine zweite eingeruumlckte Ebene

verfuumlgen Dort lassen sich beliebig viele Unterpunkte einsetzen Je nachdem ob Sie den

uumlbergeordneten Eintrag im Navigationsuntermenuuml mit einer Zieladresse (URL) versehen erscheint

dieser verlinkt oder als einfache Uumlberschrift uumlber die nachgelagerten Inhaltspunkte

Selbstverstaumlndlich lassen sich die einzelnen Einheiten in ihrer Position jederzeit verschieben Tragen

Sie interne Links in Ihren Navigationen bitte als relative Verknuumlpfungen ohne Verweis auf den

Webserver der Universitaumlt ein

Editierte und veroumlffentlichte Navigation erscheinen innerhalb der Rubrik in der sie angelegt wurden

automatisch zur Auswahl im linken Bereich der Bearbeitungsebene Ihrer Webseite

Die spaumltere Bearbeitung von Navigationen ist im CMS IMPERIA auf zwei Wegen moumlglich Die

entsprechende Datei kann zum einen uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo im

IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Navigationen folgt folgendem Muster

ihrverzeichnisnav_12345shtml

S e i t e | 15

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Navigationen im selben

Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

Zum anderen koumlnnen Sie auch aus der Bearbeitungsebene einer Webseite heraus dort ausgewaumlhlte

Navigationen aufrufen und editieren Beachten Sie jedoch dass nach dem Speichern der

bearbeiteten Navigation sowohl die Navigationsdatei als auch die Datei der Ursprungsseite auf Ihrem

Schreibtisch liegen

6 Webseiten gestalten

Fuumlr die Gestaltung Ihres Inhalts steht Ihnen eine groszlige Anzahl statischer wie dynamischer Elemente

(Module) zur Verfuumlgung Welche Elemente Sie im Einzelnen nutzen koumlnnen haumlngt davon ab welchen

Dateityp Sie bei der Dokumentenerzeugung fuumlr Ihre Webseite waumlhlen Das Content Management

System der Hochschule bietet Ihnen die Moumlglichkeit Ihr Dokument als HTML-Web-Seite oder als

PHP-Skript zu erzeugen Beachten Sie bitte von Anfang an dass diese Auswahl Einfluss auf die URL

(Internetadresse) der jeweiligen Seite hat Bei einer nachtraumlglichen Aumlnderung aumlndert sich auch die

Internetadresse unter der Ihre Seite im Netz zu finden ist Sie muumlssen dann eventuell Verlinkungen

an vielen Stellen aumlndern

bull Internetadresse einer HTML-Web-Seite wwwuni-duedebereichihreseiteshtml

bull Internetadresse eines PHP-Skripts wwwuni-duedebereichihreseitephp

Je nachdem ob Sie Ihr Dokument als HTML-Web-Seite oder als PHP-Skript erzeugen koumlnnen Sie

folgende Elemente nutzen

Linke Spalte des Inhaltsbereiches

bull (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

bull A-Z verwalten PHP-Skript HTML-Web-Seite

bull Code editieren PHP-Skript HTML-Web-Seite

bull Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

bull DBAdmin PHP-Skript

bull Doppelcontainer PHP-Skript HTML-Web-Seite

bull Flickr nutzen PHP-Skript

bull Formular schlieszligen PHP-Skript

bull Formular oumlffnen PHP-Skript

S e i t e | 16

bull Formular Element PHP-Skript

bull Formulareingabe in DB speichern PHP-Skript

bull Google-Maps (v30) PHP-Skript HTML-Web-Seite

bull Image-Gallery (v21) PHP-Skript HTML-Web-Seite

bull Mailinglisten PHP-Skript

bull Mitarbeiter-Liste PHP-Skript

bull Mitarbeiter-Publikationsliste PHP-Skript

bull Mitarbeiter-Seite PHP-Skript

bull Randlose Grafik PHP-Skript HTML-Web-Seite

bull RSS-Feed-Administration PHP-Skript

bull RSS-Feed-Agent PHP-Skript

bull Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

bull Veranstaltungskalender Kalendermodul PHP-Skript

bull Veranstaltungskalender Veranstaltungsmodul PHP-Skript

Rechte Spalte des Inhaltsbereiches

bull (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

bull Code editieren PHP-Skript HTML-Web-Seite

bull Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

bull Flickr nutzen PHP-Skript

bull Mitarbeiter-Seite PHP-Skript

bull Randlose Grafik PHP-Skript HTML-Web-Seite

bull RSS-Feed-Agent PHP-Skript

bull Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

bull Veranstaltungskalender Kalendermodul PHP-Skript

Beim Erstellen Ihrer Webseite koumlnnen Sie diese einzelnen Module nach Bedarf (auch mehrfach)

erzeugen und in der gewuumlnschten Reihenfolge platzieren wobei die gewaumlhlte Reihenfolge jederzeit

veraumlnderbar ist Mit wenigen Ausnahmen lassen sich die einzelnen Einheiten weiszlig blau oder beige

einfaumlrben (Ausnahme randlose Grafik) Sie werden vom System dann als voneinander abgesetzte

Bloumlcke ausgegeben

Um innerhalb eines Dokuments zu navigieren koumlnnen Sie wenn noumltig die einzelnen Elemente auch

mit einem Link-Anker versehen (Ausnahmen randlose Grafik Mitarbeiter-Liste -Publikationsliste

und ndashSeite Veranstaltungskalender Veranstaltungs- sowie Kalendermodul) Den Ankernamen

S e i t e | 17

koumlnnen Sie frei vergeben er darf jedoch keine Leer- oder Sonderzeichen enthalten Das erste Zeichen

muss auszligerdem ein Buchstabe sein

61 Uumlber allem Die Brotkrumennavigation

Zwischen Seitentitel und ndashinhalt koumlnnen Sie auf jeder Seite eine individuelle Brotkrumennavigation

editieren die den Nutzern eine schnelle Uumlbersicht daruumlber ermoumlglicht wie sie auf die gerade

aufgerufene Webseite gelangt sind Verwenden Sie dieses Instrument bitte nicht als moumlgliche

zusaumltzliche Quernavigation sondern ausschlieszliglich als Hilfe im vorgesehenen Sinne

Der letzte Eintrag der Brotkrumennavigation der uumlblicherweise die aktuell aufgerufene Seite

benennt sollte nicht mit einer Zieladresse (URL) versehen werden Der Eintrag erscheint dann als

regulaumlr schwarz formatierter Text nicht als blau ausgezeichneter Link

S e i t e | 18

62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

Mit dem TinyMCE-Texteditor stellt Ihnen das Content Management System der UDE einen auf

JavaScript basierenden WYSIWYG-Editor (bdquoWhat You See Is What You Getldquo) zur Verfuumlgung Mit Hilfe

dieses Moduls ist es moumlglich ohne HTML- oder weitergehende Programmierkenntnisse Beitraumlge zu

verfassen und Seiten zu formatieren Die Bedienung mittels einer Textbox orientiert sich stark an

gaumlngiger und bekannter Textverarbeitungs-Software

Texte formatieren

Selbstverstaumlndlich bietet der TinyMCE-Editor die uumlblichen Arten Texte zu formatieren Neben den

Befehlen fett (bdquoBoldldquo) kursiv (bdquoItalicldquo) unterstrichen (bdquoUnderlineldquo) sowie hoch- bzw tiefgestellt

bietet Ihnen das System uumlber das Ω-Symbol eine breite Palette an Sonderzeichen uumlber die

Listenfunktion die Erstellung einfacher oder nummerierter Aufzaumlhlungslisten an Mittels einer Select-

S e i t e | 19

Box koumlnnen Sie auszligerdem auf im Hochschullayout vorgegebene Uumlberschriftarten (bdquoHeadingsldquo)

zuruumlckgreifen

Als weitere Moumlglichkeiten steht Ihnen frei

bull ein Datum undoder eine Uhrzeit einzufuumlgen

bull Blockzitate zu kennzeichnen oder

bull geschuumltzte Leerzeichen (bdquoNon-breaking Space Characterldquo) zu definieren

bull Das Ankersymbol (bdquoInsertEdit Anchorldquo) erlaubt die Definition von Sprungzielen innerhalb

laumlngerer Texte

Im Notfall hilft Ihnen das Radiergummi-Symbol (bdquoRemove Formatting) saumlmtliche Formatierungen zu

entfernen

Bereits formatierten Text einfuumlgen

Uumlber diese Formatierungsarten hinaus koumlnnen Sie auch bereits vorformatierte Texte aus Ihrer

Textverarbeitung in den Editor kopieren Zum Einfuumlgen nutzen Sie jedoch bitte nicht den einfachen

Copy amp Paste-Befehl sondern die im Modul bereitgestellte Funktion bdquoPaste from Wordldquo (Sie finden

das entsprechende bdquoWldquo-Symbol unter der Texteingabe-Box) ndash und zwar auch dann wenn Ihr

Ursprungstext nicht aus Microsoft Word sondern einer anderen Textverarbeitungssoftware

importiert wird Schriftformatierungen Verlinkungen und Aumlhnliches werden dann 11 uumlbernommen

Achten Sie bitte dennoch darauf dass dieser Funktion Grenzen gesetzt sind und arbeiten Sie mit

moumlglichst einfachen Formatvorlagen

HTML-Ansicht

Fuumlr Redakteure die sich in der Seitenprogrammierung sicherer fuumlhlen als in der Textverarbeitung

haumllt das Modul TinyMCE-Texteditor uumlber den Button bdquoHTMLldquo einen HTML Source Editor bereit mit

dem direkt auf den Quelltext und die Codierung dieses Teils der Webseite zugegriffen werden kann

Diese Funktion eignet sich auszligerdem besonders zur Uumlberpruumlfung und Fehlersuche Zur

Programmierung eigener Funktionen nutzen Sie jedoch bitte das Modul bdquoCode editierenldquo

S e i t e | 20

Links

Die uumlber die Symbole bdquoInsertEdit Linkldquo (Link einfuumlgen oder bearbeiten) in Ihre Texte oder

Aufzaumlhlungslisten eingefuumlgten Hyperlinks formatiert das System selbststaumlndig im fuumlr die UDE

vorgesehehen Layout Tragen Sie Links auf Seiten innerhalb von wwwuni-duede bitte als relative

Verknuumlpfungen ohne Verweis auf den Webserver der Universitaumlt ein also

bull depresse

anstelle von

bull httpwwwuni-duededepresseindexphp

Zeichnen sie auszligerdem Ihre Verlinkungen im Sinne der Barrierefreiheit mit sprechenden Titeln aus

und uumlberlegen Sie sich ob das Sprungziel im selben oder in einem neuen Browserfenster geoumlffnet

werden soll

Uumlber das Symbol bdquoUnlinkldquo entfernen Sie die entsprechende Verlinkung

Bilder

Der TinyMCE-Texteditor bietet Ihnen zwei Moumlglichkeiten Bilder in Ihre Texte einzubinden

S e i t e | 21

bull Uumlber die Funktion bdquoInsertEdit Imageldquo (Icon unter der Texteingabe-Box) koumlnnen Sie den

relativen Pfad auf das entsprechende Bild aus der IMPERIA-Mediendatenbank einfuumlgen

(Formatbeispiel imperiamdimageswebredaktion2013parentservicejpg)

bull Die Funktion bdquoVorschaubild waumlhlenldquo laumlsst Sie direkt auf die IMPERIA-Mediendatenbank

zugreifen und dort die gewuumlnschte Grafik per Klick auswaumlhlen Uumlber die Funktion bdquoVollbild

waumlhlenldquo koumlnnen Sie das Bild optional zu einer groumlszligeren Ansicht verlinken die sich als

bdquoLightboxldquo uumlber der aktiven Webseite oumlffnet Der Befehl bdquoBild zuruumlcksetzenldquo entfernt die

gewaumlhlte Grafik aus Ihrer Webseite

Waumlhrend Sie mittels bdquoInsertEdit Imageldquo die Anzeige-Groumlszlige Ihres Bildes (bis maximal 480 Pixel

Breite) selbst bestimmen koumlnnen werden Grafiken uumlber die Funktion bdquoVorschaubild waumlhlenldquo beim

Einfuumlgen automatisch auf die passende Groumlszlige skaliert (162 Pixel Breite in der linken und 204 Pixel

Breite in der rechten Content-Spalte) In diesem Fall koumlnnen Sie zudem waumlhlen ob der Text an dieser

Stelle das Bild umflieszligt oder aber rechts daneben angezeigt wird Das Vollbild wird bei der Eingabe

nicht skaliert Nutzen Sie daher bitte Bilder mit einer bildschirmtauglichen Groumlszlige (maximal 1024

Pixel)

S e i t e | 22

Tabellen

Uumlber das Icon bdquoInsertEdit Tableldquo fuumlgen Sie an der gewuumlnschten Stelle Tabellen in Ihren Texteditor

ein Unter den Reitern bdquoGeneralldquo und bdquoAdvancedldquo koumlnnen Sie diese Tabellen gemaumlszlig den uumlblichen

HTML-Konventionen erstellen formatieren und bearbeiten

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig gemaumlszlig den Vorgaben der Barrierefreiheit als

solche aus Der Text-Editor stellt Ihnen diese Optionen zur Verfuumlgung

bull Beachten Sie dass die Hintergrundfarbe der Tabellen je nach gewaumlhlter Einfaumlrbung des

Moduls variiert

S e i t e | 23

Texte mit bdquoVerfallsdatumldquo

Grundsaumltzlich steht Ihnen das Modul bdquo(TinyMCE)-Texteditorldquo sowohl auf shtml-Seiten als auch in

php-Skripten zur Verfuumlgung Auf php-Seiten laumlsst sich jedoch eine zusaumltzliche Option nutzen Fuumlr

Texte die nur fuumlr einen gewissen Zeitraum auf Ihrer Webseite erscheinen sollen koumlnnen Sie ein

Start- und Enddatum setzen

63 A-Z verwalten PHP-Skript HTML-Web-Seite

Das Modul bdquoA-Z verwaltenldquo ermoumlglicht den Redakteuren A-Z-Listen relativ einfach zu erzeugen und

zu pflegen

S e i t e | 24

Fuumlr jeden Eintrag in der Stichwortliste muss im Eingabefeld eine einzelne Zeile eingefuumlgt werden Die

Eingabe folgt einem festen Schema

bull Stichwort||URL (Internetadresse)||

oder

bull Stichwort||URL (Internetadresse)||eventuell ein kurzer Beschreibungstext

wobei auf den Beschreibungstext auch verzichtet werden kann Die sogenannten bdquoPipe-Zeichenldquo (||)

dienen als Feldtrenner Sie erzeugen sie uumlber den Tastaturbefehl bdquoAltGr amp das Groumlszligerzeichenldquo

Wahlweise kopieren Sie die entsprechenden Zeichen aus bisherigen Eintraumlgen

Auch hier gilt Tragen Sie interne Links in Ihrer A-Z-Liste bitte als relative Verknuumlpfungen ohne

Verweis auf den Webserver der Universitaumlt ein also

bull Abiturjahrgang 2013||doppelter_abiturjahrgang||

anstelle von

bull Abiturjahrgang 2013||httpwwwuni-duededoppelter_abiturjahrgang||

Externe Links (wie etwa bdquoGlassbooth ||httpwwwglassboothde||ldquo) werden auf der

ausgegebenen Webseite entsprechend gekennzeichnet

S e i t e | 25

Die Eintraumlge im Modul bdquoA-Z verwaltenldquo sortiert das Content Management System automatisch nach

Ziffernreihenfolge bzw dem Alphabet Um die Eintraumlge spaumlter einfach aufzufinden und bearbeiten zu

koumlnnen empfiehlt es sich jedoch bereits im Eingabefeld selbst eine alphabetische Sortierung

vorzunehmen

64 Code editieren PHP-Skript HTML-Web-Seite

Das Modul bdquoCode editierenldquo eroumlffnet Ihnen die Moumlglichkeit in Ihrem Internetauftritt eigene PHP-

oder HTML-Codeschnipsel zu erstellen und zu nutzen oder Programmierungen eigener Funktionen

vorzunehmen

Nutzen Sie dieses Modul bitte nicht um Funktionen zu simulieren die Ihnen das CMS IMPERIA bereits

als vorgefertigte Module zur Verfuumlgung stellt Das freie Code-Eingabefeld ist ebenfalls nicht dazu

S e i t e | 26

vorgesehen auf diesem Wege vom Corporate Design der Universitaumlt abweichende eigene Layouts zu

entwickeln

65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

Uumlber das Modul bdquoCodebaustein einfuumlgenldquo ist es moumlglich vorgefertigte Bloumlcke oder bdquoBauteileldquo in Ihre

Webseite zu integrieren Codebausteine eignen sich dazu bestimmte Informationen die auf vielen

Webseiten wiederkehren an einer Stelle zentral zu pflegen In der Bearbeitungsebene bietet Ihnen

das Modul die in der aktuellen Rubrik vorhandenen Bausteine zur Auswahl an

Codebausteine erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 27

Sie koumlnnen in Codebausteinen wie beim uumlblichen Seitenaufbau gewohnt unterschiedliche Module

kombinieren und positionieren Zur Verfuumlgung stehen die Elemente

bull (TinyMCE)-Texteditor

bull Code editieren

bull die Formularmodule

bull Randlose Grafik

bull RSS-Feed-Agent

bull Tube Audio-VideoPlayer

Eine spaumltere Bearbeitung der Codebausteine ist im CMS IMPERIA nicht uumlber das Tool bdquoQuickEditldquo

moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo

im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichniscode_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Codebausteine im

selben Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

66 DBAdmin PHP-Skript

Mit Hilfe des Moduls bdquoDBAdminldquo lassen sich Datenbank direkt in Tabellenform auf Ihrer Webseite

darstellen Uumlber die Funktion bdquoOptionen anzeigenldquo erhalten Sie zudem die Moumlglichkeit eine

Webseite zur Pflege Ihrer Datenbank zu erstellen Dort koumlnnen Sie die entsprechende Tabelle

editieren d h Eintraumlge einzeln erstellen bearbeiten oder loumlschen

S e i t e | 28

Zur Nutzung dieses Moduls sind folgende Angaben notwendig

bull Datenbank-Server Name oder IP-Adresse des Servers auf dem die anzusprechende

Datenbank liegt (bspw bdquodbuni-duedeldquo)

bull Datenbank-Name

bull Tabellen-Name Name der speziellen Tabelle die innerhalb der Datenbank angesprochen

werden soll

bull Datenbank-Benutzer und Datenbank-Passwort

Datenbanken auf einem UDE-Server koumlnnen Universitaumltsangehoumlrige unter Nutzung ihrer

Hochschulkennung online beim Zentrum fuumlr Informations- und Mediendienste (ZIM) beantragen

unter httpwwwuni-duedezimserviceshomepagesmysqlshtml

67 Doppelcontainer PHP-Skript HTML-Web-Seite

Das Modul bdquoDoppelcontainerldquo ermoumlglicht es Ihnen auf Ihrer Webseite zwei Textebloumlcke (je nach

Wunsch mit oder ohne Bilder) nebeneinander zu setzen

Auf zweispaltig angelegten Webseiten ist die Anlage eines Doppelcontainers nur in der linken Spalte

moumlglich Bilder erscheinen dort in einer Breite von 246 Pixeln Auf einspaltig angelegten Webseiten

werden die einzelnen Bloumlcke (und dementsprechend die verwendeten Bilder) in einer Breite von 366

Pixeln angezeigt Die Bildhoumlhe ist in beiden Faumlllen frei waumlhlbar sollte jedoch in beiden Containern

identisch sein

S e i t e | 29

Zur Texteingabe stehen Ihnen die Optionen bdquoTeaserldquo (mit Zeichenbegrenzung) sowie bdquoStandardldquo

(ohne Zeichenbegrenzung) zur Verfuumlgung Waumlhlen Sie bdquoTeaserldquo so erhalten Sie Platz fuumlr 300 Zeichen

ndash ein Zeichenzaumlhler neben der Texteingabe-Box erleichtert das Mitzaumlhlen Der Text wird gelb

unterlegt wenn er nach dem naumlchsten Leerzeichen abgeschnitten wird Rot erscheint das Textfeld

wenn die Zeichenzahl bereits uumlberschritten wurde

Beachten Sie bitte dass das Modul HTML-Tags (URLs Mailadressen etc) automatisch filtert Sie

werden daher nicht angezeigt Um Ihren Text zu verlinken koumlnnen Sie das Eingabefeld bdquoMehr-Linkldquo

nutzen

Beide Bloumlcke innerhalb eines Doppelcontainers lassen sich individuell auf die uumlbliche Weise (weiszlig

hellblau sandfarben) hinterlegen

S e i t e | 30

68 Flickr nutzen PHP-Skript

Das Modul bdquoFlickr nutzenldquo ermoumlglicht es Ihnen im Sinne einer crossmedialen Verwertung Bilder aus

Ihrem Flickr-Account in Ihre IMPERIA-Webseite einzubinden Fuumlr diese Funktion benoumltigen Sie einen

sogenannten API-Key den Sie in Ihrem Flick-Auftritt unter

bull httpwwwflickrcomservicesappscreateapply

erzeugen lassen koumlnnen Tragen Sie dann diesen Key in die entsprechende Eingabemaske des Moduls

ein Anschlieszligend haben Sie die Moumlglichkeit ganze Fotosets (Alben) oder Einzelbilder einzubinden

Photoset anzeigen

S e i t e | 31

Zum Anzeigen von Photosets wird die entsprechende Photoset-ID ins Modul eingetragen Diese ID ist

Teil der Link-Adresse des entsprechenden Albums bei Flickr (die erscheint wenn Sie das Album

angeklickt haben) Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAMEsets12340954909

Die Photoset-ID verbirgt sich hinter den Ziffern am Ende der URL Sie koumlnnen auswaumlhlen wie viele

Fotos auf einer Webseite erscheinen sollen Dafuumlr uumlbernimmt das Modul die Bilder in der

quadratischen Aufloumlsung von Flickr also in einer Groumlszlige von 75 x 75 Pixeln Reicht der Platz dafuumlr

nicht aus wird eine zusaumltzliche Blaumltterfunktion angeboten Photoset- und Bild-Beschreibungen

koumlnnen aus dem Flickr-Account automatisch uumlbernommen werden wenn die entsprechenden

Optionen mit einem Haken aktiviert wurden

Einzelbild anzeigen

Um ein einzelnes Bild anzuzeigen benoumltigen Sie die entsprechen Flickr-Foto-ID Diese verbirgt sich

hinter der ersten Zahl in der Link-Adresse des entsprechenden Bildes Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAME5841603851inset-72157626981464896

Ein Einzelbild kann in einer hohen oder einer geringen Aufloumlsung eingebunden werden Bei einer

zweispaltig angelegten Webseite wird das Bild in der linken Inhaltsspalte auf eine Breite von 480

Pixel bei einer einspaltig angelegten Webseite auf eine Breite von 721 Pixel skaliert

69 Formulare

Mit IMPERIA haben Sie die Moumlglichkeit Formulare auf Ihrer Webseite zu platzieren In der

Bearbeitungsebene Ihrer Seite finden Sie im Bereich bdquoNeues Modulldquo den Menupunkt UDE ndash

Formular oumlffnen

Nach dem Festlegen der Hintergrundfarbe koumlnnen Sie im Bereich bdquoLegendeldquo den Titel Ihres

Formulars waumlhlen Wenn Sie die Funktion bdquoMailer-Funktionalitaumltldquo aktivieren koumlnnen Sie die Adresse

Ihres Mailscripts eingeben Anderenfalls belassen Sie es bitte beim Vorgabewert

Im Bereich bdquoNexturlldquo kann angegeben werden welche Seite nach dem Abschicken des Formulars

aufgerufen werden soll Daruumlber hinaus werden der Titel der E-Mail die Absender-Adresse sowie die

Empfaumlnger-Adresse definiert Optional kann eine Bestaumltigungs-E-Mail mit frei waumlhlbarem Text

versendet werden

S e i t e | 32

Um dem erstellten Formular Eingabefelder hinzuzufuumlgen ist das Modul bdquoUDE Formular Elementldquo zu

waumlhlen Waumlhlen Sie das Element bdquoTextldquo um ein Eingabefeld zu erzeugen Die Option bdquoBezeichnerldquo

beschreibt den sichtbaren Text im fertigen Formular zum Beispiel bdquoIhr Nameldquo Weitergehend koumlnnen

Sie die zulaumlssigen Inhalte der Nutzereingaben definieren sowie markieren ob das Element ein

Pflichtfeld sein soll

S e i t e | 33

Um ein Texteingabefeld innerhalb des Formulars zu erzeugen waumlhlen Sie das Element bdquoTextarealdquo

Sie koumlnnen die Groumlszlige des Textfeldes definieren (Zeilen x Spalten) und optional erneut eine Pruumlfung

zulaumlssiger Nutzereingaben aktivieren Weiterhin koumlnnen Sie waumlhlen ob der eingegebene Wert des

Formularelements in die Datenbank eingetragen werden soll Wenn Sie fuumlr Ihre Formulare auf eine

Datenbank zuruumlckgreifen moumlchten koumlnnen Sie sich hier informieren httpwwwuni-

duedezimserviceshomepagesmysqlshtml

Insgesamt stehen folgende Elemente zur Verfuumlgung

bull Checkbox Hidden Password Select Anfang Select Option einfuumlgen Select Ende Submit

Text Datum Textarea Radio Reset Leerzeile Kommentarzeile Neuer Abschnitt mit

Bezeichner sowie Datei-Upload

Ein Formular muss mit dem Modul bdquoUDE Formular schlieszligenldquo abgeschlossen werden An dieser

Stelle koumlnnen Sie einen Send-Button hinzufuumlgen dessen Name frei waumlhlbar ist Der eingegebene Text

wird als Beschriftung des Buttons angezeigt Erst durch das Hinzufuumlgen dieses Moduls wird das

Formular auf Ihrer Seite sichtbar und kann nach der Veroumlffentlichung genutzt werden

S e i t e | 34

610 Google-Maps (v30) PHP-Skript HTML-Web-Seite

Dieses Modul bringt eine Grafik von Google-Maps auf die Webseite entweder in Kartenoptik oder als

Satellitenbild Sie haben zwei Moumlglichkeiten eine solche zu generieren Uumlber die konkreten GPS-

Koordinaten oder durch das Angeben einer Adresse (zB Forsthausweg 2 47057 Duisburg) Sie

koumlnnen aus zwoumllf Vergroumlszligerungsstufen fuumlr den gewuumlnschten Ausschnitt zwei Kartengroumlszligen und

zwei Kartenformaten waumlhlen

S e i t e | 35

Kartengroumlszlige bdquogroszligldquo skaliert die Graphik auf 480 Pixel Breite auf einer zweispaltigen Seite bzw auf

721 Pixel auf einer einspaltigen Seite Die Option bdquokleinldquo verringert die Breite auf etwa die Haumllfte Die

beiden Optionen beim Kartenformat beeinflussen die Houmlhe der Grafik

S e i t e | 36

611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite

Das Modul Image-Gallery ermoumlglicht die Integration einer komfortablen Bildergallerie uumlber IMPERIA

Per Klick auf bdquoNeues Modulldquo -gt bdquoUDE Image-Gallery (v21)ldquo kann die entsprechende Gallerie an der

gewuumlnschten Position eingefuumlgt werden Generell sollten nur Bilder verwendet werden die

entweder auf 640 x 480 Pixel oder maximal auf 900 x 600 Pixel skaliert sind Aufgrund einer hohen

Dateigroumlszlige sollten Bilder einer Digitalkamera vor dem Upload komprimiert werden

Innerhalb des Moduls kann zunaumlchst die Hintergrundfarbe der Gallerie wahlweise zwischen Beige

Blau und Weiszlig eingestellt werden Um die Gallerie mit Bildern zu fuumlllen ist das entsprechende

Verzeichnis der Mediendatenbank anzugeben Aufgrund der geaumlnderten Syntax wird das Verzeichnis

ohne images angegeben Die Suchmaske fuumlr die Bilderauswahl deklariert die Dateiformate die mit

einbezogen werden sollen Schlieszliglich koumlnnen Sie die Bilder alphabetisch sortiert anzeigen lassen

sowie einen kleinen und einen groszligen Titel fuumlr Ihre Bildergallerie vergeben

Grundsaumltzlich ist es empfehlenswert groumlszligere Bildmengen auf mehrere Seiten zu verteilen um

einerseits die Darstellung auf mobilen Geraumlten zu vereinfachen und andererseits geringeren

Bandbreiten Rechnung zu tragen

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 6: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 5

Saumlmtliche Farben werden vom System automatisch gesetzt Sie koumlnnen jedoch im Inhaltsbereich

Ihrer Webseiten Module unterschiedlich einfaumlrben Sie haben dort die Wahl zwischen weiszliger

(Standardeinstellung) sandfarbener oder hellblauer Hinterlegung

Als Schriftart kommt auf der UDE-Website ausschlieszliglich Arial zum Einsatz Die Basisschriftgroumlszlige ist

12px die uumlberwiegende Schriftfarbe Schwarz

Weiterfuumlhrende Informationen amp Downloads

bull UDE-Markenhandbuch

httpwwwuni-

duedeimperiamdcontentdokumenteoffen_im_denkenude_markenhandbuchpdf

bull Wortmarke Logo mit Claim in unterschiedlichen Formaten

httpwwwuni-duedeoffen-im-denkenlogodownloadphp

bull Schmuckelemente (Grafiken Schriften)

httpwwwuni-duedeoffen-im-denkenschmuckelementephp

3 Technische Plattform Zugang zum CMS

Die UDE betreibt einen zentralen Webserver der von allen Einrichtungen und Mitgliedern der

Universitaumlt genutzt werden kann Fuumlr den Server wird eine hohe Erreichbarkeit auch unter Last

gewaumlhrleistet Der Webserver wird uumlber das Content Management System (CMS) bdquoIMPERIAldquo das ndash

nach einer landesweiten Ausschreibung ndash von vielen Hochschulen benutzt wird mit Webseiten

befuumlllt

Einen Zugang zum CMS IMPERIA erhalten Sie uumlber das Zentrum fuumlr Informations- und Mediendienste

(ZIM) Das ZIM bietet neben dem technischen Support auch Einfuumlhrungskurse in die Erstellung von

Webseiten

S e i t e | 6

Weitere Informationen

bull Zugang zum UDE-System IMPERIA-Rubriken Web-Verzeichnisse

Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

bull Anwenderschulung

Hartmut Prause (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0201) 183-4115 hartmutprauseuni-duede

bull Termine der Einfuumlhrungskurse

httpwwwuni-duedezimservicesweiterbildungkurse

Neben IMPERIA wird an Einrichtungen der UDE auch mit anderen Content Management Systemen

gearbeitet die spezifische Eigenschaften aufweisen Genutzt werden unter anderen die Open Source

Produkte Typo3 Drupal oder Joomla Mit welchem System die jeweilige UDE-Einrichtung arbeitet ist

dezentral zu entscheiden Gleichwohl sollte auch bei einer Entscheidung fuumlr ein alternatives System

bedacht werden wie die Ausfallsicherheit die Kontinuitaumlt der Weiterentwicklung sowie die

Darstellung im Design der Hochschule gewaumlhrleistet werden koumlnnen

S e i t e | 7

4 Grundsaumltze der Webseitengestaltung Seitenaufbau

Um der sich staumlndig veraumlndernden Landschaft an Ausgabegeraumlten (Desktops Netbooks Tablets

Smartphoneshellip) Rechnung zu tragen passt sich das neue (adaptive) Layout der UDE-Website

dynamisch an unterschiedliche Bildschirm- bzw Browserfenstergroumlszligen an Die bdquonormaleldquo

Desktopansicht aumlndert so auf einem kleineren Bildschirm wie beispielsweise einem aumllteren iPad im

Querformat die Breite so dass horizontales Scrollen vermieden wird Bei kleineren Bildschirmen bricht

die rechte Spalte um und wird unterhalb des Hauptinhaltes angezeigt Auf Mobiltelefonen schlieszliglich

entfaumlllt die Spaltenanordnung komplett und saumlmtliche Inhalte werden untereinander angezeigt

Dieses Verhalten ist dadurch moumlglich dass alle Groumlszligenangaben im System nur relativ angegeben

sind Verwenden Sie daher keine eigenen fixen Groumlszligenangaben die diese Vorlagen uumlberschreiben

In der bdquonormalenldquo Desktopansicht folgt der Webseitenaufbau im Internetangebot der Universitaumlt

einem festen Raster dass Ihnen bei Verwendung des CMS IMPERIA automatisch vorgegeben wird

bull Die Webseite der UDE liegt als weiszliges bdquoBlattldquo zentriert auf einem sandfarbenen Hintergrund

Der Container der dieses bdquoBlattldquo optisch darstellt beginnt in einem Abstand von 15 Pixeln

S e i t e | 8

zum oberen Seitenrand und setzt immer am unteren Seitenrand auf Der linke der obere und

der rechte Containerrand erzeugen einen leichten Schatteneffekt

bull Links in der Kopfzeile begruumlszligt immer an erster Stelle der Schriftzug bdquoUNIVERSITAumlT

DUISBURG-ESSENldquo die Seitenbesucher Auf jeder Seite der Universitaumlt genuumlgt ein Mausklick

auf den Schriftzug um zuruumlck auf die UDE-Startseite zu gelangen

bull Die gruppenspezifische Aufarbeitung von Informationen gilt inzwischen ndash zu Recht ndash als ein

Qualitaumltsmerkmal von Internetseiten Jede UDE-Webseite erhaumllt deshalb in der Kopfzeile

eine Zielgruppennavigation In Bereichen die keine eigene Zielgruppennavigation erstellen

erscheinen dort die entsprechenden Inhalte des zentralen Angebotes der Universitaumlt

bull Unterhalb der Kopfzeile erscheint auf jeder Seite der Universitaumlt eine Impressionsgrafik Das

System IMPERIA gibt Ihnen diese Grafik vor Sie greift mit ihrem Motiv (Himmel und Wolken)

das beherrschende Key-Visual des Corporate Design der Hochschule auf Zentral am unteren

Rand des Bildes wird vor einem uumlberlagernden weiszligen Kasten der Titel der jeweiligen

Webseite angezeigt Die Houmlhe der Impressionsgrafik veraumlndert sich wenn der eingefuumlgte

Seitentitel mehrzeilig wird

bull Innerhalb der Impressionsgrafik koumlnnen Sie auf der linken Seite eine ein- oder zweizeilige

Bezeichnung Ihres Bereiches einfuumlgen Diese individuelle Organisationsangabe sitzt so im

Gesamtlayout direkt unter dem Schriftzug bdquoUNIVERSITAumlT DUISBURG-ESSENldquo und gibt den

Seitenbesuchern auf den ersten Blick die Orientierung daruumlber wo sie sich eigentlich gerade

befinden Sie koumlnnen sie individuell verlinken

bull Das Universitaumlts-Logo sitzt rechtsbuumlndig in der Impressionsgrafik Es ist so einzurichten dass

ein Mausklick genuumlgt um auf die UDE-Homepage zu gelangen Das Logo darf nicht ohne den

Claim bdquoOffen im Denkenldquo (wahlweise im Englischen bdquoOpen mindedldquo) verwendet werden

bull In der linken Spalte kann der jeweilige Seitenanbieter eine frei editierbare Navigation

einbinden Die Navigation umfasst maximal zwei Ebenen Durch die bewusst reduzierte

Menuumlstruktur signalisiert die Internetpraumlsenz Klarheit und Transparenz Die

Hauptmenuumleintraumlge sind in Groszligbuchstaben (Versalien) ausgefuumlhrt Eintraumlge von

Untermenuumls sind eingeruumlckt und in Normalschrift formatiert Auf beiden Ebenen wird die

Schrift beim Uumlberfahren mit der Maus bzw beim Antabben auf Touch-Screens weiszlig vor

blauem Hintergrund Gleiches gilt fuumlr den jeweils aktiven Menuumlpunkt (Im Jahr 2013 wird auf

jeder mit dem CMS IMPERIA im aktuellen Template erzeugten Webseite uumlber der

Hauptnavigation das Jubilaumlumsfaumlhnchen zum zehnjaumlhrigen Bestehen der Universitaumlt

eingeblendet verlinkt auf httpwwwuni-duede10jahre)

bull Unterhalb der eigenen Navigation wird immer die zentrale Suche (Volltextsuche

Personensuche) der Universitaumlt verlinkt An dieser Stelle koumlnnen Sie zudem wahlweise (und

S e i t e | 9

auf jeder Seite einzeln) einen Link auf eine individuelle A-Z-Seite undoder auf einen eigenen

Intranet-Bereich sowie mit Landesfahnen gekennzeichnete Hinweise auf parallel angebotene

fremdsprachige Inhalte einfuumlgen

bull Zwischen Seitentitel und ndashinhalt koumlnnen Sie auf jeder Seite eine individuelle

Brotkrumennavigation editieren die den Nutzern eine schnelle Uumlbersicht daruumlber

ermoumlglicht wie sie auf die gerade aufgerufene Webseite gelangt sind

bull Der eigentliche Inhaltsbereich (Content) der Webseite kann bei der Seitenerzeugung ein-

oder zweispaltig angelegt werden Der Wechsel zwischen Ein- und Zweispaltigkeit einer Seite

ist uumlber den IMPERIA -Workflow jederzeit moumlglich Bei einem zweispaltigen Contentbereich

ist die schmale rechte Spalte fuumlr Zusatzinformationen vorgesehen die nicht direkt zum

Hauptinhalt gehoumlren bspw Veranstaltungskalender Banner oder RSS-Feeds Fuumlr die

Gestaltung des Inhalts steht eine groszlige Anzahl statischer wie dynamischer Elemente

(Module) zur Verfuumlgung Die einzelnen Module des Inhaltsbereiches koumlnnen unterschiedlich

eingefaumlrbt werden Sie haben die Wahl zwischen weiszliger (Standardeinstellung) sandfarbener

oder hellblauer Hinterlegung

bull In der Fuszligzeile angedockt an den unteren Seitenrand erscheint auf allen Seiten der

Hochschule ein Link auf das zentrale UDE-Impressum Wahlweise (und auf jeder Seite

einzeln) koumlnnen Sie einen Kontakt-Link einfuumlgen

bull Den Abschluss der Webseite bildet die E-Mail-Adresse des zustaumlndigen technischen

Seitenredakteurs die fuumlr Ruumlckfragen oder fuumlr redaktionelle Hinweise genutzt werden kann

Dieses Feld ist individuell beschreibbar ndash sollte jedoch niemals leer und immer auf dem

aktuellen Stand sein Hierfuumlr eignen sich Funktions-E-Mail-Adressen besser als Ihr

persoumlnlicher Account

5 Bestandteile von Webseiten

Um eine Webseite in der Internetpraumlsenz der Universitaumlt vollstaumlndig zu praumlsentieren benoumltigen Sie

(solange Sie mit dem CMS IMPERIA arbeiten) vier Elemente von denen Sie jedoch drei Elemente nur

einmal fuumlr Ihren gesamten Webbereich anlegen muumlssen und danach zentral pflegen koumlnnen

Eine Webseite setzt sich zusammen aus

bull Einer eigenen Organisationsbezeichnung Ihres Bereiches

bull Einer individuellen Zielgruppennavigation In Bereichen die keine eigene

Zielgruppennavigation erstellen erscheinen dort die entsprechenden Inhalte des zentralen

Angebotes der Universitaumlt

S e i t e | 10

bull Einer Navigation Sie koumlnnen in Ihrem Webbereich auch eine Vielzahl unterschiedlicher

Navigationen erstellen und diese je nach Bedarf einbinden

bull Der Seite (dem Dokument) selbst in der Sie Ihren Inhalt und Funktionen bearbeiten und die

vorherigen Elemente einfuumlgen koumlnnen

51 Die Organisationsbezeichnung

Die individuelle Bezeichnung Ihres Bereiches (Organisationsbezeichnung) erscheint auf Ihren

Webseiten links oben innerhalb der Impressionsgrafik direkt unter dem Schriftzug bdquoUNIVERSITAumlT

DUISBURG-ESSENldquo

Organisationsbezeichnungen erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

Sie koumlnnen Organisationsbezeichnungen in der Bearbeitungsebene ein- oder zweizeilig gestalten

S e i t e | 11

bull Der Eintrag in der ersten Zeile (bdquoOrganisationsbezeichnungldquo) erscheint groumlszliger und in weiszliger

fett-gesetzter Schrift

bull Ein Eintrag in der zweiten Zeile (bdquoZusatzldquo) erscheint in weiszliger normal gesetzter Schrift

Unter bdquoVerweis zur Organisationseinheit (URL)ldquo koumlnnen Sie das Sprungziel der

Organisationsbezeichnung bestimmen Tragen Sie diese Verknuumlpfung bitte als relativen Link ohne

Verweis auf den Webserver der Universitaumlt ein

bull Beispiel ihrverzeichnis anstatt httpwwwuni-duedeihrverzeichnis

Eine spaumltere Bearbeitung der Organisationsbezeichnung ist im CMS IMPERIA nicht uumlber das Tool

bdquoQuickEditldquo moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente

bearbeitenldquo im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichnisorganisation_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere

Organisationsbezeichnungen im selben Verzeichnis erstellen diesen einen jeweils moumlglichst

aussagekraumlftigen Dateititel zu geben

S e i t e | 12

52 Die Zielgruppennavigation

Eine individuelle Zielgruppennavigation in der Kopfzeile Ihrer Webseite erstellen Sie uumlber das

IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

Die editierte und veroumlffentlichte Zielgruppennavigation erscheint automatisch auf allen Seiten Ihres

Verzeichnisses

Tragen Sie bitte auch dort die Verknuumlpfungen als relative Links ohne Verweis auf den Webserver der

Universitaumlt ein Verwenden Sie dieses Instrument auszligerdem bitte nicht als moumlgliche zusaumltzliche

Quernavigation sondern ausschlieszliglich als Hilfe und zur Verlinkung gruppenspezifischer

Informationsaufarbeitung

Auch die spaumltere Bearbeitung der Zielgruppennavigation ist im CMS IMPERIA nicht uumlber das Tool

bdquoQuickEditldquo moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente

bearbeitenldquo im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Zielgruppennavigation lautet

ihrverzeichnistargetsshtml

S e i t e | 13

Beachten Sie beim Import bitte Folgendes Anders als seit Beginn des Wintersemesters 2007

gehandhabt kann mit dem UDE-Webrelaunch im Oktober 2011 pro Verzeichnis nur noch eine

anstelle von zwei Zielgruppennavigationen erstellt werden die zudem automatisch in Ihrer Webseite

eingesetzt wird In Verzeichnissen die zwischen 2007 und 2011 angelegt wurden existiert oft

(zusaumltzlich oder ausschlieszliglich) eine sogenannte bdquoerweiterte Zielgruppennavigationldquo

(ihrverzeichnisetargetsshtml) Der Webserver der Universitaumlt sucht bei der Ausgabe Ihrer

Internetseiten im ersten Schritt nach der Datei bdquotargetsshtmlldquo im zweiten Schritt nach der Datei

bdquoetargetsshtmlldquo in Ihrem Verzeichnis und gibt die Zielgruppennavigation dieser Prioritaumlt nach aus

Fehlen beide Dateien so erscheinen die entsprechenden Inhalte des zentralen Angebotes der

Universitaumlt

53 Die Navigation

Navigationen in der linken Spalte Ihrer Webseite sind maximal zwei Ebenen tief

bull In der ersten Ebene ist die Schrift in Versalien (Groszligbuchstaben) gesetzt Schreiben Sie Ihre

Links bitte dennoch bdquonormalldquo Die Transformation in Groszligbuchstaben erfolgt automatisch

durch das System Die Navigationspunkte der ersten Ebene sind mit einem blauen Rechteck

versehen das am linken Seitenrand anliegt

bull Die zweite Navigationsebene erscheint in der Ausgabe nach rechts geruumlckt und regulaumlr in

Groszlig- und Kleinschreibung gesetzt

Links in Navigationen veraumlndern sich beim Uumlberfahren mit der Maus bzw beim Antabben auf

Touchpads Die Schrift erscheint dann weiszlig auf einem blauen Hintergrund Das Gleiche gilt fuumlr den

jeweils aktiven Menuumlpunkt Dieser ist in der Navigation dauerhaft weiszlig mit blauer Hinterlegung

Navigationen erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 14

Zum Aufbau Ihrer Navigation stehen Ihnen die Module bdquoNavigationslinkldquo und

bdquoNavigationsuntermenuumlldquo zur Verfuumlgung Ein Navigationslink erscheint einzeln auf der ersten Ebene

versehen mit einem vorgelagerten blauen Rechteck Mit dem Navigationsuntermenuuml koumlnnen Sie

Menuumlpunkte erzeugen die neben dieser ersten Position uumlber eine zweite eingeruumlckte Ebene

verfuumlgen Dort lassen sich beliebig viele Unterpunkte einsetzen Je nachdem ob Sie den

uumlbergeordneten Eintrag im Navigationsuntermenuuml mit einer Zieladresse (URL) versehen erscheint

dieser verlinkt oder als einfache Uumlberschrift uumlber die nachgelagerten Inhaltspunkte

Selbstverstaumlndlich lassen sich die einzelnen Einheiten in ihrer Position jederzeit verschieben Tragen

Sie interne Links in Ihren Navigationen bitte als relative Verknuumlpfungen ohne Verweis auf den

Webserver der Universitaumlt ein

Editierte und veroumlffentlichte Navigation erscheinen innerhalb der Rubrik in der sie angelegt wurden

automatisch zur Auswahl im linken Bereich der Bearbeitungsebene Ihrer Webseite

Die spaumltere Bearbeitung von Navigationen ist im CMS IMPERIA auf zwei Wegen moumlglich Die

entsprechende Datei kann zum einen uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo im

IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Navigationen folgt folgendem Muster

ihrverzeichnisnav_12345shtml

S e i t e | 15

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Navigationen im selben

Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

Zum anderen koumlnnen Sie auch aus der Bearbeitungsebene einer Webseite heraus dort ausgewaumlhlte

Navigationen aufrufen und editieren Beachten Sie jedoch dass nach dem Speichern der

bearbeiteten Navigation sowohl die Navigationsdatei als auch die Datei der Ursprungsseite auf Ihrem

Schreibtisch liegen

6 Webseiten gestalten

Fuumlr die Gestaltung Ihres Inhalts steht Ihnen eine groszlige Anzahl statischer wie dynamischer Elemente

(Module) zur Verfuumlgung Welche Elemente Sie im Einzelnen nutzen koumlnnen haumlngt davon ab welchen

Dateityp Sie bei der Dokumentenerzeugung fuumlr Ihre Webseite waumlhlen Das Content Management

System der Hochschule bietet Ihnen die Moumlglichkeit Ihr Dokument als HTML-Web-Seite oder als

PHP-Skript zu erzeugen Beachten Sie bitte von Anfang an dass diese Auswahl Einfluss auf die URL

(Internetadresse) der jeweiligen Seite hat Bei einer nachtraumlglichen Aumlnderung aumlndert sich auch die

Internetadresse unter der Ihre Seite im Netz zu finden ist Sie muumlssen dann eventuell Verlinkungen

an vielen Stellen aumlndern

bull Internetadresse einer HTML-Web-Seite wwwuni-duedebereichihreseiteshtml

bull Internetadresse eines PHP-Skripts wwwuni-duedebereichihreseitephp

Je nachdem ob Sie Ihr Dokument als HTML-Web-Seite oder als PHP-Skript erzeugen koumlnnen Sie

folgende Elemente nutzen

Linke Spalte des Inhaltsbereiches

bull (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

bull A-Z verwalten PHP-Skript HTML-Web-Seite

bull Code editieren PHP-Skript HTML-Web-Seite

bull Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

bull DBAdmin PHP-Skript

bull Doppelcontainer PHP-Skript HTML-Web-Seite

bull Flickr nutzen PHP-Skript

bull Formular schlieszligen PHP-Skript

bull Formular oumlffnen PHP-Skript

S e i t e | 16

bull Formular Element PHP-Skript

bull Formulareingabe in DB speichern PHP-Skript

bull Google-Maps (v30) PHP-Skript HTML-Web-Seite

bull Image-Gallery (v21) PHP-Skript HTML-Web-Seite

bull Mailinglisten PHP-Skript

bull Mitarbeiter-Liste PHP-Skript

bull Mitarbeiter-Publikationsliste PHP-Skript

bull Mitarbeiter-Seite PHP-Skript

bull Randlose Grafik PHP-Skript HTML-Web-Seite

bull RSS-Feed-Administration PHP-Skript

bull RSS-Feed-Agent PHP-Skript

bull Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

bull Veranstaltungskalender Kalendermodul PHP-Skript

bull Veranstaltungskalender Veranstaltungsmodul PHP-Skript

Rechte Spalte des Inhaltsbereiches

bull (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

bull Code editieren PHP-Skript HTML-Web-Seite

bull Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

bull Flickr nutzen PHP-Skript

bull Mitarbeiter-Seite PHP-Skript

bull Randlose Grafik PHP-Skript HTML-Web-Seite

bull RSS-Feed-Agent PHP-Skript

bull Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

bull Veranstaltungskalender Kalendermodul PHP-Skript

Beim Erstellen Ihrer Webseite koumlnnen Sie diese einzelnen Module nach Bedarf (auch mehrfach)

erzeugen und in der gewuumlnschten Reihenfolge platzieren wobei die gewaumlhlte Reihenfolge jederzeit

veraumlnderbar ist Mit wenigen Ausnahmen lassen sich die einzelnen Einheiten weiszlig blau oder beige

einfaumlrben (Ausnahme randlose Grafik) Sie werden vom System dann als voneinander abgesetzte

Bloumlcke ausgegeben

Um innerhalb eines Dokuments zu navigieren koumlnnen Sie wenn noumltig die einzelnen Elemente auch

mit einem Link-Anker versehen (Ausnahmen randlose Grafik Mitarbeiter-Liste -Publikationsliste

und ndashSeite Veranstaltungskalender Veranstaltungs- sowie Kalendermodul) Den Ankernamen

S e i t e | 17

koumlnnen Sie frei vergeben er darf jedoch keine Leer- oder Sonderzeichen enthalten Das erste Zeichen

muss auszligerdem ein Buchstabe sein

61 Uumlber allem Die Brotkrumennavigation

Zwischen Seitentitel und ndashinhalt koumlnnen Sie auf jeder Seite eine individuelle Brotkrumennavigation

editieren die den Nutzern eine schnelle Uumlbersicht daruumlber ermoumlglicht wie sie auf die gerade

aufgerufene Webseite gelangt sind Verwenden Sie dieses Instrument bitte nicht als moumlgliche

zusaumltzliche Quernavigation sondern ausschlieszliglich als Hilfe im vorgesehenen Sinne

Der letzte Eintrag der Brotkrumennavigation der uumlblicherweise die aktuell aufgerufene Seite

benennt sollte nicht mit einer Zieladresse (URL) versehen werden Der Eintrag erscheint dann als

regulaumlr schwarz formatierter Text nicht als blau ausgezeichneter Link

S e i t e | 18

62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

Mit dem TinyMCE-Texteditor stellt Ihnen das Content Management System der UDE einen auf

JavaScript basierenden WYSIWYG-Editor (bdquoWhat You See Is What You Getldquo) zur Verfuumlgung Mit Hilfe

dieses Moduls ist es moumlglich ohne HTML- oder weitergehende Programmierkenntnisse Beitraumlge zu

verfassen und Seiten zu formatieren Die Bedienung mittels einer Textbox orientiert sich stark an

gaumlngiger und bekannter Textverarbeitungs-Software

Texte formatieren

Selbstverstaumlndlich bietet der TinyMCE-Editor die uumlblichen Arten Texte zu formatieren Neben den

Befehlen fett (bdquoBoldldquo) kursiv (bdquoItalicldquo) unterstrichen (bdquoUnderlineldquo) sowie hoch- bzw tiefgestellt

bietet Ihnen das System uumlber das Ω-Symbol eine breite Palette an Sonderzeichen uumlber die

Listenfunktion die Erstellung einfacher oder nummerierter Aufzaumlhlungslisten an Mittels einer Select-

S e i t e | 19

Box koumlnnen Sie auszligerdem auf im Hochschullayout vorgegebene Uumlberschriftarten (bdquoHeadingsldquo)

zuruumlckgreifen

Als weitere Moumlglichkeiten steht Ihnen frei

bull ein Datum undoder eine Uhrzeit einzufuumlgen

bull Blockzitate zu kennzeichnen oder

bull geschuumltzte Leerzeichen (bdquoNon-breaking Space Characterldquo) zu definieren

bull Das Ankersymbol (bdquoInsertEdit Anchorldquo) erlaubt die Definition von Sprungzielen innerhalb

laumlngerer Texte

Im Notfall hilft Ihnen das Radiergummi-Symbol (bdquoRemove Formatting) saumlmtliche Formatierungen zu

entfernen

Bereits formatierten Text einfuumlgen

Uumlber diese Formatierungsarten hinaus koumlnnen Sie auch bereits vorformatierte Texte aus Ihrer

Textverarbeitung in den Editor kopieren Zum Einfuumlgen nutzen Sie jedoch bitte nicht den einfachen

Copy amp Paste-Befehl sondern die im Modul bereitgestellte Funktion bdquoPaste from Wordldquo (Sie finden

das entsprechende bdquoWldquo-Symbol unter der Texteingabe-Box) ndash und zwar auch dann wenn Ihr

Ursprungstext nicht aus Microsoft Word sondern einer anderen Textverarbeitungssoftware

importiert wird Schriftformatierungen Verlinkungen und Aumlhnliches werden dann 11 uumlbernommen

Achten Sie bitte dennoch darauf dass dieser Funktion Grenzen gesetzt sind und arbeiten Sie mit

moumlglichst einfachen Formatvorlagen

HTML-Ansicht

Fuumlr Redakteure die sich in der Seitenprogrammierung sicherer fuumlhlen als in der Textverarbeitung

haumllt das Modul TinyMCE-Texteditor uumlber den Button bdquoHTMLldquo einen HTML Source Editor bereit mit

dem direkt auf den Quelltext und die Codierung dieses Teils der Webseite zugegriffen werden kann

Diese Funktion eignet sich auszligerdem besonders zur Uumlberpruumlfung und Fehlersuche Zur

Programmierung eigener Funktionen nutzen Sie jedoch bitte das Modul bdquoCode editierenldquo

S e i t e | 20

Links

Die uumlber die Symbole bdquoInsertEdit Linkldquo (Link einfuumlgen oder bearbeiten) in Ihre Texte oder

Aufzaumlhlungslisten eingefuumlgten Hyperlinks formatiert das System selbststaumlndig im fuumlr die UDE

vorgesehehen Layout Tragen Sie Links auf Seiten innerhalb von wwwuni-duede bitte als relative

Verknuumlpfungen ohne Verweis auf den Webserver der Universitaumlt ein also

bull depresse

anstelle von

bull httpwwwuni-duededepresseindexphp

Zeichnen sie auszligerdem Ihre Verlinkungen im Sinne der Barrierefreiheit mit sprechenden Titeln aus

und uumlberlegen Sie sich ob das Sprungziel im selben oder in einem neuen Browserfenster geoumlffnet

werden soll

Uumlber das Symbol bdquoUnlinkldquo entfernen Sie die entsprechende Verlinkung

Bilder

Der TinyMCE-Texteditor bietet Ihnen zwei Moumlglichkeiten Bilder in Ihre Texte einzubinden

S e i t e | 21

bull Uumlber die Funktion bdquoInsertEdit Imageldquo (Icon unter der Texteingabe-Box) koumlnnen Sie den

relativen Pfad auf das entsprechende Bild aus der IMPERIA-Mediendatenbank einfuumlgen

(Formatbeispiel imperiamdimageswebredaktion2013parentservicejpg)

bull Die Funktion bdquoVorschaubild waumlhlenldquo laumlsst Sie direkt auf die IMPERIA-Mediendatenbank

zugreifen und dort die gewuumlnschte Grafik per Klick auswaumlhlen Uumlber die Funktion bdquoVollbild

waumlhlenldquo koumlnnen Sie das Bild optional zu einer groumlszligeren Ansicht verlinken die sich als

bdquoLightboxldquo uumlber der aktiven Webseite oumlffnet Der Befehl bdquoBild zuruumlcksetzenldquo entfernt die

gewaumlhlte Grafik aus Ihrer Webseite

Waumlhrend Sie mittels bdquoInsertEdit Imageldquo die Anzeige-Groumlszlige Ihres Bildes (bis maximal 480 Pixel

Breite) selbst bestimmen koumlnnen werden Grafiken uumlber die Funktion bdquoVorschaubild waumlhlenldquo beim

Einfuumlgen automatisch auf die passende Groumlszlige skaliert (162 Pixel Breite in der linken und 204 Pixel

Breite in der rechten Content-Spalte) In diesem Fall koumlnnen Sie zudem waumlhlen ob der Text an dieser

Stelle das Bild umflieszligt oder aber rechts daneben angezeigt wird Das Vollbild wird bei der Eingabe

nicht skaliert Nutzen Sie daher bitte Bilder mit einer bildschirmtauglichen Groumlszlige (maximal 1024

Pixel)

S e i t e | 22

Tabellen

Uumlber das Icon bdquoInsertEdit Tableldquo fuumlgen Sie an der gewuumlnschten Stelle Tabellen in Ihren Texteditor

ein Unter den Reitern bdquoGeneralldquo und bdquoAdvancedldquo koumlnnen Sie diese Tabellen gemaumlszlig den uumlblichen

HTML-Konventionen erstellen formatieren und bearbeiten

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig gemaumlszlig den Vorgaben der Barrierefreiheit als

solche aus Der Text-Editor stellt Ihnen diese Optionen zur Verfuumlgung

bull Beachten Sie dass die Hintergrundfarbe der Tabellen je nach gewaumlhlter Einfaumlrbung des

Moduls variiert

S e i t e | 23

Texte mit bdquoVerfallsdatumldquo

Grundsaumltzlich steht Ihnen das Modul bdquo(TinyMCE)-Texteditorldquo sowohl auf shtml-Seiten als auch in

php-Skripten zur Verfuumlgung Auf php-Seiten laumlsst sich jedoch eine zusaumltzliche Option nutzen Fuumlr

Texte die nur fuumlr einen gewissen Zeitraum auf Ihrer Webseite erscheinen sollen koumlnnen Sie ein

Start- und Enddatum setzen

63 A-Z verwalten PHP-Skript HTML-Web-Seite

Das Modul bdquoA-Z verwaltenldquo ermoumlglicht den Redakteuren A-Z-Listen relativ einfach zu erzeugen und

zu pflegen

S e i t e | 24

Fuumlr jeden Eintrag in der Stichwortliste muss im Eingabefeld eine einzelne Zeile eingefuumlgt werden Die

Eingabe folgt einem festen Schema

bull Stichwort||URL (Internetadresse)||

oder

bull Stichwort||URL (Internetadresse)||eventuell ein kurzer Beschreibungstext

wobei auf den Beschreibungstext auch verzichtet werden kann Die sogenannten bdquoPipe-Zeichenldquo (||)

dienen als Feldtrenner Sie erzeugen sie uumlber den Tastaturbefehl bdquoAltGr amp das Groumlszligerzeichenldquo

Wahlweise kopieren Sie die entsprechenden Zeichen aus bisherigen Eintraumlgen

Auch hier gilt Tragen Sie interne Links in Ihrer A-Z-Liste bitte als relative Verknuumlpfungen ohne

Verweis auf den Webserver der Universitaumlt ein also

bull Abiturjahrgang 2013||doppelter_abiturjahrgang||

anstelle von

bull Abiturjahrgang 2013||httpwwwuni-duededoppelter_abiturjahrgang||

Externe Links (wie etwa bdquoGlassbooth ||httpwwwglassboothde||ldquo) werden auf der

ausgegebenen Webseite entsprechend gekennzeichnet

S e i t e | 25

Die Eintraumlge im Modul bdquoA-Z verwaltenldquo sortiert das Content Management System automatisch nach

Ziffernreihenfolge bzw dem Alphabet Um die Eintraumlge spaumlter einfach aufzufinden und bearbeiten zu

koumlnnen empfiehlt es sich jedoch bereits im Eingabefeld selbst eine alphabetische Sortierung

vorzunehmen

64 Code editieren PHP-Skript HTML-Web-Seite

Das Modul bdquoCode editierenldquo eroumlffnet Ihnen die Moumlglichkeit in Ihrem Internetauftritt eigene PHP-

oder HTML-Codeschnipsel zu erstellen und zu nutzen oder Programmierungen eigener Funktionen

vorzunehmen

Nutzen Sie dieses Modul bitte nicht um Funktionen zu simulieren die Ihnen das CMS IMPERIA bereits

als vorgefertigte Module zur Verfuumlgung stellt Das freie Code-Eingabefeld ist ebenfalls nicht dazu

S e i t e | 26

vorgesehen auf diesem Wege vom Corporate Design der Universitaumlt abweichende eigene Layouts zu

entwickeln

65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

Uumlber das Modul bdquoCodebaustein einfuumlgenldquo ist es moumlglich vorgefertigte Bloumlcke oder bdquoBauteileldquo in Ihre

Webseite zu integrieren Codebausteine eignen sich dazu bestimmte Informationen die auf vielen

Webseiten wiederkehren an einer Stelle zentral zu pflegen In der Bearbeitungsebene bietet Ihnen

das Modul die in der aktuellen Rubrik vorhandenen Bausteine zur Auswahl an

Codebausteine erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 27

Sie koumlnnen in Codebausteinen wie beim uumlblichen Seitenaufbau gewohnt unterschiedliche Module

kombinieren und positionieren Zur Verfuumlgung stehen die Elemente

bull (TinyMCE)-Texteditor

bull Code editieren

bull die Formularmodule

bull Randlose Grafik

bull RSS-Feed-Agent

bull Tube Audio-VideoPlayer

Eine spaumltere Bearbeitung der Codebausteine ist im CMS IMPERIA nicht uumlber das Tool bdquoQuickEditldquo

moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo

im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichniscode_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Codebausteine im

selben Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

66 DBAdmin PHP-Skript

Mit Hilfe des Moduls bdquoDBAdminldquo lassen sich Datenbank direkt in Tabellenform auf Ihrer Webseite

darstellen Uumlber die Funktion bdquoOptionen anzeigenldquo erhalten Sie zudem die Moumlglichkeit eine

Webseite zur Pflege Ihrer Datenbank zu erstellen Dort koumlnnen Sie die entsprechende Tabelle

editieren d h Eintraumlge einzeln erstellen bearbeiten oder loumlschen

S e i t e | 28

Zur Nutzung dieses Moduls sind folgende Angaben notwendig

bull Datenbank-Server Name oder IP-Adresse des Servers auf dem die anzusprechende

Datenbank liegt (bspw bdquodbuni-duedeldquo)

bull Datenbank-Name

bull Tabellen-Name Name der speziellen Tabelle die innerhalb der Datenbank angesprochen

werden soll

bull Datenbank-Benutzer und Datenbank-Passwort

Datenbanken auf einem UDE-Server koumlnnen Universitaumltsangehoumlrige unter Nutzung ihrer

Hochschulkennung online beim Zentrum fuumlr Informations- und Mediendienste (ZIM) beantragen

unter httpwwwuni-duedezimserviceshomepagesmysqlshtml

67 Doppelcontainer PHP-Skript HTML-Web-Seite

Das Modul bdquoDoppelcontainerldquo ermoumlglicht es Ihnen auf Ihrer Webseite zwei Textebloumlcke (je nach

Wunsch mit oder ohne Bilder) nebeneinander zu setzen

Auf zweispaltig angelegten Webseiten ist die Anlage eines Doppelcontainers nur in der linken Spalte

moumlglich Bilder erscheinen dort in einer Breite von 246 Pixeln Auf einspaltig angelegten Webseiten

werden die einzelnen Bloumlcke (und dementsprechend die verwendeten Bilder) in einer Breite von 366

Pixeln angezeigt Die Bildhoumlhe ist in beiden Faumlllen frei waumlhlbar sollte jedoch in beiden Containern

identisch sein

S e i t e | 29

Zur Texteingabe stehen Ihnen die Optionen bdquoTeaserldquo (mit Zeichenbegrenzung) sowie bdquoStandardldquo

(ohne Zeichenbegrenzung) zur Verfuumlgung Waumlhlen Sie bdquoTeaserldquo so erhalten Sie Platz fuumlr 300 Zeichen

ndash ein Zeichenzaumlhler neben der Texteingabe-Box erleichtert das Mitzaumlhlen Der Text wird gelb

unterlegt wenn er nach dem naumlchsten Leerzeichen abgeschnitten wird Rot erscheint das Textfeld

wenn die Zeichenzahl bereits uumlberschritten wurde

Beachten Sie bitte dass das Modul HTML-Tags (URLs Mailadressen etc) automatisch filtert Sie

werden daher nicht angezeigt Um Ihren Text zu verlinken koumlnnen Sie das Eingabefeld bdquoMehr-Linkldquo

nutzen

Beide Bloumlcke innerhalb eines Doppelcontainers lassen sich individuell auf die uumlbliche Weise (weiszlig

hellblau sandfarben) hinterlegen

S e i t e | 30

68 Flickr nutzen PHP-Skript

Das Modul bdquoFlickr nutzenldquo ermoumlglicht es Ihnen im Sinne einer crossmedialen Verwertung Bilder aus

Ihrem Flickr-Account in Ihre IMPERIA-Webseite einzubinden Fuumlr diese Funktion benoumltigen Sie einen

sogenannten API-Key den Sie in Ihrem Flick-Auftritt unter

bull httpwwwflickrcomservicesappscreateapply

erzeugen lassen koumlnnen Tragen Sie dann diesen Key in die entsprechende Eingabemaske des Moduls

ein Anschlieszligend haben Sie die Moumlglichkeit ganze Fotosets (Alben) oder Einzelbilder einzubinden

Photoset anzeigen

S e i t e | 31

Zum Anzeigen von Photosets wird die entsprechende Photoset-ID ins Modul eingetragen Diese ID ist

Teil der Link-Adresse des entsprechenden Albums bei Flickr (die erscheint wenn Sie das Album

angeklickt haben) Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAMEsets12340954909

Die Photoset-ID verbirgt sich hinter den Ziffern am Ende der URL Sie koumlnnen auswaumlhlen wie viele

Fotos auf einer Webseite erscheinen sollen Dafuumlr uumlbernimmt das Modul die Bilder in der

quadratischen Aufloumlsung von Flickr also in einer Groumlszlige von 75 x 75 Pixeln Reicht der Platz dafuumlr

nicht aus wird eine zusaumltzliche Blaumltterfunktion angeboten Photoset- und Bild-Beschreibungen

koumlnnen aus dem Flickr-Account automatisch uumlbernommen werden wenn die entsprechenden

Optionen mit einem Haken aktiviert wurden

Einzelbild anzeigen

Um ein einzelnes Bild anzuzeigen benoumltigen Sie die entsprechen Flickr-Foto-ID Diese verbirgt sich

hinter der ersten Zahl in der Link-Adresse des entsprechenden Bildes Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAME5841603851inset-72157626981464896

Ein Einzelbild kann in einer hohen oder einer geringen Aufloumlsung eingebunden werden Bei einer

zweispaltig angelegten Webseite wird das Bild in der linken Inhaltsspalte auf eine Breite von 480

Pixel bei einer einspaltig angelegten Webseite auf eine Breite von 721 Pixel skaliert

69 Formulare

Mit IMPERIA haben Sie die Moumlglichkeit Formulare auf Ihrer Webseite zu platzieren In der

Bearbeitungsebene Ihrer Seite finden Sie im Bereich bdquoNeues Modulldquo den Menupunkt UDE ndash

Formular oumlffnen

Nach dem Festlegen der Hintergrundfarbe koumlnnen Sie im Bereich bdquoLegendeldquo den Titel Ihres

Formulars waumlhlen Wenn Sie die Funktion bdquoMailer-Funktionalitaumltldquo aktivieren koumlnnen Sie die Adresse

Ihres Mailscripts eingeben Anderenfalls belassen Sie es bitte beim Vorgabewert

Im Bereich bdquoNexturlldquo kann angegeben werden welche Seite nach dem Abschicken des Formulars

aufgerufen werden soll Daruumlber hinaus werden der Titel der E-Mail die Absender-Adresse sowie die

Empfaumlnger-Adresse definiert Optional kann eine Bestaumltigungs-E-Mail mit frei waumlhlbarem Text

versendet werden

S e i t e | 32

Um dem erstellten Formular Eingabefelder hinzuzufuumlgen ist das Modul bdquoUDE Formular Elementldquo zu

waumlhlen Waumlhlen Sie das Element bdquoTextldquo um ein Eingabefeld zu erzeugen Die Option bdquoBezeichnerldquo

beschreibt den sichtbaren Text im fertigen Formular zum Beispiel bdquoIhr Nameldquo Weitergehend koumlnnen

Sie die zulaumlssigen Inhalte der Nutzereingaben definieren sowie markieren ob das Element ein

Pflichtfeld sein soll

S e i t e | 33

Um ein Texteingabefeld innerhalb des Formulars zu erzeugen waumlhlen Sie das Element bdquoTextarealdquo

Sie koumlnnen die Groumlszlige des Textfeldes definieren (Zeilen x Spalten) und optional erneut eine Pruumlfung

zulaumlssiger Nutzereingaben aktivieren Weiterhin koumlnnen Sie waumlhlen ob der eingegebene Wert des

Formularelements in die Datenbank eingetragen werden soll Wenn Sie fuumlr Ihre Formulare auf eine

Datenbank zuruumlckgreifen moumlchten koumlnnen Sie sich hier informieren httpwwwuni-

duedezimserviceshomepagesmysqlshtml

Insgesamt stehen folgende Elemente zur Verfuumlgung

bull Checkbox Hidden Password Select Anfang Select Option einfuumlgen Select Ende Submit

Text Datum Textarea Radio Reset Leerzeile Kommentarzeile Neuer Abschnitt mit

Bezeichner sowie Datei-Upload

Ein Formular muss mit dem Modul bdquoUDE Formular schlieszligenldquo abgeschlossen werden An dieser

Stelle koumlnnen Sie einen Send-Button hinzufuumlgen dessen Name frei waumlhlbar ist Der eingegebene Text

wird als Beschriftung des Buttons angezeigt Erst durch das Hinzufuumlgen dieses Moduls wird das

Formular auf Ihrer Seite sichtbar und kann nach der Veroumlffentlichung genutzt werden

S e i t e | 34

610 Google-Maps (v30) PHP-Skript HTML-Web-Seite

Dieses Modul bringt eine Grafik von Google-Maps auf die Webseite entweder in Kartenoptik oder als

Satellitenbild Sie haben zwei Moumlglichkeiten eine solche zu generieren Uumlber die konkreten GPS-

Koordinaten oder durch das Angeben einer Adresse (zB Forsthausweg 2 47057 Duisburg) Sie

koumlnnen aus zwoumllf Vergroumlszligerungsstufen fuumlr den gewuumlnschten Ausschnitt zwei Kartengroumlszligen und

zwei Kartenformaten waumlhlen

S e i t e | 35

Kartengroumlszlige bdquogroszligldquo skaliert die Graphik auf 480 Pixel Breite auf einer zweispaltigen Seite bzw auf

721 Pixel auf einer einspaltigen Seite Die Option bdquokleinldquo verringert die Breite auf etwa die Haumllfte Die

beiden Optionen beim Kartenformat beeinflussen die Houmlhe der Grafik

S e i t e | 36

611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite

Das Modul Image-Gallery ermoumlglicht die Integration einer komfortablen Bildergallerie uumlber IMPERIA

Per Klick auf bdquoNeues Modulldquo -gt bdquoUDE Image-Gallery (v21)ldquo kann die entsprechende Gallerie an der

gewuumlnschten Position eingefuumlgt werden Generell sollten nur Bilder verwendet werden die

entweder auf 640 x 480 Pixel oder maximal auf 900 x 600 Pixel skaliert sind Aufgrund einer hohen

Dateigroumlszlige sollten Bilder einer Digitalkamera vor dem Upload komprimiert werden

Innerhalb des Moduls kann zunaumlchst die Hintergrundfarbe der Gallerie wahlweise zwischen Beige

Blau und Weiszlig eingestellt werden Um die Gallerie mit Bildern zu fuumlllen ist das entsprechende

Verzeichnis der Mediendatenbank anzugeben Aufgrund der geaumlnderten Syntax wird das Verzeichnis

ohne images angegeben Die Suchmaske fuumlr die Bilderauswahl deklariert die Dateiformate die mit

einbezogen werden sollen Schlieszliglich koumlnnen Sie die Bilder alphabetisch sortiert anzeigen lassen

sowie einen kleinen und einen groszligen Titel fuumlr Ihre Bildergallerie vergeben

Grundsaumltzlich ist es empfehlenswert groumlszligere Bildmengen auf mehrere Seiten zu verteilen um

einerseits die Darstellung auf mobilen Geraumlten zu vereinfachen und andererseits geringeren

Bandbreiten Rechnung zu tragen

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 7: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 6

Weitere Informationen

bull Zugang zum UDE-System IMPERIA-Rubriken Web-Verzeichnisse

Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

bull Anwenderschulung

Hartmut Prause (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0201) 183-4115 hartmutprauseuni-duede

bull Termine der Einfuumlhrungskurse

httpwwwuni-duedezimservicesweiterbildungkurse

Neben IMPERIA wird an Einrichtungen der UDE auch mit anderen Content Management Systemen

gearbeitet die spezifische Eigenschaften aufweisen Genutzt werden unter anderen die Open Source

Produkte Typo3 Drupal oder Joomla Mit welchem System die jeweilige UDE-Einrichtung arbeitet ist

dezentral zu entscheiden Gleichwohl sollte auch bei einer Entscheidung fuumlr ein alternatives System

bedacht werden wie die Ausfallsicherheit die Kontinuitaumlt der Weiterentwicklung sowie die

Darstellung im Design der Hochschule gewaumlhrleistet werden koumlnnen

S e i t e | 7

4 Grundsaumltze der Webseitengestaltung Seitenaufbau

Um der sich staumlndig veraumlndernden Landschaft an Ausgabegeraumlten (Desktops Netbooks Tablets

Smartphoneshellip) Rechnung zu tragen passt sich das neue (adaptive) Layout der UDE-Website

dynamisch an unterschiedliche Bildschirm- bzw Browserfenstergroumlszligen an Die bdquonormaleldquo

Desktopansicht aumlndert so auf einem kleineren Bildschirm wie beispielsweise einem aumllteren iPad im

Querformat die Breite so dass horizontales Scrollen vermieden wird Bei kleineren Bildschirmen bricht

die rechte Spalte um und wird unterhalb des Hauptinhaltes angezeigt Auf Mobiltelefonen schlieszliglich

entfaumlllt die Spaltenanordnung komplett und saumlmtliche Inhalte werden untereinander angezeigt

Dieses Verhalten ist dadurch moumlglich dass alle Groumlszligenangaben im System nur relativ angegeben

sind Verwenden Sie daher keine eigenen fixen Groumlszligenangaben die diese Vorlagen uumlberschreiben

In der bdquonormalenldquo Desktopansicht folgt der Webseitenaufbau im Internetangebot der Universitaumlt

einem festen Raster dass Ihnen bei Verwendung des CMS IMPERIA automatisch vorgegeben wird

bull Die Webseite der UDE liegt als weiszliges bdquoBlattldquo zentriert auf einem sandfarbenen Hintergrund

Der Container der dieses bdquoBlattldquo optisch darstellt beginnt in einem Abstand von 15 Pixeln

S e i t e | 8

zum oberen Seitenrand und setzt immer am unteren Seitenrand auf Der linke der obere und

der rechte Containerrand erzeugen einen leichten Schatteneffekt

bull Links in der Kopfzeile begruumlszligt immer an erster Stelle der Schriftzug bdquoUNIVERSITAumlT

DUISBURG-ESSENldquo die Seitenbesucher Auf jeder Seite der Universitaumlt genuumlgt ein Mausklick

auf den Schriftzug um zuruumlck auf die UDE-Startseite zu gelangen

bull Die gruppenspezifische Aufarbeitung von Informationen gilt inzwischen ndash zu Recht ndash als ein

Qualitaumltsmerkmal von Internetseiten Jede UDE-Webseite erhaumllt deshalb in der Kopfzeile

eine Zielgruppennavigation In Bereichen die keine eigene Zielgruppennavigation erstellen

erscheinen dort die entsprechenden Inhalte des zentralen Angebotes der Universitaumlt

bull Unterhalb der Kopfzeile erscheint auf jeder Seite der Universitaumlt eine Impressionsgrafik Das

System IMPERIA gibt Ihnen diese Grafik vor Sie greift mit ihrem Motiv (Himmel und Wolken)

das beherrschende Key-Visual des Corporate Design der Hochschule auf Zentral am unteren

Rand des Bildes wird vor einem uumlberlagernden weiszligen Kasten der Titel der jeweiligen

Webseite angezeigt Die Houmlhe der Impressionsgrafik veraumlndert sich wenn der eingefuumlgte

Seitentitel mehrzeilig wird

bull Innerhalb der Impressionsgrafik koumlnnen Sie auf der linken Seite eine ein- oder zweizeilige

Bezeichnung Ihres Bereiches einfuumlgen Diese individuelle Organisationsangabe sitzt so im

Gesamtlayout direkt unter dem Schriftzug bdquoUNIVERSITAumlT DUISBURG-ESSENldquo und gibt den

Seitenbesuchern auf den ersten Blick die Orientierung daruumlber wo sie sich eigentlich gerade

befinden Sie koumlnnen sie individuell verlinken

bull Das Universitaumlts-Logo sitzt rechtsbuumlndig in der Impressionsgrafik Es ist so einzurichten dass

ein Mausklick genuumlgt um auf die UDE-Homepage zu gelangen Das Logo darf nicht ohne den

Claim bdquoOffen im Denkenldquo (wahlweise im Englischen bdquoOpen mindedldquo) verwendet werden

bull In der linken Spalte kann der jeweilige Seitenanbieter eine frei editierbare Navigation

einbinden Die Navigation umfasst maximal zwei Ebenen Durch die bewusst reduzierte

Menuumlstruktur signalisiert die Internetpraumlsenz Klarheit und Transparenz Die

Hauptmenuumleintraumlge sind in Groszligbuchstaben (Versalien) ausgefuumlhrt Eintraumlge von

Untermenuumls sind eingeruumlckt und in Normalschrift formatiert Auf beiden Ebenen wird die

Schrift beim Uumlberfahren mit der Maus bzw beim Antabben auf Touch-Screens weiszlig vor

blauem Hintergrund Gleiches gilt fuumlr den jeweils aktiven Menuumlpunkt (Im Jahr 2013 wird auf

jeder mit dem CMS IMPERIA im aktuellen Template erzeugten Webseite uumlber der

Hauptnavigation das Jubilaumlumsfaumlhnchen zum zehnjaumlhrigen Bestehen der Universitaumlt

eingeblendet verlinkt auf httpwwwuni-duede10jahre)

bull Unterhalb der eigenen Navigation wird immer die zentrale Suche (Volltextsuche

Personensuche) der Universitaumlt verlinkt An dieser Stelle koumlnnen Sie zudem wahlweise (und

S e i t e | 9

auf jeder Seite einzeln) einen Link auf eine individuelle A-Z-Seite undoder auf einen eigenen

Intranet-Bereich sowie mit Landesfahnen gekennzeichnete Hinweise auf parallel angebotene

fremdsprachige Inhalte einfuumlgen

bull Zwischen Seitentitel und ndashinhalt koumlnnen Sie auf jeder Seite eine individuelle

Brotkrumennavigation editieren die den Nutzern eine schnelle Uumlbersicht daruumlber

ermoumlglicht wie sie auf die gerade aufgerufene Webseite gelangt sind

bull Der eigentliche Inhaltsbereich (Content) der Webseite kann bei der Seitenerzeugung ein-

oder zweispaltig angelegt werden Der Wechsel zwischen Ein- und Zweispaltigkeit einer Seite

ist uumlber den IMPERIA -Workflow jederzeit moumlglich Bei einem zweispaltigen Contentbereich

ist die schmale rechte Spalte fuumlr Zusatzinformationen vorgesehen die nicht direkt zum

Hauptinhalt gehoumlren bspw Veranstaltungskalender Banner oder RSS-Feeds Fuumlr die

Gestaltung des Inhalts steht eine groszlige Anzahl statischer wie dynamischer Elemente

(Module) zur Verfuumlgung Die einzelnen Module des Inhaltsbereiches koumlnnen unterschiedlich

eingefaumlrbt werden Sie haben die Wahl zwischen weiszliger (Standardeinstellung) sandfarbener

oder hellblauer Hinterlegung

bull In der Fuszligzeile angedockt an den unteren Seitenrand erscheint auf allen Seiten der

Hochschule ein Link auf das zentrale UDE-Impressum Wahlweise (und auf jeder Seite

einzeln) koumlnnen Sie einen Kontakt-Link einfuumlgen

bull Den Abschluss der Webseite bildet die E-Mail-Adresse des zustaumlndigen technischen

Seitenredakteurs die fuumlr Ruumlckfragen oder fuumlr redaktionelle Hinweise genutzt werden kann

Dieses Feld ist individuell beschreibbar ndash sollte jedoch niemals leer und immer auf dem

aktuellen Stand sein Hierfuumlr eignen sich Funktions-E-Mail-Adressen besser als Ihr

persoumlnlicher Account

5 Bestandteile von Webseiten

Um eine Webseite in der Internetpraumlsenz der Universitaumlt vollstaumlndig zu praumlsentieren benoumltigen Sie

(solange Sie mit dem CMS IMPERIA arbeiten) vier Elemente von denen Sie jedoch drei Elemente nur

einmal fuumlr Ihren gesamten Webbereich anlegen muumlssen und danach zentral pflegen koumlnnen

Eine Webseite setzt sich zusammen aus

bull Einer eigenen Organisationsbezeichnung Ihres Bereiches

bull Einer individuellen Zielgruppennavigation In Bereichen die keine eigene

Zielgruppennavigation erstellen erscheinen dort die entsprechenden Inhalte des zentralen

Angebotes der Universitaumlt

S e i t e | 10

bull Einer Navigation Sie koumlnnen in Ihrem Webbereich auch eine Vielzahl unterschiedlicher

Navigationen erstellen und diese je nach Bedarf einbinden

bull Der Seite (dem Dokument) selbst in der Sie Ihren Inhalt und Funktionen bearbeiten und die

vorherigen Elemente einfuumlgen koumlnnen

51 Die Organisationsbezeichnung

Die individuelle Bezeichnung Ihres Bereiches (Organisationsbezeichnung) erscheint auf Ihren

Webseiten links oben innerhalb der Impressionsgrafik direkt unter dem Schriftzug bdquoUNIVERSITAumlT

DUISBURG-ESSENldquo

Organisationsbezeichnungen erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

Sie koumlnnen Organisationsbezeichnungen in der Bearbeitungsebene ein- oder zweizeilig gestalten

S e i t e | 11

bull Der Eintrag in der ersten Zeile (bdquoOrganisationsbezeichnungldquo) erscheint groumlszliger und in weiszliger

fett-gesetzter Schrift

bull Ein Eintrag in der zweiten Zeile (bdquoZusatzldquo) erscheint in weiszliger normal gesetzter Schrift

Unter bdquoVerweis zur Organisationseinheit (URL)ldquo koumlnnen Sie das Sprungziel der

Organisationsbezeichnung bestimmen Tragen Sie diese Verknuumlpfung bitte als relativen Link ohne

Verweis auf den Webserver der Universitaumlt ein

bull Beispiel ihrverzeichnis anstatt httpwwwuni-duedeihrverzeichnis

Eine spaumltere Bearbeitung der Organisationsbezeichnung ist im CMS IMPERIA nicht uumlber das Tool

bdquoQuickEditldquo moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente

bearbeitenldquo im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichnisorganisation_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere

Organisationsbezeichnungen im selben Verzeichnis erstellen diesen einen jeweils moumlglichst

aussagekraumlftigen Dateititel zu geben

S e i t e | 12

52 Die Zielgruppennavigation

Eine individuelle Zielgruppennavigation in der Kopfzeile Ihrer Webseite erstellen Sie uumlber das

IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

Die editierte und veroumlffentlichte Zielgruppennavigation erscheint automatisch auf allen Seiten Ihres

Verzeichnisses

Tragen Sie bitte auch dort die Verknuumlpfungen als relative Links ohne Verweis auf den Webserver der

Universitaumlt ein Verwenden Sie dieses Instrument auszligerdem bitte nicht als moumlgliche zusaumltzliche

Quernavigation sondern ausschlieszliglich als Hilfe und zur Verlinkung gruppenspezifischer

Informationsaufarbeitung

Auch die spaumltere Bearbeitung der Zielgruppennavigation ist im CMS IMPERIA nicht uumlber das Tool

bdquoQuickEditldquo moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente

bearbeitenldquo im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Zielgruppennavigation lautet

ihrverzeichnistargetsshtml

S e i t e | 13

Beachten Sie beim Import bitte Folgendes Anders als seit Beginn des Wintersemesters 2007

gehandhabt kann mit dem UDE-Webrelaunch im Oktober 2011 pro Verzeichnis nur noch eine

anstelle von zwei Zielgruppennavigationen erstellt werden die zudem automatisch in Ihrer Webseite

eingesetzt wird In Verzeichnissen die zwischen 2007 und 2011 angelegt wurden existiert oft

(zusaumltzlich oder ausschlieszliglich) eine sogenannte bdquoerweiterte Zielgruppennavigationldquo

(ihrverzeichnisetargetsshtml) Der Webserver der Universitaumlt sucht bei der Ausgabe Ihrer

Internetseiten im ersten Schritt nach der Datei bdquotargetsshtmlldquo im zweiten Schritt nach der Datei

bdquoetargetsshtmlldquo in Ihrem Verzeichnis und gibt die Zielgruppennavigation dieser Prioritaumlt nach aus

Fehlen beide Dateien so erscheinen die entsprechenden Inhalte des zentralen Angebotes der

Universitaumlt

53 Die Navigation

Navigationen in der linken Spalte Ihrer Webseite sind maximal zwei Ebenen tief

bull In der ersten Ebene ist die Schrift in Versalien (Groszligbuchstaben) gesetzt Schreiben Sie Ihre

Links bitte dennoch bdquonormalldquo Die Transformation in Groszligbuchstaben erfolgt automatisch

durch das System Die Navigationspunkte der ersten Ebene sind mit einem blauen Rechteck

versehen das am linken Seitenrand anliegt

bull Die zweite Navigationsebene erscheint in der Ausgabe nach rechts geruumlckt und regulaumlr in

Groszlig- und Kleinschreibung gesetzt

Links in Navigationen veraumlndern sich beim Uumlberfahren mit der Maus bzw beim Antabben auf

Touchpads Die Schrift erscheint dann weiszlig auf einem blauen Hintergrund Das Gleiche gilt fuumlr den

jeweils aktiven Menuumlpunkt Dieser ist in der Navigation dauerhaft weiszlig mit blauer Hinterlegung

Navigationen erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 14

Zum Aufbau Ihrer Navigation stehen Ihnen die Module bdquoNavigationslinkldquo und

bdquoNavigationsuntermenuumlldquo zur Verfuumlgung Ein Navigationslink erscheint einzeln auf der ersten Ebene

versehen mit einem vorgelagerten blauen Rechteck Mit dem Navigationsuntermenuuml koumlnnen Sie

Menuumlpunkte erzeugen die neben dieser ersten Position uumlber eine zweite eingeruumlckte Ebene

verfuumlgen Dort lassen sich beliebig viele Unterpunkte einsetzen Je nachdem ob Sie den

uumlbergeordneten Eintrag im Navigationsuntermenuuml mit einer Zieladresse (URL) versehen erscheint

dieser verlinkt oder als einfache Uumlberschrift uumlber die nachgelagerten Inhaltspunkte

Selbstverstaumlndlich lassen sich die einzelnen Einheiten in ihrer Position jederzeit verschieben Tragen

Sie interne Links in Ihren Navigationen bitte als relative Verknuumlpfungen ohne Verweis auf den

Webserver der Universitaumlt ein

Editierte und veroumlffentlichte Navigation erscheinen innerhalb der Rubrik in der sie angelegt wurden

automatisch zur Auswahl im linken Bereich der Bearbeitungsebene Ihrer Webseite

Die spaumltere Bearbeitung von Navigationen ist im CMS IMPERIA auf zwei Wegen moumlglich Die

entsprechende Datei kann zum einen uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo im

IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Navigationen folgt folgendem Muster

ihrverzeichnisnav_12345shtml

S e i t e | 15

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Navigationen im selben

Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

Zum anderen koumlnnen Sie auch aus der Bearbeitungsebene einer Webseite heraus dort ausgewaumlhlte

Navigationen aufrufen und editieren Beachten Sie jedoch dass nach dem Speichern der

bearbeiteten Navigation sowohl die Navigationsdatei als auch die Datei der Ursprungsseite auf Ihrem

Schreibtisch liegen

6 Webseiten gestalten

Fuumlr die Gestaltung Ihres Inhalts steht Ihnen eine groszlige Anzahl statischer wie dynamischer Elemente

(Module) zur Verfuumlgung Welche Elemente Sie im Einzelnen nutzen koumlnnen haumlngt davon ab welchen

Dateityp Sie bei der Dokumentenerzeugung fuumlr Ihre Webseite waumlhlen Das Content Management

System der Hochschule bietet Ihnen die Moumlglichkeit Ihr Dokument als HTML-Web-Seite oder als

PHP-Skript zu erzeugen Beachten Sie bitte von Anfang an dass diese Auswahl Einfluss auf die URL

(Internetadresse) der jeweiligen Seite hat Bei einer nachtraumlglichen Aumlnderung aumlndert sich auch die

Internetadresse unter der Ihre Seite im Netz zu finden ist Sie muumlssen dann eventuell Verlinkungen

an vielen Stellen aumlndern

bull Internetadresse einer HTML-Web-Seite wwwuni-duedebereichihreseiteshtml

bull Internetadresse eines PHP-Skripts wwwuni-duedebereichihreseitephp

Je nachdem ob Sie Ihr Dokument als HTML-Web-Seite oder als PHP-Skript erzeugen koumlnnen Sie

folgende Elemente nutzen

Linke Spalte des Inhaltsbereiches

bull (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

bull A-Z verwalten PHP-Skript HTML-Web-Seite

bull Code editieren PHP-Skript HTML-Web-Seite

bull Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

bull DBAdmin PHP-Skript

bull Doppelcontainer PHP-Skript HTML-Web-Seite

bull Flickr nutzen PHP-Skript

bull Formular schlieszligen PHP-Skript

bull Formular oumlffnen PHP-Skript

S e i t e | 16

bull Formular Element PHP-Skript

bull Formulareingabe in DB speichern PHP-Skript

bull Google-Maps (v30) PHP-Skript HTML-Web-Seite

bull Image-Gallery (v21) PHP-Skript HTML-Web-Seite

bull Mailinglisten PHP-Skript

bull Mitarbeiter-Liste PHP-Skript

bull Mitarbeiter-Publikationsliste PHP-Skript

bull Mitarbeiter-Seite PHP-Skript

bull Randlose Grafik PHP-Skript HTML-Web-Seite

bull RSS-Feed-Administration PHP-Skript

bull RSS-Feed-Agent PHP-Skript

bull Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

bull Veranstaltungskalender Kalendermodul PHP-Skript

bull Veranstaltungskalender Veranstaltungsmodul PHP-Skript

Rechte Spalte des Inhaltsbereiches

bull (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

bull Code editieren PHP-Skript HTML-Web-Seite

bull Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

bull Flickr nutzen PHP-Skript

bull Mitarbeiter-Seite PHP-Skript

bull Randlose Grafik PHP-Skript HTML-Web-Seite

bull RSS-Feed-Agent PHP-Skript

bull Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

bull Veranstaltungskalender Kalendermodul PHP-Skript

Beim Erstellen Ihrer Webseite koumlnnen Sie diese einzelnen Module nach Bedarf (auch mehrfach)

erzeugen und in der gewuumlnschten Reihenfolge platzieren wobei die gewaumlhlte Reihenfolge jederzeit

veraumlnderbar ist Mit wenigen Ausnahmen lassen sich die einzelnen Einheiten weiszlig blau oder beige

einfaumlrben (Ausnahme randlose Grafik) Sie werden vom System dann als voneinander abgesetzte

Bloumlcke ausgegeben

Um innerhalb eines Dokuments zu navigieren koumlnnen Sie wenn noumltig die einzelnen Elemente auch

mit einem Link-Anker versehen (Ausnahmen randlose Grafik Mitarbeiter-Liste -Publikationsliste

und ndashSeite Veranstaltungskalender Veranstaltungs- sowie Kalendermodul) Den Ankernamen

S e i t e | 17

koumlnnen Sie frei vergeben er darf jedoch keine Leer- oder Sonderzeichen enthalten Das erste Zeichen

muss auszligerdem ein Buchstabe sein

61 Uumlber allem Die Brotkrumennavigation

Zwischen Seitentitel und ndashinhalt koumlnnen Sie auf jeder Seite eine individuelle Brotkrumennavigation

editieren die den Nutzern eine schnelle Uumlbersicht daruumlber ermoumlglicht wie sie auf die gerade

aufgerufene Webseite gelangt sind Verwenden Sie dieses Instrument bitte nicht als moumlgliche

zusaumltzliche Quernavigation sondern ausschlieszliglich als Hilfe im vorgesehenen Sinne

Der letzte Eintrag der Brotkrumennavigation der uumlblicherweise die aktuell aufgerufene Seite

benennt sollte nicht mit einer Zieladresse (URL) versehen werden Der Eintrag erscheint dann als

regulaumlr schwarz formatierter Text nicht als blau ausgezeichneter Link

S e i t e | 18

62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

Mit dem TinyMCE-Texteditor stellt Ihnen das Content Management System der UDE einen auf

JavaScript basierenden WYSIWYG-Editor (bdquoWhat You See Is What You Getldquo) zur Verfuumlgung Mit Hilfe

dieses Moduls ist es moumlglich ohne HTML- oder weitergehende Programmierkenntnisse Beitraumlge zu

verfassen und Seiten zu formatieren Die Bedienung mittels einer Textbox orientiert sich stark an

gaumlngiger und bekannter Textverarbeitungs-Software

Texte formatieren

Selbstverstaumlndlich bietet der TinyMCE-Editor die uumlblichen Arten Texte zu formatieren Neben den

Befehlen fett (bdquoBoldldquo) kursiv (bdquoItalicldquo) unterstrichen (bdquoUnderlineldquo) sowie hoch- bzw tiefgestellt

bietet Ihnen das System uumlber das Ω-Symbol eine breite Palette an Sonderzeichen uumlber die

Listenfunktion die Erstellung einfacher oder nummerierter Aufzaumlhlungslisten an Mittels einer Select-

S e i t e | 19

Box koumlnnen Sie auszligerdem auf im Hochschullayout vorgegebene Uumlberschriftarten (bdquoHeadingsldquo)

zuruumlckgreifen

Als weitere Moumlglichkeiten steht Ihnen frei

bull ein Datum undoder eine Uhrzeit einzufuumlgen

bull Blockzitate zu kennzeichnen oder

bull geschuumltzte Leerzeichen (bdquoNon-breaking Space Characterldquo) zu definieren

bull Das Ankersymbol (bdquoInsertEdit Anchorldquo) erlaubt die Definition von Sprungzielen innerhalb

laumlngerer Texte

Im Notfall hilft Ihnen das Radiergummi-Symbol (bdquoRemove Formatting) saumlmtliche Formatierungen zu

entfernen

Bereits formatierten Text einfuumlgen

Uumlber diese Formatierungsarten hinaus koumlnnen Sie auch bereits vorformatierte Texte aus Ihrer

Textverarbeitung in den Editor kopieren Zum Einfuumlgen nutzen Sie jedoch bitte nicht den einfachen

Copy amp Paste-Befehl sondern die im Modul bereitgestellte Funktion bdquoPaste from Wordldquo (Sie finden

das entsprechende bdquoWldquo-Symbol unter der Texteingabe-Box) ndash und zwar auch dann wenn Ihr

Ursprungstext nicht aus Microsoft Word sondern einer anderen Textverarbeitungssoftware

importiert wird Schriftformatierungen Verlinkungen und Aumlhnliches werden dann 11 uumlbernommen

Achten Sie bitte dennoch darauf dass dieser Funktion Grenzen gesetzt sind und arbeiten Sie mit

moumlglichst einfachen Formatvorlagen

HTML-Ansicht

Fuumlr Redakteure die sich in der Seitenprogrammierung sicherer fuumlhlen als in der Textverarbeitung

haumllt das Modul TinyMCE-Texteditor uumlber den Button bdquoHTMLldquo einen HTML Source Editor bereit mit

dem direkt auf den Quelltext und die Codierung dieses Teils der Webseite zugegriffen werden kann

Diese Funktion eignet sich auszligerdem besonders zur Uumlberpruumlfung und Fehlersuche Zur

Programmierung eigener Funktionen nutzen Sie jedoch bitte das Modul bdquoCode editierenldquo

S e i t e | 20

Links

Die uumlber die Symbole bdquoInsertEdit Linkldquo (Link einfuumlgen oder bearbeiten) in Ihre Texte oder

Aufzaumlhlungslisten eingefuumlgten Hyperlinks formatiert das System selbststaumlndig im fuumlr die UDE

vorgesehehen Layout Tragen Sie Links auf Seiten innerhalb von wwwuni-duede bitte als relative

Verknuumlpfungen ohne Verweis auf den Webserver der Universitaumlt ein also

bull depresse

anstelle von

bull httpwwwuni-duededepresseindexphp

Zeichnen sie auszligerdem Ihre Verlinkungen im Sinne der Barrierefreiheit mit sprechenden Titeln aus

und uumlberlegen Sie sich ob das Sprungziel im selben oder in einem neuen Browserfenster geoumlffnet

werden soll

Uumlber das Symbol bdquoUnlinkldquo entfernen Sie die entsprechende Verlinkung

Bilder

Der TinyMCE-Texteditor bietet Ihnen zwei Moumlglichkeiten Bilder in Ihre Texte einzubinden

S e i t e | 21

bull Uumlber die Funktion bdquoInsertEdit Imageldquo (Icon unter der Texteingabe-Box) koumlnnen Sie den

relativen Pfad auf das entsprechende Bild aus der IMPERIA-Mediendatenbank einfuumlgen

(Formatbeispiel imperiamdimageswebredaktion2013parentservicejpg)

bull Die Funktion bdquoVorschaubild waumlhlenldquo laumlsst Sie direkt auf die IMPERIA-Mediendatenbank

zugreifen und dort die gewuumlnschte Grafik per Klick auswaumlhlen Uumlber die Funktion bdquoVollbild

waumlhlenldquo koumlnnen Sie das Bild optional zu einer groumlszligeren Ansicht verlinken die sich als

bdquoLightboxldquo uumlber der aktiven Webseite oumlffnet Der Befehl bdquoBild zuruumlcksetzenldquo entfernt die

gewaumlhlte Grafik aus Ihrer Webseite

Waumlhrend Sie mittels bdquoInsertEdit Imageldquo die Anzeige-Groumlszlige Ihres Bildes (bis maximal 480 Pixel

Breite) selbst bestimmen koumlnnen werden Grafiken uumlber die Funktion bdquoVorschaubild waumlhlenldquo beim

Einfuumlgen automatisch auf die passende Groumlszlige skaliert (162 Pixel Breite in der linken und 204 Pixel

Breite in der rechten Content-Spalte) In diesem Fall koumlnnen Sie zudem waumlhlen ob der Text an dieser

Stelle das Bild umflieszligt oder aber rechts daneben angezeigt wird Das Vollbild wird bei der Eingabe

nicht skaliert Nutzen Sie daher bitte Bilder mit einer bildschirmtauglichen Groumlszlige (maximal 1024

Pixel)

S e i t e | 22

Tabellen

Uumlber das Icon bdquoInsertEdit Tableldquo fuumlgen Sie an der gewuumlnschten Stelle Tabellen in Ihren Texteditor

ein Unter den Reitern bdquoGeneralldquo und bdquoAdvancedldquo koumlnnen Sie diese Tabellen gemaumlszlig den uumlblichen

HTML-Konventionen erstellen formatieren und bearbeiten

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig gemaumlszlig den Vorgaben der Barrierefreiheit als

solche aus Der Text-Editor stellt Ihnen diese Optionen zur Verfuumlgung

bull Beachten Sie dass die Hintergrundfarbe der Tabellen je nach gewaumlhlter Einfaumlrbung des

Moduls variiert

S e i t e | 23

Texte mit bdquoVerfallsdatumldquo

Grundsaumltzlich steht Ihnen das Modul bdquo(TinyMCE)-Texteditorldquo sowohl auf shtml-Seiten als auch in

php-Skripten zur Verfuumlgung Auf php-Seiten laumlsst sich jedoch eine zusaumltzliche Option nutzen Fuumlr

Texte die nur fuumlr einen gewissen Zeitraum auf Ihrer Webseite erscheinen sollen koumlnnen Sie ein

Start- und Enddatum setzen

63 A-Z verwalten PHP-Skript HTML-Web-Seite

Das Modul bdquoA-Z verwaltenldquo ermoumlglicht den Redakteuren A-Z-Listen relativ einfach zu erzeugen und

zu pflegen

S e i t e | 24

Fuumlr jeden Eintrag in der Stichwortliste muss im Eingabefeld eine einzelne Zeile eingefuumlgt werden Die

Eingabe folgt einem festen Schema

bull Stichwort||URL (Internetadresse)||

oder

bull Stichwort||URL (Internetadresse)||eventuell ein kurzer Beschreibungstext

wobei auf den Beschreibungstext auch verzichtet werden kann Die sogenannten bdquoPipe-Zeichenldquo (||)

dienen als Feldtrenner Sie erzeugen sie uumlber den Tastaturbefehl bdquoAltGr amp das Groumlszligerzeichenldquo

Wahlweise kopieren Sie die entsprechenden Zeichen aus bisherigen Eintraumlgen

Auch hier gilt Tragen Sie interne Links in Ihrer A-Z-Liste bitte als relative Verknuumlpfungen ohne

Verweis auf den Webserver der Universitaumlt ein also

bull Abiturjahrgang 2013||doppelter_abiturjahrgang||

anstelle von

bull Abiturjahrgang 2013||httpwwwuni-duededoppelter_abiturjahrgang||

Externe Links (wie etwa bdquoGlassbooth ||httpwwwglassboothde||ldquo) werden auf der

ausgegebenen Webseite entsprechend gekennzeichnet

S e i t e | 25

Die Eintraumlge im Modul bdquoA-Z verwaltenldquo sortiert das Content Management System automatisch nach

Ziffernreihenfolge bzw dem Alphabet Um die Eintraumlge spaumlter einfach aufzufinden und bearbeiten zu

koumlnnen empfiehlt es sich jedoch bereits im Eingabefeld selbst eine alphabetische Sortierung

vorzunehmen

64 Code editieren PHP-Skript HTML-Web-Seite

Das Modul bdquoCode editierenldquo eroumlffnet Ihnen die Moumlglichkeit in Ihrem Internetauftritt eigene PHP-

oder HTML-Codeschnipsel zu erstellen und zu nutzen oder Programmierungen eigener Funktionen

vorzunehmen

Nutzen Sie dieses Modul bitte nicht um Funktionen zu simulieren die Ihnen das CMS IMPERIA bereits

als vorgefertigte Module zur Verfuumlgung stellt Das freie Code-Eingabefeld ist ebenfalls nicht dazu

S e i t e | 26

vorgesehen auf diesem Wege vom Corporate Design der Universitaumlt abweichende eigene Layouts zu

entwickeln

65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

Uumlber das Modul bdquoCodebaustein einfuumlgenldquo ist es moumlglich vorgefertigte Bloumlcke oder bdquoBauteileldquo in Ihre

Webseite zu integrieren Codebausteine eignen sich dazu bestimmte Informationen die auf vielen

Webseiten wiederkehren an einer Stelle zentral zu pflegen In der Bearbeitungsebene bietet Ihnen

das Modul die in der aktuellen Rubrik vorhandenen Bausteine zur Auswahl an

Codebausteine erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 27

Sie koumlnnen in Codebausteinen wie beim uumlblichen Seitenaufbau gewohnt unterschiedliche Module

kombinieren und positionieren Zur Verfuumlgung stehen die Elemente

bull (TinyMCE)-Texteditor

bull Code editieren

bull die Formularmodule

bull Randlose Grafik

bull RSS-Feed-Agent

bull Tube Audio-VideoPlayer

Eine spaumltere Bearbeitung der Codebausteine ist im CMS IMPERIA nicht uumlber das Tool bdquoQuickEditldquo

moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo

im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichniscode_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Codebausteine im

selben Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

66 DBAdmin PHP-Skript

Mit Hilfe des Moduls bdquoDBAdminldquo lassen sich Datenbank direkt in Tabellenform auf Ihrer Webseite

darstellen Uumlber die Funktion bdquoOptionen anzeigenldquo erhalten Sie zudem die Moumlglichkeit eine

Webseite zur Pflege Ihrer Datenbank zu erstellen Dort koumlnnen Sie die entsprechende Tabelle

editieren d h Eintraumlge einzeln erstellen bearbeiten oder loumlschen

S e i t e | 28

Zur Nutzung dieses Moduls sind folgende Angaben notwendig

bull Datenbank-Server Name oder IP-Adresse des Servers auf dem die anzusprechende

Datenbank liegt (bspw bdquodbuni-duedeldquo)

bull Datenbank-Name

bull Tabellen-Name Name der speziellen Tabelle die innerhalb der Datenbank angesprochen

werden soll

bull Datenbank-Benutzer und Datenbank-Passwort

Datenbanken auf einem UDE-Server koumlnnen Universitaumltsangehoumlrige unter Nutzung ihrer

Hochschulkennung online beim Zentrum fuumlr Informations- und Mediendienste (ZIM) beantragen

unter httpwwwuni-duedezimserviceshomepagesmysqlshtml

67 Doppelcontainer PHP-Skript HTML-Web-Seite

Das Modul bdquoDoppelcontainerldquo ermoumlglicht es Ihnen auf Ihrer Webseite zwei Textebloumlcke (je nach

Wunsch mit oder ohne Bilder) nebeneinander zu setzen

Auf zweispaltig angelegten Webseiten ist die Anlage eines Doppelcontainers nur in der linken Spalte

moumlglich Bilder erscheinen dort in einer Breite von 246 Pixeln Auf einspaltig angelegten Webseiten

werden die einzelnen Bloumlcke (und dementsprechend die verwendeten Bilder) in einer Breite von 366

Pixeln angezeigt Die Bildhoumlhe ist in beiden Faumlllen frei waumlhlbar sollte jedoch in beiden Containern

identisch sein

S e i t e | 29

Zur Texteingabe stehen Ihnen die Optionen bdquoTeaserldquo (mit Zeichenbegrenzung) sowie bdquoStandardldquo

(ohne Zeichenbegrenzung) zur Verfuumlgung Waumlhlen Sie bdquoTeaserldquo so erhalten Sie Platz fuumlr 300 Zeichen

ndash ein Zeichenzaumlhler neben der Texteingabe-Box erleichtert das Mitzaumlhlen Der Text wird gelb

unterlegt wenn er nach dem naumlchsten Leerzeichen abgeschnitten wird Rot erscheint das Textfeld

wenn die Zeichenzahl bereits uumlberschritten wurde

Beachten Sie bitte dass das Modul HTML-Tags (URLs Mailadressen etc) automatisch filtert Sie

werden daher nicht angezeigt Um Ihren Text zu verlinken koumlnnen Sie das Eingabefeld bdquoMehr-Linkldquo

nutzen

Beide Bloumlcke innerhalb eines Doppelcontainers lassen sich individuell auf die uumlbliche Weise (weiszlig

hellblau sandfarben) hinterlegen

S e i t e | 30

68 Flickr nutzen PHP-Skript

Das Modul bdquoFlickr nutzenldquo ermoumlglicht es Ihnen im Sinne einer crossmedialen Verwertung Bilder aus

Ihrem Flickr-Account in Ihre IMPERIA-Webseite einzubinden Fuumlr diese Funktion benoumltigen Sie einen

sogenannten API-Key den Sie in Ihrem Flick-Auftritt unter

bull httpwwwflickrcomservicesappscreateapply

erzeugen lassen koumlnnen Tragen Sie dann diesen Key in die entsprechende Eingabemaske des Moduls

ein Anschlieszligend haben Sie die Moumlglichkeit ganze Fotosets (Alben) oder Einzelbilder einzubinden

Photoset anzeigen

S e i t e | 31

Zum Anzeigen von Photosets wird die entsprechende Photoset-ID ins Modul eingetragen Diese ID ist

Teil der Link-Adresse des entsprechenden Albums bei Flickr (die erscheint wenn Sie das Album

angeklickt haben) Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAMEsets12340954909

Die Photoset-ID verbirgt sich hinter den Ziffern am Ende der URL Sie koumlnnen auswaumlhlen wie viele

Fotos auf einer Webseite erscheinen sollen Dafuumlr uumlbernimmt das Modul die Bilder in der

quadratischen Aufloumlsung von Flickr also in einer Groumlszlige von 75 x 75 Pixeln Reicht der Platz dafuumlr

nicht aus wird eine zusaumltzliche Blaumltterfunktion angeboten Photoset- und Bild-Beschreibungen

koumlnnen aus dem Flickr-Account automatisch uumlbernommen werden wenn die entsprechenden

Optionen mit einem Haken aktiviert wurden

Einzelbild anzeigen

Um ein einzelnes Bild anzuzeigen benoumltigen Sie die entsprechen Flickr-Foto-ID Diese verbirgt sich

hinter der ersten Zahl in der Link-Adresse des entsprechenden Bildes Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAME5841603851inset-72157626981464896

Ein Einzelbild kann in einer hohen oder einer geringen Aufloumlsung eingebunden werden Bei einer

zweispaltig angelegten Webseite wird das Bild in der linken Inhaltsspalte auf eine Breite von 480

Pixel bei einer einspaltig angelegten Webseite auf eine Breite von 721 Pixel skaliert

69 Formulare

Mit IMPERIA haben Sie die Moumlglichkeit Formulare auf Ihrer Webseite zu platzieren In der

Bearbeitungsebene Ihrer Seite finden Sie im Bereich bdquoNeues Modulldquo den Menupunkt UDE ndash

Formular oumlffnen

Nach dem Festlegen der Hintergrundfarbe koumlnnen Sie im Bereich bdquoLegendeldquo den Titel Ihres

Formulars waumlhlen Wenn Sie die Funktion bdquoMailer-Funktionalitaumltldquo aktivieren koumlnnen Sie die Adresse

Ihres Mailscripts eingeben Anderenfalls belassen Sie es bitte beim Vorgabewert

Im Bereich bdquoNexturlldquo kann angegeben werden welche Seite nach dem Abschicken des Formulars

aufgerufen werden soll Daruumlber hinaus werden der Titel der E-Mail die Absender-Adresse sowie die

Empfaumlnger-Adresse definiert Optional kann eine Bestaumltigungs-E-Mail mit frei waumlhlbarem Text

versendet werden

S e i t e | 32

Um dem erstellten Formular Eingabefelder hinzuzufuumlgen ist das Modul bdquoUDE Formular Elementldquo zu

waumlhlen Waumlhlen Sie das Element bdquoTextldquo um ein Eingabefeld zu erzeugen Die Option bdquoBezeichnerldquo

beschreibt den sichtbaren Text im fertigen Formular zum Beispiel bdquoIhr Nameldquo Weitergehend koumlnnen

Sie die zulaumlssigen Inhalte der Nutzereingaben definieren sowie markieren ob das Element ein

Pflichtfeld sein soll

S e i t e | 33

Um ein Texteingabefeld innerhalb des Formulars zu erzeugen waumlhlen Sie das Element bdquoTextarealdquo

Sie koumlnnen die Groumlszlige des Textfeldes definieren (Zeilen x Spalten) und optional erneut eine Pruumlfung

zulaumlssiger Nutzereingaben aktivieren Weiterhin koumlnnen Sie waumlhlen ob der eingegebene Wert des

Formularelements in die Datenbank eingetragen werden soll Wenn Sie fuumlr Ihre Formulare auf eine

Datenbank zuruumlckgreifen moumlchten koumlnnen Sie sich hier informieren httpwwwuni-

duedezimserviceshomepagesmysqlshtml

Insgesamt stehen folgende Elemente zur Verfuumlgung

bull Checkbox Hidden Password Select Anfang Select Option einfuumlgen Select Ende Submit

Text Datum Textarea Radio Reset Leerzeile Kommentarzeile Neuer Abschnitt mit

Bezeichner sowie Datei-Upload

Ein Formular muss mit dem Modul bdquoUDE Formular schlieszligenldquo abgeschlossen werden An dieser

Stelle koumlnnen Sie einen Send-Button hinzufuumlgen dessen Name frei waumlhlbar ist Der eingegebene Text

wird als Beschriftung des Buttons angezeigt Erst durch das Hinzufuumlgen dieses Moduls wird das

Formular auf Ihrer Seite sichtbar und kann nach der Veroumlffentlichung genutzt werden

S e i t e | 34

610 Google-Maps (v30) PHP-Skript HTML-Web-Seite

Dieses Modul bringt eine Grafik von Google-Maps auf die Webseite entweder in Kartenoptik oder als

Satellitenbild Sie haben zwei Moumlglichkeiten eine solche zu generieren Uumlber die konkreten GPS-

Koordinaten oder durch das Angeben einer Adresse (zB Forsthausweg 2 47057 Duisburg) Sie

koumlnnen aus zwoumllf Vergroumlszligerungsstufen fuumlr den gewuumlnschten Ausschnitt zwei Kartengroumlszligen und

zwei Kartenformaten waumlhlen

S e i t e | 35

Kartengroumlszlige bdquogroszligldquo skaliert die Graphik auf 480 Pixel Breite auf einer zweispaltigen Seite bzw auf

721 Pixel auf einer einspaltigen Seite Die Option bdquokleinldquo verringert die Breite auf etwa die Haumllfte Die

beiden Optionen beim Kartenformat beeinflussen die Houmlhe der Grafik

S e i t e | 36

611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite

Das Modul Image-Gallery ermoumlglicht die Integration einer komfortablen Bildergallerie uumlber IMPERIA

Per Klick auf bdquoNeues Modulldquo -gt bdquoUDE Image-Gallery (v21)ldquo kann die entsprechende Gallerie an der

gewuumlnschten Position eingefuumlgt werden Generell sollten nur Bilder verwendet werden die

entweder auf 640 x 480 Pixel oder maximal auf 900 x 600 Pixel skaliert sind Aufgrund einer hohen

Dateigroumlszlige sollten Bilder einer Digitalkamera vor dem Upload komprimiert werden

Innerhalb des Moduls kann zunaumlchst die Hintergrundfarbe der Gallerie wahlweise zwischen Beige

Blau und Weiszlig eingestellt werden Um die Gallerie mit Bildern zu fuumlllen ist das entsprechende

Verzeichnis der Mediendatenbank anzugeben Aufgrund der geaumlnderten Syntax wird das Verzeichnis

ohne images angegeben Die Suchmaske fuumlr die Bilderauswahl deklariert die Dateiformate die mit

einbezogen werden sollen Schlieszliglich koumlnnen Sie die Bilder alphabetisch sortiert anzeigen lassen

sowie einen kleinen und einen groszligen Titel fuumlr Ihre Bildergallerie vergeben

Grundsaumltzlich ist es empfehlenswert groumlszligere Bildmengen auf mehrere Seiten zu verteilen um

einerseits die Darstellung auf mobilen Geraumlten zu vereinfachen und andererseits geringeren

Bandbreiten Rechnung zu tragen

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 8: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 7

4 Grundsaumltze der Webseitengestaltung Seitenaufbau

Um der sich staumlndig veraumlndernden Landschaft an Ausgabegeraumlten (Desktops Netbooks Tablets

Smartphoneshellip) Rechnung zu tragen passt sich das neue (adaptive) Layout der UDE-Website

dynamisch an unterschiedliche Bildschirm- bzw Browserfenstergroumlszligen an Die bdquonormaleldquo

Desktopansicht aumlndert so auf einem kleineren Bildschirm wie beispielsweise einem aumllteren iPad im

Querformat die Breite so dass horizontales Scrollen vermieden wird Bei kleineren Bildschirmen bricht

die rechte Spalte um und wird unterhalb des Hauptinhaltes angezeigt Auf Mobiltelefonen schlieszliglich

entfaumlllt die Spaltenanordnung komplett und saumlmtliche Inhalte werden untereinander angezeigt

Dieses Verhalten ist dadurch moumlglich dass alle Groumlszligenangaben im System nur relativ angegeben

sind Verwenden Sie daher keine eigenen fixen Groumlszligenangaben die diese Vorlagen uumlberschreiben

In der bdquonormalenldquo Desktopansicht folgt der Webseitenaufbau im Internetangebot der Universitaumlt

einem festen Raster dass Ihnen bei Verwendung des CMS IMPERIA automatisch vorgegeben wird

bull Die Webseite der UDE liegt als weiszliges bdquoBlattldquo zentriert auf einem sandfarbenen Hintergrund

Der Container der dieses bdquoBlattldquo optisch darstellt beginnt in einem Abstand von 15 Pixeln

S e i t e | 8

zum oberen Seitenrand und setzt immer am unteren Seitenrand auf Der linke der obere und

der rechte Containerrand erzeugen einen leichten Schatteneffekt

bull Links in der Kopfzeile begruumlszligt immer an erster Stelle der Schriftzug bdquoUNIVERSITAumlT

DUISBURG-ESSENldquo die Seitenbesucher Auf jeder Seite der Universitaumlt genuumlgt ein Mausklick

auf den Schriftzug um zuruumlck auf die UDE-Startseite zu gelangen

bull Die gruppenspezifische Aufarbeitung von Informationen gilt inzwischen ndash zu Recht ndash als ein

Qualitaumltsmerkmal von Internetseiten Jede UDE-Webseite erhaumllt deshalb in der Kopfzeile

eine Zielgruppennavigation In Bereichen die keine eigene Zielgruppennavigation erstellen

erscheinen dort die entsprechenden Inhalte des zentralen Angebotes der Universitaumlt

bull Unterhalb der Kopfzeile erscheint auf jeder Seite der Universitaumlt eine Impressionsgrafik Das

System IMPERIA gibt Ihnen diese Grafik vor Sie greift mit ihrem Motiv (Himmel und Wolken)

das beherrschende Key-Visual des Corporate Design der Hochschule auf Zentral am unteren

Rand des Bildes wird vor einem uumlberlagernden weiszligen Kasten der Titel der jeweiligen

Webseite angezeigt Die Houmlhe der Impressionsgrafik veraumlndert sich wenn der eingefuumlgte

Seitentitel mehrzeilig wird

bull Innerhalb der Impressionsgrafik koumlnnen Sie auf der linken Seite eine ein- oder zweizeilige

Bezeichnung Ihres Bereiches einfuumlgen Diese individuelle Organisationsangabe sitzt so im

Gesamtlayout direkt unter dem Schriftzug bdquoUNIVERSITAumlT DUISBURG-ESSENldquo und gibt den

Seitenbesuchern auf den ersten Blick die Orientierung daruumlber wo sie sich eigentlich gerade

befinden Sie koumlnnen sie individuell verlinken

bull Das Universitaumlts-Logo sitzt rechtsbuumlndig in der Impressionsgrafik Es ist so einzurichten dass

ein Mausklick genuumlgt um auf die UDE-Homepage zu gelangen Das Logo darf nicht ohne den

Claim bdquoOffen im Denkenldquo (wahlweise im Englischen bdquoOpen mindedldquo) verwendet werden

bull In der linken Spalte kann der jeweilige Seitenanbieter eine frei editierbare Navigation

einbinden Die Navigation umfasst maximal zwei Ebenen Durch die bewusst reduzierte

Menuumlstruktur signalisiert die Internetpraumlsenz Klarheit und Transparenz Die

Hauptmenuumleintraumlge sind in Groszligbuchstaben (Versalien) ausgefuumlhrt Eintraumlge von

Untermenuumls sind eingeruumlckt und in Normalschrift formatiert Auf beiden Ebenen wird die

Schrift beim Uumlberfahren mit der Maus bzw beim Antabben auf Touch-Screens weiszlig vor

blauem Hintergrund Gleiches gilt fuumlr den jeweils aktiven Menuumlpunkt (Im Jahr 2013 wird auf

jeder mit dem CMS IMPERIA im aktuellen Template erzeugten Webseite uumlber der

Hauptnavigation das Jubilaumlumsfaumlhnchen zum zehnjaumlhrigen Bestehen der Universitaumlt

eingeblendet verlinkt auf httpwwwuni-duede10jahre)

bull Unterhalb der eigenen Navigation wird immer die zentrale Suche (Volltextsuche

Personensuche) der Universitaumlt verlinkt An dieser Stelle koumlnnen Sie zudem wahlweise (und

S e i t e | 9

auf jeder Seite einzeln) einen Link auf eine individuelle A-Z-Seite undoder auf einen eigenen

Intranet-Bereich sowie mit Landesfahnen gekennzeichnete Hinweise auf parallel angebotene

fremdsprachige Inhalte einfuumlgen

bull Zwischen Seitentitel und ndashinhalt koumlnnen Sie auf jeder Seite eine individuelle

Brotkrumennavigation editieren die den Nutzern eine schnelle Uumlbersicht daruumlber

ermoumlglicht wie sie auf die gerade aufgerufene Webseite gelangt sind

bull Der eigentliche Inhaltsbereich (Content) der Webseite kann bei der Seitenerzeugung ein-

oder zweispaltig angelegt werden Der Wechsel zwischen Ein- und Zweispaltigkeit einer Seite

ist uumlber den IMPERIA -Workflow jederzeit moumlglich Bei einem zweispaltigen Contentbereich

ist die schmale rechte Spalte fuumlr Zusatzinformationen vorgesehen die nicht direkt zum

Hauptinhalt gehoumlren bspw Veranstaltungskalender Banner oder RSS-Feeds Fuumlr die

Gestaltung des Inhalts steht eine groszlige Anzahl statischer wie dynamischer Elemente

(Module) zur Verfuumlgung Die einzelnen Module des Inhaltsbereiches koumlnnen unterschiedlich

eingefaumlrbt werden Sie haben die Wahl zwischen weiszliger (Standardeinstellung) sandfarbener

oder hellblauer Hinterlegung

bull In der Fuszligzeile angedockt an den unteren Seitenrand erscheint auf allen Seiten der

Hochschule ein Link auf das zentrale UDE-Impressum Wahlweise (und auf jeder Seite

einzeln) koumlnnen Sie einen Kontakt-Link einfuumlgen

bull Den Abschluss der Webseite bildet die E-Mail-Adresse des zustaumlndigen technischen

Seitenredakteurs die fuumlr Ruumlckfragen oder fuumlr redaktionelle Hinweise genutzt werden kann

Dieses Feld ist individuell beschreibbar ndash sollte jedoch niemals leer und immer auf dem

aktuellen Stand sein Hierfuumlr eignen sich Funktions-E-Mail-Adressen besser als Ihr

persoumlnlicher Account

5 Bestandteile von Webseiten

Um eine Webseite in der Internetpraumlsenz der Universitaumlt vollstaumlndig zu praumlsentieren benoumltigen Sie

(solange Sie mit dem CMS IMPERIA arbeiten) vier Elemente von denen Sie jedoch drei Elemente nur

einmal fuumlr Ihren gesamten Webbereich anlegen muumlssen und danach zentral pflegen koumlnnen

Eine Webseite setzt sich zusammen aus

bull Einer eigenen Organisationsbezeichnung Ihres Bereiches

bull Einer individuellen Zielgruppennavigation In Bereichen die keine eigene

Zielgruppennavigation erstellen erscheinen dort die entsprechenden Inhalte des zentralen

Angebotes der Universitaumlt

S e i t e | 10

bull Einer Navigation Sie koumlnnen in Ihrem Webbereich auch eine Vielzahl unterschiedlicher

Navigationen erstellen und diese je nach Bedarf einbinden

bull Der Seite (dem Dokument) selbst in der Sie Ihren Inhalt und Funktionen bearbeiten und die

vorherigen Elemente einfuumlgen koumlnnen

51 Die Organisationsbezeichnung

Die individuelle Bezeichnung Ihres Bereiches (Organisationsbezeichnung) erscheint auf Ihren

Webseiten links oben innerhalb der Impressionsgrafik direkt unter dem Schriftzug bdquoUNIVERSITAumlT

DUISBURG-ESSENldquo

Organisationsbezeichnungen erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

Sie koumlnnen Organisationsbezeichnungen in der Bearbeitungsebene ein- oder zweizeilig gestalten

S e i t e | 11

bull Der Eintrag in der ersten Zeile (bdquoOrganisationsbezeichnungldquo) erscheint groumlszliger und in weiszliger

fett-gesetzter Schrift

bull Ein Eintrag in der zweiten Zeile (bdquoZusatzldquo) erscheint in weiszliger normal gesetzter Schrift

Unter bdquoVerweis zur Organisationseinheit (URL)ldquo koumlnnen Sie das Sprungziel der

Organisationsbezeichnung bestimmen Tragen Sie diese Verknuumlpfung bitte als relativen Link ohne

Verweis auf den Webserver der Universitaumlt ein

bull Beispiel ihrverzeichnis anstatt httpwwwuni-duedeihrverzeichnis

Eine spaumltere Bearbeitung der Organisationsbezeichnung ist im CMS IMPERIA nicht uumlber das Tool

bdquoQuickEditldquo moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente

bearbeitenldquo im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichnisorganisation_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere

Organisationsbezeichnungen im selben Verzeichnis erstellen diesen einen jeweils moumlglichst

aussagekraumlftigen Dateititel zu geben

S e i t e | 12

52 Die Zielgruppennavigation

Eine individuelle Zielgruppennavigation in der Kopfzeile Ihrer Webseite erstellen Sie uumlber das

IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

Die editierte und veroumlffentlichte Zielgruppennavigation erscheint automatisch auf allen Seiten Ihres

Verzeichnisses

Tragen Sie bitte auch dort die Verknuumlpfungen als relative Links ohne Verweis auf den Webserver der

Universitaumlt ein Verwenden Sie dieses Instrument auszligerdem bitte nicht als moumlgliche zusaumltzliche

Quernavigation sondern ausschlieszliglich als Hilfe und zur Verlinkung gruppenspezifischer

Informationsaufarbeitung

Auch die spaumltere Bearbeitung der Zielgruppennavigation ist im CMS IMPERIA nicht uumlber das Tool

bdquoQuickEditldquo moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente

bearbeitenldquo im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Zielgruppennavigation lautet

ihrverzeichnistargetsshtml

S e i t e | 13

Beachten Sie beim Import bitte Folgendes Anders als seit Beginn des Wintersemesters 2007

gehandhabt kann mit dem UDE-Webrelaunch im Oktober 2011 pro Verzeichnis nur noch eine

anstelle von zwei Zielgruppennavigationen erstellt werden die zudem automatisch in Ihrer Webseite

eingesetzt wird In Verzeichnissen die zwischen 2007 und 2011 angelegt wurden existiert oft

(zusaumltzlich oder ausschlieszliglich) eine sogenannte bdquoerweiterte Zielgruppennavigationldquo

(ihrverzeichnisetargetsshtml) Der Webserver der Universitaumlt sucht bei der Ausgabe Ihrer

Internetseiten im ersten Schritt nach der Datei bdquotargetsshtmlldquo im zweiten Schritt nach der Datei

bdquoetargetsshtmlldquo in Ihrem Verzeichnis und gibt die Zielgruppennavigation dieser Prioritaumlt nach aus

Fehlen beide Dateien so erscheinen die entsprechenden Inhalte des zentralen Angebotes der

Universitaumlt

53 Die Navigation

Navigationen in der linken Spalte Ihrer Webseite sind maximal zwei Ebenen tief

bull In der ersten Ebene ist die Schrift in Versalien (Groszligbuchstaben) gesetzt Schreiben Sie Ihre

Links bitte dennoch bdquonormalldquo Die Transformation in Groszligbuchstaben erfolgt automatisch

durch das System Die Navigationspunkte der ersten Ebene sind mit einem blauen Rechteck

versehen das am linken Seitenrand anliegt

bull Die zweite Navigationsebene erscheint in der Ausgabe nach rechts geruumlckt und regulaumlr in

Groszlig- und Kleinschreibung gesetzt

Links in Navigationen veraumlndern sich beim Uumlberfahren mit der Maus bzw beim Antabben auf

Touchpads Die Schrift erscheint dann weiszlig auf einem blauen Hintergrund Das Gleiche gilt fuumlr den

jeweils aktiven Menuumlpunkt Dieser ist in der Navigation dauerhaft weiszlig mit blauer Hinterlegung

Navigationen erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 14

Zum Aufbau Ihrer Navigation stehen Ihnen die Module bdquoNavigationslinkldquo und

bdquoNavigationsuntermenuumlldquo zur Verfuumlgung Ein Navigationslink erscheint einzeln auf der ersten Ebene

versehen mit einem vorgelagerten blauen Rechteck Mit dem Navigationsuntermenuuml koumlnnen Sie

Menuumlpunkte erzeugen die neben dieser ersten Position uumlber eine zweite eingeruumlckte Ebene

verfuumlgen Dort lassen sich beliebig viele Unterpunkte einsetzen Je nachdem ob Sie den

uumlbergeordneten Eintrag im Navigationsuntermenuuml mit einer Zieladresse (URL) versehen erscheint

dieser verlinkt oder als einfache Uumlberschrift uumlber die nachgelagerten Inhaltspunkte

Selbstverstaumlndlich lassen sich die einzelnen Einheiten in ihrer Position jederzeit verschieben Tragen

Sie interne Links in Ihren Navigationen bitte als relative Verknuumlpfungen ohne Verweis auf den

Webserver der Universitaumlt ein

Editierte und veroumlffentlichte Navigation erscheinen innerhalb der Rubrik in der sie angelegt wurden

automatisch zur Auswahl im linken Bereich der Bearbeitungsebene Ihrer Webseite

Die spaumltere Bearbeitung von Navigationen ist im CMS IMPERIA auf zwei Wegen moumlglich Die

entsprechende Datei kann zum einen uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo im

IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Navigationen folgt folgendem Muster

ihrverzeichnisnav_12345shtml

S e i t e | 15

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Navigationen im selben

Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

Zum anderen koumlnnen Sie auch aus der Bearbeitungsebene einer Webseite heraus dort ausgewaumlhlte

Navigationen aufrufen und editieren Beachten Sie jedoch dass nach dem Speichern der

bearbeiteten Navigation sowohl die Navigationsdatei als auch die Datei der Ursprungsseite auf Ihrem

Schreibtisch liegen

6 Webseiten gestalten

Fuumlr die Gestaltung Ihres Inhalts steht Ihnen eine groszlige Anzahl statischer wie dynamischer Elemente

(Module) zur Verfuumlgung Welche Elemente Sie im Einzelnen nutzen koumlnnen haumlngt davon ab welchen

Dateityp Sie bei der Dokumentenerzeugung fuumlr Ihre Webseite waumlhlen Das Content Management

System der Hochschule bietet Ihnen die Moumlglichkeit Ihr Dokument als HTML-Web-Seite oder als

PHP-Skript zu erzeugen Beachten Sie bitte von Anfang an dass diese Auswahl Einfluss auf die URL

(Internetadresse) der jeweiligen Seite hat Bei einer nachtraumlglichen Aumlnderung aumlndert sich auch die

Internetadresse unter der Ihre Seite im Netz zu finden ist Sie muumlssen dann eventuell Verlinkungen

an vielen Stellen aumlndern

bull Internetadresse einer HTML-Web-Seite wwwuni-duedebereichihreseiteshtml

bull Internetadresse eines PHP-Skripts wwwuni-duedebereichihreseitephp

Je nachdem ob Sie Ihr Dokument als HTML-Web-Seite oder als PHP-Skript erzeugen koumlnnen Sie

folgende Elemente nutzen

Linke Spalte des Inhaltsbereiches

bull (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

bull A-Z verwalten PHP-Skript HTML-Web-Seite

bull Code editieren PHP-Skript HTML-Web-Seite

bull Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

bull DBAdmin PHP-Skript

bull Doppelcontainer PHP-Skript HTML-Web-Seite

bull Flickr nutzen PHP-Skript

bull Formular schlieszligen PHP-Skript

bull Formular oumlffnen PHP-Skript

S e i t e | 16

bull Formular Element PHP-Skript

bull Formulareingabe in DB speichern PHP-Skript

bull Google-Maps (v30) PHP-Skript HTML-Web-Seite

bull Image-Gallery (v21) PHP-Skript HTML-Web-Seite

bull Mailinglisten PHP-Skript

bull Mitarbeiter-Liste PHP-Skript

bull Mitarbeiter-Publikationsliste PHP-Skript

bull Mitarbeiter-Seite PHP-Skript

bull Randlose Grafik PHP-Skript HTML-Web-Seite

bull RSS-Feed-Administration PHP-Skript

bull RSS-Feed-Agent PHP-Skript

bull Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

bull Veranstaltungskalender Kalendermodul PHP-Skript

bull Veranstaltungskalender Veranstaltungsmodul PHP-Skript

Rechte Spalte des Inhaltsbereiches

bull (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

bull Code editieren PHP-Skript HTML-Web-Seite

bull Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

bull Flickr nutzen PHP-Skript

bull Mitarbeiter-Seite PHP-Skript

bull Randlose Grafik PHP-Skript HTML-Web-Seite

bull RSS-Feed-Agent PHP-Skript

bull Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

bull Veranstaltungskalender Kalendermodul PHP-Skript

Beim Erstellen Ihrer Webseite koumlnnen Sie diese einzelnen Module nach Bedarf (auch mehrfach)

erzeugen und in der gewuumlnschten Reihenfolge platzieren wobei die gewaumlhlte Reihenfolge jederzeit

veraumlnderbar ist Mit wenigen Ausnahmen lassen sich die einzelnen Einheiten weiszlig blau oder beige

einfaumlrben (Ausnahme randlose Grafik) Sie werden vom System dann als voneinander abgesetzte

Bloumlcke ausgegeben

Um innerhalb eines Dokuments zu navigieren koumlnnen Sie wenn noumltig die einzelnen Elemente auch

mit einem Link-Anker versehen (Ausnahmen randlose Grafik Mitarbeiter-Liste -Publikationsliste

und ndashSeite Veranstaltungskalender Veranstaltungs- sowie Kalendermodul) Den Ankernamen

S e i t e | 17

koumlnnen Sie frei vergeben er darf jedoch keine Leer- oder Sonderzeichen enthalten Das erste Zeichen

muss auszligerdem ein Buchstabe sein

61 Uumlber allem Die Brotkrumennavigation

Zwischen Seitentitel und ndashinhalt koumlnnen Sie auf jeder Seite eine individuelle Brotkrumennavigation

editieren die den Nutzern eine schnelle Uumlbersicht daruumlber ermoumlglicht wie sie auf die gerade

aufgerufene Webseite gelangt sind Verwenden Sie dieses Instrument bitte nicht als moumlgliche

zusaumltzliche Quernavigation sondern ausschlieszliglich als Hilfe im vorgesehenen Sinne

Der letzte Eintrag der Brotkrumennavigation der uumlblicherweise die aktuell aufgerufene Seite

benennt sollte nicht mit einer Zieladresse (URL) versehen werden Der Eintrag erscheint dann als

regulaumlr schwarz formatierter Text nicht als blau ausgezeichneter Link

S e i t e | 18

62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

Mit dem TinyMCE-Texteditor stellt Ihnen das Content Management System der UDE einen auf

JavaScript basierenden WYSIWYG-Editor (bdquoWhat You See Is What You Getldquo) zur Verfuumlgung Mit Hilfe

dieses Moduls ist es moumlglich ohne HTML- oder weitergehende Programmierkenntnisse Beitraumlge zu

verfassen und Seiten zu formatieren Die Bedienung mittels einer Textbox orientiert sich stark an

gaumlngiger und bekannter Textverarbeitungs-Software

Texte formatieren

Selbstverstaumlndlich bietet der TinyMCE-Editor die uumlblichen Arten Texte zu formatieren Neben den

Befehlen fett (bdquoBoldldquo) kursiv (bdquoItalicldquo) unterstrichen (bdquoUnderlineldquo) sowie hoch- bzw tiefgestellt

bietet Ihnen das System uumlber das Ω-Symbol eine breite Palette an Sonderzeichen uumlber die

Listenfunktion die Erstellung einfacher oder nummerierter Aufzaumlhlungslisten an Mittels einer Select-

S e i t e | 19

Box koumlnnen Sie auszligerdem auf im Hochschullayout vorgegebene Uumlberschriftarten (bdquoHeadingsldquo)

zuruumlckgreifen

Als weitere Moumlglichkeiten steht Ihnen frei

bull ein Datum undoder eine Uhrzeit einzufuumlgen

bull Blockzitate zu kennzeichnen oder

bull geschuumltzte Leerzeichen (bdquoNon-breaking Space Characterldquo) zu definieren

bull Das Ankersymbol (bdquoInsertEdit Anchorldquo) erlaubt die Definition von Sprungzielen innerhalb

laumlngerer Texte

Im Notfall hilft Ihnen das Radiergummi-Symbol (bdquoRemove Formatting) saumlmtliche Formatierungen zu

entfernen

Bereits formatierten Text einfuumlgen

Uumlber diese Formatierungsarten hinaus koumlnnen Sie auch bereits vorformatierte Texte aus Ihrer

Textverarbeitung in den Editor kopieren Zum Einfuumlgen nutzen Sie jedoch bitte nicht den einfachen

Copy amp Paste-Befehl sondern die im Modul bereitgestellte Funktion bdquoPaste from Wordldquo (Sie finden

das entsprechende bdquoWldquo-Symbol unter der Texteingabe-Box) ndash und zwar auch dann wenn Ihr

Ursprungstext nicht aus Microsoft Word sondern einer anderen Textverarbeitungssoftware

importiert wird Schriftformatierungen Verlinkungen und Aumlhnliches werden dann 11 uumlbernommen

Achten Sie bitte dennoch darauf dass dieser Funktion Grenzen gesetzt sind und arbeiten Sie mit

moumlglichst einfachen Formatvorlagen

HTML-Ansicht

Fuumlr Redakteure die sich in der Seitenprogrammierung sicherer fuumlhlen als in der Textverarbeitung

haumllt das Modul TinyMCE-Texteditor uumlber den Button bdquoHTMLldquo einen HTML Source Editor bereit mit

dem direkt auf den Quelltext und die Codierung dieses Teils der Webseite zugegriffen werden kann

Diese Funktion eignet sich auszligerdem besonders zur Uumlberpruumlfung und Fehlersuche Zur

Programmierung eigener Funktionen nutzen Sie jedoch bitte das Modul bdquoCode editierenldquo

S e i t e | 20

Links

Die uumlber die Symbole bdquoInsertEdit Linkldquo (Link einfuumlgen oder bearbeiten) in Ihre Texte oder

Aufzaumlhlungslisten eingefuumlgten Hyperlinks formatiert das System selbststaumlndig im fuumlr die UDE

vorgesehehen Layout Tragen Sie Links auf Seiten innerhalb von wwwuni-duede bitte als relative

Verknuumlpfungen ohne Verweis auf den Webserver der Universitaumlt ein also

bull depresse

anstelle von

bull httpwwwuni-duededepresseindexphp

Zeichnen sie auszligerdem Ihre Verlinkungen im Sinne der Barrierefreiheit mit sprechenden Titeln aus

und uumlberlegen Sie sich ob das Sprungziel im selben oder in einem neuen Browserfenster geoumlffnet

werden soll

Uumlber das Symbol bdquoUnlinkldquo entfernen Sie die entsprechende Verlinkung

Bilder

Der TinyMCE-Texteditor bietet Ihnen zwei Moumlglichkeiten Bilder in Ihre Texte einzubinden

S e i t e | 21

bull Uumlber die Funktion bdquoInsertEdit Imageldquo (Icon unter der Texteingabe-Box) koumlnnen Sie den

relativen Pfad auf das entsprechende Bild aus der IMPERIA-Mediendatenbank einfuumlgen

(Formatbeispiel imperiamdimageswebredaktion2013parentservicejpg)

bull Die Funktion bdquoVorschaubild waumlhlenldquo laumlsst Sie direkt auf die IMPERIA-Mediendatenbank

zugreifen und dort die gewuumlnschte Grafik per Klick auswaumlhlen Uumlber die Funktion bdquoVollbild

waumlhlenldquo koumlnnen Sie das Bild optional zu einer groumlszligeren Ansicht verlinken die sich als

bdquoLightboxldquo uumlber der aktiven Webseite oumlffnet Der Befehl bdquoBild zuruumlcksetzenldquo entfernt die

gewaumlhlte Grafik aus Ihrer Webseite

Waumlhrend Sie mittels bdquoInsertEdit Imageldquo die Anzeige-Groumlszlige Ihres Bildes (bis maximal 480 Pixel

Breite) selbst bestimmen koumlnnen werden Grafiken uumlber die Funktion bdquoVorschaubild waumlhlenldquo beim

Einfuumlgen automatisch auf die passende Groumlszlige skaliert (162 Pixel Breite in der linken und 204 Pixel

Breite in der rechten Content-Spalte) In diesem Fall koumlnnen Sie zudem waumlhlen ob der Text an dieser

Stelle das Bild umflieszligt oder aber rechts daneben angezeigt wird Das Vollbild wird bei der Eingabe

nicht skaliert Nutzen Sie daher bitte Bilder mit einer bildschirmtauglichen Groumlszlige (maximal 1024

Pixel)

S e i t e | 22

Tabellen

Uumlber das Icon bdquoInsertEdit Tableldquo fuumlgen Sie an der gewuumlnschten Stelle Tabellen in Ihren Texteditor

ein Unter den Reitern bdquoGeneralldquo und bdquoAdvancedldquo koumlnnen Sie diese Tabellen gemaumlszlig den uumlblichen

HTML-Konventionen erstellen formatieren und bearbeiten

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig gemaumlszlig den Vorgaben der Barrierefreiheit als

solche aus Der Text-Editor stellt Ihnen diese Optionen zur Verfuumlgung

bull Beachten Sie dass die Hintergrundfarbe der Tabellen je nach gewaumlhlter Einfaumlrbung des

Moduls variiert

S e i t e | 23

Texte mit bdquoVerfallsdatumldquo

Grundsaumltzlich steht Ihnen das Modul bdquo(TinyMCE)-Texteditorldquo sowohl auf shtml-Seiten als auch in

php-Skripten zur Verfuumlgung Auf php-Seiten laumlsst sich jedoch eine zusaumltzliche Option nutzen Fuumlr

Texte die nur fuumlr einen gewissen Zeitraum auf Ihrer Webseite erscheinen sollen koumlnnen Sie ein

Start- und Enddatum setzen

63 A-Z verwalten PHP-Skript HTML-Web-Seite

Das Modul bdquoA-Z verwaltenldquo ermoumlglicht den Redakteuren A-Z-Listen relativ einfach zu erzeugen und

zu pflegen

S e i t e | 24

Fuumlr jeden Eintrag in der Stichwortliste muss im Eingabefeld eine einzelne Zeile eingefuumlgt werden Die

Eingabe folgt einem festen Schema

bull Stichwort||URL (Internetadresse)||

oder

bull Stichwort||URL (Internetadresse)||eventuell ein kurzer Beschreibungstext

wobei auf den Beschreibungstext auch verzichtet werden kann Die sogenannten bdquoPipe-Zeichenldquo (||)

dienen als Feldtrenner Sie erzeugen sie uumlber den Tastaturbefehl bdquoAltGr amp das Groumlszligerzeichenldquo

Wahlweise kopieren Sie die entsprechenden Zeichen aus bisherigen Eintraumlgen

Auch hier gilt Tragen Sie interne Links in Ihrer A-Z-Liste bitte als relative Verknuumlpfungen ohne

Verweis auf den Webserver der Universitaumlt ein also

bull Abiturjahrgang 2013||doppelter_abiturjahrgang||

anstelle von

bull Abiturjahrgang 2013||httpwwwuni-duededoppelter_abiturjahrgang||

Externe Links (wie etwa bdquoGlassbooth ||httpwwwglassboothde||ldquo) werden auf der

ausgegebenen Webseite entsprechend gekennzeichnet

S e i t e | 25

Die Eintraumlge im Modul bdquoA-Z verwaltenldquo sortiert das Content Management System automatisch nach

Ziffernreihenfolge bzw dem Alphabet Um die Eintraumlge spaumlter einfach aufzufinden und bearbeiten zu

koumlnnen empfiehlt es sich jedoch bereits im Eingabefeld selbst eine alphabetische Sortierung

vorzunehmen

64 Code editieren PHP-Skript HTML-Web-Seite

Das Modul bdquoCode editierenldquo eroumlffnet Ihnen die Moumlglichkeit in Ihrem Internetauftritt eigene PHP-

oder HTML-Codeschnipsel zu erstellen und zu nutzen oder Programmierungen eigener Funktionen

vorzunehmen

Nutzen Sie dieses Modul bitte nicht um Funktionen zu simulieren die Ihnen das CMS IMPERIA bereits

als vorgefertigte Module zur Verfuumlgung stellt Das freie Code-Eingabefeld ist ebenfalls nicht dazu

S e i t e | 26

vorgesehen auf diesem Wege vom Corporate Design der Universitaumlt abweichende eigene Layouts zu

entwickeln

65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

Uumlber das Modul bdquoCodebaustein einfuumlgenldquo ist es moumlglich vorgefertigte Bloumlcke oder bdquoBauteileldquo in Ihre

Webseite zu integrieren Codebausteine eignen sich dazu bestimmte Informationen die auf vielen

Webseiten wiederkehren an einer Stelle zentral zu pflegen In der Bearbeitungsebene bietet Ihnen

das Modul die in der aktuellen Rubrik vorhandenen Bausteine zur Auswahl an

Codebausteine erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 27

Sie koumlnnen in Codebausteinen wie beim uumlblichen Seitenaufbau gewohnt unterschiedliche Module

kombinieren und positionieren Zur Verfuumlgung stehen die Elemente

bull (TinyMCE)-Texteditor

bull Code editieren

bull die Formularmodule

bull Randlose Grafik

bull RSS-Feed-Agent

bull Tube Audio-VideoPlayer

Eine spaumltere Bearbeitung der Codebausteine ist im CMS IMPERIA nicht uumlber das Tool bdquoQuickEditldquo

moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo

im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichniscode_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Codebausteine im

selben Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

66 DBAdmin PHP-Skript

Mit Hilfe des Moduls bdquoDBAdminldquo lassen sich Datenbank direkt in Tabellenform auf Ihrer Webseite

darstellen Uumlber die Funktion bdquoOptionen anzeigenldquo erhalten Sie zudem die Moumlglichkeit eine

Webseite zur Pflege Ihrer Datenbank zu erstellen Dort koumlnnen Sie die entsprechende Tabelle

editieren d h Eintraumlge einzeln erstellen bearbeiten oder loumlschen

S e i t e | 28

Zur Nutzung dieses Moduls sind folgende Angaben notwendig

bull Datenbank-Server Name oder IP-Adresse des Servers auf dem die anzusprechende

Datenbank liegt (bspw bdquodbuni-duedeldquo)

bull Datenbank-Name

bull Tabellen-Name Name der speziellen Tabelle die innerhalb der Datenbank angesprochen

werden soll

bull Datenbank-Benutzer und Datenbank-Passwort

Datenbanken auf einem UDE-Server koumlnnen Universitaumltsangehoumlrige unter Nutzung ihrer

Hochschulkennung online beim Zentrum fuumlr Informations- und Mediendienste (ZIM) beantragen

unter httpwwwuni-duedezimserviceshomepagesmysqlshtml

67 Doppelcontainer PHP-Skript HTML-Web-Seite

Das Modul bdquoDoppelcontainerldquo ermoumlglicht es Ihnen auf Ihrer Webseite zwei Textebloumlcke (je nach

Wunsch mit oder ohne Bilder) nebeneinander zu setzen

Auf zweispaltig angelegten Webseiten ist die Anlage eines Doppelcontainers nur in der linken Spalte

moumlglich Bilder erscheinen dort in einer Breite von 246 Pixeln Auf einspaltig angelegten Webseiten

werden die einzelnen Bloumlcke (und dementsprechend die verwendeten Bilder) in einer Breite von 366

Pixeln angezeigt Die Bildhoumlhe ist in beiden Faumlllen frei waumlhlbar sollte jedoch in beiden Containern

identisch sein

S e i t e | 29

Zur Texteingabe stehen Ihnen die Optionen bdquoTeaserldquo (mit Zeichenbegrenzung) sowie bdquoStandardldquo

(ohne Zeichenbegrenzung) zur Verfuumlgung Waumlhlen Sie bdquoTeaserldquo so erhalten Sie Platz fuumlr 300 Zeichen

ndash ein Zeichenzaumlhler neben der Texteingabe-Box erleichtert das Mitzaumlhlen Der Text wird gelb

unterlegt wenn er nach dem naumlchsten Leerzeichen abgeschnitten wird Rot erscheint das Textfeld

wenn die Zeichenzahl bereits uumlberschritten wurde

Beachten Sie bitte dass das Modul HTML-Tags (URLs Mailadressen etc) automatisch filtert Sie

werden daher nicht angezeigt Um Ihren Text zu verlinken koumlnnen Sie das Eingabefeld bdquoMehr-Linkldquo

nutzen

Beide Bloumlcke innerhalb eines Doppelcontainers lassen sich individuell auf die uumlbliche Weise (weiszlig

hellblau sandfarben) hinterlegen

S e i t e | 30

68 Flickr nutzen PHP-Skript

Das Modul bdquoFlickr nutzenldquo ermoumlglicht es Ihnen im Sinne einer crossmedialen Verwertung Bilder aus

Ihrem Flickr-Account in Ihre IMPERIA-Webseite einzubinden Fuumlr diese Funktion benoumltigen Sie einen

sogenannten API-Key den Sie in Ihrem Flick-Auftritt unter

bull httpwwwflickrcomservicesappscreateapply

erzeugen lassen koumlnnen Tragen Sie dann diesen Key in die entsprechende Eingabemaske des Moduls

ein Anschlieszligend haben Sie die Moumlglichkeit ganze Fotosets (Alben) oder Einzelbilder einzubinden

Photoset anzeigen

S e i t e | 31

Zum Anzeigen von Photosets wird die entsprechende Photoset-ID ins Modul eingetragen Diese ID ist

Teil der Link-Adresse des entsprechenden Albums bei Flickr (die erscheint wenn Sie das Album

angeklickt haben) Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAMEsets12340954909

Die Photoset-ID verbirgt sich hinter den Ziffern am Ende der URL Sie koumlnnen auswaumlhlen wie viele

Fotos auf einer Webseite erscheinen sollen Dafuumlr uumlbernimmt das Modul die Bilder in der

quadratischen Aufloumlsung von Flickr also in einer Groumlszlige von 75 x 75 Pixeln Reicht der Platz dafuumlr

nicht aus wird eine zusaumltzliche Blaumltterfunktion angeboten Photoset- und Bild-Beschreibungen

koumlnnen aus dem Flickr-Account automatisch uumlbernommen werden wenn die entsprechenden

Optionen mit einem Haken aktiviert wurden

Einzelbild anzeigen

Um ein einzelnes Bild anzuzeigen benoumltigen Sie die entsprechen Flickr-Foto-ID Diese verbirgt sich

hinter der ersten Zahl in der Link-Adresse des entsprechenden Bildes Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAME5841603851inset-72157626981464896

Ein Einzelbild kann in einer hohen oder einer geringen Aufloumlsung eingebunden werden Bei einer

zweispaltig angelegten Webseite wird das Bild in der linken Inhaltsspalte auf eine Breite von 480

Pixel bei einer einspaltig angelegten Webseite auf eine Breite von 721 Pixel skaliert

69 Formulare

Mit IMPERIA haben Sie die Moumlglichkeit Formulare auf Ihrer Webseite zu platzieren In der

Bearbeitungsebene Ihrer Seite finden Sie im Bereich bdquoNeues Modulldquo den Menupunkt UDE ndash

Formular oumlffnen

Nach dem Festlegen der Hintergrundfarbe koumlnnen Sie im Bereich bdquoLegendeldquo den Titel Ihres

Formulars waumlhlen Wenn Sie die Funktion bdquoMailer-Funktionalitaumltldquo aktivieren koumlnnen Sie die Adresse

Ihres Mailscripts eingeben Anderenfalls belassen Sie es bitte beim Vorgabewert

Im Bereich bdquoNexturlldquo kann angegeben werden welche Seite nach dem Abschicken des Formulars

aufgerufen werden soll Daruumlber hinaus werden der Titel der E-Mail die Absender-Adresse sowie die

Empfaumlnger-Adresse definiert Optional kann eine Bestaumltigungs-E-Mail mit frei waumlhlbarem Text

versendet werden

S e i t e | 32

Um dem erstellten Formular Eingabefelder hinzuzufuumlgen ist das Modul bdquoUDE Formular Elementldquo zu

waumlhlen Waumlhlen Sie das Element bdquoTextldquo um ein Eingabefeld zu erzeugen Die Option bdquoBezeichnerldquo

beschreibt den sichtbaren Text im fertigen Formular zum Beispiel bdquoIhr Nameldquo Weitergehend koumlnnen

Sie die zulaumlssigen Inhalte der Nutzereingaben definieren sowie markieren ob das Element ein

Pflichtfeld sein soll

S e i t e | 33

Um ein Texteingabefeld innerhalb des Formulars zu erzeugen waumlhlen Sie das Element bdquoTextarealdquo

Sie koumlnnen die Groumlszlige des Textfeldes definieren (Zeilen x Spalten) und optional erneut eine Pruumlfung

zulaumlssiger Nutzereingaben aktivieren Weiterhin koumlnnen Sie waumlhlen ob der eingegebene Wert des

Formularelements in die Datenbank eingetragen werden soll Wenn Sie fuumlr Ihre Formulare auf eine

Datenbank zuruumlckgreifen moumlchten koumlnnen Sie sich hier informieren httpwwwuni-

duedezimserviceshomepagesmysqlshtml

Insgesamt stehen folgende Elemente zur Verfuumlgung

bull Checkbox Hidden Password Select Anfang Select Option einfuumlgen Select Ende Submit

Text Datum Textarea Radio Reset Leerzeile Kommentarzeile Neuer Abschnitt mit

Bezeichner sowie Datei-Upload

Ein Formular muss mit dem Modul bdquoUDE Formular schlieszligenldquo abgeschlossen werden An dieser

Stelle koumlnnen Sie einen Send-Button hinzufuumlgen dessen Name frei waumlhlbar ist Der eingegebene Text

wird als Beschriftung des Buttons angezeigt Erst durch das Hinzufuumlgen dieses Moduls wird das

Formular auf Ihrer Seite sichtbar und kann nach der Veroumlffentlichung genutzt werden

S e i t e | 34

610 Google-Maps (v30) PHP-Skript HTML-Web-Seite

Dieses Modul bringt eine Grafik von Google-Maps auf die Webseite entweder in Kartenoptik oder als

Satellitenbild Sie haben zwei Moumlglichkeiten eine solche zu generieren Uumlber die konkreten GPS-

Koordinaten oder durch das Angeben einer Adresse (zB Forsthausweg 2 47057 Duisburg) Sie

koumlnnen aus zwoumllf Vergroumlszligerungsstufen fuumlr den gewuumlnschten Ausschnitt zwei Kartengroumlszligen und

zwei Kartenformaten waumlhlen

S e i t e | 35

Kartengroumlszlige bdquogroszligldquo skaliert die Graphik auf 480 Pixel Breite auf einer zweispaltigen Seite bzw auf

721 Pixel auf einer einspaltigen Seite Die Option bdquokleinldquo verringert die Breite auf etwa die Haumllfte Die

beiden Optionen beim Kartenformat beeinflussen die Houmlhe der Grafik

S e i t e | 36

611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite

Das Modul Image-Gallery ermoumlglicht die Integration einer komfortablen Bildergallerie uumlber IMPERIA

Per Klick auf bdquoNeues Modulldquo -gt bdquoUDE Image-Gallery (v21)ldquo kann die entsprechende Gallerie an der

gewuumlnschten Position eingefuumlgt werden Generell sollten nur Bilder verwendet werden die

entweder auf 640 x 480 Pixel oder maximal auf 900 x 600 Pixel skaliert sind Aufgrund einer hohen

Dateigroumlszlige sollten Bilder einer Digitalkamera vor dem Upload komprimiert werden

Innerhalb des Moduls kann zunaumlchst die Hintergrundfarbe der Gallerie wahlweise zwischen Beige

Blau und Weiszlig eingestellt werden Um die Gallerie mit Bildern zu fuumlllen ist das entsprechende

Verzeichnis der Mediendatenbank anzugeben Aufgrund der geaumlnderten Syntax wird das Verzeichnis

ohne images angegeben Die Suchmaske fuumlr die Bilderauswahl deklariert die Dateiformate die mit

einbezogen werden sollen Schlieszliglich koumlnnen Sie die Bilder alphabetisch sortiert anzeigen lassen

sowie einen kleinen und einen groszligen Titel fuumlr Ihre Bildergallerie vergeben

Grundsaumltzlich ist es empfehlenswert groumlszligere Bildmengen auf mehrere Seiten zu verteilen um

einerseits die Darstellung auf mobilen Geraumlten zu vereinfachen und andererseits geringeren

Bandbreiten Rechnung zu tragen

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 9: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 8

zum oberen Seitenrand und setzt immer am unteren Seitenrand auf Der linke der obere und

der rechte Containerrand erzeugen einen leichten Schatteneffekt

bull Links in der Kopfzeile begruumlszligt immer an erster Stelle der Schriftzug bdquoUNIVERSITAumlT

DUISBURG-ESSENldquo die Seitenbesucher Auf jeder Seite der Universitaumlt genuumlgt ein Mausklick

auf den Schriftzug um zuruumlck auf die UDE-Startseite zu gelangen

bull Die gruppenspezifische Aufarbeitung von Informationen gilt inzwischen ndash zu Recht ndash als ein

Qualitaumltsmerkmal von Internetseiten Jede UDE-Webseite erhaumllt deshalb in der Kopfzeile

eine Zielgruppennavigation In Bereichen die keine eigene Zielgruppennavigation erstellen

erscheinen dort die entsprechenden Inhalte des zentralen Angebotes der Universitaumlt

bull Unterhalb der Kopfzeile erscheint auf jeder Seite der Universitaumlt eine Impressionsgrafik Das

System IMPERIA gibt Ihnen diese Grafik vor Sie greift mit ihrem Motiv (Himmel und Wolken)

das beherrschende Key-Visual des Corporate Design der Hochschule auf Zentral am unteren

Rand des Bildes wird vor einem uumlberlagernden weiszligen Kasten der Titel der jeweiligen

Webseite angezeigt Die Houmlhe der Impressionsgrafik veraumlndert sich wenn der eingefuumlgte

Seitentitel mehrzeilig wird

bull Innerhalb der Impressionsgrafik koumlnnen Sie auf der linken Seite eine ein- oder zweizeilige

Bezeichnung Ihres Bereiches einfuumlgen Diese individuelle Organisationsangabe sitzt so im

Gesamtlayout direkt unter dem Schriftzug bdquoUNIVERSITAumlT DUISBURG-ESSENldquo und gibt den

Seitenbesuchern auf den ersten Blick die Orientierung daruumlber wo sie sich eigentlich gerade

befinden Sie koumlnnen sie individuell verlinken

bull Das Universitaumlts-Logo sitzt rechtsbuumlndig in der Impressionsgrafik Es ist so einzurichten dass

ein Mausklick genuumlgt um auf die UDE-Homepage zu gelangen Das Logo darf nicht ohne den

Claim bdquoOffen im Denkenldquo (wahlweise im Englischen bdquoOpen mindedldquo) verwendet werden

bull In der linken Spalte kann der jeweilige Seitenanbieter eine frei editierbare Navigation

einbinden Die Navigation umfasst maximal zwei Ebenen Durch die bewusst reduzierte

Menuumlstruktur signalisiert die Internetpraumlsenz Klarheit und Transparenz Die

Hauptmenuumleintraumlge sind in Groszligbuchstaben (Versalien) ausgefuumlhrt Eintraumlge von

Untermenuumls sind eingeruumlckt und in Normalschrift formatiert Auf beiden Ebenen wird die

Schrift beim Uumlberfahren mit der Maus bzw beim Antabben auf Touch-Screens weiszlig vor

blauem Hintergrund Gleiches gilt fuumlr den jeweils aktiven Menuumlpunkt (Im Jahr 2013 wird auf

jeder mit dem CMS IMPERIA im aktuellen Template erzeugten Webseite uumlber der

Hauptnavigation das Jubilaumlumsfaumlhnchen zum zehnjaumlhrigen Bestehen der Universitaumlt

eingeblendet verlinkt auf httpwwwuni-duede10jahre)

bull Unterhalb der eigenen Navigation wird immer die zentrale Suche (Volltextsuche

Personensuche) der Universitaumlt verlinkt An dieser Stelle koumlnnen Sie zudem wahlweise (und

S e i t e | 9

auf jeder Seite einzeln) einen Link auf eine individuelle A-Z-Seite undoder auf einen eigenen

Intranet-Bereich sowie mit Landesfahnen gekennzeichnete Hinweise auf parallel angebotene

fremdsprachige Inhalte einfuumlgen

bull Zwischen Seitentitel und ndashinhalt koumlnnen Sie auf jeder Seite eine individuelle

Brotkrumennavigation editieren die den Nutzern eine schnelle Uumlbersicht daruumlber

ermoumlglicht wie sie auf die gerade aufgerufene Webseite gelangt sind

bull Der eigentliche Inhaltsbereich (Content) der Webseite kann bei der Seitenerzeugung ein-

oder zweispaltig angelegt werden Der Wechsel zwischen Ein- und Zweispaltigkeit einer Seite

ist uumlber den IMPERIA -Workflow jederzeit moumlglich Bei einem zweispaltigen Contentbereich

ist die schmale rechte Spalte fuumlr Zusatzinformationen vorgesehen die nicht direkt zum

Hauptinhalt gehoumlren bspw Veranstaltungskalender Banner oder RSS-Feeds Fuumlr die

Gestaltung des Inhalts steht eine groszlige Anzahl statischer wie dynamischer Elemente

(Module) zur Verfuumlgung Die einzelnen Module des Inhaltsbereiches koumlnnen unterschiedlich

eingefaumlrbt werden Sie haben die Wahl zwischen weiszliger (Standardeinstellung) sandfarbener

oder hellblauer Hinterlegung

bull In der Fuszligzeile angedockt an den unteren Seitenrand erscheint auf allen Seiten der

Hochschule ein Link auf das zentrale UDE-Impressum Wahlweise (und auf jeder Seite

einzeln) koumlnnen Sie einen Kontakt-Link einfuumlgen

bull Den Abschluss der Webseite bildet die E-Mail-Adresse des zustaumlndigen technischen

Seitenredakteurs die fuumlr Ruumlckfragen oder fuumlr redaktionelle Hinweise genutzt werden kann

Dieses Feld ist individuell beschreibbar ndash sollte jedoch niemals leer und immer auf dem

aktuellen Stand sein Hierfuumlr eignen sich Funktions-E-Mail-Adressen besser als Ihr

persoumlnlicher Account

5 Bestandteile von Webseiten

Um eine Webseite in der Internetpraumlsenz der Universitaumlt vollstaumlndig zu praumlsentieren benoumltigen Sie

(solange Sie mit dem CMS IMPERIA arbeiten) vier Elemente von denen Sie jedoch drei Elemente nur

einmal fuumlr Ihren gesamten Webbereich anlegen muumlssen und danach zentral pflegen koumlnnen

Eine Webseite setzt sich zusammen aus

bull Einer eigenen Organisationsbezeichnung Ihres Bereiches

bull Einer individuellen Zielgruppennavigation In Bereichen die keine eigene

Zielgruppennavigation erstellen erscheinen dort die entsprechenden Inhalte des zentralen

Angebotes der Universitaumlt

S e i t e | 10

bull Einer Navigation Sie koumlnnen in Ihrem Webbereich auch eine Vielzahl unterschiedlicher

Navigationen erstellen und diese je nach Bedarf einbinden

bull Der Seite (dem Dokument) selbst in der Sie Ihren Inhalt und Funktionen bearbeiten und die

vorherigen Elemente einfuumlgen koumlnnen

51 Die Organisationsbezeichnung

Die individuelle Bezeichnung Ihres Bereiches (Organisationsbezeichnung) erscheint auf Ihren

Webseiten links oben innerhalb der Impressionsgrafik direkt unter dem Schriftzug bdquoUNIVERSITAumlT

DUISBURG-ESSENldquo

Organisationsbezeichnungen erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

Sie koumlnnen Organisationsbezeichnungen in der Bearbeitungsebene ein- oder zweizeilig gestalten

S e i t e | 11

bull Der Eintrag in der ersten Zeile (bdquoOrganisationsbezeichnungldquo) erscheint groumlszliger und in weiszliger

fett-gesetzter Schrift

bull Ein Eintrag in der zweiten Zeile (bdquoZusatzldquo) erscheint in weiszliger normal gesetzter Schrift

Unter bdquoVerweis zur Organisationseinheit (URL)ldquo koumlnnen Sie das Sprungziel der

Organisationsbezeichnung bestimmen Tragen Sie diese Verknuumlpfung bitte als relativen Link ohne

Verweis auf den Webserver der Universitaumlt ein

bull Beispiel ihrverzeichnis anstatt httpwwwuni-duedeihrverzeichnis

Eine spaumltere Bearbeitung der Organisationsbezeichnung ist im CMS IMPERIA nicht uumlber das Tool

bdquoQuickEditldquo moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente

bearbeitenldquo im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichnisorganisation_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere

Organisationsbezeichnungen im selben Verzeichnis erstellen diesen einen jeweils moumlglichst

aussagekraumlftigen Dateititel zu geben

S e i t e | 12

52 Die Zielgruppennavigation

Eine individuelle Zielgruppennavigation in der Kopfzeile Ihrer Webseite erstellen Sie uumlber das

IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

Die editierte und veroumlffentlichte Zielgruppennavigation erscheint automatisch auf allen Seiten Ihres

Verzeichnisses

Tragen Sie bitte auch dort die Verknuumlpfungen als relative Links ohne Verweis auf den Webserver der

Universitaumlt ein Verwenden Sie dieses Instrument auszligerdem bitte nicht als moumlgliche zusaumltzliche

Quernavigation sondern ausschlieszliglich als Hilfe und zur Verlinkung gruppenspezifischer

Informationsaufarbeitung

Auch die spaumltere Bearbeitung der Zielgruppennavigation ist im CMS IMPERIA nicht uumlber das Tool

bdquoQuickEditldquo moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente

bearbeitenldquo im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Zielgruppennavigation lautet

ihrverzeichnistargetsshtml

S e i t e | 13

Beachten Sie beim Import bitte Folgendes Anders als seit Beginn des Wintersemesters 2007

gehandhabt kann mit dem UDE-Webrelaunch im Oktober 2011 pro Verzeichnis nur noch eine

anstelle von zwei Zielgruppennavigationen erstellt werden die zudem automatisch in Ihrer Webseite

eingesetzt wird In Verzeichnissen die zwischen 2007 und 2011 angelegt wurden existiert oft

(zusaumltzlich oder ausschlieszliglich) eine sogenannte bdquoerweiterte Zielgruppennavigationldquo

(ihrverzeichnisetargetsshtml) Der Webserver der Universitaumlt sucht bei der Ausgabe Ihrer

Internetseiten im ersten Schritt nach der Datei bdquotargetsshtmlldquo im zweiten Schritt nach der Datei

bdquoetargetsshtmlldquo in Ihrem Verzeichnis und gibt die Zielgruppennavigation dieser Prioritaumlt nach aus

Fehlen beide Dateien so erscheinen die entsprechenden Inhalte des zentralen Angebotes der

Universitaumlt

53 Die Navigation

Navigationen in der linken Spalte Ihrer Webseite sind maximal zwei Ebenen tief

bull In der ersten Ebene ist die Schrift in Versalien (Groszligbuchstaben) gesetzt Schreiben Sie Ihre

Links bitte dennoch bdquonormalldquo Die Transformation in Groszligbuchstaben erfolgt automatisch

durch das System Die Navigationspunkte der ersten Ebene sind mit einem blauen Rechteck

versehen das am linken Seitenrand anliegt

bull Die zweite Navigationsebene erscheint in der Ausgabe nach rechts geruumlckt und regulaumlr in

Groszlig- und Kleinschreibung gesetzt

Links in Navigationen veraumlndern sich beim Uumlberfahren mit der Maus bzw beim Antabben auf

Touchpads Die Schrift erscheint dann weiszlig auf einem blauen Hintergrund Das Gleiche gilt fuumlr den

jeweils aktiven Menuumlpunkt Dieser ist in der Navigation dauerhaft weiszlig mit blauer Hinterlegung

Navigationen erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 14

Zum Aufbau Ihrer Navigation stehen Ihnen die Module bdquoNavigationslinkldquo und

bdquoNavigationsuntermenuumlldquo zur Verfuumlgung Ein Navigationslink erscheint einzeln auf der ersten Ebene

versehen mit einem vorgelagerten blauen Rechteck Mit dem Navigationsuntermenuuml koumlnnen Sie

Menuumlpunkte erzeugen die neben dieser ersten Position uumlber eine zweite eingeruumlckte Ebene

verfuumlgen Dort lassen sich beliebig viele Unterpunkte einsetzen Je nachdem ob Sie den

uumlbergeordneten Eintrag im Navigationsuntermenuuml mit einer Zieladresse (URL) versehen erscheint

dieser verlinkt oder als einfache Uumlberschrift uumlber die nachgelagerten Inhaltspunkte

Selbstverstaumlndlich lassen sich die einzelnen Einheiten in ihrer Position jederzeit verschieben Tragen

Sie interne Links in Ihren Navigationen bitte als relative Verknuumlpfungen ohne Verweis auf den

Webserver der Universitaumlt ein

Editierte und veroumlffentlichte Navigation erscheinen innerhalb der Rubrik in der sie angelegt wurden

automatisch zur Auswahl im linken Bereich der Bearbeitungsebene Ihrer Webseite

Die spaumltere Bearbeitung von Navigationen ist im CMS IMPERIA auf zwei Wegen moumlglich Die

entsprechende Datei kann zum einen uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo im

IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Navigationen folgt folgendem Muster

ihrverzeichnisnav_12345shtml

S e i t e | 15

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Navigationen im selben

Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

Zum anderen koumlnnen Sie auch aus der Bearbeitungsebene einer Webseite heraus dort ausgewaumlhlte

Navigationen aufrufen und editieren Beachten Sie jedoch dass nach dem Speichern der

bearbeiteten Navigation sowohl die Navigationsdatei als auch die Datei der Ursprungsseite auf Ihrem

Schreibtisch liegen

6 Webseiten gestalten

Fuumlr die Gestaltung Ihres Inhalts steht Ihnen eine groszlige Anzahl statischer wie dynamischer Elemente

(Module) zur Verfuumlgung Welche Elemente Sie im Einzelnen nutzen koumlnnen haumlngt davon ab welchen

Dateityp Sie bei der Dokumentenerzeugung fuumlr Ihre Webseite waumlhlen Das Content Management

System der Hochschule bietet Ihnen die Moumlglichkeit Ihr Dokument als HTML-Web-Seite oder als

PHP-Skript zu erzeugen Beachten Sie bitte von Anfang an dass diese Auswahl Einfluss auf die URL

(Internetadresse) der jeweiligen Seite hat Bei einer nachtraumlglichen Aumlnderung aumlndert sich auch die

Internetadresse unter der Ihre Seite im Netz zu finden ist Sie muumlssen dann eventuell Verlinkungen

an vielen Stellen aumlndern

bull Internetadresse einer HTML-Web-Seite wwwuni-duedebereichihreseiteshtml

bull Internetadresse eines PHP-Skripts wwwuni-duedebereichihreseitephp

Je nachdem ob Sie Ihr Dokument als HTML-Web-Seite oder als PHP-Skript erzeugen koumlnnen Sie

folgende Elemente nutzen

Linke Spalte des Inhaltsbereiches

bull (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

bull A-Z verwalten PHP-Skript HTML-Web-Seite

bull Code editieren PHP-Skript HTML-Web-Seite

bull Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

bull DBAdmin PHP-Skript

bull Doppelcontainer PHP-Skript HTML-Web-Seite

bull Flickr nutzen PHP-Skript

bull Formular schlieszligen PHP-Skript

bull Formular oumlffnen PHP-Skript

S e i t e | 16

bull Formular Element PHP-Skript

bull Formulareingabe in DB speichern PHP-Skript

bull Google-Maps (v30) PHP-Skript HTML-Web-Seite

bull Image-Gallery (v21) PHP-Skript HTML-Web-Seite

bull Mailinglisten PHP-Skript

bull Mitarbeiter-Liste PHP-Skript

bull Mitarbeiter-Publikationsliste PHP-Skript

bull Mitarbeiter-Seite PHP-Skript

bull Randlose Grafik PHP-Skript HTML-Web-Seite

bull RSS-Feed-Administration PHP-Skript

bull RSS-Feed-Agent PHP-Skript

bull Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

bull Veranstaltungskalender Kalendermodul PHP-Skript

bull Veranstaltungskalender Veranstaltungsmodul PHP-Skript

Rechte Spalte des Inhaltsbereiches

bull (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

bull Code editieren PHP-Skript HTML-Web-Seite

bull Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

bull Flickr nutzen PHP-Skript

bull Mitarbeiter-Seite PHP-Skript

bull Randlose Grafik PHP-Skript HTML-Web-Seite

bull RSS-Feed-Agent PHP-Skript

bull Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

bull Veranstaltungskalender Kalendermodul PHP-Skript

Beim Erstellen Ihrer Webseite koumlnnen Sie diese einzelnen Module nach Bedarf (auch mehrfach)

erzeugen und in der gewuumlnschten Reihenfolge platzieren wobei die gewaumlhlte Reihenfolge jederzeit

veraumlnderbar ist Mit wenigen Ausnahmen lassen sich die einzelnen Einheiten weiszlig blau oder beige

einfaumlrben (Ausnahme randlose Grafik) Sie werden vom System dann als voneinander abgesetzte

Bloumlcke ausgegeben

Um innerhalb eines Dokuments zu navigieren koumlnnen Sie wenn noumltig die einzelnen Elemente auch

mit einem Link-Anker versehen (Ausnahmen randlose Grafik Mitarbeiter-Liste -Publikationsliste

und ndashSeite Veranstaltungskalender Veranstaltungs- sowie Kalendermodul) Den Ankernamen

S e i t e | 17

koumlnnen Sie frei vergeben er darf jedoch keine Leer- oder Sonderzeichen enthalten Das erste Zeichen

muss auszligerdem ein Buchstabe sein

61 Uumlber allem Die Brotkrumennavigation

Zwischen Seitentitel und ndashinhalt koumlnnen Sie auf jeder Seite eine individuelle Brotkrumennavigation

editieren die den Nutzern eine schnelle Uumlbersicht daruumlber ermoumlglicht wie sie auf die gerade

aufgerufene Webseite gelangt sind Verwenden Sie dieses Instrument bitte nicht als moumlgliche

zusaumltzliche Quernavigation sondern ausschlieszliglich als Hilfe im vorgesehenen Sinne

Der letzte Eintrag der Brotkrumennavigation der uumlblicherweise die aktuell aufgerufene Seite

benennt sollte nicht mit einer Zieladresse (URL) versehen werden Der Eintrag erscheint dann als

regulaumlr schwarz formatierter Text nicht als blau ausgezeichneter Link

S e i t e | 18

62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

Mit dem TinyMCE-Texteditor stellt Ihnen das Content Management System der UDE einen auf

JavaScript basierenden WYSIWYG-Editor (bdquoWhat You See Is What You Getldquo) zur Verfuumlgung Mit Hilfe

dieses Moduls ist es moumlglich ohne HTML- oder weitergehende Programmierkenntnisse Beitraumlge zu

verfassen und Seiten zu formatieren Die Bedienung mittels einer Textbox orientiert sich stark an

gaumlngiger und bekannter Textverarbeitungs-Software

Texte formatieren

Selbstverstaumlndlich bietet der TinyMCE-Editor die uumlblichen Arten Texte zu formatieren Neben den

Befehlen fett (bdquoBoldldquo) kursiv (bdquoItalicldquo) unterstrichen (bdquoUnderlineldquo) sowie hoch- bzw tiefgestellt

bietet Ihnen das System uumlber das Ω-Symbol eine breite Palette an Sonderzeichen uumlber die

Listenfunktion die Erstellung einfacher oder nummerierter Aufzaumlhlungslisten an Mittels einer Select-

S e i t e | 19

Box koumlnnen Sie auszligerdem auf im Hochschullayout vorgegebene Uumlberschriftarten (bdquoHeadingsldquo)

zuruumlckgreifen

Als weitere Moumlglichkeiten steht Ihnen frei

bull ein Datum undoder eine Uhrzeit einzufuumlgen

bull Blockzitate zu kennzeichnen oder

bull geschuumltzte Leerzeichen (bdquoNon-breaking Space Characterldquo) zu definieren

bull Das Ankersymbol (bdquoInsertEdit Anchorldquo) erlaubt die Definition von Sprungzielen innerhalb

laumlngerer Texte

Im Notfall hilft Ihnen das Radiergummi-Symbol (bdquoRemove Formatting) saumlmtliche Formatierungen zu

entfernen

Bereits formatierten Text einfuumlgen

Uumlber diese Formatierungsarten hinaus koumlnnen Sie auch bereits vorformatierte Texte aus Ihrer

Textverarbeitung in den Editor kopieren Zum Einfuumlgen nutzen Sie jedoch bitte nicht den einfachen

Copy amp Paste-Befehl sondern die im Modul bereitgestellte Funktion bdquoPaste from Wordldquo (Sie finden

das entsprechende bdquoWldquo-Symbol unter der Texteingabe-Box) ndash und zwar auch dann wenn Ihr

Ursprungstext nicht aus Microsoft Word sondern einer anderen Textverarbeitungssoftware

importiert wird Schriftformatierungen Verlinkungen und Aumlhnliches werden dann 11 uumlbernommen

Achten Sie bitte dennoch darauf dass dieser Funktion Grenzen gesetzt sind und arbeiten Sie mit

moumlglichst einfachen Formatvorlagen

HTML-Ansicht

Fuumlr Redakteure die sich in der Seitenprogrammierung sicherer fuumlhlen als in der Textverarbeitung

haumllt das Modul TinyMCE-Texteditor uumlber den Button bdquoHTMLldquo einen HTML Source Editor bereit mit

dem direkt auf den Quelltext und die Codierung dieses Teils der Webseite zugegriffen werden kann

Diese Funktion eignet sich auszligerdem besonders zur Uumlberpruumlfung und Fehlersuche Zur

Programmierung eigener Funktionen nutzen Sie jedoch bitte das Modul bdquoCode editierenldquo

S e i t e | 20

Links

Die uumlber die Symbole bdquoInsertEdit Linkldquo (Link einfuumlgen oder bearbeiten) in Ihre Texte oder

Aufzaumlhlungslisten eingefuumlgten Hyperlinks formatiert das System selbststaumlndig im fuumlr die UDE

vorgesehehen Layout Tragen Sie Links auf Seiten innerhalb von wwwuni-duede bitte als relative

Verknuumlpfungen ohne Verweis auf den Webserver der Universitaumlt ein also

bull depresse

anstelle von

bull httpwwwuni-duededepresseindexphp

Zeichnen sie auszligerdem Ihre Verlinkungen im Sinne der Barrierefreiheit mit sprechenden Titeln aus

und uumlberlegen Sie sich ob das Sprungziel im selben oder in einem neuen Browserfenster geoumlffnet

werden soll

Uumlber das Symbol bdquoUnlinkldquo entfernen Sie die entsprechende Verlinkung

Bilder

Der TinyMCE-Texteditor bietet Ihnen zwei Moumlglichkeiten Bilder in Ihre Texte einzubinden

S e i t e | 21

bull Uumlber die Funktion bdquoInsertEdit Imageldquo (Icon unter der Texteingabe-Box) koumlnnen Sie den

relativen Pfad auf das entsprechende Bild aus der IMPERIA-Mediendatenbank einfuumlgen

(Formatbeispiel imperiamdimageswebredaktion2013parentservicejpg)

bull Die Funktion bdquoVorschaubild waumlhlenldquo laumlsst Sie direkt auf die IMPERIA-Mediendatenbank

zugreifen und dort die gewuumlnschte Grafik per Klick auswaumlhlen Uumlber die Funktion bdquoVollbild

waumlhlenldquo koumlnnen Sie das Bild optional zu einer groumlszligeren Ansicht verlinken die sich als

bdquoLightboxldquo uumlber der aktiven Webseite oumlffnet Der Befehl bdquoBild zuruumlcksetzenldquo entfernt die

gewaumlhlte Grafik aus Ihrer Webseite

Waumlhrend Sie mittels bdquoInsertEdit Imageldquo die Anzeige-Groumlszlige Ihres Bildes (bis maximal 480 Pixel

Breite) selbst bestimmen koumlnnen werden Grafiken uumlber die Funktion bdquoVorschaubild waumlhlenldquo beim

Einfuumlgen automatisch auf die passende Groumlszlige skaliert (162 Pixel Breite in der linken und 204 Pixel

Breite in der rechten Content-Spalte) In diesem Fall koumlnnen Sie zudem waumlhlen ob der Text an dieser

Stelle das Bild umflieszligt oder aber rechts daneben angezeigt wird Das Vollbild wird bei der Eingabe

nicht skaliert Nutzen Sie daher bitte Bilder mit einer bildschirmtauglichen Groumlszlige (maximal 1024

Pixel)

S e i t e | 22

Tabellen

Uumlber das Icon bdquoInsertEdit Tableldquo fuumlgen Sie an der gewuumlnschten Stelle Tabellen in Ihren Texteditor

ein Unter den Reitern bdquoGeneralldquo und bdquoAdvancedldquo koumlnnen Sie diese Tabellen gemaumlszlig den uumlblichen

HTML-Konventionen erstellen formatieren und bearbeiten

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig gemaumlszlig den Vorgaben der Barrierefreiheit als

solche aus Der Text-Editor stellt Ihnen diese Optionen zur Verfuumlgung

bull Beachten Sie dass die Hintergrundfarbe der Tabellen je nach gewaumlhlter Einfaumlrbung des

Moduls variiert

S e i t e | 23

Texte mit bdquoVerfallsdatumldquo

Grundsaumltzlich steht Ihnen das Modul bdquo(TinyMCE)-Texteditorldquo sowohl auf shtml-Seiten als auch in

php-Skripten zur Verfuumlgung Auf php-Seiten laumlsst sich jedoch eine zusaumltzliche Option nutzen Fuumlr

Texte die nur fuumlr einen gewissen Zeitraum auf Ihrer Webseite erscheinen sollen koumlnnen Sie ein

Start- und Enddatum setzen

63 A-Z verwalten PHP-Skript HTML-Web-Seite

Das Modul bdquoA-Z verwaltenldquo ermoumlglicht den Redakteuren A-Z-Listen relativ einfach zu erzeugen und

zu pflegen

S e i t e | 24

Fuumlr jeden Eintrag in der Stichwortliste muss im Eingabefeld eine einzelne Zeile eingefuumlgt werden Die

Eingabe folgt einem festen Schema

bull Stichwort||URL (Internetadresse)||

oder

bull Stichwort||URL (Internetadresse)||eventuell ein kurzer Beschreibungstext

wobei auf den Beschreibungstext auch verzichtet werden kann Die sogenannten bdquoPipe-Zeichenldquo (||)

dienen als Feldtrenner Sie erzeugen sie uumlber den Tastaturbefehl bdquoAltGr amp das Groumlszligerzeichenldquo

Wahlweise kopieren Sie die entsprechenden Zeichen aus bisherigen Eintraumlgen

Auch hier gilt Tragen Sie interne Links in Ihrer A-Z-Liste bitte als relative Verknuumlpfungen ohne

Verweis auf den Webserver der Universitaumlt ein also

bull Abiturjahrgang 2013||doppelter_abiturjahrgang||

anstelle von

bull Abiturjahrgang 2013||httpwwwuni-duededoppelter_abiturjahrgang||

Externe Links (wie etwa bdquoGlassbooth ||httpwwwglassboothde||ldquo) werden auf der

ausgegebenen Webseite entsprechend gekennzeichnet

S e i t e | 25

Die Eintraumlge im Modul bdquoA-Z verwaltenldquo sortiert das Content Management System automatisch nach

Ziffernreihenfolge bzw dem Alphabet Um die Eintraumlge spaumlter einfach aufzufinden und bearbeiten zu

koumlnnen empfiehlt es sich jedoch bereits im Eingabefeld selbst eine alphabetische Sortierung

vorzunehmen

64 Code editieren PHP-Skript HTML-Web-Seite

Das Modul bdquoCode editierenldquo eroumlffnet Ihnen die Moumlglichkeit in Ihrem Internetauftritt eigene PHP-

oder HTML-Codeschnipsel zu erstellen und zu nutzen oder Programmierungen eigener Funktionen

vorzunehmen

Nutzen Sie dieses Modul bitte nicht um Funktionen zu simulieren die Ihnen das CMS IMPERIA bereits

als vorgefertigte Module zur Verfuumlgung stellt Das freie Code-Eingabefeld ist ebenfalls nicht dazu

S e i t e | 26

vorgesehen auf diesem Wege vom Corporate Design der Universitaumlt abweichende eigene Layouts zu

entwickeln

65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

Uumlber das Modul bdquoCodebaustein einfuumlgenldquo ist es moumlglich vorgefertigte Bloumlcke oder bdquoBauteileldquo in Ihre

Webseite zu integrieren Codebausteine eignen sich dazu bestimmte Informationen die auf vielen

Webseiten wiederkehren an einer Stelle zentral zu pflegen In der Bearbeitungsebene bietet Ihnen

das Modul die in der aktuellen Rubrik vorhandenen Bausteine zur Auswahl an

Codebausteine erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 27

Sie koumlnnen in Codebausteinen wie beim uumlblichen Seitenaufbau gewohnt unterschiedliche Module

kombinieren und positionieren Zur Verfuumlgung stehen die Elemente

bull (TinyMCE)-Texteditor

bull Code editieren

bull die Formularmodule

bull Randlose Grafik

bull RSS-Feed-Agent

bull Tube Audio-VideoPlayer

Eine spaumltere Bearbeitung der Codebausteine ist im CMS IMPERIA nicht uumlber das Tool bdquoQuickEditldquo

moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo

im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichniscode_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Codebausteine im

selben Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

66 DBAdmin PHP-Skript

Mit Hilfe des Moduls bdquoDBAdminldquo lassen sich Datenbank direkt in Tabellenform auf Ihrer Webseite

darstellen Uumlber die Funktion bdquoOptionen anzeigenldquo erhalten Sie zudem die Moumlglichkeit eine

Webseite zur Pflege Ihrer Datenbank zu erstellen Dort koumlnnen Sie die entsprechende Tabelle

editieren d h Eintraumlge einzeln erstellen bearbeiten oder loumlschen

S e i t e | 28

Zur Nutzung dieses Moduls sind folgende Angaben notwendig

bull Datenbank-Server Name oder IP-Adresse des Servers auf dem die anzusprechende

Datenbank liegt (bspw bdquodbuni-duedeldquo)

bull Datenbank-Name

bull Tabellen-Name Name der speziellen Tabelle die innerhalb der Datenbank angesprochen

werden soll

bull Datenbank-Benutzer und Datenbank-Passwort

Datenbanken auf einem UDE-Server koumlnnen Universitaumltsangehoumlrige unter Nutzung ihrer

Hochschulkennung online beim Zentrum fuumlr Informations- und Mediendienste (ZIM) beantragen

unter httpwwwuni-duedezimserviceshomepagesmysqlshtml

67 Doppelcontainer PHP-Skript HTML-Web-Seite

Das Modul bdquoDoppelcontainerldquo ermoumlglicht es Ihnen auf Ihrer Webseite zwei Textebloumlcke (je nach

Wunsch mit oder ohne Bilder) nebeneinander zu setzen

Auf zweispaltig angelegten Webseiten ist die Anlage eines Doppelcontainers nur in der linken Spalte

moumlglich Bilder erscheinen dort in einer Breite von 246 Pixeln Auf einspaltig angelegten Webseiten

werden die einzelnen Bloumlcke (und dementsprechend die verwendeten Bilder) in einer Breite von 366

Pixeln angezeigt Die Bildhoumlhe ist in beiden Faumlllen frei waumlhlbar sollte jedoch in beiden Containern

identisch sein

S e i t e | 29

Zur Texteingabe stehen Ihnen die Optionen bdquoTeaserldquo (mit Zeichenbegrenzung) sowie bdquoStandardldquo

(ohne Zeichenbegrenzung) zur Verfuumlgung Waumlhlen Sie bdquoTeaserldquo so erhalten Sie Platz fuumlr 300 Zeichen

ndash ein Zeichenzaumlhler neben der Texteingabe-Box erleichtert das Mitzaumlhlen Der Text wird gelb

unterlegt wenn er nach dem naumlchsten Leerzeichen abgeschnitten wird Rot erscheint das Textfeld

wenn die Zeichenzahl bereits uumlberschritten wurde

Beachten Sie bitte dass das Modul HTML-Tags (URLs Mailadressen etc) automatisch filtert Sie

werden daher nicht angezeigt Um Ihren Text zu verlinken koumlnnen Sie das Eingabefeld bdquoMehr-Linkldquo

nutzen

Beide Bloumlcke innerhalb eines Doppelcontainers lassen sich individuell auf die uumlbliche Weise (weiszlig

hellblau sandfarben) hinterlegen

S e i t e | 30

68 Flickr nutzen PHP-Skript

Das Modul bdquoFlickr nutzenldquo ermoumlglicht es Ihnen im Sinne einer crossmedialen Verwertung Bilder aus

Ihrem Flickr-Account in Ihre IMPERIA-Webseite einzubinden Fuumlr diese Funktion benoumltigen Sie einen

sogenannten API-Key den Sie in Ihrem Flick-Auftritt unter

bull httpwwwflickrcomservicesappscreateapply

erzeugen lassen koumlnnen Tragen Sie dann diesen Key in die entsprechende Eingabemaske des Moduls

ein Anschlieszligend haben Sie die Moumlglichkeit ganze Fotosets (Alben) oder Einzelbilder einzubinden

Photoset anzeigen

S e i t e | 31

Zum Anzeigen von Photosets wird die entsprechende Photoset-ID ins Modul eingetragen Diese ID ist

Teil der Link-Adresse des entsprechenden Albums bei Flickr (die erscheint wenn Sie das Album

angeklickt haben) Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAMEsets12340954909

Die Photoset-ID verbirgt sich hinter den Ziffern am Ende der URL Sie koumlnnen auswaumlhlen wie viele

Fotos auf einer Webseite erscheinen sollen Dafuumlr uumlbernimmt das Modul die Bilder in der

quadratischen Aufloumlsung von Flickr also in einer Groumlszlige von 75 x 75 Pixeln Reicht der Platz dafuumlr

nicht aus wird eine zusaumltzliche Blaumltterfunktion angeboten Photoset- und Bild-Beschreibungen

koumlnnen aus dem Flickr-Account automatisch uumlbernommen werden wenn die entsprechenden

Optionen mit einem Haken aktiviert wurden

Einzelbild anzeigen

Um ein einzelnes Bild anzuzeigen benoumltigen Sie die entsprechen Flickr-Foto-ID Diese verbirgt sich

hinter der ersten Zahl in der Link-Adresse des entsprechenden Bildes Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAME5841603851inset-72157626981464896

Ein Einzelbild kann in einer hohen oder einer geringen Aufloumlsung eingebunden werden Bei einer

zweispaltig angelegten Webseite wird das Bild in der linken Inhaltsspalte auf eine Breite von 480

Pixel bei einer einspaltig angelegten Webseite auf eine Breite von 721 Pixel skaliert

69 Formulare

Mit IMPERIA haben Sie die Moumlglichkeit Formulare auf Ihrer Webseite zu platzieren In der

Bearbeitungsebene Ihrer Seite finden Sie im Bereich bdquoNeues Modulldquo den Menupunkt UDE ndash

Formular oumlffnen

Nach dem Festlegen der Hintergrundfarbe koumlnnen Sie im Bereich bdquoLegendeldquo den Titel Ihres

Formulars waumlhlen Wenn Sie die Funktion bdquoMailer-Funktionalitaumltldquo aktivieren koumlnnen Sie die Adresse

Ihres Mailscripts eingeben Anderenfalls belassen Sie es bitte beim Vorgabewert

Im Bereich bdquoNexturlldquo kann angegeben werden welche Seite nach dem Abschicken des Formulars

aufgerufen werden soll Daruumlber hinaus werden der Titel der E-Mail die Absender-Adresse sowie die

Empfaumlnger-Adresse definiert Optional kann eine Bestaumltigungs-E-Mail mit frei waumlhlbarem Text

versendet werden

S e i t e | 32

Um dem erstellten Formular Eingabefelder hinzuzufuumlgen ist das Modul bdquoUDE Formular Elementldquo zu

waumlhlen Waumlhlen Sie das Element bdquoTextldquo um ein Eingabefeld zu erzeugen Die Option bdquoBezeichnerldquo

beschreibt den sichtbaren Text im fertigen Formular zum Beispiel bdquoIhr Nameldquo Weitergehend koumlnnen

Sie die zulaumlssigen Inhalte der Nutzereingaben definieren sowie markieren ob das Element ein

Pflichtfeld sein soll

S e i t e | 33

Um ein Texteingabefeld innerhalb des Formulars zu erzeugen waumlhlen Sie das Element bdquoTextarealdquo

Sie koumlnnen die Groumlszlige des Textfeldes definieren (Zeilen x Spalten) und optional erneut eine Pruumlfung

zulaumlssiger Nutzereingaben aktivieren Weiterhin koumlnnen Sie waumlhlen ob der eingegebene Wert des

Formularelements in die Datenbank eingetragen werden soll Wenn Sie fuumlr Ihre Formulare auf eine

Datenbank zuruumlckgreifen moumlchten koumlnnen Sie sich hier informieren httpwwwuni-

duedezimserviceshomepagesmysqlshtml

Insgesamt stehen folgende Elemente zur Verfuumlgung

bull Checkbox Hidden Password Select Anfang Select Option einfuumlgen Select Ende Submit

Text Datum Textarea Radio Reset Leerzeile Kommentarzeile Neuer Abschnitt mit

Bezeichner sowie Datei-Upload

Ein Formular muss mit dem Modul bdquoUDE Formular schlieszligenldquo abgeschlossen werden An dieser

Stelle koumlnnen Sie einen Send-Button hinzufuumlgen dessen Name frei waumlhlbar ist Der eingegebene Text

wird als Beschriftung des Buttons angezeigt Erst durch das Hinzufuumlgen dieses Moduls wird das

Formular auf Ihrer Seite sichtbar und kann nach der Veroumlffentlichung genutzt werden

S e i t e | 34

610 Google-Maps (v30) PHP-Skript HTML-Web-Seite

Dieses Modul bringt eine Grafik von Google-Maps auf die Webseite entweder in Kartenoptik oder als

Satellitenbild Sie haben zwei Moumlglichkeiten eine solche zu generieren Uumlber die konkreten GPS-

Koordinaten oder durch das Angeben einer Adresse (zB Forsthausweg 2 47057 Duisburg) Sie

koumlnnen aus zwoumllf Vergroumlszligerungsstufen fuumlr den gewuumlnschten Ausschnitt zwei Kartengroumlszligen und

zwei Kartenformaten waumlhlen

S e i t e | 35

Kartengroumlszlige bdquogroszligldquo skaliert die Graphik auf 480 Pixel Breite auf einer zweispaltigen Seite bzw auf

721 Pixel auf einer einspaltigen Seite Die Option bdquokleinldquo verringert die Breite auf etwa die Haumllfte Die

beiden Optionen beim Kartenformat beeinflussen die Houmlhe der Grafik

S e i t e | 36

611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite

Das Modul Image-Gallery ermoumlglicht die Integration einer komfortablen Bildergallerie uumlber IMPERIA

Per Klick auf bdquoNeues Modulldquo -gt bdquoUDE Image-Gallery (v21)ldquo kann die entsprechende Gallerie an der

gewuumlnschten Position eingefuumlgt werden Generell sollten nur Bilder verwendet werden die

entweder auf 640 x 480 Pixel oder maximal auf 900 x 600 Pixel skaliert sind Aufgrund einer hohen

Dateigroumlszlige sollten Bilder einer Digitalkamera vor dem Upload komprimiert werden

Innerhalb des Moduls kann zunaumlchst die Hintergrundfarbe der Gallerie wahlweise zwischen Beige

Blau und Weiszlig eingestellt werden Um die Gallerie mit Bildern zu fuumlllen ist das entsprechende

Verzeichnis der Mediendatenbank anzugeben Aufgrund der geaumlnderten Syntax wird das Verzeichnis

ohne images angegeben Die Suchmaske fuumlr die Bilderauswahl deklariert die Dateiformate die mit

einbezogen werden sollen Schlieszliglich koumlnnen Sie die Bilder alphabetisch sortiert anzeigen lassen

sowie einen kleinen und einen groszligen Titel fuumlr Ihre Bildergallerie vergeben

Grundsaumltzlich ist es empfehlenswert groumlszligere Bildmengen auf mehrere Seiten zu verteilen um

einerseits die Darstellung auf mobilen Geraumlten zu vereinfachen und andererseits geringeren

Bandbreiten Rechnung zu tragen

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 10: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 9

auf jeder Seite einzeln) einen Link auf eine individuelle A-Z-Seite undoder auf einen eigenen

Intranet-Bereich sowie mit Landesfahnen gekennzeichnete Hinweise auf parallel angebotene

fremdsprachige Inhalte einfuumlgen

bull Zwischen Seitentitel und ndashinhalt koumlnnen Sie auf jeder Seite eine individuelle

Brotkrumennavigation editieren die den Nutzern eine schnelle Uumlbersicht daruumlber

ermoumlglicht wie sie auf die gerade aufgerufene Webseite gelangt sind

bull Der eigentliche Inhaltsbereich (Content) der Webseite kann bei der Seitenerzeugung ein-

oder zweispaltig angelegt werden Der Wechsel zwischen Ein- und Zweispaltigkeit einer Seite

ist uumlber den IMPERIA -Workflow jederzeit moumlglich Bei einem zweispaltigen Contentbereich

ist die schmale rechte Spalte fuumlr Zusatzinformationen vorgesehen die nicht direkt zum

Hauptinhalt gehoumlren bspw Veranstaltungskalender Banner oder RSS-Feeds Fuumlr die

Gestaltung des Inhalts steht eine groszlige Anzahl statischer wie dynamischer Elemente

(Module) zur Verfuumlgung Die einzelnen Module des Inhaltsbereiches koumlnnen unterschiedlich

eingefaumlrbt werden Sie haben die Wahl zwischen weiszliger (Standardeinstellung) sandfarbener

oder hellblauer Hinterlegung

bull In der Fuszligzeile angedockt an den unteren Seitenrand erscheint auf allen Seiten der

Hochschule ein Link auf das zentrale UDE-Impressum Wahlweise (und auf jeder Seite

einzeln) koumlnnen Sie einen Kontakt-Link einfuumlgen

bull Den Abschluss der Webseite bildet die E-Mail-Adresse des zustaumlndigen technischen

Seitenredakteurs die fuumlr Ruumlckfragen oder fuumlr redaktionelle Hinweise genutzt werden kann

Dieses Feld ist individuell beschreibbar ndash sollte jedoch niemals leer und immer auf dem

aktuellen Stand sein Hierfuumlr eignen sich Funktions-E-Mail-Adressen besser als Ihr

persoumlnlicher Account

5 Bestandteile von Webseiten

Um eine Webseite in der Internetpraumlsenz der Universitaumlt vollstaumlndig zu praumlsentieren benoumltigen Sie

(solange Sie mit dem CMS IMPERIA arbeiten) vier Elemente von denen Sie jedoch drei Elemente nur

einmal fuumlr Ihren gesamten Webbereich anlegen muumlssen und danach zentral pflegen koumlnnen

Eine Webseite setzt sich zusammen aus

bull Einer eigenen Organisationsbezeichnung Ihres Bereiches

bull Einer individuellen Zielgruppennavigation In Bereichen die keine eigene

Zielgruppennavigation erstellen erscheinen dort die entsprechenden Inhalte des zentralen

Angebotes der Universitaumlt

S e i t e | 10

bull Einer Navigation Sie koumlnnen in Ihrem Webbereich auch eine Vielzahl unterschiedlicher

Navigationen erstellen und diese je nach Bedarf einbinden

bull Der Seite (dem Dokument) selbst in der Sie Ihren Inhalt und Funktionen bearbeiten und die

vorherigen Elemente einfuumlgen koumlnnen

51 Die Organisationsbezeichnung

Die individuelle Bezeichnung Ihres Bereiches (Organisationsbezeichnung) erscheint auf Ihren

Webseiten links oben innerhalb der Impressionsgrafik direkt unter dem Schriftzug bdquoUNIVERSITAumlT

DUISBURG-ESSENldquo

Organisationsbezeichnungen erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

Sie koumlnnen Organisationsbezeichnungen in der Bearbeitungsebene ein- oder zweizeilig gestalten

S e i t e | 11

bull Der Eintrag in der ersten Zeile (bdquoOrganisationsbezeichnungldquo) erscheint groumlszliger und in weiszliger

fett-gesetzter Schrift

bull Ein Eintrag in der zweiten Zeile (bdquoZusatzldquo) erscheint in weiszliger normal gesetzter Schrift

Unter bdquoVerweis zur Organisationseinheit (URL)ldquo koumlnnen Sie das Sprungziel der

Organisationsbezeichnung bestimmen Tragen Sie diese Verknuumlpfung bitte als relativen Link ohne

Verweis auf den Webserver der Universitaumlt ein

bull Beispiel ihrverzeichnis anstatt httpwwwuni-duedeihrverzeichnis

Eine spaumltere Bearbeitung der Organisationsbezeichnung ist im CMS IMPERIA nicht uumlber das Tool

bdquoQuickEditldquo moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente

bearbeitenldquo im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichnisorganisation_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere

Organisationsbezeichnungen im selben Verzeichnis erstellen diesen einen jeweils moumlglichst

aussagekraumlftigen Dateititel zu geben

S e i t e | 12

52 Die Zielgruppennavigation

Eine individuelle Zielgruppennavigation in der Kopfzeile Ihrer Webseite erstellen Sie uumlber das

IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

Die editierte und veroumlffentlichte Zielgruppennavigation erscheint automatisch auf allen Seiten Ihres

Verzeichnisses

Tragen Sie bitte auch dort die Verknuumlpfungen als relative Links ohne Verweis auf den Webserver der

Universitaumlt ein Verwenden Sie dieses Instrument auszligerdem bitte nicht als moumlgliche zusaumltzliche

Quernavigation sondern ausschlieszliglich als Hilfe und zur Verlinkung gruppenspezifischer

Informationsaufarbeitung

Auch die spaumltere Bearbeitung der Zielgruppennavigation ist im CMS IMPERIA nicht uumlber das Tool

bdquoQuickEditldquo moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente

bearbeitenldquo im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Zielgruppennavigation lautet

ihrverzeichnistargetsshtml

S e i t e | 13

Beachten Sie beim Import bitte Folgendes Anders als seit Beginn des Wintersemesters 2007

gehandhabt kann mit dem UDE-Webrelaunch im Oktober 2011 pro Verzeichnis nur noch eine

anstelle von zwei Zielgruppennavigationen erstellt werden die zudem automatisch in Ihrer Webseite

eingesetzt wird In Verzeichnissen die zwischen 2007 und 2011 angelegt wurden existiert oft

(zusaumltzlich oder ausschlieszliglich) eine sogenannte bdquoerweiterte Zielgruppennavigationldquo

(ihrverzeichnisetargetsshtml) Der Webserver der Universitaumlt sucht bei der Ausgabe Ihrer

Internetseiten im ersten Schritt nach der Datei bdquotargetsshtmlldquo im zweiten Schritt nach der Datei

bdquoetargetsshtmlldquo in Ihrem Verzeichnis und gibt die Zielgruppennavigation dieser Prioritaumlt nach aus

Fehlen beide Dateien so erscheinen die entsprechenden Inhalte des zentralen Angebotes der

Universitaumlt

53 Die Navigation

Navigationen in der linken Spalte Ihrer Webseite sind maximal zwei Ebenen tief

bull In der ersten Ebene ist die Schrift in Versalien (Groszligbuchstaben) gesetzt Schreiben Sie Ihre

Links bitte dennoch bdquonormalldquo Die Transformation in Groszligbuchstaben erfolgt automatisch

durch das System Die Navigationspunkte der ersten Ebene sind mit einem blauen Rechteck

versehen das am linken Seitenrand anliegt

bull Die zweite Navigationsebene erscheint in der Ausgabe nach rechts geruumlckt und regulaumlr in

Groszlig- und Kleinschreibung gesetzt

Links in Navigationen veraumlndern sich beim Uumlberfahren mit der Maus bzw beim Antabben auf

Touchpads Die Schrift erscheint dann weiszlig auf einem blauen Hintergrund Das Gleiche gilt fuumlr den

jeweils aktiven Menuumlpunkt Dieser ist in der Navigation dauerhaft weiszlig mit blauer Hinterlegung

Navigationen erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 14

Zum Aufbau Ihrer Navigation stehen Ihnen die Module bdquoNavigationslinkldquo und

bdquoNavigationsuntermenuumlldquo zur Verfuumlgung Ein Navigationslink erscheint einzeln auf der ersten Ebene

versehen mit einem vorgelagerten blauen Rechteck Mit dem Navigationsuntermenuuml koumlnnen Sie

Menuumlpunkte erzeugen die neben dieser ersten Position uumlber eine zweite eingeruumlckte Ebene

verfuumlgen Dort lassen sich beliebig viele Unterpunkte einsetzen Je nachdem ob Sie den

uumlbergeordneten Eintrag im Navigationsuntermenuuml mit einer Zieladresse (URL) versehen erscheint

dieser verlinkt oder als einfache Uumlberschrift uumlber die nachgelagerten Inhaltspunkte

Selbstverstaumlndlich lassen sich die einzelnen Einheiten in ihrer Position jederzeit verschieben Tragen

Sie interne Links in Ihren Navigationen bitte als relative Verknuumlpfungen ohne Verweis auf den

Webserver der Universitaumlt ein

Editierte und veroumlffentlichte Navigation erscheinen innerhalb der Rubrik in der sie angelegt wurden

automatisch zur Auswahl im linken Bereich der Bearbeitungsebene Ihrer Webseite

Die spaumltere Bearbeitung von Navigationen ist im CMS IMPERIA auf zwei Wegen moumlglich Die

entsprechende Datei kann zum einen uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo im

IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Navigationen folgt folgendem Muster

ihrverzeichnisnav_12345shtml

S e i t e | 15

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Navigationen im selben

Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

Zum anderen koumlnnen Sie auch aus der Bearbeitungsebene einer Webseite heraus dort ausgewaumlhlte

Navigationen aufrufen und editieren Beachten Sie jedoch dass nach dem Speichern der

bearbeiteten Navigation sowohl die Navigationsdatei als auch die Datei der Ursprungsseite auf Ihrem

Schreibtisch liegen

6 Webseiten gestalten

Fuumlr die Gestaltung Ihres Inhalts steht Ihnen eine groszlige Anzahl statischer wie dynamischer Elemente

(Module) zur Verfuumlgung Welche Elemente Sie im Einzelnen nutzen koumlnnen haumlngt davon ab welchen

Dateityp Sie bei der Dokumentenerzeugung fuumlr Ihre Webseite waumlhlen Das Content Management

System der Hochschule bietet Ihnen die Moumlglichkeit Ihr Dokument als HTML-Web-Seite oder als

PHP-Skript zu erzeugen Beachten Sie bitte von Anfang an dass diese Auswahl Einfluss auf die URL

(Internetadresse) der jeweiligen Seite hat Bei einer nachtraumlglichen Aumlnderung aumlndert sich auch die

Internetadresse unter der Ihre Seite im Netz zu finden ist Sie muumlssen dann eventuell Verlinkungen

an vielen Stellen aumlndern

bull Internetadresse einer HTML-Web-Seite wwwuni-duedebereichihreseiteshtml

bull Internetadresse eines PHP-Skripts wwwuni-duedebereichihreseitephp

Je nachdem ob Sie Ihr Dokument als HTML-Web-Seite oder als PHP-Skript erzeugen koumlnnen Sie

folgende Elemente nutzen

Linke Spalte des Inhaltsbereiches

bull (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

bull A-Z verwalten PHP-Skript HTML-Web-Seite

bull Code editieren PHP-Skript HTML-Web-Seite

bull Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

bull DBAdmin PHP-Skript

bull Doppelcontainer PHP-Skript HTML-Web-Seite

bull Flickr nutzen PHP-Skript

bull Formular schlieszligen PHP-Skript

bull Formular oumlffnen PHP-Skript

S e i t e | 16

bull Formular Element PHP-Skript

bull Formulareingabe in DB speichern PHP-Skript

bull Google-Maps (v30) PHP-Skript HTML-Web-Seite

bull Image-Gallery (v21) PHP-Skript HTML-Web-Seite

bull Mailinglisten PHP-Skript

bull Mitarbeiter-Liste PHP-Skript

bull Mitarbeiter-Publikationsliste PHP-Skript

bull Mitarbeiter-Seite PHP-Skript

bull Randlose Grafik PHP-Skript HTML-Web-Seite

bull RSS-Feed-Administration PHP-Skript

bull RSS-Feed-Agent PHP-Skript

bull Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

bull Veranstaltungskalender Kalendermodul PHP-Skript

bull Veranstaltungskalender Veranstaltungsmodul PHP-Skript

Rechte Spalte des Inhaltsbereiches

bull (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

bull Code editieren PHP-Skript HTML-Web-Seite

bull Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

bull Flickr nutzen PHP-Skript

bull Mitarbeiter-Seite PHP-Skript

bull Randlose Grafik PHP-Skript HTML-Web-Seite

bull RSS-Feed-Agent PHP-Skript

bull Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

bull Veranstaltungskalender Kalendermodul PHP-Skript

Beim Erstellen Ihrer Webseite koumlnnen Sie diese einzelnen Module nach Bedarf (auch mehrfach)

erzeugen und in der gewuumlnschten Reihenfolge platzieren wobei die gewaumlhlte Reihenfolge jederzeit

veraumlnderbar ist Mit wenigen Ausnahmen lassen sich die einzelnen Einheiten weiszlig blau oder beige

einfaumlrben (Ausnahme randlose Grafik) Sie werden vom System dann als voneinander abgesetzte

Bloumlcke ausgegeben

Um innerhalb eines Dokuments zu navigieren koumlnnen Sie wenn noumltig die einzelnen Elemente auch

mit einem Link-Anker versehen (Ausnahmen randlose Grafik Mitarbeiter-Liste -Publikationsliste

und ndashSeite Veranstaltungskalender Veranstaltungs- sowie Kalendermodul) Den Ankernamen

S e i t e | 17

koumlnnen Sie frei vergeben er darf jedoch keine Leer- oder Sonderzeichen enthalten Das erste Zeichen

muss auszligerdem ein Buchstabe sein

61 Uumlber allem Die Brotkrumennavigation

Zwischen Seitentitel und ndashinhalt koumlnnen Sie auf jeder Seite eine individuelle Brotkrumennavigation

editieren die den Nutzern eine schnelle Uumlbersicht daruumlber ermoumlglicht wie sie auf die gerade

aufgerufene Webseite gelangt sind Verwenden Sie dieses Instrument bitte nicht als moumlgliche

zusaumltzliche Quernavigation sondern ausschlieszliglich als Hilfe im vorgesehenen Sinne

Der letzte Eintrag der Brotkrumennavigation der uumlblicherweise die aktuell aufgerufene Seite

benennt sollte nicht mit einer Zieladresse (URL) versehen werden Der Eintrag erscheint dann als

regulaumlr schwarz formatierter Text nicht als blau ausgezeichneter Link

S e i t e | 18

62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

Mit dem TinyMCE-Texteditor stellt Ihnen das Content Management System der UDE einen auf

JavaScript basierenden WYSIWYG-Editor (bdquoWhat You See Is What You Getldquo) zur Verfuumlgung Mit Hilfe

dieses Moduls ist es moumlglich ohne HTML- oder weitergehende Programmierkenntnisse Beitraumlge zu

verfassen und Seiten zu formatieren Die Bedienung mittels einer Textbox orientiert sich stark an

gaumlngiger und bekannter Textverarbeitungs-Software

Texte formatieren

Selbstverstaumlndlich bietet der TinyMCE-Editor die uumlblichen Arten Texte zu formatieren Neben den

Befehlen fett (bdquoBoldldquo) kursiv (bdquoItalicldquo) unterstrichen (bdquoUnderlineldquo) sowie hoch- bzw tiefgestellt

bietet Ihnen das System uumlber das Ω-Symbol eine breite Palette an Sonderzeichen uumlber die

Listenfunktion die Erstellung einfacher oder nummerierter Aufzaumlhlungslisten an Mittels einer Select-

S e i t e | 19

Box koumlnnen Sie auszligerdem auf im Hochschullayout vorgegebene Uumlberschriftarten (bdquoHeadingsldquo)

zuruumlckgreifen

Als weitere Moumlglichkeiten steht Ihnen frei

bull ein Datum undoder eine Uhrzeit einzufuumlgen

bull Blockzitate zu kennzeichnen oder

bull geschuumltzte Leerzeichen (bdquoNon-breaking Space Characterldquo) zu definieren

bull Das Ankersymbol (bdquoInsertEdit Anchorldquo) erlaubt die Definition von Sprungzielen innerhalb

laumlngerer Texte

Im Notfall hilft Ihnen das Radiergummi-Symbol (bdquoRemove Formatting) saumlmtliche Formatierungen zu

entfernen

Bereits formatierten Text einfuumlgen

Uumlber diese Formatierungsarten hinaus koumlnnen Sie auch bereits vorformatierte Texte aus Ihrer

Textverarbeitung in den Editor kopieren Zum Einfuumlgen nutzen Sie jedoch bitte nicht den einfachen

Copy amp Paste-Befehl sondern die im Modul bereitgestellte Funktion bdquoPaste from Wordldquo (Sie finden

das entsprechende bdquoWldquo-Symbol unter der Texteingabe-Box) ndash und zwar auch dann wenn Ihr

Ursprungstext nicht aus Microsoft Word sondern einer anderen Textverarbeitungssoftware

importiert wird Schriftformatierungen Verlinkungen und Aumlhnliches werden dann 11 uumlbernommen

Achten Sie bitte dennoch darauf dass dieser Funktion Grenzen gesetzt sind und arbeiten Sie mit

moumlglichst einfachen Formatvorlagen

HTML-Ansicht

Fuumlr Redakteure die sich in der Seitenprogrammierung sicherer fuumlhlen als in der Textverarbeitung

haumllt das Modul TinyMCE-Texteditor uumlber den Button bdquoHTMLldquo einen HTML Source Editor bereit mit

dem direkt auf den Quelltext und die Codierung dieses Teils der Webseite zugegriffen werden kann

Diese Funktion eignet sich auszligerdem besonders zur Uumlberpruumlfung und Fehlersuche Zur

Programmierung eigener Funktionen nutzen Sie jedoch bitte das Modul bdquoCode editierenldquo

S e i t e | 20

Links

Die uumlber die Symbole bdquoInsertEdit Linkldquo (Link einfuumlgen oder bearbeiten) in Ihre Texte oder

Aufzaumlhlungslisten eingefuumlgten Hyperlinks formatiert das System selbststaumlndig im fuumlr die UDE

vorgesehehen Layout Tragen Sie Links auf Seiten innerhalb von wwwuni-duede bitte als relative

Verknuumlpfungen ohne Verweis auf den Webserver der Universitaumlt ein also

bull depresse

anstelle von

bull httpwwwuni-duededepresseindexphp

Zeichnen sie auszligerdem Ihre Verlinkungen im Sinne der Barrierefreiheit mit sprechenden Titeln aus

und uumlberlegen Sie sich ob das Sprungziel im selben oder in einem neuen Browserfenster geoumlffnet

werden soll

Uumlber das Symbol bdquoUnlinkldquo entfernen Sie die entsprechende Verlinkung

Bilder

Der TinyMCE-Texteditor bietet Ihnen zwei Moumlglichkeiten Bilder in Ihre Texte einzubinden

S e i t e | 21

bull Uumlber die Funktion bdquoInsertEdit Imageldquo (Icon unter der Texteingabe-Box) koumlnnen Sie den

relativen Pfad auf das entsprechende Bild aus der IMPERIA-Mediendatenbank einfuumlgen

(Formatbeispiel imperiamdimageswebredaktion2013parentservicejpg)

bull Die Funktion bdquoVorschaubild waumlhlenldquo laumlsst Sie direkt auf die IMPERIA-Mediendatenbank

zugreifen und dort die gewuumlnschte Grafik per Klick auswaumlhlen Uumlber die Funktion bdquoVollbild

waumlhlenldquo koumlnnen Sie das Bild optional zu einer groumlszligeren Ansicht verlinken die sich als

bdquoLightboxldquo uumlber der aktiven Webseite oumlffnet Der Befehl bdquoBild zuruumlcksetzenldquo entfernt die

gewaumlhlte Grafik aus Ihrer Webseite

Waumlhrend Sie mittels bdquoInsertEdit Imageldquo die Anzeige-Groumlszlige Ihres Bildes (bis maximal 480 Pixel

Breite) selbst bestimmen koumlnnen werden Grafiken uumlber die Funktion bdquoVorschaubild waumlhlenldquo beim

Einfuumlgen automatisch auf die passende Groumlszlige skaliert (162 Pixel Breite in der linken und 204 Pixel

Breite in der rechten Content-Spalte) In diesem Fall koumlnnen Sie zudem waumlhlen ob der Text an dieser

Stelle das Bild umflieszligt oder aber rechts daneben angezeigt wird Das Vollbild wird bei der Eingabe

nicht skaliert Nutzen Sie daher bitte Bilder mit einer bildschirmtauglichen Groumlszlige (maximal 1024

Pixel)

S e i t e | 22

Tabellen

Uumlber das Icon bdquoInsertEdit Tableldquo fuumlgen Sie an der gewuumlnschten Stelle Tabellen in Ihren Texteditor

ein Unter den Reitern bdquoGeneralldquo und bdquoAdvancedldquo koumlnnen Sie diese Tabellen gemaumlszlig den uumlblichen

HTML-Konventionen erstellen formatieren und bearbeiten

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig gemaumlszlig den Vorgaben der Barrierefreiheit als

solche aus Der Text-Editor stellt Ihnen diese Optionen zur Verfuumlgung

bull Beachten Sie dass die Hintergrundfarbe der Tabellen je nach gewaumlhlter Einfaumlrbung des

Moduls variiert

S e i t e | 23

Texte mit bdquoVerfallsdatumldquo

Grundsaumltzlich steht Ihnen das Modul bdquo(TinyMCE)-Texteditorldquo sowohl auf shtml-Seiten als auch in

php-Skripten zur Verfuumlgung Auf php-Seiten laumlsst sich jedoch eine zusaumltzliche Option nutzen Fuumlr

Texte die nur fuumlr einen gewissen Zeitraum auf Ihrer Webseite erscheinen sollen koumlnnen Sie ein

Start- und Enddatum setzen

63 A-Z verwalten PHP-Skript HTML-Web-Seite

Das Modul bdquoA-Z verwaltenldquo ermoumlglicht den Redakteuren A-Z-Listen relativ einfach zu erzeugen und

zu pflegen

S e i t e | 24

Fuumlr jeden Eintrag in der Stichwortliste muss im Eingabefeld eine einzelne Zeile eingefuumlgt werden Die

Eingabe folgt einem festen Schema

bull Stichwort||URL (Internetadresse)||

oder

bull Stichwort||URL (Internetadresse)||eventuell ein kurzer Beschreibungstext

wobei auf den Beschreibungstext auch verzichtet werden kann Die sogenannten bdquoPipe-Zeichenldquo (||)

dienen als Feldtrenner Sie erzeugen sie uumlber den Tastaturbefehl bdquoAltGr amp das Groumlszligerzeichenldquo

Wahlweise kopieren Sie die entsprechenden Zeichen aus bisherigen Eintraumlgen

Auch hier gilt Tragen Sie interne Links in Ihrer A-Z-Liste bitte als relative Verknuumlpfungen ohne

Verweis auf den Webserver der Universitaumlt ein also

bull Abiturjahrgang 2013||doppelter_abiturjahrgang||

anstelle von

bull Abiturjahrgang 2013||httpwwwuni-duededoppelter_abiturjahrgang||

Externe Links (wie etwa bdquoGlassbooth ||httpwwwglassboothde||ldquo) werden auf der

ausgegebenen Webseite entsprechend gekennzeichnet

S e i t e | 25

Die Eintraumlge im Modul bdquoA-Z verwaltenldquo sortiert das Content Management System automatisch nach

Ziffernreihenfolge bzw dem Alphabet Um die Eintraumlge spaumlter einfach aufzufinden und bearbeiten zu

koumlnnen empfiehlt es sich jedoch bereits im Eingabefeld selbst eine alphabetische Sortierung

vorzunehmen

64 Code editieren PHP-Skript HTML-Web-Seite

Das Modul bdquoCode editierenldquo eroumlffnet Ihnen die Moumlglichkeit in Ihrem Internetauftritt eigene PHP-

oder HTML-Codeschnipsel zu erstellen und zu nutzen oder Programmierungen eigener Funktionen

vorzunehmen

Nutzen Sie dieses Modul bitte nicht um Funktionen zu simulieren die Ihnen das CMS IMPERIA bereits

als vorgefertigte Module zur Verfuumlgung stellt Das freie Code-Eingabefeld ist ebenfalls nicht dazu

S e i t e | 26

vorgesehen auf diesem Wege vom Corporate Design der Universitaumlt abweichende eigene Layouts zu

entwickeln

65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

Uumlber das Modul bdquoCodebaustein einfuumlgenldquo ist es moumlglich vorgefertigte Bloumlcke oder bdquoBauteileldquo in Ihre

Webseite zu integrieren Codebausteine eignen sich dazu bestimmte Informationen die auf vielen

Webseiten wiederkehren an einer Stelle zentral zu pflegen In der Bearbeitungsebene bietet Ihnen

das Modul die in der aktuellen Rubrik vorhandenen Bausteine zur Auswahl an

Codebausteine erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 27

Sie koumlnnen in Codebausteinen wie beim uumlblichen Seitenaufbau gewohnt unterschiedliche Module

kombinieren und positionieren Zur Verfuumlgung stehen die Elemente

bull (TinyMCE)-Texteditor

bull Code editieren

bull die Formularmodule

bull Randlose Grafik

bull RSS-Feed-Agent

bull Tube Audio-VideoPlayer

Eine spaumltere Bearbeitung der Codebausteine ist im CMS IMPERIA nicht uumlber das Tool bdquoQuickEditldquo

moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo

im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichniscode_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Codebausteine im

selben Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

66 DBAdmin PHP-Skript

Mit Hilfe des Moduls bdquoDBAdminldquo lassen sich Datenbank direkt in Tabellenform auf Ihrer Webseite

darstellen Uumlber die Funktion bdquoOptionen anzeigenldquo erhalten Sie zudem die Moumlglichkeit eine

Webseite zur Pflege Ihrer Datenbank zu erstellen Dort koumlnnen Sie die entsprechende Tabelle

editieren d h Eintraumlge einzeln erstellen bearbeiten oder loumlschen

S e i t e | 28

Zur Nutzung dieses Moduls sind folgende Angaben notwendig

bull Datenbank-Server Name oder IP-Adresse des Servers auf dem die anzusprechende

Datenbank liegt (bspw bdquodbuni-duedeldquo)

bull Datenbank-Name

bull Tabellen-Name Name der speziellen Tabelle die innerhalb der Datenbank angesprochen

werden soll

bull Datenbank-Benutzer und Datenbank-Passwort

Datenbanken auf einem UDE-Server koumlnnen Universitaumltsangehoumlrige unter Nutzung ihrer

Hochschulkennung online beim Zentrum fuumlr Informations- und Mediendienste (ZIM) beantragen

unter httpwwwuni-duedezimserviceshomepagesmysqlshtml

67 Doppelcontainer PHP-Skript HTML-Web-Seite

Das Modul bdquoDoppelcontainerldquo ermoumlglicht es Ihnen auf Ihrer Webseite zwei Textebloumlcke (je nach

Wunsch mit oder ohne Bilder) nebeneinander zu setzen

Auf zweispaltig angelegten Webseiten ist die Anlage eines Doppelcontainers nur in der linken Spalte

moumlglich Bilder erscheinen dort in einer Breite von 246 Pixeln Auf einspaltig angelegten Webseiten

werden die einzelnen Bloumlcke (und dementsprechend die verwendeten Bilder) in einer Breite von 366

Pixeln angezeigt Die Bildhoumlhe ist in beiden Faumlllen frei waumlhlbar sollte jedoch in beiden Containern

identisch sein

S e i t e | 29

Zur Texteingabe stehen Ihnen die Optionen bdquoTeaserldquo (mit Zeichenbegrenzung) sowie bdquoStandardldquo

(ohne Zeichenbegrenzung) zur Verfuumlgung Waumlhlen Sie bdquoTeaserldquo so erhalten Sie Platz fuumlr 300 Zeichen

ndash ein Zeichenzaumlhler neben der Texteingabe-Box erleichtert das Mitzaumlhlen Der Text wird gelb

unterlegt wenn er nach dem naumlchsten Leerzeichen abgeschnitten wird Rot erscheint das Textfeld

wenn die Zeichenzahl bereits uumlberschritten wurde

Beachten Sie bitte dass das Modul HTML-Tags (URLs Mailadressen etc) automatisch filtert Sie

werden daher nicht angezeigt Um Ihren Text zu verlinken koumlnnen Sie das Eingabefeld bdquoMehr-Linkldquo

nutzen

Beide Bloumlcke innerhalb eines Doppelcontainers lassen sich individuell auf die uumlbliche Weise (weiszlig

hellblau sandfarben) hinterlegen

S e i t e | 30

68 Flickr nutzen PHP-Skript

Das Modul bdquoFlickr nutzenldquo ermoumlglicht es Ihnen im Sinne einer crossmedialen Verwertung Bilder aus

Ihrem Flickr-Account in Ihre IMPERIA-Webseite einzubinden Fuumlr diese Funktion benoumltigen Sie einen

sogenannten API-Key den Sie in Ihrem Flick-Auftritt unter

bull httpwwwflickrcomservicesappscreateapply

erzeugen lassen koumlnnen Tragen Sie dann diesen Key in die entsprechende Eingabemaske des Moduls

ein Anschlieszligend haben Sie die Moumlglichkeit ganze Fotosets (Alben) oder Einzelbilder einzubinden

Photoset anzeigen

S e i t e | 31

Zum Anzeigen von Photosets wird die entsprechende Photoset-ID ins Modul eingetragen Diese ID ist

Teil der Link-Adresse des entsprechenden Albums bei Flickr (die erscheint wenn Sie das Album

angeklickt haben) Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAMEsets12340954909

Die Photoset-ID verbirgt sich hinter den Ziffern am Ende der URL Sie koumlnnen auswaumlhlen wie viele

Fotos auf einer Webseite erscheinen sollen Dafuumlr uumlbernimmt das Modul die Bilder in der

quadratischen Aufloumlsung von Flickr also in einer Groumlszlige von 75 x 75 Pixeln Reicht der Platz dafuumlr

nicht aus wird eine zusaumltzliche Blaumltterfunktion angeboten Photoset- und Bild-Beschreibungen

koumlnnen aus dem Flickr-Account automatisch uumlbernommen werden wenn die entsprechenden

Optionen mit einem Haken aktiviert wurden

Einzelbild anzeigen

Um ein einzelnes Bild anzuzeigen benoumltigen Sie die entsprechen Flickr-Foto-ID Diese verbirgt sich

hinter der ersten Zahl in der Link-Adresse des entsprechenden Bildes Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAME5841603851inset-72157626981464896

Ein Einzelbild kann in einer hohen oder einer geringen Aufloumlsung eingebunden werden Bei einer

zweispaltig angelegten Webseite wird das Bild in der linken Inhaltsspalte auf eine Breite von 480

Pixel bei einer einspaltig angelegten Webseite auf eine Breite von 721 Pixel skaliert

69 Formulare

Mit IMPERIA haben Sie die Moumlglichkeit Formulare auf Ihrer Webseite zu platzieren In der

Bearbeitungsebene Ihrer Seite finden Sie im Bereich bdquoNeues Modulldquo den Menupunkt UDE ndash

Formular oumlffnen

Nach dem Festlegen der Hintergrundfarbe koumlnnen Sie im Bereich bdquoLegendeldquo den Titel Ihres

Formulars waumlhlen Wenn Sie die Funktion bdquoMailer-Funktionalitaumltldquo aktivieren koumlnnen Sie die Adresse

Ihres Mailscripts eingeben Anderenfalls belassen Sie es bitte beim Vorgabewert

Im Bereich bdquoNexturlldquo kann angegeben werden welche Seite nach dem Abschicken des Formulars

aufgerufen werden soll Daruumlber hinaus werden der Titel der E-Mail die Absender-Adresse sowie die

Empfaumlnger-Adresse definiert Optional kann eine Bestaumltigungs-E-Mail mit frei waumlhlbarem Text

versendet werden

S e i t e | 32

Um dem erstellten Formular Eingabefelder hinzuzufuumlgen ist das Modul bdquoUDE Formular Elementldquo zu

waumlhlen Waumlhlen Sie das Element bdquoTextldquo um ein Eingabefeld zu erzeugen Die Option bdquoBezeichnerldquo

beschreibt den sichtbaren Text im fertigen Formular zum Beispiel bdquoIhr Nameldquo Weitergehend koumlnnen

Sie die zulaumlssigen Inhalte der Nutzereingaben definieren sowie markieren ob das Element ein

Pflichtfeld sein soll

S e i t e | 33

Um ein Texteingabefeld innerhalb des Formulars zu erzeugen waumlhlen Sie das Element bdquoTextarealdquo

Sie koumlnnen die Groumlszlige des Textfeldes definieren (Zeilen x Spalten) und optional erneut eine Pruumlfung

zulaumlssiger Nutzereingaben aktivieren Weiterhin koumlnnen Sie waumlhlen ob der eingegebene Wert des

Formularelements in die Datenbank eingetragen werden soll Wenn Sie fuumlr Ihre Formulare auf eine

Datenbank zuruumlckgreifen moumlchten koumlnnen Sie sich hier informieren httpwwwuni-

duedezimserviceshomepagesmysqlshtml

Insgesamt stehen folgende Elemente zur Verfuumlgung

bull Checkbox Hidden Password Select Anfang Select Option einfuumlgen Select Ende Submit

Text Datum Textarea Radio Reset Leerzeile Kommentarzeile Neuer Abschnitt mit

Bezeichner sowie Datei-Upload

Ein Formular muss mit dem Modul bdquoUDE Formular schlieszligenldquo abgeschlossen werden An dieser

Stelle koumlnnen Sie einen Send-Button hinzufuumlgen dessen Name frei waumlhlbar ist Der eingegebene Text

wird als Beschriftung des Buttons angezeigt Erst durch das Hinzufuumlgen dieses Moduls wird das

Formular auf Ihrer Seite sichtbar und kann nach der Veroumlffentlichung genutzt werden

S e i t e | 34

610 Google-Maps (v30) PHP-Skript HTML-Web-Seite

Dieses Modul bringt eine Grafik von Google-Maps auf die Webseite entweder in Kartenoptik oder als

Satellitenbild Sie haben zwei Moumlglichkeiten eine solche zu generieren Uumlber die konkreten GPS-

Koordinaten oder durch das Angeben einer Adresse (zB Forsthausweg 2 47057 Duisburg) Sie

koumlnnen aus zwoumllf Vergroumlszligerungsstufen fuumlr den gewuumlnschten Ausschnitt zwei Kartengroumlszligen und

zwei Kartenformaten waumlhlen

S e i t e | 35

Kartengroumlszlige bdquogroszligldquo skaliert die Graphik auf 480 Pixel Breite auf einer zweispaltigen Seite bzw auf

721 Pixel auf einer einspaltigen Seite Die Option bdquokleinldquo verringert die Breite auf etwa die Haumllfte Die

beiden Optionen beim Kartenformat beeinflussen die Houmlhe der Grafik

S e i t e | 36

611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite

Das Modul Image-Gallery ermoumlglicht die Integration einer komfortablen Bildergallerie uumlber IMPERIA

Per Klick auf bdquoNeues Modulldquo -gt bdquoUDE Image-Gallery (v21)ldquo kann die entsprechende Gallerie an der

gewuumlnschten Position eingefuumlgt werden Generell sollten nur Bilder verwendet werden die

entweder auf 640 x 480 Pixel oder maximal auf 900 x 600 Pixel skaliert sind Aufgrund einer hohen

Dateigroumlszlige sollten Bilder einer Digitalkamera vor dem Upload komprimiert werden

Innerhalb des Moduls kann zunaumlchst die Hintergrundfarbe der Gallerie wahlweise zwischen Beige

Blau und Weiszlig eingestellt werden Um die Gallerie mit Bildern zu fuumlllen ist das entsprechende

Verzeichnis der Mediendatenbank anzugeben Aufgrund der geaumlnderten Syntax wird das Verzeichnis

ohne images angegeben Die Suchmaske fuumlr die Bilderauswahl deklariert die Dateiformate die mit

einbezogen werden sollen Schlieszliglich koumlnnen Sie die Bilder alphabetisch sortiert anzeigen lassen

sowie einen kleinen und einen groszligen Titel fuumlr Ihre Bildergallerie vergeben

Grundsaumltzlich ist es empfehlenswert groumlszligere Bildmengen auf mehrere Seiten zu verteilen um

einerseits die Darstellung auf mobilen Geraumlten zu vereinfachen und andererseits geringeren

Bandbreiten Rechnung zu tragen

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 11: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 10

bull Einer Navigation Sie koumlnnen in Ihrem Webbereich auch eine Vielzahl unterschiedlicher

Navigationen erstellen und diese je nach Bedarf einbinden

bull Der Seite (dem Dokument) selbst in der Sie Ihren Inhalt und Funktionen bearbeiten und die

vorherigen Elemente einfuumlgen koumlnnen

51 Die Organisationsbezeichnung

Die individuelle Bezeichnung Ihres Bereiches (Organisationsbezeichnung) erscheint auf Ihren

Webseiten links oben innerhalb der Impressionsgrafik direkt unter dem Schriftzug bdquoUNIVERSITAumlT

DUISBURG-ESSENldquo

Organisationsbezeichnungen erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

Sie koumlnnen Organisationsbezeichnungen in der Bearbeitungsebene ein- oder zweizeilig gestalten

S e i t e | 11

bull Der Eintrag in der ersten Zeile (bdquoOrganisationsbezeichnungldquo) erscheint groumlszliger und in weiszliger

fett-gesetzter Schrift

bull Ein Eintrag in der zweiten Zeile (bdquoZusatzldquo) erscheint in weiszliger normal gesetzter Schrift

Unter bdquoVerweis zur Organisationseinheit (URL)ldquo koumlnnen Sie das Sprungziel der

Organisationsbezeichnung bestimmen Tragen Sie diese Verknuumlpfung bitte als relativen Link ohne

Verweis auf den Webserver der Universitaumlt ein

bull Beispiel ihrverzeichnis anstatt httpwwwuni-duedeihrverzeichnis

Eine spaumltere Bearbeitung der Organisationsbezeichnung ist im CMS IMPERIA nicht uumlber das Tool

bdquoQuickEditldquo moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente

bearbeitenldquo im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichnisorganisation_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere

Organisationsbezeichnungen im selben Verzeichnis erstellen diesen einen jeweils moumlglichst

aussagekraumlftigen Dateititel zu geben

S e i t e | 12

52 Die Zielgruppennavigation

Eine individuelle Zielgruppennavigation in der Kopfzeile Ihrer Webseite erstellen Sie uumlber das

IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

Die editierte und veroumlffentlichte Zielgruppennavigation erscheint automatisch auf allen Seiten Ihres

Verzeichnisses

Tragen Sie bitte auch dort die Verknuumlpfungen als relative Links ohne Verweis auf den Webserver der

Universitaumlt ein Verwenden Sie dieses Instrument auszligerdem bitte nicht als moumlgliche zusaumltzliche

Quernavigation sondern ausschlieszliglich als Hilfe und zur Verlinkung gruppenspezifischer

Informationsaufarbeitung

Auch die spaumltere Bearbeitung der Zielgruppennavigation ist im CMS IMPERIA nicht uumlber das Tool

bdquoQuickEditldquo moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente

bearbeitenldquo im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Zielgruppennavigation lautet

ihrverzeichnistargetsshtml

S e i t e | 13

Beachten Sie beim Import bitte Folgendes Anders als seit Beginn des Wintersemesters 2007

gehandhabt kann mit dem UDE-Webrelaunch im Oktober 2011 pro Verzeichnis nur noch eine

anstelle von zwei Zielgruppennavigationen erstellt werden die zudem automatisch in Ihrer Webseite

eingesetzt wird In Verzeichnissen die zwischen 2007 und 2011 angelegt wurden existiert oft

(zusaumltzlich oder ausschlieszliglich) eine sogenannte bdquoerweiterte Zielgruppennavigationldquo

(ihrverzeichnisetargetsshtml) Der Webserver der Universitaumlt sucht bei der Ausgabe Ihrer

Internetseiten im ersten Schritt nach der Datei bdquotargetsshtmlldquo im zweiten Schritt nach der Datei

bdquoetargetsshtmlldquo in Ihrem Verzeichnis und gibt die Zielgruppennavigation dieser Prioritaumlt nach aus

Fehlen beide Dateien so erscheinen die entsprechenden Inhalte des zentralen Angebotes der

Universitaumlt

53 Die Navigation

Navigationen in der linken Spalte Ihrer Webseite sind maximal zwei Ebenen tief

bull In der ersten Ebene ist die Schrift in Versalien (Groszligbuchstaben) gesetzt Schreiben Sie Ihre

Links bitte dennoch bdquonormalldquo Die Transformation in Groszligbuchstaben erfolgt automatisch

durch das System Die Navigationspunkte der ersten Ebene sind mit einem blauen Rechteck

versehen das am linken Seitenrand anliegt

bull Die zweite Navigationsebene erscheint in der Ausgabe nach rechts geruumlckt und regulaumlr in

Groszlig- und Kleinschreibung gesetzt

Links in Navigationen veraumlndern sich beim Uumlberfahren mit der Maus bzw beim Antabben auf

Touchpads Die Schrift erscheint dann weiszlig auf einem blauen Hintergrund Das Gleiche gilt fuumlr den

jeweils aktiven Menuumlpunkt Dieser ist in der Navigation dauerhaft weiszlig mit blauer Hinterlegung

Navigationen erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 14

Zum Aufbau Ihrer Navigation stehen Ihnen die Module bdquoNavigationslinkldquo und

bdquoNavigationsuntermenuumlldquo zur Verfuumlgung Ein Navigationslink erscheint einzeln auf der ersten Ebene

versehen mit einem vorgelagerten blauen Rechteck Mit dem Navigationsuntermenuuml koumlnnen Sie

Menuumlpunkte erzeugen die neben dieser ersten Position uumlber eine zweite eingeruumlckte Ebene

verfuumlgen Dort lassen sich beliebig viele Unterpunkte einsetzen Je nachdem ob Sie den

uumlbergeordneten Eintrag im Navigationsuntermenuuml mit einer Zieladresse (URL) versehen erscheint

dieser verlinkt oder als einfache Uumlberschrift uumlber die nachgelagerten Inhaltspunkte

Selbstverstaumlndlich lassen sich die einzelnen Einheiten in ihrer Position jederzeit verschieben Tragen

Sie interne Links in Ihren Navigationen bitte als relative Verknuumlpfungen ohne Verweis auf den

Webserver der Universitaumlt ein

Editierte und veroumlffentlichte Navigation erscheinen innerhalb der Rubrik in der sie angelegt wurden

automatisch zur Auswahl im linken Bereich der Bearbeitungsebene Ihrer Webseite

Die spaumltere Bearbeitung von Navigationen ist im CMS IMPERIA auf zwei Wegen moumlglich Die

entsprechende Datei kann zum einen uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo im

IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Navigationen folgt folgendem Muster

ihrverzeichnisnav_12345shtml

S e i t e | 15

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Navigationen im selben

Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

Zum anderen koumlnnen Sie auch aus der Bearbeitungsebene einer Webseite heraus dort ausgewaumlhlte

Navigationen aufrufen und editieren Beachten Sie jedoch dass nach dem Speichern der

bearbeiteten Navigation sowohl die Navigationsdatei als auch die Datei der Ursprungsseite auf Ihrem

Schreibtisch liegen

6 Webseiten gestalten

Fuumlr die Gestaltung Ihres Inhalts steht Ihnen eine groszlige Anzahl statischer wie dynamischer Elemente

(Module) zur Verfuumlgung Welche Elemente Sie im Einzelnen nutzen koumlnnen haumlngt davon ab welchen

Dateityp Sie bei der Dokumentenerzeugung fuumlr Ihre Webseite waumlhlen Das Content Management

System der Hochschule bietet Ihnen die Moumlglichkeit Ihr Dokument als HTML-Web-Seite oder als

PHP-Skript zu erzeugen Beachten Sie bitte von Anfang an dass diese Auswahl Einfluss auf die URL

(Internetadresse) der jeweiligen Seite hat Bei einer nachtraumlglichen Aumlnderung aumlndert sich auch die

Internetadresse unter der Ihre Seite im Netz zu finden ist Sie muumlssen dann eventuell Verlinkungen

an vielen Stellen aumlndern

bull Internetadresse einer HTML-Web-Seite wwwuni-duedebereichihreseiteshtml

bull Internetadresse eines PHP-Skripts wwwuni-duedebereichihreseitephp

Je nachdem ob Sie Ihr Dokument als HTML-Web-Seite oder als PHP-Skript erzeugen koumlnnen Sie

folgende Elemente nutzen

Linke Spalte des Inhaltsbereiches

bull (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

bull A-Z verwalten PHP-Skript HTML-Web-Seite

bull Code editieren PHP-Skript HTML-Web-Seite

bull Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

bull DBAdmin PHP-Skript

bull Doppelcontainer PHP-Skript HTML-Web-Seite

bull Flickr nutzen PHP-Skript

bull Formular schlieszligen PHP-Skript

bull Formular oumlffnen PHP-Skript

S e i t e | 16

bull Formular Element PHP-Skript

bull Formulareingabe in DB speichern PHP-Skript

bull Google-Maps (v30) PHP-Skript HTML-Web-Seite

bull Image-Gallery (v21) PHP-Skript HTML-Web-Seite

bull Mailinglisten PHP-Skript

bull Mitarbeiter-Liste PHP-Skript

bull Mitarbeiter-Publikationsliste PHP-Skript

bull Mitarbeiter-Seite PHP-Skript

bull Randlose Grafik PHP-Skript HTML-Web-Seite

bull RSS-Feed-Administration PHP-Skript

bull RSS-Feed-Agent PHP-Skript

bull Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

bull Veranstaltungskalender Kalendermodul PHP-Skript

bull Veranstaltungskalender Veranstaltungsmodul PHP-Skript

Rechte Spalte des Inhaltsbereiches

bull (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

bull Code editieren PHP-Skript HTML-Web-Seite

bull Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

bull Flickr nutzen PHP-Skript

bull Mitarbeiter-Seite PHP-Skript

bull Randlose Grafik PHP-Skript HTML-Web-Seite

bull RSS-Feed-Agent PHP-Skript

bull Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

bull Veranstaltungskalender Kalendermodul PHP-Skript

Beim Erstellen Ihrer Webseite koumlnnen Sie diese einzelnen Module nach Bedarf (auch mehrfach)

erzeugen und in der gewuumlnschten Reihenfolge platzieren wobei die gewaumlhlte Reihenfolge jederzeit

veraumlnderbar ist Mit wenigen Ausnahmen lassen sich die einzelnen Einheiten weiszlig blau oder beige

einfaumlrben (Ausnahme randlose Grafik) Sie werden vom System dann als voneinander abgesetzte

Bloumlcke ausgegeben

Um innerhalb eines Dokuments zu navigieren koumlnnen Sie wenn noumltig die einzelnen Elemente auch

mit einem Link-Anker versehen (Ausnahmen randlose Grafik Mitarbeiter-Liste -Publikationsliste

und ndashSeite Veranstaltungskalender Veranstaltungs- sowie Kalendermodul) Den Ankernamen

S e i t e | 17

koumlnnen Sie frei vergeben er darf jedoch keine Leer- oder Sonderzeichen enthalten Das erste Zeichen

muss auszligerdem ein Buchstabe sein

61 Uumlber allem Die Brotkrumennavigation

Zwischen Seitentitel und ndashinhalt koumlnnen Sie auf jeder Seite eine individuelle Brotkrumennavigation

editieren die den Nutzern eine schnelle Uumlbersicht daruumlber ermoumlglicht wie sie auf die gerade

aufgerufene Webseite gelangt sind Verwenden Sie dieses Instrument bitte nicht als moumlgliche

zusaumltzliche Quernavigation sondern ausschlieszliglich als Hilfe im vorgesehenen Sinne

Der letzte Eintrag der Brotkrumennavigation der uumlblicherweise die aktuell aufgerufene Seite

benennt sollte nicht mit einer Zieladresse (URL) versehen werden Der Eintrag erscheint dann als

regulaumlr schwarz formatierter Text nicht als blau ausgezeichneter Link

S e i t e | 18

62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

Mit dem TinyMCE-Texteditor stellt Ihnen das Content Management System der UDE einen auf

JavaScript basierenden WYSIWYG-Editor (bdquoWhat You See Is What You Getldquo) zur Verfuumlgung Mit Hilfe

dieses Moduls ist es moumlglich ohne HTML- oder weitergehende Programmierkenntnisse Beitraumlge zu

verfassen und Seiten zu formatieren Die Bedienung mittels einer Textbox orientiert sich stark an

gaumlngiger und bekannter Textverarbeitungs-Software

Texte formatieren

Selbstverstaumlndlich bietet der TinyMCE-Editor die uumlblichen Arten Texte zu formatieren Neben den

Befehlen fett (bdquoBoldldquo) kursiv (bdquoItalicldquo) unterstrichen (bdquoUnderlineldquo) sowie hoch- bzw tiefgestellt

bietet Ihnen das System uumlber das Ω-Symbol eine breite Palette an Sonderzeichen uumlber die

Listenfunktion die Erstellung einfacher oder nummerierter Aufzaumlhlungslisten an Mittels einer Select-

S e i t e | 19

Box koumlnnen Sie auszligerdem auf im Hochschullayout vorgegebene Uumlberschriftarten (bdquoHeadingsldquo)

zuruumlckgreifen

Als weitere Moumlglichkeiten steht Ihnen frei

bull ein Datum undoder eine Uhrzeit einzufuumlgen

bull Blockzitate zu kennzeichnen oder

bull geschuumltzte Leerzeichen (bdquoNon-breaking Space Characterldquo) zu definieren

bull Das Ankersymbol (bdquoInsertEdit Anchorldquo) erlaubt die Definition von Sprungzielen innerhalb

laumlngerer Texte

Im Notfall hilft Ihnen das Radiergummi-Symbol (bdquoRemove Formatting) saumlmtliche Formatierungen zu

entfernen

Bereits formatierten Text einfuumlgen

Uumlber diese Formatierungsarten hinaus koumlnnen Sie auch bereits vorformatierte Texte aus Ihrer

Textverarbeitung in den Editor kopieren Zum Einfuumlgen nutzen Sie jedoch bitte nicht den einfachen

Copy amp Paste-Befehl sondern die im Modul bereitgestellte Funktion bdquoPaste from Wordldquo (Sie finden

das entsprechende bdquoWldquo-Symbol unter der Texteingabe-Box) ndash und zwar auch dann wenn Ihr

Ursprungstext nicht aus Microsoft Word sondern einer anderen Textverarbeitungssoftware

importiert wird Schriftformatierungen Verlinkungen und Aumlhnliches werden dann 11 uumlbernommen

Achten Sie bitte dennoch darauf dass dieser Funktion Grenzen gesetzt sind und arbeiten Sie mit

moumlglichst einfachen Formatvorlagen

HTML-Ansicht

Fuumlr Redakteure die sich in der Seitenprogrammierung sicherer fuumlhlen als in der Textverarbeitung

haumllt das Modul TinyMCE-Texteditor uumlber den Button bdquoHTMLldquo einen HTML Source Editor bereit mit

dem direkt auf den Quelltext und die Codierung dieses Teils der Webseite zugegriffen werden kann

Diese Funktion eignet sich auszligerdem besonders zur Uumlberpruumlfung und Fehlersuche Zur

Programmierung eigener Funktionen nutzen Sie jedoch bitte das Modul bdquoCode editierenldquo

S e i t e | 20

Links

Die uumlber die Symbole bdquoInsertEdit Linkldquo (Link einfuumlgen oder bearbeiten) in Ihre Texte oder

Aufzaumlhlungslisten eingefuumlgten Hyperlinks formatiert das System selbststaumlndig im fuumlr die UDE

vorgesehehen Layout Tragen Sie Links auf Seiten innerhalb von wwwuni-duede bitte als relative

Verknuumlpfungen ohne Verweis auf den Webserver der Universitaumlt ein also

bull depresse

anstelle von

bull httpwwwuni-duededepresseindexphp

Zeichnen sie auszligerdem Ihre Verlinkungen im Sinne der Barrierefreiheit mit sprechenden Titeln aus

und uumlberlegen Sie sich ob das Sprungziel im selben oder in einem neuen Browserfenster geoumlffnet

werden soll

Uumlber das Symbol bdquoUnlinkldquo entfernen Sie die entsprechende Verlinkung

Bilder

Der TinyMCE-Texteditor bietet Ihnen zwei Moumlglichkeiten Bilder in Ihre Texte einzubinden

S e i t e | 21

bull Uumlber die Funktion bdquoInsertEdit Imageldquo (Icon unter der Texteingabe-Box) koumlnnen Sie den

relativen Pfad auf das entsprechende Bild aus der IMPERIA-Mediendatenbank einfuumlgen

(Formatbeispiel imperiamdimageswebredaktion2013parentservicejpg)

bull Die Funktion bdquoVorschaubild waumlhlenldquo laumlsst Sie direkt auf die IMPERIA-Mediendatenbank

zugreifen und dort die gewuumlnschte Grafik per Klick auswaumlhlen Uumlber die Funktion bdquoVollbild

waumlhlenldquo koumlnnen Sie das Bild optional zu einer groumlszligeren Ansicht verlinken die sich als

bdquoLightboxldquo uumlber der aktiven Webseite oumlffnet Der Befehl bdquoBild zuruumlcksetzenldquo entfernt die

gewaumlhlte Grafik aus Ihrer Webseite

Waumlhrend Sie mittels bdquoInsertEdit Imageldquo die Anzeige-Groumlszlige Ihres Bildes (bis maximal 480 Pixel

Breite) selbst bestimmen koumlnnen werden Grafiken uumlber die Funktion bdquoVorschaubild waumlhlenldquo beim

Einfuumlgen automatisch auf die passende Groumlszlige skaliert (162 Pixel Breite in der linken und 204 Pixel

Breite in der rechten Content-Spalte) In diesem Fall koumlnnen Sie zudem waumlhlen ob der Text an dieser

Stelle das Bild umflieszligt oder aber rechts daneben angezeigt wird Das Vollbild wird bei der Eingabe

nicht skaliert Nutzen Sie daher bitte Bilder mit einer bildschirmtauglichen Groumlszlige (maximal 1024

Pixel)

S e i t e | 22

Tabellen

Uumlber das Icon bdquoInsertEdit Tableldquo fuumlgen Sie an der gewuumlnschten Stelle Tabellen in Ihren Texteditor

ein Unter den Reitern bdquoGeneralldquo und bdquoAdvancedldquo koumlnnen Sie diese Tabellen gemaumlszlig den uumlblichen

HTML-Konventionen erstellen formatieren und bearbeiten

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig gemaumlszlig den Vorgaben der Barrierefreiheit als

solche aus Der Text-Editor stellt Ihnen diese Optionen zur Verfuumlgung

bull Beachten Sie dass die Hintergrundfarbe der Tabellen je nach gewaumlhlter Einfaumlrbung des

Moduls variiert

S e i t e | 23

Texte mit bdquoVerfallsdatumldquo

Grundsaumltzlich steht Ihnen das Modul bdquo(TinyMCE)-Texteditorldquo sowohl auf shtml-Seiten als auch in

php-Skripten zur Verfuumlgung Auf php-Seiten laumlsst sich jedoch eine zusaumltzliche Option nutzen Fuumlr

Texte die nur fuumlr einen gewissen Zeitraum auf Ihrer Webseite erscheinen sollen koumlnnen Sie ein

Start- und Enddatum setzen

63 A-Z verwalten PHP-Skript HTML-Web-Seite

Das Modul bdquoA-Z verwaltenldquo ermoumlglicht den Redakteuren A-Z-Listen relativ einfach zu erzeugen und

zu pflegen

S e i t e | 24

Fuumlr jeden Eintrag in der Stichwortliste muss im Eingabefeld eine einzelne Zeile eingefuumlgt werden Die

Eingabe folgt einem festen Schema

bull Stichwort||URL (Internetadresse)||

oder

bull Stichwort||URL (Internetadresse)||eventuell ein kurzer Beschreibungstext

wobei auf den Beschreibungstext auch verzichtet werden kann Die sogenannten bdquoPipe-Zeichenldquo (||)

dienen als Feldtrenner Sie erzeugen sie uumlber den Tastaturbefehl bdquoAltGr amp das Groumlszligerzeichenldquo

Wahlweise kopieren Sie die entsprechenden Zeichen aus bisherigen Eintraumlgen

Auch hier gilt Tragen Sie interne Links in Ihrer A-Z-Liste bitte als relative Verknuumlpfungen ohne

Verweis auf den Webserver der Universitaumlt ein also

bull Abiturjahrgang 2013||doppelter_abiturjahrgang||

anstelle von

bull Abiturjahrgang 2013||httpwwwuni-duededoppelter_abiturjahrgang||

Externe Links (wie etwa bdquoGlassbooth ||httpwwwglassboothde||ldquo) werden auf der

ausgegebenen Webseite entsprechend gekennzeichnet

S e i t e | 25

Die Eintraumlge im Modul bdquoA-Z verwaltenldquo sortiert das Content Management System automatisch nach

Ziffernreihenfolge bzw dem Alphabet Um die Eintraumlge spaumlter einfach aufzufinden und bearbeiten zu

koumlnnen empfiehlt es sich jedoch bereits im Eingabefeld selbst eine alphabetische Sortierung

vorzunehmen

64 Code editieren PHP-Skript HTML-Web-Seite

Das Modul bdquoCode editierenldquo eroumlffnet Ihnen die Moumlglichkeit in Ihrem Internetauftritt eigene PHP-

oder HTML-Codeschnipsel zu erstellen und zu nutzen oder Programmierungen eigener Funktionen

vorzunehmen

Nutzen Sie dieses Modul bitte nicht um Funktionen zu simulieren die Ihnen das CMS IMPERIA bereits

als vorgefertigte Module zur Verfuumlgung stellt Das freie Code-Eingabefeld ist ebenfalls nicht dazu

S e i t e | 26

vorgesehen auf diesem Wege vom Corporate Design der Universitaumlt abweichende eigene Layouts zu

entwickeln

65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

Uumlber das Modul bdquoCodebaustein einfuumlgenldquo ist es moumlglich vorgefertigte Bloumlcke oder bdquoBauteileldquo in Ihre

Webseite zu integrieren Codebausteine eignen sich dazu bestimmte Informationen die auf vielen

Webseiten wiederkehren an einer Stelle zentral zu pflegen In der Bearbeitungsebene bietet Ihnen

das Modul die in der aktuellen Rubrik vorhandenen Bausteine zur Auswahl an

Codebausteine erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 27

Sie koumlnnen in Codebausteinen wie beim uumlblichen Seitenaufbau gewohnt unterschiedliche Module

kombinieren und positionieren Zur Verfuumlgung stehen die Elemente

bull (TinyMCE)-Texteditor

bull Code editieren

bull die Formularmodule

bull Randlose Grafik

bull RSS-Feed-Agent

bull Tube Audio-VideoPlayer

Eine spaumltere Bearbeitung der Codebausteine ist im CMS IMPERIA nicht uumlber das Tool bdquoQuickEditldquo

moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo

im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichniscode_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Codebausteine im

selben Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

66 DBAdmin PHP-Skript

Mit Hilfe des Moduls bdquoDBAdminldquo lassen sich Datenbank direkt in Tabellenform auf Ihrer Webseite

darstellen Uumlber die Funktion bdquoOptionen anzeigenldquo erhalten Sie zudem die Moumlglichkeit eine

Webseite zur Pflege Ihrer Datenbank zu erstellen Dort koumlnnen Sie die entsprechende Tabelle

editieren d h Eintraumlge einzeln erstellen bearbeiten oder loumlschen

S e i t e | 28

Zur Nutzung dieses Moduls sind folgende Angaben notwendig

bull Datenbank-Server Name oder IP-Adresse des Servers auf dem die anzusprechende

Datenbank liegt (bspw bdquodbuni-duedeldquo)

bull Datenbank-Name

bull Tabellen-Name Name der speziellen Tabelle die innerhalb der Datenbank angesprochen

werden soll

bull Datenbank-Benutzer und Datenbank-Passwort

Datenbanken auf einem UDE-Server koumlnnen Universitaumltsangehoumlrige unter Nutzung ihrer

Hochschulkennung online beim Zentrum fuumlr Informations- und Mediendienste (ZIM) beantragen

unter httpwwwuni-duedezimserviceshomepagesmysqlshtml

67 Doppelcontainer PHP-Skript HTML-Web-Seite

Das Modul bdquoDoppelcontainerldquo ermoumlglicht es Ihnen auf Ihrer Webseite zwei Textebloumlcke (je nach

Wunsch mit oder ohne Bilder) nebeneinander zu setzen

Auf zweispaltig angelegten Webseiten ist die Anlage eines Doppelcontainers nur in der linken Spalte

moumlglich Bilder erscheinen dort in einer Breite von 246 Pixeln Auf einspaltig angelegten Webseiten

werden die einzelnen Bloumlcke (und dementsprechend die verwendeten Bilder) in einer Breite von 366

Pixeln angezeigt Die Bildhoumlhe ist in beiden Faumlllen frei waumlhlbar sollte jedoch in beiden Containern

identisch sein

S e i t e | 29

Zur Texteingabe stehen Ihnen die Optionen bdquoTeaserldquo (mit Zeichenbegrenzung) sowie bdquoStandardldquo

(ohne Zeichenbegrenzung) zur Verfuumlgung Waumlhlen Sie bdquoTeaserldquo so erhalten Sie Platz fuumlr 300 Zeichen

ndash ein Zeichenzaumlhler neben der Texteingabe-Box erleichtert das Mitzaumlhlen Der Text wird gelb

unterlegt wenn er nach dem naumlchsten Leerzeichen abgeschnitten wird Rot erscheint das Textfeld

wenn die Zeichenzahl bereits uumlberschritten wurde

Beachten Sie bitte dass das Modul HTML-Tags (URLs Mailadressen etc) automatisch filtert Sie

werden daher nicht angezeigt Um Ihren Text zu verlinken koumlnnen Sie das Eingabefeld bdquoMehr-Linkldquo

nutzen

Beide Bloumlcke innerhalb eines Doppelcontainers lassen sich individuell auf die uumlbliche Weise (weiszlig

hellblau sandfarben) hinterlegen

S e i t e | 30

68 Flickr nutzen PHP-Skript

Das Modul bdquoFlickr nutzenldquo ermoumlglicht es Ihnen im Sinne einer crossmedialen Verwertung Bilder aus

Ihrem Flickr-Account in Ihre IMPERIA-Webseite einzubinden Fuumlr diese Funktion benoumltigen Sie einen

sogenannten API-Key den Sie in Ihrem Flick-Auftritt unter

bull httpwwwflickrcomservicesappscreateapply

erzeugen lassen koumlnnen Tragen Sie dann diesen Key in die entsprechende Eingabemaske des Moduls

ein Anschlieszligend haben Sie die Moumlglichkeit ganze Fotosets (Alben) oder Einzelbilder einzubinden

Photoset anzeigen

S e i t e | 31

Zum Anzeigen von Photosets wird die entsprechende Photoset-ID ins Modul eingetragen Diese ID ist

Teil der Link-Adresse des entsprechenden Albums bei Flickr (die erscheint wenn Sie das Album

angeklickt haben) Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAMEsets12340954909

Die Photoset-ID verbirgt sich hinter den Ziffern am Ende der URL Sie koumlnnen auswaumlhlen wie viele

Fotos auf einer Webseite erscheinen sollen Dafuumlr uumlbernimmt das Modul die Bilder in der

quadratischen Aufloumlsung von Flickr also in einer Groumlszlige von 75 x 75 Pixeln Reicht der Platz dafuumlr

nicht aus wird eine zusaumltzliche Blaumltterfunktion angeboten Photoset- und Bild-Beschreibungen

koumlnnen aus dem Flickr-Account automatisch uumlbernommen werden wenn die entsprechenden

Optionen mit einem Haken aktiviert wurden

Einzelbild anzeigen

Um ein einzelnes Bild anzuzeigen benoumltigen Sie die entsprechen Flickr-Foto-ID Diese verbirgt sich

hinter der ersten Zahl in der Link-Adresse des entsprechenden Bildes Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAME5841603851inset-72157626981464896

Ein Einzelbild kann in einer hohen oder einer geringen Aufloumlsung eingebunden werden Bei einer

zweispaltig angelegten Webseite wird das Bild in der linken Inhaltsspalte auf eine Breite von 480

Pixel bei einer einspaltig angelegten Webseite auf eine Breite von 721 Pixel skaliert

69 Formulare

Mit IMPERIA haben Sie die Moumlglichkeit Formulare auf Ihrer Webseite zu platzieren In der

Bearbeitungsebene Ihrer Seite finden Sie im Bereich bdquoNeues Modulldquo den Menupunkt UDE ndash

Formular oumlffnen

Nach dem Festlegen der Hintergrundfarbe koumlnnen Sie im Bereich bdquoLegendeldquo den Titel Ihres

Formulars waumlhlen Wenn Sie die Funktion bdquoMailer-Funktionalitaumltldquo aktivieren koumlnnen Sie die Adresse

Ihres Mailscripts eingeben Anderenfalls belassen Sie es bitte beim Vorgabewert

Im Bereich bdquoNexturlldquo kann angegeben werden welche Seite nach dem Abschicken des Formulars

aufgerufen werden soll Daruumlber hinaus werden der Titel der E-Mail die Absender-Adresse sowie die

Empfaumlnger-Adresse definiert Optional kann eine Bestaumltigungs-E-Mail mit frei waumlhlbarem Text

versendet werden

S e i t e | 32

Um dem erstellten Formular Eingabefelder hinzuzufuumlgen ist das Modul bdquoUDE Formular Elementldquo zu

waumlhlen Waumlhlen Sie das Element bdquoTextldquo um ein Eingabefeld zu erzeugen Die Option bdquoBezeichnerldquo

beschreibt den sichtbaren Text im fertigen Formular zum Beispiel bdquoIhr Nameldquo Weitergehend koumlnnen

Sie die zulaumlssigen Inhalte der Nutzereingaben definieren sowie markieren ob das Element ein

Pflichtfeld sein soll

S e i t e | 33

Um ein Texteingabefeld innerhalb des Formulars zu erzeugen waumlhlen Sie das Element bdquoTextarealdquo

Sie koumlnnen die Groumlszlige des Textfeldes definieren (Zeilen x Spalten) und optional erneut eine Pruumlfung

zulaumlssiger Nutzereingaben aktivieren Weiterhin koumlnnen Sie waumlhlen ob der eingegebene Wert des

Formularelements in die Datenbank eingetragen werden soll Wenn Sie fuumlr Ihre Formulare auf eine

Datenbank zuruumlckgreifen moumlchten koumlnnen Sie sich hier informieren httpwwwuni-

duedezimserviceshomepagesmysqlshtml

Insgesamt stehen folgende Elemente zur Verfuumlgung

bull Checkbox Hidden Password Select Anfang Select Option einfuumlgen Select Ende Submit

Text Datum Textarea Radio Reset Leerzeile Kommentarzeile Neuer Abschnitt mit

Bezeichner sowie Datei-Upload

Ein Formular muss mit dem Modul bdquoUDE Formular schlieszligenldquo abgeschlossen werden An dieser

Stelle koumlnnen Sie einen Send-Button hinzufuumlgen dessen Name frei waumlhlbar ist Der eingegebene Text

wird als Beschriftung des Buttons angezeigt Erst durch das Hinzufuumlgen dieses Moduls wird das

Formular auf Ihrer Seite sichtbar und kann nach der Veroumlffentlichung genutzt werden

S e i t e | 34

610 Google-Maps (v30) PHP-Skript HTML-Web-Seite

Dieses Modul bringt eine Grafik von Google-Maps auf die Webseite entweder in Kartenoptik oder als

Satellitenbild Sie haben zwei Moumlglichkeiten eine solche zu generieren Uumlber die konkreten GPS-

Koordinaten oder durch das Angeben einer Adresse (zB Forsthausweg 2 47057 Duisburg) Sie

koumlnnen aus zwoumllf Vergroumlszligerungsstufen fuumlr den gewuumlnschten Ausschnitt zwei Kartengroumlszligen und

zwei Kartenformaten waumlhlen

S e i t e | 35

Kartengroumlszlige bdquogroszligldquo skaliert die Graphik auf 480 Pixel Breite auf einer zweispaltigen Seite bzw auf

721 Pixel auf einer einspaltigen Seite Die Option bdquokleinldquo verringert die Breite auf etwa die Haumllfte Die

beiden Optionen beim Kartenformat beeinflussen die Houmlhe der Grafik

S e i t e | 36

611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite

Das Modul Image-Gallery ermoumlglicht die Integration einer komfortablen Bildergallerie uumlber IMPERIA

Per Klick auf bdquoNeues Modulldquo -gt bdquoUDE Image-Gallery (v21)ldquo kann die entsprechende Gallerie an der

gewuumlnschten Position eingefuumlgt werden Generell sollten nur Bilder verwendet werden die

entweder auf 640 x 480 Pixel oder maximal auf 900 x 600 Pixel skaliert sind Aufgrund einer hohen

Dateigroumlszlige sollten Bilder einer Digitalkamera vor dem Upload komprimiert werden

Innerhalb des Moduls kann zunaumlchst die Hintergrundfarbe der Gallerie wahlweise zwischen Beige

Blau und Weiszlig eingestellt werden Um die Gallerie mit Bildern zu fuumlllen ist das entsprechende

Verzeichnis der Mediendatenbank anzugeben Aufgrund der geaumlnderten Syntax wird das Verzeichnis

ohne images angegeben Die Suchmaske fuumlr die Bilderauswahl deklariert die Dateiformate die mit

einbezogen werden sollen Schlieszliglich koumlnnen Sie die Bilder alphabetisch sortiert anzeigen lassen

sowie einen kleinen und einen groszligen Titel fuumlr Ihre Bildergallerie vergeben

Grundsaumltzlich ist es empfehlenswert groumlszligere Bildmengen auf mehrere Seiten zu verteilen um

einerseits die Darstellung auf mobilen Geraumlten zu vereinfachen und andererseits geringeren

Bandbreiten Rechnung zu tragen

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 12: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 11

bull Der Eintrag in der ersten Zeile (bdquoOrganisationsbezeichnungldquo) erscheint groumlszliger und in weiszliger

fett-gesetzter Schrift

bull Ein Eintrag in der zweiten Zeile (bdquoZusatzldquo) erscheint in weiszliger normal gesetzter Schrift

Unter bdquoVerweis zur Organisationseinheit (URL)ldquo koumlnnen Sie das Sprungziel der

Organisationsbezeichnung bestimmen Tragen Sie diese Verknuumlpfung bitte als relativen Link ohne

Verweis auf den Webserver der Universitaumlt ein

bull Beispiel ihrverzeichnis anstatt httpwwwuni-duedeihrverzeichnis

Eine spaumltere Bearbeitung der Organisationsbezeichnung ist im CMS IMPERIA nicht uumlber das Tool

bdquoQuickEditldquo moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente

bearbeitenldquo im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichnisorganisation_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere

Organisationsbezeichnungen im selben Verzeichnis erstellen diesen einen jeweils moumlglichst

aussagekraumlftigen Dateititel zu geben

S e i t e | 12

52 Die Zielgruppennavigation

Eine individuelle Zielgruppennavigation in der Kopfzeile Ihrer Webseite erstellen Sie uumlber das

IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

Die editierte und veroumlffentlichte Zielgruppennavigation erscheint automatisch auf allen Seiten Ihres

Verzeichnisses

Tragen Sie bitte auch dort die Verknuumlpfungen als relative Links ohne Verweis auf den Webserver der

Universitaumlt ein Verwenden Sie dieses Instrument auszligerdem bitte nicht als moumlgliche zusaumltzliche

Quernavigation sondern ausschlieszliglich als Hilfe und zur Verlinkung gruppenspezifischer

Informationsaufarbeitung

Auch die spaumltere Bearbeitung der Zielgruppennavigation ist im CMS IMPERIA nicht uumlber das Tool

bdquoQuickEditldquo moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente

bearbeitenldquo im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Zielgruppennavigation lautet

ihrverzeichnistargetsshtml

S e i t e | 13

Beachten Sie beim Import bitte Folgendes Anders als seit Beginn des Wintersemesters 2007

gehandhabt kann mit dem UDE-Webrelaunch im Oktober 2011 pro Verzeichnis nur noch eine

anstelle von zwei Zielgruppennavigationen erstellt werden die zudem automatisch in Ihrer Webseite

eingesetzt wird In Verzeichnissen die zwischen 2007 und 2011 angelegt wurden existiert oft

(zusaumltzlich oder ausschlieszliglich) eine sogenannte bdquoerweiterte Zielgruppennavigationldquo

(ihrverzeichnisetargetsshtml) Der Webserver der Universitaumlt sucht bei der Ausgabe Ihrer

Internetseiten im ersten Schritt nach der Datei bdquotargetsshtmlldquo im zweiten Schritt nach der Datei

bdquoetargetsshtmlldquo in Ihrem Verzeichnis und gibt die Zielgruppennavigation dieser Prioritaumlt nach aus

Fehlen beide Dateien so erscheinen die entsprechenden Inhalte des zentralen Angebotes der

Universitaumlt

53 Die Navigation

Navigationen in der linken Spalte Ihrer Webseite sind maximal zwei Ebenen tief

bull In der ersten Ebene ist die Schrift in Versalien (Groszligbuchstaben) gesetzt Schreiben Sie Ihre

Links bitte dennoch bdquonormalldquo Die Transformation in Groszligbuchstaben erfolgt automatisch

durch das System Die Navigationspunkte der ersten Ebene sind mit einem blauen Rechteck

versehen das am linken Seitenrand anliegt

bull Die zweite Navigationsebene erscheint in der Ausgabe nach rechts geruumlckt und regulaumlr in

Groszlig- und Kleinschreibung gesetzt

Links in Navigationen veraumlndern sich beim Uumlberfahren mit der Maus bzw beim Antabben auf

Touchpads Die Schrift erscheint dann weiszlig auf einem blauen Hintergrund Das Gleiche gilt fuumlr den

jeweils aktiven Menuumlpunkt Dieser ist in der Navigation dauerhaft weiszlig mit blauer Hinterlegung

Navigationen erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 14

Zum Aufbau Ihrer Navigation stehen Ihnen die Module bdquoNavigationslinkldquo und

bdquoNavigationsuntermenuumlldquo zur Verfuumlgung Ein Navigationslink erscheint einzeln auf der ersten Ebene

versehen mit einem vorgelagerten blauen Rechteck Mit dem Navigationsuntermenuuml koumlnnen Sie

Menuumlpunkte erzeugen die neben dieser ersten Position uumlber eine zweite eingeruumlckte Ebene

verfuumlgen Dort lassen sich beliebig viele Unterpunkte einsetzen Je nachdem ob Sie den

uumlbergeordneten Eintrag im Navigationsuntermenuuml mit einer Zieladresse (URL) versehen erscheint

dieser verlinkt oder als einfache Uumlberschrift uumlber die nachgelagerten Inhaltspunkte

Selbstverstaumlndlich lassen sich die einzelnen Einheiten in ihrer Position jederzeit verschieben Tragen

Sie interne Links in Ihren Navigationen bitte als relative Verknuumlpfungen ohne Verweis auf den

Webserver der Universitaumlt ein

Editierte und veroumlffentlichte Navigation erscheinen innerhalb der Rubrik in der sie angelegt wurden

automatisch zur Auswahl im linken Bereich der Bearbeitungsebene Ihrer Webseite

Die spaumltere Bearbeitung von Navigationen ist im CMS IMPERIA auf zwei Wegen moumlglich Die

entsprechende Datei kann zum einen uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo im

IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Navigationen folgt folgendem Muster

ihrverzeichnisnav_12345shtml

S e i t e | 15

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Navigationen im selben

Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

Zum anderen koumlnnen Sie auch aus der Bearbeitungsebene einer Webseite heraus dort ausgewaumlhlte

Navigationen aufrufen und editieren Beachten Sie jedoch dass nach dem Speichern der

bearbeiteten Navigation sowohl die Navigationsdatei als auch die Datei der Ursprungsseite auf Ihrem

Schreibtisch liegen

6 Webseiten gestalten

Fuumlr die Gestaltung Ihres Inhalts steht Ihnen eine groszlige Anzahl statischer wie dynamischer Elemente

(Module) zur Verfuumlgung Welche Elemente Sie im Einzelnen nutzen koumlnnen haumlngt davon ab welchen

Dateityp Sie bei der Dokumentenerzeugung fuumlr Ihre Webseite waumlhlen Das Content Management

System der Hochschule bietet Ihnen die Moumlglichkeit Ihr Dokument als HTML-Web-Seite oder als

PHP-Skript zu erzeugen Beachten Sie bitte von Anfang an dass diese Auswahl Einfluss auf die URL

(Internetadresse) der jeweiligen Seite hat Bei einer nachtraumlglichen Aumlnderung aumlndert sich auch die

Internetadresse unter der Ihre Seite im Netz zu finden ist Sie muumlssen dann eventuell Verlinkungen

an vielen Stellen aumlndern

bull Internetadresse einer HTML-Web-Seite wwwuni-duedebereichihreseiteshtml

bull Internetadresse eines PHP-Skripts wwwuni-duedebereichihreseitephp

Je nachdem ob Sie Ihr Dokument als HTML-Web-Seite oder als PHP-Skript erzeugen koumlnnen Sie

folgende Elemente nutzen

Linke Spalte des Inhaltsbereiches

bull (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

bull A-Z verwalten PHP-Skript HTML-Web-Seite

bull Code editieren PHP-Skript HTML-Web-Seite

bull Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

bull DBAdmin PHP-Skript

bull Doppelcontainer PHP-Skript HTML-Web-Seite

bull Flickr nutzen PHP-Skript

bull Formular schlieszligen PHP-Skript

bull Formular oumlffnen PHP-Skript

S e i t e | 16

bull Formular Element PHP-Skript

bull Formulareingabe in DB speichern PHP-Skript

bull Google-Maps (v30) PHP-Skript HTML-Web-Seite

bull Image-Gallery (v21) PHP-Skript HTML-Web-Seite

bull Mailinglisten PHP-Skript

bull Mitarbeiter-Liste PHP-Skript

bull Mitarbeiter-Publikationsliste PHP-Skript

bull Mitarbeiter-Seite PHP-Skript

bull Randlose Grafik PHP-Skript HTML-Web-Seite

bull RSS-Feed-Administration PHP-Skript

bull RSS-Feed-Agent PHP-Skript

bull Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

bull Veranstaltungskalender Kalendermodul PHP-Skript

bull Veranstaltungskalender Veranstaltungsmodul PHP-Skript

Rechte Spalte des Inhaltsbereiches

bull (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

bull Code editieren PHP-Skript HTML-Web-Seite

bull Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

bull Flickr nutzen PHP-Skript

bull Mitarbeiter-Seite PHP-Skript

bull Randlose Grafik PHP-Skript HTML-Web-Seite

bull RSS-Feed-Agent PHP-Skript

bull Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

bull Veranstaltungskalender Kalendermodul PHP-Skript

Beim Erstellen Ihrer Webseite koumlnnen Sie diese einzelnen Module nach Bedarf (auch mehrfach)

erzeugen und in der gewuumlnschten Reihenfolge platzieren wobei die gewaumlhlte Reihenfolge jederzeit

veraumlnderbar ist Mit wenigen Ausnahmen lassen sich die einzelnen Einheiten weiszlig blau oder beige

einfaumlrben (Ausnahme randlose Grafik) Sie werden vom System dann als voneinander abgesetzte

Bloumlcke ausgegeben

Um innerhalb eines Dokuments zu navigieren koumlnnen Sie wenn noumltig die einzelnen Elemente auch

mit einem Link-Anker versehen (Ausnahmen randlose Grafik Mitarbeiter-Liste -Publikationsliste

und ndashSeite Veranstaltungskalender Veranstaltungs- sowie Kalendermodul) Den Ankernamen

S e i t e | 17

koumlnnen Sie frei vergeben er darf jedoch keine Leer- oder Sonderzeichen enthalten Das erste Zeichen

muss auszligerdem ein Buchstabe sein

61 Uumlber allem Die Brotkrumennavigation

Zwischen Seitentitel und ndashinhalt koumlnnen Sie auf jeder Seite eine individuelle Brotkrumennavigation

editieren die den Nutzern eine schnelle Uumlbersicht daruumlber ermoumlglicht wie sie auf die gerade

aufgerufene Webseite gelangt sind Verwenden Sie dieses Instrument bitte nicht als moumlgliche

zusaumltzliche Quernavigation sondern ausschlieszliglich als Hilfe im vorgesehenen Sinne

Der letzte Eintrag der Brotkrumennavigation der uumlblicherweise die aktuell aufgerufene Seite

benennt sollte nicht mit einer Zieladresse (URL) versehen werden Der Eintrag erscheint dann als

regulaumlr schwarz formatierter Text nicht als blau ausgezeichneter Link

S e i t e | 18

62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

Mit dem TinyMCE-Texteditor stellt Ihnen das Content Management System der UDE einen auf

JavaScript basierenden WYSIWYG-Editor (bdquoWhat You See Is What You Getldquo) zur Verfuumlgung Mit Hilfe

dieses Moduls ist es moumlglich ohne HTML- oder weitergehende Programmierkenntnisse Beitraumlge zu

verfassen und Seiten zu formatieren Die Bedienung mittels einer Textbox orientiert sich stark an

gaumlngiger und bekannter Textverarbeitungs-Software

Texte formatieren

Selbstverstaumlndlich bietet der TinyMCE-Editor die uumlblichen Arten Texte zu formatieren Neben den

Befehlen fett (bdquoBoldldquo) kursiv (bdquoItalicldquo) unterstrichen (bdquoUnderlineldquo) sowie hoch- bzw tiefgestellt

bietet Ihnen das System uumlber das Ω-Symbol eine breite Palette an Sonderzeichen uumlber die

Listenfunktion die Erstellung einfacher oder nummerierter Aufzaumlhlungslisten an Mittels einer Select-

S e i t e | 19

Box koumlnnen Sie auszligerdem auf im Hochschullayout vorgegebene Uumlberschriftarten (bdquoHeadingsldquo)

zuruumlckgreifen

Als weitere Moumlglichkeiten steht Ihnen frei

bull ein Datum undoder eine Uhrzeit einzufuumlgen

bull Blockzitate zu kennzeichnen oder

bull geschuumltzte Leerzeichen (bdquoNon-breaking Space Characterldquo) zu definieren

bull Das Ankersymbol (bdquoInsertEdit Anchorldquo) erlaubt die Definition von Sprungzielen innerhalb

laumlngerer Texte

Im Notfall hilft Ihnen das Radiergummi-Symbol (bdquoRemove Formatting) saumlmtliche Formatierungen zu

entfernen

Bereits formatierten Text einfuumlgen

Uumlber diese Formatierungsarten hinaus koumlnnen Sie auch bereits vorformatierte Texte aus Ihrer

Textverarbeitung in den Editor kopieren Zum Einfuumlgen nutzen Sie jedoch bitte nicht den einfachen

Copy amp Paste-Befehl sondern die im Modul bereitgestellte Funktion bdquoPaste from Wordldquo (Sie finden

das entsprechende bdquoWldquo-Symbol unter der Texteingabe-Box) ndash und zwar auch dann wenn Ihr

Ursprungstext nicht aus Microsoft Word sondern einer anderen Textverarbeitungssoftware

importiert wird Schriftformatierungen Verlinkungen und Aumlhnliches werden dann 11 uumlbernommen

Achten Sie bitte dennoch darauf dass dieser Funktion Grenzen gesetzt sind und arbeiten Sie mit

moumlglichst einfachen Formatvorlagen

HTML-Ansicht

Fuumlr Redakteure die sich in der Seitenprogrammierung sicherer fuumlhlen als in der Textverarbeitung

haumllt das Modul TinyMCE-Texteditor uumlber den Button bdquoHTMLldquo einen HTML Source Editor bereit mit

dem direkt auf den Quelltext und die Codierung dieses Teils der Webseite zugegriffen werden kann

Diese Funktion eignet sich auszligerdem besonders zur Uumlberpruumlfung und Fehlersuche Zur

Programmierung eigener Funktionen nutzen Sie jedoch bitte das Modul bdquoCode editierenldquo

S e i t e | 20

Links

Die uumlber die Symbole bdquoInsertEdit Linkldquo (Link einfuumlgen oder bearbeiten) in Ihre Texte oder

Aufzaumlhlungslisten eingefuumlgten Hyperlinks formatiert das System selbststaumlndig im fuumlr die UDE

vorgesehehen Layout Tragen Sie Links auf Seiten innerhalb von wwwuni-duede bitte als relative

Verknuumlpfungen ohne Verweis auf den Webserver der Universitaumlt ein also

bull depresse

anstelle von

bull httpwwwuni-duededepresseindexphp

Zeichnen sie auszligerdem Ihre Verlinkungen im Sinne der Barrierefreiheit mit sprechenden Titeln aus

und uumlberlegen Sie sich ob das Sprungziel im selben oder in einem neuen Browserfenster geoumlffnet

werden soll

Uumlber das Symbol bdquoUnlinkldquo entfernen Sie die entsprechende Verlinkung

Bilder

Der TinyMCE-Texteditor bietet Ihnen zwei Moumlglichkeiten Bilder in Ihre Texte einzubinden

S e i t e | 21

bull Uumlber die Funktion bdquoInsertEdit Imageldquo (Icon unter der Texteingabe-Box) koumlnnen Sie den

relativen Pfad auf das entsprechende Bild aus der IMPERIA-Mediendatenbank einfuumlgen

(Formatbeispiel imperiamdimageswebredaktion2013parentservicejpg)

bull Die Funktion bdquoVorschaubild waumlhlenldquo laumlsst Sie direkt auf die IMPERIA-Mediendatenbank

zugreifen und dort die gewuumlnschte Grafik per Klick auswaumlhlen Uumlber die Funktion bdquoVollbild

waumlhlenldquo koumlnnen Sie das Bild optional zu einer groumlszligeren Ansicht verlinken die sich als

bdquoLightboxldquo uumlber der aktiven Webseite oumlffnet Der Befehl bdquoBild zuruumlcksetzenldquo entfernt die

gewaumlhlte Grafik aus Ihrer Webseite

Waumlhrend Sie mittels bdquoInsertEdit Imageldquo die Anzeige-Groumlszlige Ihres Bildes (bis maximal 480 Pixel

Breite) selbst bestimmen koumlnnen werden Grafiken uumlber die Funktion bdquoVorschaubild waumlhlenldquo beim

Einfuumlgen automatisch auf die passende Groumlszlige skaliert (162 Pixel Breite in der linken und 204 Pixel

Breite in der rechten Content-Spalte) In diesem Fall koumlnnen Sie zudem waumlhlen ob der Text an dieser

Stelle das Bild umflieszligt oder aber rechts daneben angezeigt wird Das Vollbild wird bei der Eingabe

nicht skaliert Nutzen Sie daher bitte Bilder mit einer bildschirmtauglichen Groumlszlige (maximal 1024

Pixel)

S e i t e | 22

Tabellen

Uumlber das Icon bdquoInsertEdit Tableldquo fuumlgen Sie an der gewuumlnschten Stelle Tabellen in Ihren Texteditor

ein Unter den Reitern bdquoGeneralldquo und bdquoAdvancedldquo koumlnnen Sie diese Tabellen gemaumlszlig den uumlblichen

HTML-Konventionen erstellen formatieren und bearbeiten

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig gemaumlszlig den Vorgaben der Barrierefreiheit als

solche aus Der Text-Editor stellt Ihnen diese Optionen zur Verfuumlgung

bull Beachten Sie dass die Hintergrundfarbe der Tabellen je nach gewaumlhlter Einfaumlrbung des

Moduls variiert

S e i t e | 23

Texte mit bdquoVerfallsdatumldquo

Grundsaumltzlich steht Ihnen das Modul bdquo(TinyMCE)-Texteditorldquo sowohl auf shtml-Seiten als auch in

php-Skripten zur Verfuumlgung Auf php-Seiten laumlsst sich jedoch eine zusaumltzliche Option nutzen Fuumlr

Texte die nur fuumlr einen gewissen Zeitraum auf Ihrer Webseite erscheinen sollen koumlnnen Sie ein

Start- und Enddatum setzen

63 A-Z verwalten PHP-Skript HTML-Web-Seite

Das Modul bdquoA-Z verwaltenldquo ermoumlglicht den Redakteuren A-Z-Listen relativ einfach zu erzeugen und

zu pflegen

S e i t e | 24

Fuumlr jeden Eintrag in der Stichwortliste muss im Eingabefeld eine einzelne Zeile eingefuumlgt werden Die

Eingabe folgt einem festen Schema

bull Stichwort||URL (Internetadresse)||

oder

bull Stichwort||URL (Internetadresse)||eventuell ein kurzer Beschreibungstext

wobei auf den Beschreibungstext auch verzichtet werden kann Die sogenannten bdquoPipe-Zeichenldquo (||)

dienen als Feldtrenner Sie erzeugen sie uumlber den Tastaturbefehl bdquoAltGr amp das Groumlszligerzeichenldquo

Wahlweise kopieren Sie die entsprechenden Zeichen aus bisherigen Eintraumlgen

Auch hier gilt Tragen Sie interne Links in Ihrer A-Z-Liste bitte als relative Verknuumlpfungen ohne

Verweis auf den Webserver der Universitaumlt ein also

bull Abiturjahrgang 2013||doppelter_abiturjahrgang||

anstelle von

bull Abiturjahrgang 2013||httpwwwuni-duededoppelter_abiturjahrgang||

Externe Links (wie etwa bdquoGlassbooth ||httpwwwglassboothde||ldquo) werden auf der

ausgegebenen Webseite entsprechend gekennzeichnet

S e i t e | 25

Die Eintraumlge im Modul bdquoA-Z verwaltenldquo sortiert das Content Management System automatisch nach

Ziffernreihenfolge bzw dem Alphabet Um die Eintraumlge spaumlter einfach aufzufinden und bearbeiten zu

koumlnnen empfiehlt es sich jedoch bereits im Eingabefeld selbst eine alphabetische Sortierung

vorzunehmen

64 Code editieren PHP-Skript HTML-Web-Seite

Das Modul bdquoCode editierenldquo eroumlffnet Ihnen die Moumlglichkeit in Ihrem Internetauftritt eigene PHP-

oder HTML-Codeschnipsel zu erstellen und zu nutzen oder Programmierungen eigener Funktionen

vorzunehmen

Nutzen Sie dieses Modul bitte nicht um Funktionen zu simulieren die Ihnen das CMS IMPERIA bereits

als vorgefertigte Module zur Verfuumlgung stellt Das freie Code-Eingabefeld ist ebenfalls nicht dazu

S e i t e | 26

vorgesehen auf diesem Wege vom Corporate Design der Universitaumlt abweichende eigene Layouts zu

entwickeln

65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

Uumlber das Modul bdquoCodebaustein einfuumlgenldquo ist es moumlglich vorgefertigte Bloumlcke oder bdquoBauteileldquo in Ihre

Webseite zu integrieren Codebausteine eignen sich dazu bestimmte Informationen die auf vielen

Webseiten wiederkehren an einer Stelle zentral zu pflegen In der Bearbeitungsebene bietet Ihnen

das Modul die in der aktuellen Rubrik vorhandenen Bausteine zur Auswahl an

Codebausteine erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 27

Sie koumlnnen in Codebausteinen wie beim uumlblichen Seitenaufbau gewohnt unterschiedliche Module

kombinieren und positionieren Zur Verfuumlgung stehen die Elemente

bull (TinyMCE)-Texteditor

bull Code editieren

bull die Formularmodule

bull Randlose Grafik

bull RSS-Feed-Agent

bull Tube Audio-VideoPlayer

Eine spaumltere Bearbeitung der Codebausteine ist im CMS IMPERIA nicht uumlber das Tool bdquoQuickEditldquo

moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo

im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichniscode_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Codebausteine im

selben Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

66 DBAdmin PHP-Skript

Mit Hilfe des Moduls bdquoDBAdminldquo lassen sich Datenbank direkt in Tabellenform auf Ihrer Webseite

darstellen Uumlber die Funktion bdquoOptionen anzeigenldquo erhalten Sie zudem die Moumlglichkeit eine

Webseite zur Pflege Ihrer Datenbank zu erstellen Dort koumlnnen Sie die entsprechende Tabelle

editieren d h Eintraumlge einzeln erstellen bearbeiten oder loumlschen

S e i t e | 28

Zur Nutzung dieses Moduls sind folgende Angaben notwendig

bull Datenbank-Server Name oder IP-Adresse des Servers auf dem die anzusprechende

Datenbank liegt (bspw bdquodbuni-duedeldquo)

bull Datenbank-Name

bull Tabellen-Name Name der speziellen Tabelle die innerhalb der Datenbank angesprochen

werden soll

bull Datenbank-Benutzer und Datenbank-Passwort

Datenbanken auf einem UDE-Server koumlnnen Universitaumltsangehoumlrige unter Nutzung ihrer

Hochschulkennung online beim Zentrum fuumlr Informations- und Mediendienste (ZIM) beantragen

unter httpwwwuni-duedezimserviceshomepagesmysqlshtml

67 Doppelcontainer PHP-Skript HTML-Web-Seite

Das Modul bdquoDoppelcontainerldquo ermoumlglicht es Ihnen auf Ihrer Webseite zwei Textebloumlcke (je nach

Wunsch mit oder ohne Bilder) nebeneinander zu setzen

Auf zweispaltig angelegten Webseiten ist die Anlage eines Doppelcontainers nur in der linken Spalte

moumlglich Bilder erscheinen dort in einer Breite von 246 Pixeln Auf einspaltig angelegten Webseiten

werden die einzelnen Bloumlcke (und dementsprechend die verwendeten Bilder) in einer Breite von 366

Pixeln angezeigt Die Bildhoumlhe ist in beiden Faumlllen frei waumlhlbar sollte jedoch in beiden Containern

identisch sein

S e i t e | 29

Zur Texteingabe stehen Ihnen die Optionen bdquoTeaserldquo (mit Zeichenbegrenzung) sowie bdquoStandardldquo

(ohne Zeichenbegrenzung) zur Verfuumlgung Waumlhlen Sie bdquoTeaserldquo so erhalten Sie Platz fuumlr 300 Zeichen

ndash ein Zeichenzaumlhler neben der Texteingabe-Box erleichtert das Mitzaumlhlen Der Text wird gelb

unterlegt wenn er nach dem naumlchsten Leerzeichen abgeschnitten wird Rot erscheint das Textfeld

wenn die Zeichenzahl bereits uumlberschritten wurde

Beachten Sie bitte dass das Modul HTML-Tags (URLs Mailadressen etc) automatisch filtert Sie

werden daher nicht angezeigt Um Ihren Text zu verlinken koumlnnen Sie das Eingabefeld bdquoMehr-Linkldquo

nutzen

Beide Bloumlcke innerhalb eines Doppelcontainers lassen sich individuell auf die uumlbliche Weise (weiszlig

hellblau sandfarben) hinterlegen

S e i t e | 30

68 Flickr nutzen PHP-Skript

Das Modul bdquoFlickr nutzenldquo ermoumlglicht es Ihnen im Sinne einer crossmedialen Verwertung Bilder aus

Ihrem Flickr-Account in Ihre IMPERIA-Webseite einzubinden Fuumlr diese Funktion benoumltigen Sie einen

sogenannten API-Key den Sie in Ihrem Flick-Auftritt unter

bull httpwwwflickrcomservicesappscreateapply

erzeugen lassen koumlnnen Tragen Sie dann diesen Key in die entsprechende Eingabemaske des Moduls

ein Anschlieszligend haben Sie die Moumlglichkeit ganze Fotosets (Alben) oder Einzelbilder einzubinden

Photoset anzeigen

S e i t e | 31

Zum Anzeigen von Photosets wird die entsprechende Photoset-ID ins Modul eingetragen Diese ID ist

Teil der Link-Adresse des entsprechenden Albums bei Flickr (die erscheint wenn Sie das Album

angeklickt haben) Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAMEsets12340954909

Die Photoset-ID verbirgt sich hinter den Ziffern am Ende der URL Sie koumlnnen auswaumlhlen wie viele

Fotos auf einer Webseite erscheinen sollen Dafuumlr uumlbernimmt das Modul die Bilder in der

quadratischen Aufloumlsung von Flickr also in einer Groumlszlige von 75 x 75 Pixeln Reicht der Platz dafuumlr

nicht aus wird eine zusaumltzliche Blaumltterfunktion angeboten Photoset- und Bild-Beschreibungen

koumlnnen aus dem Flickr-Account automatisch uumlbernommen werden wenn die entsprechenden

Optionen mit einem Haken aktiviert wurden

Einzelbild anzeigen

Um ein einzelnes Bild anzuzeigen benoumltigen Sie die entsprechen Flickr-Foto-ID Diese verbirgt sich

hinter der ersten Zahl in der Link-Adresse des entsprechenden Bildes Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAME5841603851inset-72157626981464896

Ein Einzelbild kann in einer hohen oder einer geringen Aufloumlsung eingebunden werden Bei einer

zweispaltig angelegten Webseite wird das Bild in der linken Inhaltsspalte auf eine Breite von 480

Pixel bei einer einspaltig angelegten Webseite auf eine Breite von 721 Pixel skaliert

69 Formulare

Mit IMPERIA haben Sie die Moumlglichkeit Formulare auf Ihrer Webseite zu platzieren In der

Bearbeitungsebene Ihrer Seite finden Sie im Bereich bdquoNeues Modulldquo den Menupunkt UDE ndash

Formular oumlffnen

Nach dem Festlegen der Hintergrundfarbe koumlnnen Sie im Bereich bdquoLegendeldquo den Titel Ihres

Formulars waumlhlen Wenn Sie die Funktion bdquoMailer-Funktionalitaumltldquo aktivieren koumlnnen Sie die Adresse

Ihres Mailscripts eingeben Anderenfalls belassen Sie es bitte beim Vorgabewert

Im Bereich bdquoNexturlldquo kann angegeben werden welche Seite nach dem Abschicken des Formulars

aufgerufen werden soll Daruumlber hinaus werden der Titel der E-Mail die Absender-Adresse sowie die

Empfaumlnger-Adresse definiert Optional kann eine Bestaumltigungs-E-Mail mit frei waumlhlbarem Text

versendet werden

S e i t e | 32

Um dem erstellten Formular Eingabefelder hinzuzufuumlgen ist das Modul bdquoUDE Formular Elementldquo zu

waumlhlen Waumlhlen Sie das Element bdquoTextldquo um ein Eingabefeld zu erzeugen Die Option bdquoBezeichnerldquo

beschreibt den sichtbaren Text im fertigen Formular zum Beispiel bdquoIhr Nameldquo Weitergehend koumlnnen

Sie die zulaumlssigen Inhalte der Nutzereingaben definieren sowie markieren ob das Element ein

Pflichtfeld sein soll

S e i t e | 33

Um ein Texteingabefeld innerhalb des Formulars zu erzeugen waumlhlen Sie das Element bdquoTextarealdquo

Sie koumlnnen die Groumlszlige des Textfeldes definieren (Zeilen x Spalten) und optional erneut eine Pruumlfung

zulaumlssiger Nutzereingaben aktivieren Weiterhin koumlnnen Sie waumlhlen ob der eingegebene Wert des

Formularelements in die Datenbank eingetragen werden soll Wenn Sie fuumlr Ihre Formulare auf eine

Datenbank zuruumlckgreifen moumlchten koumlnnen Sie sich hier informieren httpwwwuni-

duedezimserviceshomepagesmysqlshtml

Insgesamt stehen folgende Elemente zur Verfuumlgung

bull Checkbox Hidden Password Select Anfang Select Option einfuumlgen Select Ende Submit

Text Datum Textarea Radio Reset Leerzeile Kommentarzeile Neuer Abschnitt mit

Bezeichner sowie Datei-Upload

Ein Formular muss mit dem Modul bdquoUDE Formular schlieszligenldquo abgeschlossen werden An dieser

Stelle koumlnnen Sie einen Send-Button hinzufuumlgen dessen Name frei waumlhlbar ist Der eingegebene Text

wird als Beschriftung des Buttons angezeigt Erst durch das Hinzufuumlgen dieses Moduls wird das

Formular auf Ihrer Seite sichtbar und kann nach der Veroumlffentlichung genutzt werden

S e i t e | 34

610 Google-Maps (v30) PHP-Skript HTML-Web-Seite

Dieses Modul bringt eine Grafik von Google-Maps auf die Webseite entweder in Kartenoptik oder als

Satellitenbild Sie haben zwei Moumlglichkeiten eine solche zu generieren Uumlber die konkreten GPS-

Koordinaten oder durch das Angeben einer Adresse (zB Forsthausweg 2 47057 Duisburg) Sie

koumlnnen aus zwoumllf Vergroumlszligerungsstufen fuumlr den gewuumlnschten Ausschnitt zwei Kartengroumlszligen und

zwei Kartenformaten waumlhlen

S e i t e | 35

Kartengroumlszlige bdquogroszligldquo skaliert die Graphik auf 480 Pixel Breite auf einer zweispaltigen Seite bzw auf

721 Pixel auf einer einspaltigen Seite Die Option bdquokleinldquo verringert die Breite auf etwa die Haumllfte Die

beiden Optionen beim Kartenformat beeinflussen die Houmlhe der Grafik

S e i t e | 36

611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite

Das Modul Image-Gallery ermoumlglicht die Integration einer komfortablen Bildergallerie uumlber IMPERIA

Per Klick auf bdquoNeues Modulldquo -gt bdquoUDE Image-Gallery (v21)ldquo kann die entsprechende Gallerie an der

gewuumlnschten Position eingefuumlgt werden Generell sollten nur Bilder verwendet werden die

entweder auf 640 x 480 Pixel oder maximal auf 900 x 600 Pixel skaliert sind Aufgrund einer hohen

Dateigroumlszlige sollten Bilder einer Digitalkamera vor dem Upload komprimiert werden

Innerhalb des Moduls kann zunaumlchst die Hintergrundfarbe der Gallerie wahlweise zwischen Beige

Blau und Weiszlig eingestellt werden Um die Gallerie mit Bildern zu fuumlllen ist das entsprechende

Verzeichnis der Mediendatenbank anzugeben Aufgrund der geaumlnderten Syntax wird das Verzeichnis

ohne images angegeben Die Suchmaske fuumlr die Bilderauswahl deklariert die Dateiformate die mit

einbezogen werden sollen Schlieszliglich koumlnnen Sie die Bilder alphabetisch sortiert anzeigen lassen

sowie einen kleinen und einen groszligen Titel fuumlr Ihre Bildergallerie vergeben

Grundsaumltzlich ist es empfehlenswert groumlszligere Bildmengen auf mehrere Seiten zu verteilen um

einerseits die Darstellung auf mobilen Geraumlten zu vereinfachen und andererseits geringeren

Bandbreiten Rechnung zu tragen

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 13: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 12

52 Die Zielgruppennavigation

Eine individuelle Zielgruppennavigation in der Kopfzeile Ihrer Webseite erstellen Sie uumlber das

IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

Die editierte und veroumlffentlichte Zielgruppennavigation erscheint automatisch auf allen Seiten Ihres

Verzeichnisses

Tragen Sie bitte auch dort die Verknuumlpfungen als relative Links ohne Verweis auf den Webserver der

Universitaumlt ein Verwenden Sie dieses Instrument auszligerdem bitte nicht als moumlgliche zusaumltzliche

Quernavigation sondern ausschlieszliglich als Hilfe und zur Verlinkung gruppenspezifischer

Informationsaufarbeitung

Auch die spaumltere Bearbeitung der Zielgruppennavigation ist im CMS IMPERIA nicht uumlber das Tool

bdquoQuickEditldquo moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente

bearbeitenldquo im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Zielgruppennavigation lautet

ihrverzeichnistargetsshtml

S e i t e | 13

Beachten Sie beim Import bitte Folgendes Anders als seit Beginn des Wintersemesters 2007

gehandhabt kann mit dem UDE-Webrelaunch im Oktober 2011 pro Verzeichnis nur noch eine

anstelle von zwei Zielgruppennavigationen erstellt werden die zudem automatisch in Ihrer Webseite

eingesetzt wird In Verzeichnissen die zwischen 2007 und 2011 angelegt wurden existiert oft

(zusaumltzlich oder ausschlieszliglich) eine sogenannte bdquoerweiterte Zielgruppennavigationldquo

(ihrverzeichnisetargetsshtml) Der Webserver der Universitaumlt sucht bei der Ausgabe Ihrer

Internetseiten im ersten Schritt nach der Datei bdquotargetsshtmlldquo im zweiten Schritt nach der Datei

bdquoetargetsshtmlldquo in Ihrem Verzeichnis und gibt die Zielgruppennavigation dieser Prioritaumlt nach aus

Fehlen beide Dateien so erscheinen die entsprechenden Inhalte des zentralen Angebotes der

Universitaumlt

53 Die Navigation

Navigationen in der linken Spalte Ihrer Webseite sind maximal zwei Ebenen tief

bull In der ersten Ebene ist die Schrift in Versalien (Groszligbuchstaben) gesetzt Schreiben Sie Ihre

Links bitte dennoch bdquonormalldquo Die Transformation in Groszligbuchstaben erfolgt automatisch

durch das System Die Navigationspunkte der ersten Ebene sind mit einem blauen Rechteck

versehen das am linken Seitenrand anliegt

bull Die zweite Navigationsebene erscheint in der Ausgabe nach rechts geruumlckt und regulaumlr in

Groszlig- und Kleinschreibung gesetzt

Links in Navigationen veraumlndern sich beim Uumlberfahren mit der Maus bzw beim Antabben auf

Touchpads Die Schrift erscheint dann weiszlig auf einem blauen Hintergrund Das Gleiche gilt fuumlr den

jeweils aktiven Menuumlpunkt Dieser ist in der Navigation dauerhaft weiszlig mit blauer Hinterlegung

Navigationen erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 14

Zum Aufbau Ihrer Navigation stehen Ihnen die Module bdquoNavigationslinkldquo und

bdquoNavigationsuntermenuumlldquo zur Verfuumlgung Ein Navigationslink erscheint einzeln auf der ersten Ebene

versehen mit einem vorgelagerten blauen Rechteck Mit dem Navigationsuntermenuuml koumlnnen Sie

Menuumlpunkte erzeugen die neben dieser ersten Position uumlber eine zweite eingeruumlckte Ebene

verfuumlgen Dort lassen sich beliebig viele Unterpunkte einsetzen Je nachdem ob Sie den

uumlbergeordneten Eintrag im Navigationsuntermenuuml mit einer Zieladresse (URL) versehen erscheint

dieser verlinkt oder als einfache Uumlberschrift uumlber die nachgelagerten Inhaltspunkte

Selbstverstaumlndlich lassen sich die einzelnen Einheiten in ihrer Position jederzeit verschieben Tragen

Sie interne Links in Ihren Navigationen bitte als relative Verknuumlpfungen ohne Verweis auf den

Webserver der Universitaumlt ein

Editierte und veroumlffentlichte Navigation erscheinen innerhalb der Rubrik in der sie angelegt wurden

automatisch zur Auswahl im linken Bereich der Bearbeitungsebene Ihrer Webseite

Die spaumltere Bearbeitung von Navigationen ist im CMS IMPERIA auf zwei Wegen moumlglich Die

entsprechende Datei kann zum einen uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo im

IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Navigationen folgt folgendem Muster

ihrverzeichnisnav_12345shtml

S e i t e | 15

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Navigationen im selben

Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

Zum anderen koumlnnen Sie auch aus der Bearbeitungsebene einer Webseite heraus dort ausgewaumlhlte

Navigationen aufrufen und editieren Beachten Sie jedoch dass nach dem Speichern der

bearbeiteten Navigation sowohl die Navigationsdatei als auch die Datei der Ursprungsseite auf Ihrem

Schreibtisch liegen

6 Webseiten gestalten

Fuumlr die Gestaltung Ihres Inhalts steht Ihnen eine groszlige Anzahl statischer wie dynamischer Elemente

(Module) zur Verfuumlgung Welche Elemente Sie im Einzelnen nutzen koumlnnen haumlngt davon ab welchen

Dateityp Sie bei der Dokumentenerzeugung fuumlr Ihre Webseite waumlhlen Das Content Management

System der Hochschule bietet Ihnen die Moumlglichkeit Ihr Dokument als HTML-Web-Seite oder als

PHP-Skript zu erzeugen Beachten Sie bitte von Anfang an dass diese Auswahl Einfluss auf die URL

(Internetadresse) der jeweiligen Seite hat Bei einer nachtraumlglichen Aumlnderung aumlndert sich auch die

Internetadresse unter der Ihre Seite im Netz zu finden ist Sie muumlssen dann eventuell Verlinkungen

an vielen Stellen aumlndern

bull Internetadresse einer HTML-Web-Seite wwwuni-duedebereichihreseiteshtml

bull Internetadresse eines PHP-Skripts wwwuni-duedebereichihreseitephp

Je nachdem ob Sie Ihr Dokument als HTML-Web-Seite oder als PHP-Skript erzeugen koumlnnen Sie

folgende Elemente nutzen

Linke Spalte des Inhaltsbereiches

bull (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

bull A-Z verwalten PHP-Skript HTML-Web-Seite

bull Code editieren PHP-Skript HTML-Web-Seite

bull Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

bull DBAdmin PHP-Skript

bull Doppelcontainer PHP-Skript HTML-Web-Seite

bull Flickr nutzen PHP-Skript

bull Formular schlieszligen PHP-Skript

bull Formular oumlffnen PHP-Skript

S e i t e | 16

bull Formular Element PHP-Skript

bull Formulareingabe in DB speichern PHP-Skript

bull Google-Maps (v30) PHP-Skript HTML-Web-Seite

bull Image-Gallery (v21) PHP-Skript HTML-Web-Seite

bull Mailinglisten PHP-Skript

bull Mitarbeiter-Liste PHP-Skript

bull Mitarbeiter-Publikationsliste PHP-Skript

bull Mitarbeiter-Seite PHP-Skript

bull Randlose Grafik PHP-Skript HTML-Web-Seite

bull RSS-Feed-Administration PHP-Skript

bull RSS-Feed-Agent PHP-Skript

bull Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

bull Veranstaltungskalender Kalendermodul PHP-Skript

bull Veranstaltungskalender Veranstaltungsmodul PHP-Skript

Rechte Spalte des Inhaltsbereiches

bull (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

bull Code editieren PHP-Skript HTML-Web-Seite

bull Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

bull Flickr nutzen PHP-Skript

bull Mitarbeiter-Seite PHP-Skript

bull Randlose Grafik PHP-Skript HTML-Web-Seite

bull RSS-Feed-Agent PHP-Skript

bull Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

bull Veranstaltungskalender Kalendermodul PHP-Skript

Beim Erstellen Ihrer Webseite koumlnnen Sie diese einzelnen Module nach Bedarf (auch mehrfach)

erzeugen und in der gewuumlnschten Reihenfolge platzieren wobei die gewaumlhlte Reihenfolge jederzeit

veraumlnderbar ist Mit wenigen Ausnahmen lassen sich die einzelnen Einheiten weiszlig blau oder beige

einfaumlrben (Ausnahme randlose Grafik) Sie werden vom System dann als voneinander abgesetzte

Bloumlcke ausgegeben

Um innerhalb eines Dokuments zu navigieren koumlnnen Sie wenn noumltig die einzelnen Elemente auch

mit einem Link-Anker versehen (Ausnahmen randlose Grafik Mitarbeiter-Liste -Publikationsliste

und ndashSeite Veranstaltungskalender Veranstaltungs- sowie Kalendermodul) Den Ankernamen

S e i t e | 17

koumlnnen Sie frei vergeben er darf jedoch keine Leer- oder Sonderzeichen enthalten Das erste Zeichen

muss auszligerdem ein Buchstabe sein

61 Uumlber allem Die Brotkrumennavigation

Zwischen Seitentitel und ndashinhalt koumlnnen Sie auf jeder Seite eine individuelle Brotkrumennavigation

editieren die den Nutzern eine schnelle Uumlbersicht daruumlber ermoumlglicht wie sie auf die gerade

aufgerufene Webseite gelangt sind Verwenden Sie dieses Instrument bitte nicht als moumlgliche

zusaumltzliche Quernavigation sondern ausschlieszliglich als Hilfe im vorgesehenen Sinne

Der letzte Eintrag der Brotkrumennavigation der uumlblicherweise die aktuell aufgerufene Seite

benennt sollte nicht mit einer Zieladresse (URL) versehen werden Der Eintrag erscheint dann als

regulaumlr schwarz formatierter Text nicht als blau ausgezeichneter Link

S e i t e | 18

62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

Mit dem TinyMCE-Texteditor stellt Ihnen das Content Management System der UDE einen auf

JavaScript basierenden WYSIWYG-Editor (bdquoWhat You See Is What You Getldquo) zur Verfuumlgung Mit Hilfe

dieses Moduls ist es moumlglich ohne HTML- oder weitergehende Programmierkenntnisse Beitraumlge zu

verfassen und Seiten zu formatieren Die Bedienung mittels einer Textbox orientiert sich stark an

gaumlngiger und bekannter Textverarbeitungs-Software

Texte formatieren

Selbstverstaumlndlich bietet der TinyMCE-Editor die uumlblichen Arten Texte zu formatieren Neben den

Befehlen fett (bdquoBoldldquo) kursiv (bdquoItalicldquo) unterstrichen (bdquoUnderlineldquo) sowie hoch- bzw tiefgestellt

bietet Ihnen das System uumlber das Ω-Symbol eine breite Palette an Sonderzeichen uumlber die

Listenfunktion die Erstellung einfacher oder nummerierter Aufzaumlhlungslisten an Mittels einer Select-

S e i t e | 19

Box koumlnnen Sie auszligerdem auf im Hochschullayout vorgegebene Uumlberschriftarten (bdquoHeadingsldquo)

zuruumlckgreifen

Als weitere Moumlglichkeiten steht Ihnen frei

bull ein Datum undoder eine Uhrzeit einzufuumlgen

bull Blockzitate zu kennzeichnen oder

bull geschuumltzte Leerzeichen (bdquoNon-breaking Space Characterldquo) zu definieren

bull Das Ankersymbol (bdquoInsertEdit Anchorldquo) erlaubt die Definition von Sprungzielen innerhalb

laumlngerer Texte

Im Notfall hilft Ihnen das Radiergummi-Symbol (bdquoRemove Formatting) saumlmtliche Formatierungen zu

entfernen

Bereits formatierten Text einfuumlgen

Uumlber diese Formatierungsarten hinaus koumlnnen Sie auch bereits vorformatierte Texte aus Ihrer

Textverarbeitung in den Editor kopieren Zum Einfuumlgen nutzen Sie jedoch bitte nicht den einfachen

Copy amp Paste-Befehl sondern die im Modul bereitgestellte Funktion bdquoPaste from Wordldquo (Sie finden

das entsprechende bdquoWldquo-Symbol unter der Texteingabe-Box) ndash und zwar auch dann wenn Ihr

Ursprungstext nicht aus Microsoft Word sondern einer anderen Textverarbeitungssoftware

importiert wird Schriftformatierungen Verlinkungen und Aumlhnliches werden dann 11 uumlbernommen

Achten Sie bitte dennoch darauf dass dieser Funktion Grenzen gesetzt sind und arbeiten Sie mit

moumlglichst einfachen Formatvorlagen

HTML-Ansicht

Fuumlr Redakteure die sich in der Seitenprogrammierung sicherer fuumlhlen als in der Textverarbeitung

haumllt das Modul TinyMCE-Texteditor uumlber den Button bdquoHTMLldquo einen HTML Source Editor bereit mit

dem direkt auf den Quelltext und die Codierung dieses Teils der Webseite zugegriffen werden kann

Diese Funktion eignet sich auszligerdem besonders zur Uumlberpruumlfung und Fehlersuche Zur

Programmierung eigener Funktionen nutzen Sie jedoch bitte das Modul bdquoCode editierenldquo

S e i t e | 20

Links

Die uumlber die Symbole bdquoInsertEdit Linkldquo (Link einfuumlgen oder bearbeiten) in Ihre Texte oder

Aufzaumlhlungslisten eingefuumlgten Hyperlinks formatiert das System selbststaumlndig im fuumlr die UDE

vorgesehehen Layout Tragen Sie Links auf Seiten innerhalb von wwwuni-duede bitte als relative

Verknuumlpfungen ohne Verweis auf den Webserver der Universitaumlt ein also

bull depresse

anstelle von

bull httpwwwuni-duededepresseindexphp

Zeichnen sie auszligerdem Ihre Verlinkungen im Sinne der Barrierefreiheit mit sprechenden Titeln aus

und uumlberlegen Sie sich ob das Sprungziel im selben oder in einem neuen Browserfenster geoumlffnet

werden soll

Uumlber das Symbol bdquoUnlinkldquo entfernen Sie die entsprechende Verlinkung

Bilder

Der TinyMCE-Texteditor bietet Ihnen zwei Moumlglichkeiten Bilder in Ihre Texte einzubinden

S e i t e | 21

bull Uumlber die Funktion bdquoInsertEdit Imageldquo (Icon unter der Texteingabe-Box) koumlnnen Sie den

relativen Pfad auf das entsprechende Bild aus der IMPERIA-Mediendatenbank einfuumlgen

(Formatbeispiel imperiamdimageswebredaktion2013parentservicejpg)

bull Die Funktion bdquoVorschaubild waumlhlenldquo laumlsst Sie direkt auf die IMPERIA-Mediendatenbank

zugreifen und dort die gewuumlnschte Grafik per Klick auswaumlhlen Uumlber die Funktion bdquoVollbild

waumlhlenldquo koumlnnen Sie das Bild optional zu einer groumlszligeren Ansicht verlinken die sich als

bdquoLightboxldquo uumlber der aktiven Webseite oumlffnet Der Befehl bdquoBild zuruumlcksetzenldquo entfernt die

gewaumlhlte Grafik aus Ihrer Webseite

Waumlhrend Sie mittels bdquoInsertEdit Imageldquo die Anzeige-Groumlszlige Ihres Bildes (bis maximal 480 Pixel

Breite) selbst bestimmen koumlnnen werden Grafiken uumlber die Funktion bdquoVorschaubild waumlhlenldquo beim

Einfuumlgen automatisch auf die passende Groumlszlige skaliert (162 Pixel Breite in der linken und 204 Pixel

Breite in der rechten Content-Spalte) In diesem Fall koumlnnen Sie zudem waumlhlen ob der Text an dieser

Stelle das Bild umflieszligt oder aber rechts daneben angezeigt wird Das Vollbild wird bei der Eingabe

nicht skaliert Nutzen Sie daher bitte Bilder mit einer bildschirmtauglichen Groumlszlige (maximal 1024

Pixel)

S e i t e | 22

Tabellen

Uumlber das Icon bdquoInsertEdit Tableldquo fuumlgen Sie an der gewuumlnschten Stelle Tabellen in Ihren Texteditor

ein Unter den Reitern bdquoGeneralldquo und bdquoAdvancedldquo koumlnnen Sie diese Tabellen gemaumlszlig den uumlblichen

HTML-Konventionen erstellen formatieren und bearbeiten

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig gemaumlszlig den Vorgaben der Barrierefreiheit als

solche aus Der Text-Editor stellt Ihnen diese Optionen zur Verfuumlgung

bull Beachten Sie dass die Hintergrundfarbe der Tabellen je nach gewaumlhlter Einfaumlrbung des

Moduls variiert

S e i t e | 23

Texte mit bdquoVerfallsdatumldquo

Grundsaumltzlich steht Ihnen das Modul bdquo(TinyMCE)-Texteditorldquo sowohl auf shtml-Seiten als auch in

php-Skripten zur Verfuumlgung Auf php-Seiten laumlsst sich jedoch eine zusaumltzliche Option nutzen Fuumlr

Texte die nur fuumlr einen gewissen Zeitraum auf Ihrer Webseite erscheinen sollen koumlnnen Sie ein

Start- und Enddatum setzen

63 A-Z verwalten PHP-Skript HTML-Web-Seite

Das Modul bdquoA-Z verwaltenldquo ermoumlglicht den Redakteuren A-Z-Listen relativ einfach zu erzeugen und

zu pflegen

S e i t e | 24

Fuumlr jeden Eintrag in der Stichwortliste muss im Eingabefeld eine einzelne Zeile eingefuumlgt werden Die

Eingabe folgt einem festen Schema

bull Stichwort||URL (Internetadresse)||

oder

bull Stichwort||URL (Internetadresse)||eventuell ein kurzer Beschreibungstext

wobei auf den Beschreibungstext auch verzichtet werden kann Die sogenannten bdquoPipe-Zeichenldquo (||)

dienen als Feldtrenner Sie erzeugen sie uumlber den Tastaturbefehl bdquoAltGr amp das Groumlszligerzeichenldquo

Wahlweise kopieren Sie die entsprechenden Zeichen aus bisherigen Eintraumlgen

Auch hier gilt Tragen Sie interne Links in Ihrer A-Z-Liste bitte als relative Verknuumlpfungen ohne

Verweis auf den Webserver der Universitaumlt ein also

bull Abiturjahrgang 2013||doppelter_abiturjahrgang||

anstelle von

bull Abiturjahrgang 2013||httpwwwuni-duededoppelter_abiturjahrgang||

Externe Links (wie etwa bdquoGlassbooth ||httpwwwglassboothde||ldquo) werden auf der

ausgegebenen Webseite entsprechend gekennzeichnet

S e i t e | 25

Die Eintraumlge im Modul bdquoA-Z verwaltenldquo sortiert das Content Management System automatisch nach

Ziffernreihenfolge bzw dem Alphabet Um die Eintraumlge spaumlter einfach aufzufinden und bearbeiten zu

koumlnnen empfiehlt es sich jedoch bereits im Eingabefeld selbst eine alphabetische Sortierung

vorzunehmen

64 Code editieren PHP-Skript HTML-Web-Seite

Das Modul bdquoCode editierenldquo eroumlffnet Ihnen die Moumlglichkeit in Ihrem Internetauftritt eigene PHP-

oder HTML-Codeschnipsel zu erstellen und zu nutzen oder Programmierungen eigener Funktionen

vorzunehmen

Nutzen Sie dieses Modul bitte nicht um Funktionen zu simulieren die Ihnen das CMS IMPERIA bereits

als vorgefertigte Module zur Verfuumlgung stellt Das freie Code-Eingabefeld ist ebenfalls nicht dazu

S e i t e | 26

vorgesehen auf diesem Wege vom Corporate Design der Universitaumlt abweichende eigene Layouts zu

entwickeln

65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

Uumlber das Modul bdquoCodebaustein einfuumlgenldquo ist es moumlglich vorgefertigte Bloumlcke oder bdquoBauteileldquo in Ihre

Webseite zu integrieren Codebausteine eignen sich dazu bestimmte Informationen die auf vielen

Webseiten wiederkehren an einer Stelle zentral zu pflegen In der Bearbeitungsebene bietet Ihnen

das Modul die in der aktuellen Rubrik vorhandenen Bausteine zur Auswahl an

Codebausteine erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 27

Sie koumlnnen in Codebausteinen wie beim uumlblichen Seitenaufbau gewohnt unterschiedliche Module

kombinieren und positionieren Zur Verfuumlgung stehen die Elemente

bull (TinyMCE)-Texteditor

bull Code editieren

bull die Formularmodule

bull Randlose Grafik

bull RSS-Feed-Agent

bull Tube Audio-VideoPlayer

Eine spaumltere Bearbeitung der Codebausteine ist im CMS IMPERIA nicht uumlber das Tool bdquoQuickEditldquo

moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo

im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichniscode_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Codebausteine im

selben Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

66 DBAdmin PHP-Skript

Mit Hilfe des Moduls bdquoDBAdminldquo lassen sich Datenbank direkt in Tabellenform auf Ihrer Webseite

darstellen Uumlber die Funktion bdquoOptionen anzeigenldquo erhalten Sie zudem die Moumlglichkeit eine

Webseite zur Pflege Ihrer Datenbank zu erstellen Dort koumlnnen Sie die entsprechende Tabelle

editieren d h Eintraumlge einzeln erstellen bearbeiten oder loumlschen

S e i t e | 28

Zur Nutzung dieses Moduls sind folgende Angaben notwendig

bull Datenbank-Server Name oder IP-Adresse des Servers auf dem die anzusprechende

Datenbank liegt (bspw bdquodbuni-duedeldquo)

bull Datenbank-Name

bull Tabellen-Name Name der speziellen Tabelle die innerhalb der Datenbank angesprochen

werden soll

bull Datenbank-Benutzer und Datenbank-Passwort

Datenbanken auf einem UDE-Server koumlnnen Universitaumltsangehoumlrige unter Nutzung ihrer

Hochschulkennung online beim Zentrum fuumlr Informations- und Mediendienste (ZIM) beantragen

unter httpwwwuni-duedezimserviceshomepagesmysqlshtml

67 Doppelcontainer PHP-Skript HTML-Web-Seite

Das Modul bdquoDoppelcontainerldquo ermoumlglicht es Ihnen auf Ihrer Webseite zwei Textebloumlcke (je nach

Wunsch mit oder ohne Bilder) nebeneinander zu setzen

Auf zweispaltig angelegten Webseiten ist die Anlage eines Doppelcontainers nur in der linken Spalte

moumlglich Bilder erscheinen dort in einer Breite von 246 Pixeln Auf einspaltig angelegten Webseiten

werden die einzelnen Bloumlcke (und dementsprechend die verwendeten Bilder) in einer Breite von 366

Pixeln angezeigt Die Bildhoumlhe ist in beiden Faumlllen frei waumlhlbar sollte jedoch in beiden Containern

identisch sein

S e i t e | 29

Zur Texteingabe stehen Ihnen die Optionen bdquoTeaserldquo (mit Zeichenbegrenzung) sowie bdquoStandardldquo

(ohne Zeichenbegrenzung) zur Verfuumlgung Waumlhlen Sie bdquoTeaserldquo so erhalten Sie Platz fuumlr 300 Zeichen

ndash ein Zeichenzaumlhler neben der Texteingabe-Box erleichtert das Mitzaumlhlen Der Text wird gelb

unterlegt wenn er nach dem naumlchsten Leerzeichen abgeschnitten wird Rot erscheint das Textfeld

wenn die Zeichenzahl bereits uumlberschritten wurde

Beachten Sie bitte dass das Modul HTML-Tags (URLs Mailadressen etc) automatisch filtert Sie

werden daher nicht angezeigt Um Ihren Text zu verlinken koumlnnen Sie das Eingabefeld bdquoMehr-Linkldquo

nutzen

Beide Bloumlcke innerhalb eines Doppelcontainers lassen sich individuell auf die uumlbliche Weise (weiszlig

hellblau sandfarben) hinterlegen

S e i t e | 30

68 Flickr nutzen PHP-Skript

Das Modul bdquoFlickr nutzenldquo ermoumlglicht es Ihnen im Sinne einer crossmedialen Verwertung Bilder aus

Ihrem Flickr-Account in Ihre IMPERIA-Webseite einzubinden Fuumlr diese Funktion benoumltigen Sie einen

sogenannten API-Key den Sie in Ihrem Flick-Auftritt unter

bull httpwwwflickrcomservicesappscreateapply

erzeugen lassen koumlnnen Tragen Sie dann diesen Key in die entsprechende Eingabemaske des Moduls

ein Anschlieszligend haben Sie die Moumlglichkeit ganze Fotosets (Alben) oder Einzelbilder einzubinden

Photoset anzeigen

S e i t e | 31

Zum Anzeigen von Photosets wird die entsprechende Photoset-ID ins Modul eingetragen Diese ID ist

Teil der Link-Adresse des entsprechenden Albums bei Flickr (die erscheint wenn Sie das Album

angeklickt haben) Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAMEsets12340954909

Die Photoset-ID verbirgt sich hinter den Ziffern am Ende der URL Sie koumlnnen auswaumlhlen wie viele

Fotos auf einer Webseite erscheinen sollen Dafuumlr uumlbernimmt das Modul die Bilder in der

quadratischen Aufloumlsung von Flickr also in einer Groumlszlige von 75 x 75 Pixeln Reicht der Platz dafuumlr

nicht aus wird eine zusaumltzliche Blaumltterfunktion angeboten Photoset- und Bild-Beschreibungen

koumlnnen aus dem Flickr-Account automatisch uumlbernommen werden wenn die entsprechenden

Optionen mit einem Haken aktiviert wurden

Einzelbild anzeigen

Um ein einzelnes Bild anzuzeigen benoumltigen Sie die entsprechen Flickr-Foto-ID Diese verbirgt sich

hinter der ersten Zahl in der Link-Adresse des entsprechenden Bildes Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAME5841603851inset-72157626981464896

Ein Einzelbild kann in einer hohen oder einer geringen Aufloumlsung eingebunden werden Bei einer

zweispaltig angelegten Webseite wird das Bild in der linken Inhaltsspalte auf eine Breite von 480

Pixel bei einer einspaltig angelegten Webseite auf eine Breite von 721 Pixel skaliert

69 Formulare

Mit IMPERIA haben Sie die Moumlglichkeit Formulare auf Ihrer Webseite zu platzieren In der

Bearbeitungsebene Ihrer Seite finden Sie im Bereich bdquoNeues Modulldquo den Menupunkt UDE ndash

Formular oumlffnen

Nach dem Festlegen der Hintergrundfarbe koumlnnen Sie im Bereich bdquoLegendeldquo den Titel Ihres

Formulars waumlhlen Wenn Sie die Funktion bdquoMailer-Funktionalitaumltldquo aktivieren koumlnnen Sie die Adresse

Ihres Mailscripts eingeben Anderenfalls belassen Sie es bitte beim Vorgabewert

Im Bereich bdquoNexturlldquo kann angegeben werden welche Seite nach dem Abschicken des Formulars

aufgerufen werden soll Daruumlber hinaus werden der Titel der E-Mail die Absender-Adresse sowie die

Empfaumlnger-Adresse definiert Optional kann eine Bestaumltigungs-E-Mail mit frei waumlhlbarem Text

versendet werden

S e i t e | 32

Um dem erstellten Formular Eingabefelder hinzuzufuumlgen ist das Modul bdquoUDE Formular Elementldquo zu

waumlhlen Waumlhlen Sie das Element bdquoTextldquo um ein Eingabefeld zu erzeugen Die Option bdquoBezeichnerldquo

beschreibt den sichtbaren Text im fertigen Formular zum Beispiel bdquoIhr Nameldquo Weitergehend koumlnnen

Sie die zulaumlssigen Inhalte der Nutzereingaben definieren sowie markieren ob das Element ein

Pflichtfeld sein soll

S e i t e | 33

Um ein Texteingabefeld innerhalb des Formulars zu erzeugen waumlhlen Sie das Element bdquoTextarealdquo

Sie koumlnnen die Groumlszlige des Textfeldes definieren (Zeilen x Spalten) und optional erneut eine Pruumlfung

zulaumlssiger Nutzereingaben aktivieren Weiterhin koumlnnen Sie waumlhlen ob der eingegebene Wert des

Formularelements in die Datenbank eingetragen werden soll Wenn Sie fuumlr Ihre Formulare auf eine

Datenbank zuruumlckgreifen moumlchten koumlnnen Sie sich hier informieren httpwwwuni-

duedezimserviceshomepagesmysqlshtml

Insgesamt stehen folgende Elemente zur Verfuumlgung

bull Checkbox Hidden Password Select Anfang Select Option einfuumlgen Select Ende Submit

Text Datum Textarea Radio Reset Leerzeile Kommentarzeile Neuer Abschnitt mit

Bezeichner sowie Datei-Upload

Ein Formular muss mit dem Modul bdquoUDE Formular schlieszligenldquo abgeschlossen werden An dieser

Stelle koumlnnen Sie einen Send-Button hinzufuumlgen dessen Name frei waumlhlbar ist Der eingegebene Text

wird als Beschriftung des Buttons angezeigt Erst durch das Hinzufuumlgen dieses Moduls wird das

Formular auf Ihrer Seite sichtbar und kann nach der Veroumlffentlichung genutzt werden

S e i t e | 34

610 Google-Maps (v30) PHP-Skript HTML-Web-Seite

Dieses Modul bringt eine Grafik von Google-Maps auf die Webseite entweder in Kartenoptik oder als

Satellitenbild Sie haben zwei Moumlglichkeiten eine solche zu generieren Uumlber die konkreten GPS-

Koordinaten oder durch das Angeben einer Adresse (zB Forsthausweg 2 47057 Duisburg) Sie

koumlnnen aus zwoumllf Vergroumlszligerungsstufen fuumlr den gewuumlnschten Ausschnitt zwei Kartengroumlszligen und

zwei Kartenformaten waumlhlen

S e i t e | 35

Kartengroumlszlige bdquogroszligldquo skaliert die Graphik auf 480 Pixel Breite auf einer zweispaltigen Seite bzw auf

721 Pixel auf einer einspaltigen Seite Die Option bdquokleinldquo verringert die Breite auf etwa die Haumllfte Die

beiden Optionen beim Kartenformat beeinflussen die Houmlhe der Grafik

S e i t e | 36

611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite

Das Modul Image-Gallery ermoumlglicht die Integration einer komfortablen Bildergallerie uumlber IMPERIA

Per Klick auf bdquoNeues Modulldquo -gt bdquoUDE Image-Gallery (v21)ldquo kann die entsprechende Gallerie an der

gewuumlnschten Position eingefuumlgt werden Generell sollten nur Bilder verwendet werden die

entweder auf 640 x 480 Pixel oder maximal auf 900 x 600 Pixel skaliert sind Aufgrund einer hohen

Dateigroumlszlige sollten Bilder einer Digitalkamera vor dem Upload komprimiert werden

Innerhalb des Moduls kann zunaumlchst die Hintergrundfarbe der Gallerie wahlweise zwischen Beige

Blau und Weiszlig eingestellt werden Um die Gallerie mit Bildern zu fuumlllen ist das entsprechende

Verzeichnis der Mediendatenbank anzugeben Aufgrund der geaumlnderten Syntax wird das Verzeichnis

ohne images angegeben Die Suchmaske fuumlr die Bilderauswahl deklariert die Dateiformate die mit

einbezogen werden sollen Schlieszliglich koumlnnen Sie die Bilder alphabetisch sortiert anzeigen lassen

sowie einen kleinen und einen groszligen Titel fuumlr Ihre Bildergallerie vergeben

Grundsaumltzlich ist es empfehlenswert groumlszligere Bildmengen auf mehrere Seiten zu verteilen um

einerseits die Darstellung auf mobilen Geraumlten zu vereinfachen und andererseits geringeren

Bandbreiten Rechnung zu tragen

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 14: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 13

Beachten Sie beim Import bitte Folgendes Anders als seit Beginn des Wintersemesters 2007

gehandhabt kann mit dem UDE-Webrelaunch im Oktober 2011 pro Verzeichnis nur noch eine

anstelle von zwei Zielgruppennavigationen erstellt werden die zudem automatisch in Ihrer Webseite

eingesetzt wird In Verzeichnissen die zwischen 2007 und 2011 angelegt wurden existiert oft

(zusaumltzlich oder ausschlieszliglich) eine sogenannte bdquoerweiterte Zielgruppennavigationldquo

(ihrverzeichnisetargetsshtml) Der Webserver der Universitaumlt sucht bei der Ausgabe Ihrer

Internetseiten im ersten Schritt nach der Datei bdquotargetsshtmlldquo im zweiten Schritt nach der Datei

bdquoetargetsshtmlldquo in Ihrem Verzeichnis und gibt die Zielgruppennavigation dieser Prioritaumlt nach aus

Fehlen beide Dateien so erscheinen die entsprechenden Inhalte des zentralen Angebotes der

Universitaumlt

53 Die Navigation

Navigationen in der linken Spalte Ihrer Webseite sind maximal zwei Ebenen tief

bull In der ersten Ebene ist die Schrift in Versalien (Groszligbuchstaben) gesetzt Schreiben Sie Ihre

Links bitte dennoch bdquonormalldquo Die Transformation in Groszligbuchstaben erfolgt automatisch

durch das System Die Navigationspunkte der ersten Ebene sind mit einem blauen Rechteck

versehen das am linken Seitenrand anliegt

bull Die zweite Navigationsebene erscheint in der Ausgabe nach rechts geruumlckt und regulaumlr in

Groszlig- und Kleinschreibung gesetzt

Links in Navigationen veraumlndern sich beim Uumlberfahren mit der Maus bzw beim Antabben auf

Touchpads Die Schrift erscheint dann weiszlig auf einem blauen Hintergrund Das Gleiche gilt fuumlr den

jeweils aktiven Menuumlpunkt Dieser ist in der Navigation dauerhaft weiszlig mit blauer Hinterlegung

Navigationen erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 14

Zum Aufbau Ihrer Navigation stehen Ihnen die Module bdquoNavigationslinkldquo und

bdquoNavigationsuntermenuumlldquo zur Verfuumlgung Ein Navigationslink erscheint einzeln auf der ersten Ebene

versehen mit einem vorgelagerten blauen Rechteck Mit dem Navigationsuntermenuuml koumlnnen Sie

Menuumlpunkte erzeugen die neben dieser ersten Position uumlber eine zweite eingeruumlckte Ebene

verfuumlgen Dort lassen sich beliebig viele Unterpunkte einsetzen Je nachdem ob Sie den

uumlbergeordneten Eintrag im Navigationsuntermenuuml mit einer Zieladresse (URL) versehen erscheint

dieser verlinkt oder als einfache Uumlberschrift uumlber die nachgelagerten Inhaltspunkte

Selbstverstaumlndlich lassen sich die einzelnen Einheiten in ihrer Position jederzeit verschieben Tragen

Sie interne Links in Ihren Navigationen bitte als relative Verknuumlpfungen ohne Verweis auf den

Webserver der Universitaumlt ein

Editierte und veroumlffentlichte Navigation erscheinen innerhalb der Rubrik in der sie angelegt wurden

automatisch zur Auswahl im linken Bereich der Bearbeitungsebene Ihrer Webseite

Die spaumltere Bearbeitung von Navigationen ist im CMS IMPERIA auf zwei Wegen moumlglich Die

entsprechende Datei kann zum einen uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo im

IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Navigationen folgt folgendem Muster

ihrverzeichnisnav_12345shtml

S e i t e | 15

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Navigationen im selben

Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

Zum anderen koumlnnen Sie auch aus der Bearbeitungsebene einer Webseite heraus dort ausgewaumlhlte

Navigationen aufrufen und editieren Beachten Sie jedoch dass nach dem Speichern der

bearbeiteten Navigation sowohl die Navigationsdatei als auch die Datei der Ursprungsseite auf Ihrem

Schreibtisch liegen

6 Webseiten gestalten

Fuumlr die Gestaltung Ihres Inhalts steht Ihnen eine groszlige Anzahl statischer wie dynamischer Elemente

(Module) zur Verfuumlgung Welche Elemente Sie im Einzelnen nutzen koumlnnen haumlngt davon ab welchen

Dateityp Sie bei der Dokumentenerzeugung fuumlr Ihre Webseite waumlhlen Das Content Management

System der Hochschule bietet Ihnen die Moumlglichkeit Ihr Dokument als HTML-Web-Seite oder als

PHP-Skript zu erzeugen Beachten Sie bitte von Anfang an dass diese Auswahl Einfluss auf die URL

(Internetadresse) der jeweiligen Seite hat Bei einer nachtraumlglichen Aumlnderung aumlndert sich auch die

Internetadresse unter der Ihre Seite im Netz zu finden ist Sie muumlssen dann eventuell Verlinkungen

an vielen Stellen aumlndern

bull Internetadresse einer HTML-Web-Seite wwwuni-duedebereichihreseiteshtml

bull Internetadresse eines PHP-Skripts wwwuni-duedebereichihreseitephp

Je nachdem ob Sie Ihr Dokument als HTML-Web-Seite oder als PHP-Skript erzeugen koumlnnen Sie

folgende Elemente nutzen

Linke Spalte des Inhaltsbereiches

bull (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

bull A-Z verwalten PHP-Skript HTML-Web-Seite

bull Code editieren PHP-Skript HTML-Web-Seite

bull Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

bull DBAdmin PHP-Skript

bull Doppelcontainer PHP-Skript HTML-Web-Seite

bull Flickr nutzen PHP-Skript

bull Formular schlieszligen PHP-Skript

bull Formular oumlffnen PHP-Skript

S e i t e | 16

bull Formular Element PHP-Skript

bull Formulareingabe in DB speichern PHP-Skript

bull Google-Maps (v30) PHP-Skript HTML-Web-Seite

bull Image-Gallery (v21) PHP-Skript HTML-Web-Seite

bull Mailinglisten PHP-Skript

bull Mitarbeiter-Liste PHP-Skript

bull Mitarbeiter-Publikationsliste PHP-Skript

bull Mitarbeiter-Seite PHP-Skript

bull Randlose Grafik PHP-Skript HTML-Web-Seite

bull RSS-Feed-Administration PHP-Skript

bull RSS-Feed-Agent PHP-Skript

bull Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

bull Veranstaltungskalender Kalendermodul PHP-Skript

bull Veranstaltungskalender Veranstaltungsmodul PHP-Skript

Rechte Spalte des Inhaltsbereiches

bull (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

bull Code editieren PHP-Skript HTML-Web-Seite

bull Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

bull Flickr nutzen PHP-Skript

bull Mitarbeiter-Seite PHP-Skript

bull Randlose Grafik PHP-Skript HTML-Web-Seite

bull RSS-Feed-Agent PHP-Skript

bull Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

bull Veranstaltungskalender Kalendermodul PHP-Skript

Beim Erstellen Ihrer Webseite koumlnnen Sie diese einzelnen Module nach Bedarf (auch mehrfach)

erzeugen und in der gewuumlnschten Reihenfolge platzieren wobei die gewaumlhlte Reihenfolge jederzeit

veraumlnderbar ist Mit wenigen Ausnahmen lassen sich die einzelnen Einheiten weiszlig blau oder beige

einfaumlrben (Ausnahme randlose Grafik) Sie werden vom System dann als voneinander abgesetzte

Bloumlcke ausgegeben

Um innerhalb eines Dokuments zu navigieren koumlnnen Sie wenn noumltig die einzelnen Elemente auch

mit einem Link-Anker versehen (Ausnahmen randlose Grafik Mitarbeiter-Liste -Publikationsliste

und ndashSeite Veranstaltungskalender Veranstaltungs- sowie Kalendermodul) Den Ankernamen

S e i t e | 17

koumlnnen Sie frei vergeben er darf jedoch keine Leer- oder Sonderzeichen enthalten Das erste Zeichen

muss auszligerdem ein Buchstabe sein

61 Uumlber allem Die Brotkrumennavigation

Zwischen Seitentitel und ndashinhalt koumlnnen Sie auf jeder Seite eine individuelle Brotkrumennavigation

editieren die den Nutzern eine schnelle Uumlbersicht daruumlber ermoumlglicht wie sie auf die gerade

aufgerufene Webseite gelangt sind Verwenden Sie dieses Instrument bitte nicht als moumlgliche

zusaumltzliche Quernavigation sondern ausschlieszliglich als Hilfe im vorgesehenen Sinne

Der letzte Eintrag der Brotkrumennavigation der uumlblicherweise die aktuell aufgerufene Seite

benennt sollte nicht mit einer Zieladresse (URL) versehen werden Der Eintrag erscheint dann als

regulaumlr schwarz formatierter Text nicht als blau ausgezeichneter Link

S e i t e | 18

62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

Mit dem TinyMCE-Texteditor stellt Ihnen das Content Management System der UDE einen auf

JavaScript basierenden WYSIWYG-Editor (bdquoWhat You See Is What You Getldquo) zur Verfuumlgung Mit Hilfe

dieses Moduls ist es moumlglich ohne HTML- oder weitergehende Programmierkenntnisse Beitraumlge zu

verfassen und Seiten zu formatieren Die Bedienung mittels einer Textbox orientiert sich stark an

gaumlngiger und bekannter Textverarbeitungs-Software

Texte formatieren

Selbstverstaumlndlich bietet der TinyMCE-Editor die uumlblichen Arten Texte zu formatieren Neben den

Befehlen fett (bdquoBoldldquo) kursiv (bdquoItalicldquo) unterstrichen (bdquoUnderlineldquo) sowie hoch- bzw tiefgestellt

bietet Ihnen das System uumlber das Ω-Symbol eine breite Palette an Sonderzeichen uumlber die

Listenfunktion die Erstellung einfacher oder nummerierter Aufzaumlhlungslisten an Mittels einer Select-

S e i t e | 19

Box koumlnnen Sie auszligerdem auf im Hochschullayout vorgegebene Uumlberschriftarten (bdquoHeadingsldquo)

zuruumlckgreifen

Als weitere Moumlglichkeiten steht Ihnen frei

bull ein Datum undoder eine Uhrzeit einzufuumlgen

bull Blockzitate zu kennzeichnen oder

bull geschuumltzte Leerzeichen (bdquoNon-breaking Space Characterldquo) zu definieren

bull Das Ankersymbol (bdquoInsertEdit Anchorldquo) erlaubt die Definition von Sprungzielen innerhalb

laumlngerer Texte

Im Notfall hilft Ihnen das Radiergummi-Symbol (bdquoRemove Formatting) saumlmtliche Formatierungen zu

entfernen

Bereits formatierten Text einfuumlgen

Uumlber diese Formatierungsarten hinaus koumlnnen Sie auch bereits vorformatierte Texte aus Ihrer

Textverarbeitung in den Editor kopieren Zum Einfuumlgen nutzen Sie jedoch bitte nicht den einfachen

Copy amp Paste-Befehl sondern die im Modul bereitgestellte Funktion bdquoPaste from Wordldquo (Sie finden

das entsprechende bdquoWldquo-Symbol unter der Texteingabe-Box) ndash und zwar auch dann wenn Ihr

Ursprungstext nicht aus Microsoft Word sondern einer anderen Textverarbeitungssoftware

importiert wird Schriftformatierungen Verlinkungen und Aumlhnliches werden dann 11 uumlbernommen

Achten Sie bitte dennoch darauf dass dieser Funktion Grenzen gesetzt sind und arbeiten Sie mit

moumlglichst einfachen Formatvorlagen

HTML-Ansicht

Fuumlr Redakteure die sich in der Seitenprogrammierung sicherer fuumlhlen als in der Textverarbeitung

haumllt das Modul TinyMCE-Texteditor uumlber den Button bdquoHTMLldquo einen HTML Source Editor bereit mit

dem direkt auf den Quelltext und die Codierung dieses Teils der Webseite zugegriffen werden kann

Diese Funktion eignet sich auszligerdem besonders zur Uumlberpruumlfung und Fehlersuche Zur

Programmierung eigener Funktionen nutzen Sie jedoch bitte das Modul bdquoCode editierenldquo

S e i t e | 20

Links

Die uumlber die Symbole bdquoInsertEdit Linkldquo (Link einfuumlgen oder bearbeiten) in Ihre Texte oder

Aufzaumlhlungslisten eingefuumlgten Hyperlinks formatiert das System selbststaumlndig im fuumlr die UDE

vorgesehehen Layout Tragen Sie Links auf Seiten innerhalb von wwwuni-duede bitte als relative

Verknuumlpfungen ohne Verweis auf den Webserver der Universitaumlt ein also

bull depresse

anstelle von

bull httpwwwuni-duededepresseindexphp

Zeichnen sie auszligerdem Ihre Verlinkungen im Sinne der Barrierefreiheit mit sprechenden Titeln aus

und uumlberlegen Sie sich ob das Sprungziel im selben oder in einem neuen Browserfenster geoumlffnet

werden soll

Uumlber das Symbol bdquoUnlinkldquo entfernen Sie die entsprechende Verlinkung

Bilder

Der TinyMCE-Texteditor bietet Ihnen zwei Moumlglichkeiten Bilder in Ihre Texte einzubinden

S e i t e | 21

bull Uumlber die Funktion bdquoInsertEdit Imageldquo (Icon unter der Texteingabe-Box) koumlnnen Sie den

relativen Pfad auf das entsprechende Bild aus der IMPERIA-Mediendatenbank einfuumlgen

(Formatbeispiel imperiamdimageswebredaktion2013parentservicejpg)

bull Die Funktion bdquoVorschaubild waumlhlenldquo laumlsst Sie direkt auf die IMPERIA-Mediendatenbank

zugreifen und dort die gewuumlnschte Grafik per Klick auswaumlhlen Uumlber die Funktion bdquoVollbild

waumlhlenldquo koumlnnen Sie das Bild optional zu einer groumlszligeren Ansicht verlinken die sich als

bdquoLightboxldquo uumlber der aktiven Webseite oumlffnet Der Befehl bdquoBild zuruumlcksetzenldquo entfernt die

gewaumlhlte Grafik aus Ihrer Webseite

Waumlhrend Sie mittels bdquoInsertEdit Imageldquo die Anzeige-Groumlszlige Ihres Bildes (bis maximal 480 Pixel

Breite) selbst bestimmen koumlnnen werden Grafiken uumlber die Funktion bdquoVorschaubild waumlhlenldquo beim

Einfuumlgen automatisch auf die passende Groumlszlige skaliert (162 Pixel Breite in der linken und 204 Pixel

Breite in der rechten Content-Spalte) In diesem Fall koumlnnen Sie zudem waumlhlen ob der Text an dieser

Stelle das Bild umflieszligt oder aber rechts daneben angezeigt wird Das Vollbild wird bei der Eingabe

nicht skaliert Nutzen Sie daher bitte Bilder mit einer bildschirmtauglichen Groumlszlige (maximal 1024

Pixel)

S e i t e | 22

Tabellen

Uumlber das Icon bdquoInsertEdit Tableldquo fuumlgen Sie an der gewuumlnschten Stelle Tabellen in Ihren Texteditor

ein Unter den Reitern bdquoGeneralldquo und bdquoAdvancedldquo koumlnnen Sie diese Tabellen gemaumlszlig den uumlblichen

HTML-Konventionen erstellen formatieren und bearbeiten

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig gemaumlszlig den Vorgaben der Barrierefreiheit als

solche aus Der Text-Editor stellt Ihnen diese Optionen zur Verfuumlgung

bull Beachten Sie dass die Hintergrundfarbe der Tabellen je nach gewaumlhlter Einfaumlrbung des

Moduls variiert

S e i t e | 23

Texte mit bdquoVerfallsdatumldquo

Grundsaumltzlich steht Ihnen das Modul bdquo(TinyMCE)-Texteditorldquo sowohl auf shtml-Seiten als auch in

php-Skripten zur Verfuumlgung Auf php-Seiten laumlsst sich jedoch eine zusaumltzliche Option nutzen Fuumlr

Texte die nur fuumlr einen gewissen Zeitraum auf Ihrer Webseite erscheinen sollen koumlnnen Sie ein

Start- und Enddatum setzen

63 A-Z verwalten PHP-Skript HTML-Web-Seite

Das Modul bdquoA-Z verwaltenldquo ermoumlglicht den Redakteuren A-Z-Listen relativ einfach zu erzeugen und

zu pflegen

S e i t e | 24

Fuumlr jeden Eintrag in der Stichwortliste muss im Eingabefeld eine einzelne Zeile eingefuumlgt werden Die

Eingabe folgt einem festen Schema

bull Stichwort||URL (Internetadresse)||

oder

bull Stichwort||URL (Internetadresse)||eventuell ein kurzer Beschreibungstext

wobei auf den Beschreibungstext auch verzichtet werden kann Die sogenannten bdquoPipe-Zeichenldquo (||)

dienen als Feldtrenner Sie erzeugen sie uumlber den Tastaturbefehl bdquoAltGr amp das Groumlszligerzeichenldquo

Wahlweise kopieren Sie die entsprechenden Zeichen aus bisherigen Eintraumlgen

Auch hier gilt Tragen Sie interne Links in Ihrer A-Z-Liste bitte als relative Verknuumlpfungen ohne

Verweis auf den Webserver der Universitaumlt ein also

bull Abiturjahrgang 2013||doppelter_abiturjahrgang||

anstelle von

bull Abiturjahrgang 2013||httpwwwuni-duededoppelter_abiturjahrgang||

Externe Links (wie etwa bdquoGlassbooth ||httpwwwglassboothde||ldquo) werden auf der

ausgegebenen Webseite entsprechend gekennzeichnet

S e i t e | 25

Die Eintraumlge im Modul bdquoA-Z verwaltenldquo sortiert das Content Management System automatisch nach

Ziffernreihenfolge bzw dem Alphabet Um die Eintraumlge spaumlter einfach aufzufinden und bearbeiten zu

koumlnnen empfiehlt es sich jedoch bereits im Eingabefeld selbst eine alphabetische Sortierung

vorzunehmen

64 Code editieren PHP-Skript HTML-Web-Seite

Das Modul bdquoCode editierenldquo eroumlffnet Ihnen die Moumlglichkeit in Ihrem Internetauftritt eigene PHP-

oder HTML-Codeschnipsel zu erstellen und zu nutzen oder Programmierungen eigener Funktionen

vorzunehmen

Nutzen Sie dieses Modul bitte nicht um Funktionen zu simulieren die Ihnen das CMS IMPERIA bereits

als vorgefertigte Module zur Verfuumlgung stellt Das freie Code-Eingabefeld ist ebenfalls nicht dazu

S e i t e | 26

vorgesehen auf diesem Wege vom Corporate Design der Universitaumlt abweichende eigene Layouts zu

entwickeln

65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

Uumlber das Modul bdquoCodebaustein einfuumlgenldquo ist es moumlglich vorgefertigte Bloumlcke oder bdquoBauteileldquo in Ihre

Webseite zu integrieren Codebausteine eignen sich dazu bestimmte Informationen die auf vielen

Webseiten wiederkehren an einer Stelle zentral zu pflegen In der Bearbeitungsebene bietet Ihnen

das Modul die in der aktuellen Rubrik vorhandenen Bausteine zur Auswahl an

Codebausteine erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 27

Sie koumlnnen in Codebausteinen wie beim uumlblichen Seitenaufbau gewohnt unterschiedliche Module

kombinieren und positionieren Zur Verfuumlgung stehen die Elemente

bull (TinyMCE)-Texteditor

bull Code editieren

bull die Formularmodule

bull Randlose Grafik

bull RSS-Feed-Agent

bull Tube Audio-VideoPlayer

Eine spaumltere Bearbeitung der Codebausteine ist im CMS IMPERIA nicht uumlber das Tool bdquoQuickEditldquo

moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo

im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichniscode_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Codebausteine im

selben Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

66 DBAdmin PHP-Skript

Mit Hilfe des Moduls bdquoDBAdminldquo lassen sich Datenbank direkt in Tabellenform auf Ihrer Webseite

darstellen Uumlber die Funktion bdquoOptionen anzeigenldquo erhalten Sie zudem die Moumlglichkeit eine

Webseite zur Pflege Ihrer Datenbank zu erstellen Dort koumlnnen Sie die entsprechende Tabelle

editieren d h Eintraumlge einzeln erstellen bearbeiten oder loumlschen

S e i t e | 28

Zur Nutzung dieses Moduls sind folgende Angaben notwendig

bull Datenbank-Server Name oder IP-Adresse des Servers auf dem die anzusprechende

Datenbank liegt (bspw bdquodbuni-duedeldquo)

bull Datenbank-Name

bull Tabellen-Name Name der speziellen Tabelle die innerhalb der Datenbank angesprochen

werden soll

bull Datenbank-Benutzer und Datenbank-Passwort

Datenbanken auf einem UDE-Server koumlnnen Universitaumltsangehoumlrige unter Nutzung ihrer

Hochschulkennung online beim Zentrum fuumlr Informations- und Mediendienste (ZIM) beantragen

unter httpwwwuni-duedezimserviceshomepagesmysqlshtml

67 Doppelcontainer PHP-Skript HTML-Web-Seite

Das Modul bdquoDoppelcontainerldquo ermoumlglicht es Ihnen auf Ihrer Webseite zwei Textebloumlcke (je nach

Wunsch mit oder ohne Bilder) nebeneinander zu setzen

Auf zweispaltig angelegten Webseiten ist die Anlage eines Doppelcontainers nur in der linken Spalte

moumlglich Bilder erscheinen dort in einer Breite von 246 Pixeln Auf einspaltig angelegten Webseiten

werden die einzelnen Bloumlcke (und dementsprechend die verwendeten Bilder) in einer Breite von 366

Pixeln angezeigt Die Bildhoumlhe ist in beiden Faumlllen frei waumlhlbar sollte jedoch in beiden Containern

identisch sein

S e i t e | 29

Zur Texteingabe stehen Ihnen die Optionen bdquoTeaserldquo (mit Zeichenbegrenzung) sowie bdquoStandardldquo

(ohne Zeichenbegrenzung) zur Verfuumlgung Waumlhlen Sie bdquoTeaserldquo so erhalten Sie Platz fuumlr 300 Zeichen

ndash ein Zeichenzaumlhler neben der Texteingabe-Box erleichtert das Mitzaumlhlen Der Text wird gelb

unterlegt wenn er nach dem naumlchsten Leerzeichen abgeschnitten wird Rot erscheint das Textfeld

wenn die Zeichenzahl bereits uumlberschritten wurde

Beachten Sie bitte dass das Modul HTML-Tags (URLs Mailadressen etc) automatisch filtert Sie

werden daher nicht angezeigt Um Ihren Text zu verlinken koumlnnen Sie das Eingabefeld bdquoMehr-Linkldquo

nutzen

Beide Bloumlcke innerhalb eines Doppelcontainers lassen sich individuell auf die uumlbliche Weise (weiszlig

hellblau sandfarben) hinterlegen

S e i t e | 30

68 Flickr nutzen PHP-Skript

Das Modul bdquoFlickr nutzenldquo ermoumlglicht es Ihnen im Sinne einer crossmedialen Verwertung Bilder aus

Ihrem Flickr-Account in Ihre IMPERIA-Webseite einzubinden Fuumlr diese Funktion benoumltigen Sie einen

sogenannten API-Key den Sie in Ihrem Flick-Auftritt unter

bull httpwwwflickrcomservicesappscreateapply

erzeugen lassen koumlnnen Tragen Sie dann diesen Key in die entsprechende Eingabemaske des Moduls

ein Anschlieszligend haben Sie die Moumlglichkeit ganze Fotosets (Alben) oder Einzelbilder einzubinden

Photoset anzeigen

S e i t e | 31

Zum Anzeigen von Photosets wird die entsprechende Photoset-ID ins Modul eingetragen Diese ID ist

Teil der Link-Adresse des entsprechenden Albums bei Flickr (die erscheint wenn Sie das Album

angeklickt haben) Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAMEsets12340954909

Die Photoset-ID verbirgt sich hinter den Ziffern am Ende der URL Sie koumlnnen auswaumlhlen wie viele

Fotos auf einer Webseite erscheinen sollen Dafuumlr uumlbernimmt das Modul die Bilder in der

quadratischen Aufloumlsung von Flickr also in einer Groumlszlige von 75 x 75 Pixeln Reicht der Platz dafuumlr

nicht aus wird eine zusaumltzliche Blaumltterfunktion angeboten Photoset- und Bild-Beschreibungen

koumlnnen aus dem Flickr-Account automatisch uumlbernommen werden wenn die entsprechenden

Optionen mit einem Haken aktiviert wurden

Einzelbild anzeigen

Um ein einzelnes Bild anzuzeigen benoumltigen Sie die entsprechen Flickr-Foto-ID Diese verbirgt sich

hinter der ersten Zahl in der Link-Adresse des entsprechenden Bildes Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAME5841603851inset-72157626981464896

Ein Einzelbild kann in einer hohen oder einer geringen Aufloumlsung eingebunden werden Bei einer

zweispaltig angelegten Webseite wird das Bild in der linken Inhaltsspalte auf eine Breite von 480

Pixel bei einer einspaltig angelegten Webseite auf eine Breite von 721 Pixel skaliert

69 Formulare

Mit IMPERIA haben Sie die Moumlglichkeit Formulare auf Ihrer Webseite zu platzieren In der

Bearbeitungsebene Ihrer Seite finden Sie im Bereich bdquoNeues Modulldquo den Menupunkt UDE ndash

Formular oumlffnen

Nach dem Festlegen der Hintergrundfarbe koumlnnen Sie im Bereich bdquoLegendeldquo den Titel Ihres

Formulars waumlhlen Wenn Sie die Funktion bdquoMailer-Funktionalitaumltldquo aktivieren koumlnnen Sie die Adresse

Ihres Mailscripts eingeben Anderenfalls belassen Sie es bitte beim Vorgabewert

Im Bereich bdquoNexturlldquo kann angegeben werden welche Seite nach dem Abschicken des Formulars

aufgerufen werden soll Daruumlber hinaus werden der Titel der E-Mail die Absender-Adresse sowie die

Empfaumlnger-Adresse definiert Optional kann eine Bestaumltigungs-E-Mail mit frei waumlhlbarem Text

versendet werden

S e i t e | 32

Um dem erstellten Formular Eingabefelder hinzuzufuumlgen ist das Modul bdquoUDE Formular Elementldquo zu

waumlhlen Waumlhlen Sie das Element bdquoTextldquo um ein Eingabefeld zu erzeugen Die Option bdquoBezeichnerldquo

beschreibt den sichtbaren Text im fertigen Formular zum Beispiel bdquoIhr Nameldquo Weitergehend koumlnnen

Sie die zulaumlssigen Inhalte der Nutzereingaben definieren sowie markieren ob das Element ein

Pflichtfeld sein soll

S e i t e | 33

Um ein Texteingabefeld innerhalb des Formulars zu erzeugen waumlhlen Sie das Element bdquoTextarealdquo

Sie koumlnnen die Groumlszlige des Textfeldes definieren (Zeilen x Spalten) und optional erneut eine Pruumlfung

zulaumlssiger Nutzereingaben aktivieren Weiterhin koumlnnen Sie waumlhlen ob der eingegebene Wert des

Formularelements in die Datenbank eingetragen werden soll Wenn Sie fuumlr Ihre Formulare auf eine

Datenbank zuruumlckgreifen moumlchten koumlnnen Sie sich hier informieren httpwwwuni-

duedezimserviceshomepagesmysqlshtml

Insgesamt stehen folgende Elemente zur Verfuumlgung

bull Checkbox Hidden Password Select Anfang Select Option einfuumlgen Select Ende Submit

Text Datum Textarea Radio Reset Leerzeile Kommentarzeile Neuer Abschnitt mit

Bezeichner sowie Datei-Upload

Ein Formular muss mit dem Modul bdquoUDE Formular schlieszligenldquo abgeschlossen werden An dieser

Stelle koumlnnen Sie einen Send-Button hinzufuumlgen dessen Name frei waumlhlbar ist Der eingegebene Text

wird als Beschriftung des Buttons angezeigt Erst durch das Hinzufuumlgen dieses Moduls wird das

Formular auf Ihrer Seite sichtbar und kann nach der Veroumlffentlichung genutzt werden

S e i t e | 34

610 Google-Maps (v30) PHP-Skript HTML-Web-Seite

Dieses Modul bringt eine Grafik von Google-Maps auf die Webseite entweder in Kartenoptik oder als

Satellitenbild Sie haben zwei Moumlglichkeiten eine solche zu generieren Uumlber die konkreten GPS-

Koordinaten oder durch das Angeben einer Adresse (zB Forsthausweg 2 47057 Duisburg) Sie

koumlnnen aus zwoumllf Vergroumlszligerungsstufen fuumlr den gewuumlnschten Ausschnitt zwei Kartengroumlszligen und

zwei Kartenformaten waumlhlen

S e i t e | 35

Kartengroumlszlige bdquogroszligldquo skaliert die Graphik auf 480 Pixel Breite auf einer zweispaltigen Seite bzw auf

721 Pixel auf einer einspaltigen Seite Die Option bdquokleinldquo verringert die Breite auf etwa die Haumllfte Die

beiden Optionen beim Kartenformat beeinflussen die Houmlhe der Grafik

S e i t e | 36

611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite

Das Modul Image-Gallery ermoumlglicht die Integration einer komfortablen Bildergallerie uumlber IMPERIA

Per Klick auf bdquoNeues Modulldquo -gt bdquoUDE Image-Gallery (v21)ldquo kann die entsprechende Gallerie an der

gewuumlnschten Position eingefuumlgt werden Generell sollten nur Bilder verwendet werden die

entweder auf 640 x 480 Pixel oder maximal auf 900 x 600 Pixel skaliert sind Aufgrund einer hohen

Dateigroumlszlige sollten Bilder einer Digitalkamera vor dem Upload komprimiert werden

Innerhalb des Moduls kann zunaumlchst die Hintergrundfarbe der Gallerie wahlweise zwischen Beige

Blau und Weiszlig eingestellt werden Um die Gallerie mit Bildern zu fuumlllen ist das entsprechende

Verzeichnis der Mediendatenbank anzugeben Aufgrund der geaumlnderten Syntax wird das Verzeichnis

ohne images angegeben Die Suchmaske fuumlr die Bilderauswahl deklariert die Dateiformate die mit

einbezogen werden sollen Schlieszliglich koumlnnen Sie die Bilder alphabetisch sortiert anzeigen lassen

sowie einen kleinen und einen groszligen Titel fuumlr Ihre Bildergallerie vergeben

Grundsaumltzlich ist es empfehlenswert groumlszligere Bildmengen auf mehrere Seiten zu verteilen um

einerseits die Darstellung auf mobilen Geraumlten zu vereinfachen und andererseits geringeren

Bandbreiten Rechnung zu tragen

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 15: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 14

Zum Aufbau Ihrer Navigation stehen Ihnen die Module bdquoNavigationslinkldquo und

bdquoNavigationsuntermenuumlldquo zur Verfuumlgung Ein Navigationslink erscheint einzeln auf der ersten Ebene

versehen mit einem vorgelagerten blauen Rechteck Mit dem Navigationsuntermenuuml koumlnnen Sie

Menuumlpunkte erzeugen die neben dieser ersten Position uumlber eine zweite eingeruumlckte Ebene

verfuumlgen Dort lassen sich beliebig viele Unterpunkte einsetzen Je nachdem ob Sie den

uumlbergeordneten Eintrag im Navigationsuntermenuuml mit einer Zieladresse (URL) versehen erscheint

dieser verlinkt oder als einfache Uumlberschrift uumlber die nachgelagerten Inhaltspunkte

Selbstverstaumlndlich lassen sich die einzelnen Einheiten in ihrer Position jederzeit verschieben Tragen

Sie interne Links in Ihren Navigationen bitte als relative Verknuumlpfungen ohne Verweis auf den

Webserver der Universitaumlt ein

Editierte und veroumlffentlichte Navigation erscheinen innerhalb der Rubrik in der sie angelegt wurden

automatisch zur Auswahl im linken Bereich der Bearbeitungsebene Ihrer Webseite

Die spaumltere Bearbeitung von Navigationen ist im CMS IMPERIA auf zwei Wegen moumlglich Die

entsprechende Datei kann zum einen uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo im

IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Navigationen folgt folgendem Muster

ihrverzeichnisnav_12345shtml

S e i t e | 15

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Navigationen im selben

Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

Zum anderen koumlnnen Sie auch aus der Bearbeitungsebene einer Webseite heraus dort ausgewaumlhlte

Navigationen aufrufen und editieren Beachten Sie jedoch dass nach dem Speichern der

bearbeiteten Navigation sowohl die Navigationsdatei als auch die Datei der Ursprungsseite auf Ihrem

Schreibtisch liegen

6 Webseiten gestalten

Fuumlr die Gestaltung Ihres Inhalts steht Ihnen eine groszlige Anzahl statischer wie dynamischer Elemente

(Module) zur Verfuumlgung Welche Elemente Sie im Einzelnen nutzen koumlnnen haumlngt davon ab welchen

Dateityp Sie bei der Dokumentenerzeugung fuumlr Ihre Webseite waumlhlen Das Content Management

System der Hochschule bietet Ihnen die Moumlglichkeit Ihr Dokument als HTML-Web-Seite oder als

PHP-Skript zu erzeugen Beachten Sie bitte von Anfang an dass diese Auswahl Einfluss auf die URL

(Internetadresse) der jeweiligen Seite hat Bei einer nachtraumlglichen Aumlnderung aumlndert sich auch die

Internetadresse unter der Ihre Seite im Netz zu finden ist Sie muumlssen dann eventuell Verlinkungen

an vielen Stellen aumlndern

bull Internetadresse einer HTML-Web-Seite wwwuni-duedebereichihreseiteshtml

bull Internetadresse eines PHP-Skripts wwwuni-duedebereichihreseitephp

Je nachdem ob Sie Ihr Dokument als HTML-Web-Seite oder als PHP-Skript erzeugen koumlnnen Sie

folgende Elemente nutzen

Linke Spalte des Inhaltsbereiches

bull (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

bull A-Z verwalten PHP-Skript HTML-Web-Seite

bull Code editieren PHP-Skript HTML-Web-Seite

bull Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

bull DBAdmin PHP-Skript

bull Doppelcontainer PHP-Skript HTML-Web-Seite

bull Flickr nutzen PHP-Skript

bull Formular schlieszligen PHP-Skript

bull Formular oumlffnen PHP-Skript

S e i t e | 16

bull Formular Element PHP-Skript

bull Formulareingabe in DB speichern PHP-Skript

bull Google-Maps (v30) PHP-Skript HTML-Web-Seite

bull Image-Gallery (v21) PHP-Skript HTML-Web-Seite

bull Mailinglisten PHP-Skript

bull Mitarbeiter-Liste PHP-Skript

bull Mitarbeiter-Publikationsliste PHP-Skript

bull Mitarbeiter-Seite PHP-Skript

bull Randlose Grafik PHP-Skript HTML-Web-Seite

bull RSS-Feed-Administration PHP-Skript

bull RSS-Feed-Agent PHP-Skript

bull Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

bull Veranstaltungskalender Kalendermodul PHP-Skript

bull Veranstaltungskalender Veranstaltungsmodul PHP-Skript

Rechte Spalte des Inhaltsbereiches

bull (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

bull Code editieren PHP-Skript HTML-Web-Seite

bull Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

bull Flickr nutzen PHP-Skript

bull Mitarbeiter-Seite PHP-Skript

bull Randlose Grafik PHP-Skript HTML-Web-Seite

bull RSS-Feed-Agent PHP-Skript

bull Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

bull Veranstaltungskalender Kalendermodul PHP-Skript

Beim Erstellen Ihrer Webseite koumlnnen Sie diese einzelnen Module nach Bedarf (auch mehrfach)

erzeugen und in der gewuumlnschten Reihenfolge platzieren wobei die gewaumlhlte Reihenfolge jederzeit

veraumlnderbar ist Mit wenigen Ausnahmen lassen sich die einzelnen Einheiten weiszlig blau oder beige

einfaumlrben (Ausnahme randlose Grafik) Sie werden vom System dann als voneinander abgesetzte

Bloumlcke ausgegeben

Um innerhalb eines Dokuments zu navigieren koumlnnen Sie wenn noumltig die einzelnen Elemente auch

mit einem Link-Anker versehen (Ausnahmen randlose Grafik Mitarbeiter-Liste -Publikationsliste

und ndashSeite Veranstaltungskalender Veranstaltungs- sowie Kalendermodul) Den Ankernamen

S e i t e | 17

koumlnnen Sie frei vergeben er darf jedoch keine Leer- oder Sonderzeichen enthalten Das erste Zeichen

muss auszligerdem ein Buchstabe sein

61 Uumlber allem Die Brotkrumennavigation

Zwischen Seitentitel und ndashinhalt koumlnnen Sie auf jeder Seite eine individuelle Brotkrumennavigation

editieren die den Nutzern eine schnelle Uumlbersicht daruumlber ermoumlglicht wie sie auf die gerade

aufgerufene Webseite gelangt sind Verwenden Sie dieses Instrument bitte nicht als moumlgliche

zusaumltzliche Quernavigation sondern ausschlieszliglich als Hilfe im vorgesehenen Sinne

Der letzte Eintrag der Brotkrumennavigation der uumlblicherweise die aktuell aufgerufene Seite

benennt sollte nicht mit einer Zieladresse (URL) versehen werden Der Eintrag erscheint dann als

regulaumlr schwarz formatierter Text nicht als blau ausgezeichneter Link

S e i t e | 18

62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

Mit dem TinyMCE-Texteditor stellt Ihnen das Content Management System der UDE einen auf

JavaScript basierenden WYSIWYG-Editor (bdquoWhat You See Is What You Getldquo) zur Verfuumlgung Mit Hilfe

dieses Moduls ist es moumlglich ohne HTML- oder weitergehende Programmierkenntnisse Beitraumlge zu

verfassen und Seiten zu formatieren Die Bedienung mittels einer Textbox orientiert sich stark an

gaumlngiger und bekannter Textverarbeitungs-Software

Texte formatieren

Selbstverstaumlndlich bietet der TinyMCE-Editor die uumlblichen Arten Texte zu formatieren Neben den

Befehlen fett (bdquoBoldldquo) kursiv (bdquoItalicldquo) unterstrichen (bdquoUnderlineldquo) sowie hoch- bzw tiefgestellt

bietet Ihnen das System uumlber das Ω-Symbol eine breite Palette an Sonderzeichen uumlber die

Listenfunktion die Erstellung einfacher oder nummerierter Aufzaumlhlungslisten an Mittels einer Select-

S e i t e | 19

Box koumlnnen Sie auszligerdem auf im Hochschullayout vorgegebene Uumlberschriftarten (bdquoHeadingsldquo)

zuruumlckgreifen

Als weitere Moumlglichkeiten steht Ihnen frei

bull ein Datum undoder eine Uhrzeit einzufuumlgen

bull Blockzitate zu kennzeichnen oder

bull geschuumltzte Leerzeichen (bdquoNon-breaking Space Characterldquo) zu definieren

bull Das Ankersymbol (bdquoInsertEdit Anchorldquo) erlaubt die Definition von Sprungzielen innerhalb

laumlngerer Texte

Im Notfall hilft Ihnen das Radiergummi-Symbol (bdquoRemove Formatting) saumlmtliche Formatierungen zu

entfernen

Bereits formatierten Text einfuumlgen

Uumlber diese Formatierungsarten hinaus koumlnnen Sie auch bereits vorformatierte Texte aus Ihrer

Textverarbeitung in den Editor kopieren Zum Einfuumlgen nutzen Sie jedoch bitte nicht den einfachen

Copy amp Paste-Befehl sondern die im Modul bereitgestellte Funktion bdquoPaste from Wordldquo (Sie finden

das entsprechende bdquoWldquo-Symbol unter der Texteingabe-Box) ndash und zwar auch dann wenn Ihr

Ursprungstext nicht aus Microsoft Word sondern einer anderen Textverarbeitungssoftware

importiert wird Schriftformatierungen Verlinkungen und Aumlhnliches werden dann 11 uumlbernommen

Achten Sie bitte dennoch darauf dass dieser Funktion Grenzen gesetzt sind und arbeiten Sie mit

moumlglichst einfachen Formatvorlagen

HTML-Ansicht

Fuumlr Redakteure die sich in der Seitenprogrammierung sicherer fuumlhlen als in der Textverarbeitung

haumllt das Modul TinyMCE-Texteditor uumlber den Button bdquoHTMLldquo einen HTML Source Editor bereit mit

dem direkt auf den Quelltext und die Codierung dieses Teils der Webseite zugegriffen werden kann

Diese Funktion eignet sich auszligerdem besonders zur Uumlberpruumlfung und Fehlersuche Zur

Programmierung eigener Funktionen nutzen Sie jedoch bitte das Modul bdquoCode editierenldquo

S e i t e | 20

Links

Die uumlber die Symbole bdquoInsertEdit Linkldquo (Link einfuumlgen oder bearbeiten) in Ihre Texte oder

Aufzaumlhlungslisten eingefuumlgten Hyperlinks formatiert das System selbststaumlndig im fuumlr die UDE

vorgesehehen Layout Tragen Sie Links auf Seiten innerhalb von wwwuni-duede bitte als relative

Verknuumlpfungen ohne Verweis auf den Webserver der Universitaumlt ein also

bull depresse

anstelle von

bull httpwwwuni-duededepresseindexphp

Zeichnen sie auszligerdem Ihre Verlinkungen im Sinne der Barrierefreiheit mit sprechenden Titeln aus

und uumlberlegen Sie sich ob das Sprungziel im selben oder in einem neuen Browserfenster geoumlffnet

werden soll

Uumlber das Symbol bdquoUnlinkldquo entfernen Sie die entsprechende Verlinkung

Bilder

Der TinyMCE-Texteditor bietet Ihnen zwei Moumlglichkeiten Bilder in Ihre Texte einzubinden

S e i t e | 21

bull Uumlber die Funktion bdquoInsertEdit Imageldquo (Icon unter der Texteingabe-Box) koumlnnen Sie den

relativen Pfad auf das entsprechende Bild aus der IMPERIA-Mediendatenbank einfuumlgen

(Formatbeispiel imperiamdimageswebredaktion2013parentservicejpg)

bull Die Funktion bdquoVorschaubild waumlhlenldquo laumlsst Sie direkt auf die IMPERIA-Mediendatenbank

zugreifen und dort die gewuumlnschte Grafik per Klick auswaumlhlen Uumlber die Funktion bdquoVollbild

waumlhlenldquo koumlnnen Sie das Bild optional zu einer groumlszligeren Ansicht verlinken die sich als

bdquoLightboxldquo uumlber der aktiven Webseite oumlffnet Der Befehl bdquoBild zuruumlcksetzenldquo entfernt die

gewaumlhlte Grafik aus Ihrer Webseite

Waumlhrend Sie mittels bdquoInsertEdit Imageldquo die Anzeige-Groumlszlige Ihres Bildes (bis maximal 480 Pixel

Breite) selbst bestimmen koumlnnen werden Grafiken uumlber die Funktion bdquoVorschaubild waumlhlenldquo beim

Einfuumlgen automatisch auf die passende Groumlszlige skaliert (162 Pixel Breite in der linken und 204 Pixel

Breite in der rechten Content-Spalte) In diesem Fall koumlnnen Sie zudem waumlhlen ob der Text an dieser

Stelle das Bild umflieszligt oder aber rechts daneben angezeigt wird Das Vollbild wird bei der Eingabe

nicht skaliert Nutzen Sie daher bitte Bilder mit einer bildschirmtauglichen Groumlszlige (maximal 1024

Pixel)

S e i t e | 22

Tabellen

Uumlber das Icon bdquoInsertEdit Tableldquo fuumlgen Sie an der gewuumlnschten Stelle Tabellen in Ihren Texteditor

ein Unter den Reitern bdquoGeneralldquo und bdquoAdvancedldquo koumlnnen Sie diese Tabellen gemaumlszlig den uumlblichen

HTML-Konventionen erstellen formatieren und bearbeiten

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig gemaumlszlig den Vorgaben der Barrierefreiheit als

solche aus Der Text-Editor stellt Ihnen diese Optionen zur Verfuumlgung

bull Beachten Sie dass die Hintergrundfarbe der Tabellen je nach gewaumlhlter Einfaumlrbung des

Moduls variiert

S e i t e | 23

Texte mit bdquoVerfallsdatumldquo

Grundsaumltzlich steht Ihnen das Modul bdquo(TinyMCE)-Texteditorldquo sowohl auf shtml-Seiten als auch in

php-Skripten zur Verfuumlgung Auf php-Seiten laumlsst sich jedoch eine zusaumltzliche Option nutzen Fuumlr

Texte die nur fuumlr einen gewissen Zeitraum auf Ihrer Webseite erscheinen sollen koumlnnen Sie ein

Start- und Enddatum setzen

63 A-Z verwalten PHP-Skript HTML-Web-Seite

Das Modul bdquoA-Z verwaltenldquo ermoumlglicht den Redakteuren A-Z-Listen relativ einfach zu erzeugen und

zu pflegen

S e i t e | 24

Fuumlr jeden Eintrag in der Stichwortliste muss im Eingabefeld eine einzelne Zeile eingefuumlgt werden Die

Eingabe folgt einem festen Schema

bull Stichwort||URL (Internetadresse)||

oder

bull Stichwort||URL (Internetadresse)||eventuell ein kurzer Beschreibungstext

wobei auf den Beschreibungstext auch verzichtet werden kann Die sogenannten bdquoPipe-Zeichenldquo (||)

dienen als Feldtrenner Sie erzeugen sie uumlber den Tastaturbefehl bdquoAltGr amp das Groumlszligerzeichenldquo

Wahlweise kopieren Sie die entsprechenden Zeichen aus bisherigen Eintraumlgen

Auch hier gilt Tragen Sie interne Links in Ihrer A-Z-Liste bitte als relative Verknuumlpfungen ohne

Verweis auf den Webserver der Universitaumlt ein also

bull Abiturjahrgang 2013||doppelter_abiturjahrgang||

anstelle von

bull Abiturjahrgang 2013||httpwwwuni-duededoppelter_abiturjahrgang||

Externe Links (wie etwa bdquoGlassbooth ||httpwwwglassboothde||ldquo) werden auf der

ausgegebenen Webseite entsprechend gekennzeichnet

S e i t e | 25

Die Eintraumlge im Modul bdquoA-Z verwaltenldquo sortiert das Content Management System automatisch nach

Ziffernreihenfolge bzw dem Alphabet Um die Eintraumlge spaumlter einfach aufzufinden und bearbeiten zu

koumlnnen empfiehlt es sich jedoch bereits im Eingabefeld selbst eine alphabetische Sortierung

vorzunehmen

64 Code editieren PHP-Skript HTML-Web-Seite

Das Modul bdquoCode editierenldquo eroumlffnet Ihnen die Moumlglichkeit in Ihrem Internetauftritt eigene PHP-

oder HTML-Codeschnipsel zu erstellen und zu nutzen oder Programmierungen eigener Funktionen

vorzunehmen

Nutzen Sie dieses Modul bitte nicht um Funktionen zu simulieren die Ihnen das CMS IMPERIA bereits

als vorgefertigte Module zur Verfuumlgung stellt Das freie Code-Eingabefeld ist ebenfalls nicht dazu

S e i t e | 26

vorgesehen auf diesem Wege vom Corporate Design der Universitaumlt abweichende eigene Layouts zu

entwickeln

65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

Uumlber das Modul bdquoCodebaustein einfuumlgenldquo ist es moumlglich vorgefertigte Bloumlcke oder bdquoBauteileldquo in Ihre

Webseite zu integrieren Codebausteine eignen sich dazu bestimmte Informationen die auf vielen

Webseiten wiederkehren an einer Stelle zentral zu pflegen In der Bearbeitungsebene bietet Ihnen

das Modul die in der aktuellen Rubrik vorhandenen Bausteine zur Auswahl an

Codebausteine erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 27

Sie koumlnnen in Codebausteinen wie beim uumlblichen Seitenaufbau gewohnt unterschiedliche Module

kombinieren und positionieren Zur Verfuumlgung stehen die Elemente

bull (TinyMCE)-Texteditor

bull Code editieren

bull die Formularmodule

bull Randlose Grafik

bull RSS-Feed-Agent

bull Tube Audio-VideoPlayer

Eine spaumltere Bearbeitung der Codebausteine ist im CMS IMPERIA nicht uumlber das Tool bdquoQuickEditldquo

moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo

im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichniscode_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Codebausteine im

selben Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

66 DBAdmin PHP-Skript

Mit Hilfe des Moduls bdquoDBAdminldquo lassen sich Datenbank direkt in Tabellenform auf Ihrer Webseite

darstellen Uumlber die Funktion bdquoOptionen anzeigenldquo erhalten Sie zudem die Moumlglichkeit eine

Webseite zur Pflege Ihrer Datenbank zu erstellen Dort koumlnnen Sie die entsprechende Tabelle

editieren d h Eintraumlge einzeln erstellen bearbeiten oder loumlschen

S e i t e | 28

Zur Nutzung dieses Moduls sind folgende Angaben notwendig

bull Datenbank-Server Name oder IP-Adresse des Servers auf dem die anzusprechende

Datenbank liegt (bspw bdquodbuni-duedeldquo)

bull Datenbank-Name

bull Tabellen-Name Name der speziellen Tabelle die innerhalb der Datenbank angesprochen

werden soll

bull Datenbank-Benutzer und Datenbank-Passwort

Datenbanken auf einem UDE-Server koumlnnen Universitaumltsangehoumlrige unter Nutzung ihrer

Hochschulkennung online beim Zentrum fuumlr Informations- und Mediendienste (ZIM) beantragen

unter httpwwwuni-duedezimserviceshomepagesmysqlshtml

67 Doppelcontainer PHP-Skript HTML-Web-Seite

Das Modul bdquoDoppelcontainerldquo ermoumlglicht es Ihnen auf Ihrer Webseite zwei Textebloumlcke (je nach

Wunsch mit oder ohne Bilder) nebeneinander zu setzen

Auf zweispaltig angelegten Webseiten ist die Anlage eines Doppelcontainers nur in der linken Spalte

moumlglich Bilder erscheinen dort in einer Breite von 246 Pixeln Auf einspaltig angelegten Webseiten

werden die einzelnen Bloumlcke (und dementsprechend die verwendeten Bilder) in einer Breite von 366

Pixeln angezeigt Die Bildhoumlhe ist in beiden Faumlllen frei waumlhlbar sollte jedoch in beiden Containern

identisch sein

S e i t e | 29

Zur Texteingabe stehen Ihnen die Optionen bdquoTeaserldquo (mit Zeichenbegrenzung) sowie bdquoStandardldquo

(ohne Zeichenbegrenzung) zur Verfuumlgung Waumlhlen Sie bdquoTeaserldquo so erhalten Sie Platz fuumlr 300 Zeichen

ndash ein Zeichenzaumlhler neben der Texteingabe-Box erleichtert das Mitzaumlhlen Der Text wird gelb

unterlegt wenn er nach dem naumlchsten Leerzeichen abgeschnitten wird Rot erscheint das Textfeld

wenn die Zeichenzahl bereits uumlberschritten wurde

Beachten Sie bitte dass das Modul HTML-Tags (URLs Mailadressen etc) automatisch filtert Sie

werden daher nicht angezeigt Um Ihren Text zu verlinken koumlnnen Sie das Eingabefeld bdquoMehr-Linkldquo

nutzen

Beide Bloumlcke innerhalb eines Doppelcontainers lassen sich individuell auf die uumlbliche Weise (weiszlig

hellblau sandfarben) hinterlegen

S e i t e | 30

68 Flickr nutzen PHP-Skript

Das Modul bdquoFlickr nutzenldquo ermoumlglicht es Ihnen im Sinne einer crossmedialen Verwertung Bilder aus

Ihrem Flickr-Account in Ihre IMPERIA-Webseite einzubinden Fuumlr diese Funktion benoumltigen Sie einen

sogenannten API-Key den Sie in Ihrem Flick-Auftritt unter

bull httpwwwflickrcomservicesappscreateapply

erzeugen lassen koumlnnen Tragen Sie dann diesen Key in die entsprechende Eingabemaske des Moduls

ein Anschlieszligend haben Sie die Moumlglichkeit ganze Fotosets (Alben) oder Einzelbilder einzubinden

Photoset anzeigen

S e i t e | 31

Zum Anzeigen von Photosets wird die entsprechende Photoset-ID ins Modul eingetragen Diese ID ist

Teil der Link-Adresse des entsprechenden Albums bei Flickr (die erscheint wenn Sie das Album

angeklickt haben) Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAMEsets12340954909

Die Photoset-ID verbirgt sich hinter den Ziffern am Ende der URL Sie koumlnnen auswaumlhlen wie viele

Fotos auf einer Webseite erscheinen sollen Dafuumlr uumlbernimmt das Modul die Bilder in der

quadratischen Aufloumlsung von Flickr also in einer Groumlszlige von 75 x 75 Pixeln Reicht der Platz dafuumlr

nicht aus wird eine zusaumltzliche Blaumltterfunktion angeboten Photoset- und Bild-Beschreibungen

koumlnnen aus dem Flickr-Account automatisch uumlbernommen werden wenn die entsprechenden

Optionen mit einem Haken aktiviert wurden

Einzelbild anzeigen

Um ein einzelnes Bild anzuzeigen benoumltigen Sie die entsprechen Flickr-Foto-ID Diese verbirgt sich

hinter der ersten Zahl in der Link-Adresse des entsprechenden Bildes Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAME5841603851inset-72157626981464896

Ein Einzelbild kann in einer hohen oder einer geringen Aufloumlsung eingebunden werden Bei einer

zweispaltig angelegten Webseite wird das Bild in der linken Inhaltsspalte auf eine Breite von 480

Pixel bei einer einspaltig angelegten Webseite auf eine Breite von 721 Pixel skaliert

69 Formulare

Mit IMPERIA haben Sie die Moumlglichkeit Formulare auf Ihrer Webseite zu platzieren In der

Bearbeitungsebene Ihrer Seite finden Sie im Bereich bdquoNeues Modulldquo den Menupunkt UDE ndash

Formular oumlffnen

Nach dem Festlegen der Hintergrundfarbe koumlnnen Sie im Bereich bdquoLegendeldquo den Titel Ihres

Formulars waumlhlen Wenn Sie die Funktion bdquoMailer-Funktionalitaumltldquo aktivieren koumlnnen Sie die Adresse

Ihres Mailscripts eingeben Anderenfalls belassen Sie es bitte beim Vorgabewert

Im Bereich bdquoNexturlldquo kann angegeben werden welche Seite nach dem Abschicken des Formulars

aufgerufen werden soll Daruumlber hinaus werden der Titel der E-Mail die Absender-Adresse sowie die

Empfaumlnger-Adresse definiert Optional kann eine Bestaumltigungs-E-Mail mit frei waumlhlbarem Text

versendet werden

S e i t e | 32

Um dem erstellten Formular Eingabefelder hinzuzufuumlgen ist das Modul bdquoUDE Formular Elementldquo zu

waumlhlen Waumlhlen Sie das Element bdquoTextldquo um ein Eingabefeld zu erzeugen Die Option bdquoBezeichnerldquo

beschreibt den sichtbaren Text im fertigen Formular zum Beispiel bdquoIhr Nameldquo Weitergehend koumlnnen

Sie die zulaumlssigen Inhalte der Nutzereingaben definieren sowie markieren ob das Element ein

Pflichtfeld sein soll

S e i t e | 33

Um ein Texteingabefeld innerhalb des Formulars zu erzeugen waumlhlen Sie das Element bdquoTextarealdquo

Sie koumlnnen die Groumlszlige des Textfeldes definieren (Zeilen x Spalten) und optional erneut eine Pruumlfung

zulaumlssiger Nutzereingaben aktivieren Weiterhin koumlnnen Sie waumlhlen ob der eingegebene Wert des

Formularelements in die Datenbank eingetragen werden soll Wenn Sie fuumlr Ihre Formulare auf eine

Datenbank zuruumlckgreifen moumlchten koumlnnen Sie sich hier informieren httpwwwuni-

duedezimserviceshomepagesmysqlshtml

Insgesamt stehen folgende Elemente zur Verfuumlgung

bull Checkbox Hidden Password Select Anfang Select Option einfuumlgen Select Ende Submit

Text Datum Textarea Radio Reset Leerzeile Kommentarzeile Neuer Abschnitt mit

Bezeichner sowie Datei-Upload

Ein Formular muss mit dem Modul bdquoUDE Formular schlieszligenldquo abgeschlossen werden An dieser

Stelle koumlnnen Sie einen Send-Button hinzufuumlgen dessen Name frei waumlhlbar ist Der eingegebene Text

wird als Beschriftung des Buttons angezeigt Erst durch das Hinzufuumlgen dieses Moduls wird das

Formular auf Ihrer Seite sichtbar und kann nach der Veroumlffentlichung genutzt werden

S e i t e | 34

610 Google-Maps (v30) PHP-Skript HTML-Web-Seite

Dieses Modul bringt eine Grafik von Google-Maps auf die Webseite entweder in Kartenoptik oder als

Satellitenbild Sie haben zwei Moumlglichkeiten eine solche zu generieren Uumlber die konkreten GPS-

Koordinaten oder durch das Angeben einer Adresse (zB Forsthausweg 2 47057 Duisburg) Sie

koumlnnen aus zwoumllf Vergroumlszligerungsstufen fuumlr den gewuumlnschten Ausschnitt zwei Kartengroumlszligen und

zwei Kartenformaten waumlhlen

S e i t e | 35

Kartengroumlszlige bdquogroszligldquo skaliert die Graphik auf 480 Pixel Breite auf einer zweispaltigen Seite bzw auf

721 Pixel auf einer einspaltigen Seite Die Option bdquokleinldquo verringert die Breite auf etwa die Haumllfte Die

beiden Optionen beim Kartenformat beeinflussen die Houmlhe der Grafik

S e i t e | 36

611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite

Das Modul Image-Gallery ermoumlglicht die Integration einer komfortablen Bildergallerie uumlber IMPERIA

Per Klick auf bdquoNeues Modulldquo -gt bdquoUDE Image-Gallery (v21)ldquo kann die entsprechende Gallerie an der

gewuumlnschten Position eingefuumlgt werden Generell sollten nur Bilder verwendet werden die

entweder auf 640 x 480 Pixel oder maximal auf 900 x 600 Pixel skaliert sind Aufgrund einer hohen

Dateigroumlszlige sollten Bilder einer Digitalkamera vor dem Upload komprimiert werden

Innerhalb des Moduls kann zunaumlchst die Hintergrundfarbe der Gallerie wahlweise zwischen Beige

Blau und Weiszlig eingestellt werden Um die Gallerie mit Bildern zu fuumlllen ist das entsprechende

Verzeichnis der Mediendatenbank anzugeben Aufgrund der geaumlnderten Syntax wird das Verzeichnis

ohne images angegeben Die Suchmaske fuumlr die Bilderauswahl deklariert die Dateiformate die mit

einbezogen werden sollen Schlieszliglich koumlnnen Sie die Bilder alphabetisch sortiert anzeigen lassen

sowie einen kleinen und einen groszligen Titel fuumlr Ihre Bildergallerie vergeben

Grundsaumltzlich ist es empfehlenswert groumlszligere Bildmengen auf mehrere Seiten zu verteilen um

einerseits die Darstellung auf mobilen Geraumlten zu vereinfachen und andererseits geringeren

Bandbreiten Rechnung zu tragen

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 16: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 15

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Navigationen im selben

Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

Zum anderen koumlnnen Sie auch aus der Bearbeitungsebene einer Webseite heraus dort ausgewaumlhlte

Navigationen aufrufen und editieren Beachten Sie jedoch dass nach dem Speichern der

bearbeiteten Navigation sowohl die Navigationsdatei als auch die Datei der Ursprungsseite auf Ihrem

Schreibtisch liegen

6 Webseiten gestalten

Fuumlr die Gestaltung Ihres Inhalts steht Ihnen eine groszlige Anzahl statischer wie dynamischer Elemente

(Module) zur Verfuumlgung Welche Elemente Sie im Einzelnen nutzen koumlnnen haumlngt davon ab welchen

Dateityp Sie bei der Dokumentenerzeugung fuumlr Ihre Webseite waumlhlen Das Content Management

System der Hochschule bietet Ihnen die Moumlglichkeit Ihr Dokument als HTML-Web-Seite oder als

PHP-Skript zu erzeugen Beachten Sie bitte von Anfang an dass diese Auswahl Einfluss auf die URL

(Internetadresse) der jeweiligen Seite hat Bei einer nachtraumlglichen Aumlnderung aumlndert sich auch die

Internetadresse unter der Ihre Seite im Netz zu finden ist Sie muumlssen dann eventuell Verlinkungen

an vielen Stellen aumlndern

bull Internetadresse einer HTML-Web-Seite wwwuni-duedebereichihreseiteshtml

bull Internetadresse eines PHP-Skripts wwwuni-duedebereichihreseitephp

Je nachdem ob Sie Ihr Dokument als HTML-Web-Seite oder als PHP-Skript erzeugen koumlnnen Sie

folgende Elemente nutzen

Linke Spalte des Inhaltsbereiches

bull (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

bull A-Z verwalten PHP-Skript HTML-Web-Seite

bull Code editieren PHP-Skript HTML-Web-Seite

bull Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

bull DBAdmin PHP-Skript

bull Doppelcontainer PHP-Skript HTML-Web-Seite

bull Flickr nutzen PHP-Skript

bull Formular schlieszligen PHP-Skript

bull Formular oumlffnen PHP-Skript

S e i t e | 16

bull Formular Element PHP-Skript

bull Formulareingabe in DB speichern PHP-Skript

bull Google-Maps (v30) PHP-Skript HTML-Web-Seite

bull Image-Gallery (v21) PHP-Skript HTML-Web-Seite

bull Mailinglisten PHP-Skript

bull Mitarbeiter-Liste PHP-Skript

bull Mitarbeiter-Publikationsliste PHP-Skript

bull Mitarbeiter-Seite PHP-Skript

bull Randlose Grafik PHP-Skript HTML-Web-Seite

bull RSS-Feed-Administration PHP-Skript

bull RSS-Feed-Agent PHP-Skript

bull Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

bull Veranstaltungskalender Kalendermodul PHP-Skript

bull Veranstaltungskalender Veranstaltungsmodul PHP-Skript

Rechte Spalte des Inhaltsbereiches

bull (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

bull Code editieren PHP-Skript HTML-Web-Seite

bull Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

bull Flickr nutzen PHP-Skript

bull Mitarbeiter-Seite PHP-Skript

bull Randlose Grafik PHP-Skript HTML-Web-Seite

bull RSS-Feed-Agent PHP-Skript

bull Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

bull Veranstaltungskalender Kalendermodul PHP-Skript

Beim Erstellen Ihrer Webseite koumlnnen Sie diese einzelnen Module nach Bedarf (auch mehrfach)

erzeugen und in der gewuumlnschten Reihenfolge platzieren wobei die gewaumlhlte Reihenfolge jederzeit

veraumlnderbar ist Mit wenigen Ausnahmen lassen sich die einzelnen Einheiten weiszlig blau oder beige

einfaumlrben (Ausnahme randlose Grafik) Sie werden vom System dann als voneinander abgesetzte

Bloumlcke ausgegeben

Um innerhalb eines Dokuments zu navigieren koumlnnen Sie wenn noumltig die einzelnen Elemente auch

mit einem Link-Anker versehen (Ausnahmen randlose Grafik Mitarbeiter-Liste -Publikationsliste

und ndashSeite Veranstaltungskalender Veranstaltungs- sowie Kalendermodul) Den Ankernamen

S e i t e | 17

koumlnnen Sie frei vergeben er darf jedoch keine Leer- oder Sonderzeichen enthalten Das erste Zeichen

muss auszligerdem ein Buchstabe sein

61 Uumlber allem Die Brotkrumennavigation

Zwischen Seitentitel und ndashinhalt koumlnnen Sie auf jeder Seite eine individuelle Brotkrumennavigation

editieren die den Nutzern eine schnelle Uumlbersicht daruumlber ermoumlglicht wie sie auf die gerade

aufgerufene Webseite gelangt sind Verwenden Sie dieses Instrument bitte nicht als moumlgliche

zusaumltzliche Quernavigation sondern ausschlieszliglich als Hilfe im vorgesehenen Sinne

Der letzte Eintrag der Brotkrumennavigation der uumlblicherweise die aktuell aufgerufene Seite

benennt sollte nicht mit einer Zieladresse (URL) versehen werden Der Eintrag erscheint dann als

regulaumlr schwarz formatierter Text nicht als blau ausgezeichneter Link

S e i t e | 18

62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

Mit dem TinyMCE-Texteditor stellt Ihnen das Content Management System der UDE einen auf

JavaScript basierenden WYSIWYG-Editor (bdquoWhat You See Is What You Getldquo) zur Verfuumlgung Mit Hilfe

dieses Moduls ist es moumlglich ohne HTML- oder weitergehende Programmierkenntnisse Beitraumlge zu

verfassen und Seiten zu formatieren Die Bedienung mittels einer Textbox orientiert sich stark an

gaumlngiger und bekannter Textverarbeitungs-Software

Texte formatieren

Selbstverstaumlndlich bietet der TinyMCE-Editor die uumlblichen Arten Texte zu formatieren Neben den

Befehlen fett (bdquoBoldldquo) kursiv (bdquoItalicldquo) unterstrichen (bdquoUnderlineldquo) sowie hoch- bzw tiefgestellt

bietet Ihnen das System uumlber das Ω-Symbol eine breite Palette an Sonderzeichen uumlber die

Listenfunktion die Erstellung einfacher oder nummerierter Aufzaumlhlungslisten an Mittels einer Select-

S e i t e | 19

Box koumlnnen Sie auszligerdem auf im Hochschullayout vorgegebene Uumlberschriftarten (bdquoHeadingsldquo)

zuruumlckgreifen

Als weitere Moumlglichkeiten steht Ihnen frei

bull ein Datum undoder eine Uhrzeit einzufuumlgen

bull Blockzitate zu kennzeichnen oder

bull geschuumltzte Leerzeichen (bdquoNon-breaking Space Characterldquo) zu definieren

bull Das Ankersymbol (bdquoInsertEdit Anchorldquo) erlaubt die Definition von Sprungzielen innerhalb

laumlngerer Texte

Im Notfall hilft Ihnen das Radiergummi-Symbol (bdquoRemove Formatting) saumlmtliche Formatierungen zu

entfernen

Bereits formatierten Text einfuumlgen

Uumlber diese Formatierungsarten hinaus koumlnnen Sie auch bereits vorformatierte Texte aus Ihrer

Textverarbeitung in den Editor kopieren Zum Einfuumlgen nutzen Sie jedoch bitte nicht den einfachen

Copy amp Paste-Befehl sondern die im Modul bereitgestellte Funktion bdquoPaste from Wordldquo (Sie finden

das entsprechende bdquoWldquo-Symbol unter der Texteingabe-Box) ndash und zwar auch dann wenn Ihr

Ursprungstext nicht aus Microsoft Word sondern einer anderen Textverarbeitungssoftware

importiert wird Schriftformatierungen Verlinkungen und Aumlhnliches werden dann 11 uumlbernommen

Achten Sie bitte dennoch darauf dass dieser Funktion Grenzen gesetzt sind und arbeiten Sie mit

moumlglichst einfachen Formatvorlagen

HTML-Ansicht

Fuumlr Redakteure die sich in der Seitenprogrammierung sicherer fuumlhlen als in der Textverarbeitung

haumllt das Modul TinyMCE-Texteditor uumlber den Button bdquoHTMLldquo einen HTML Source Editor bereit mit

dem direkt auf den Quelltext und die Codierung dieses Teils der Webseite zugegriffen werden kann

Diese Funktion eignet sich auszligerdem besonders zur Uumlberpruumlfung und Fehlersuche Zur

Programmierung eigener Funktionen nutzen Sie jedoch bitte das Modul bdquoCode editierenldquo

S e i t e | 20

Links

Die uumlber die Symbole bdquoInsertEdit Linkldquo (Link einfuumlgen oder bearbeiten) in Ihre Texte oder

Aufzaumlhlungslisten eingefuumlgten Hyperlinks formatiert das System selbststaumlndig im fuumlr die UDE

vorgesehehen Layout Tragen Sie Links auf Seiten innerhalb von wwwuni-duede bitte als relative

Verknuumlpfungen ohne Verweis auf den Webserver der Universitaumlt ein also

bull depresse

anstelle von

bull httpwwwuni-duededepresseindexphp

Zeichnen sie auszligerdem Ihre Verlinkungen im Sinne der Barrierefreiheit mit sprechenden Titeln aus

und uumlberlegen Sie sich ob das Sprungziel im selben oder in einem neuen Browserfenster geoumlffnet

werden soll

Uumlber das Symbol bdquoUnlinkldquo entfernen Sie die entsprechende Verlinkung

Bilder

Der TinyMCE-Texteditor bietet Ihnen zwei Moumlglichkeiten Bilder in Ihre Texte einzubinden

S e i t e | 21

bull Uumlber die Funktion bdquoInsertEdit Imageldquo (Icon unter der Texteingabe-Box) koumlnnen Sie den

relativen Pfad auf das entsprechende Bild aus der IMPERIA-Mediendatenbank einfuumlgen

(Formatbeispiel imperiamdimageswebredaktion2013parentservicejpg)

bull Die Funktion bdquoVorschaubild waumlhlenldquo laumlsst Sie direkt auf die IMPERIA-Mediendatenbank

zugreifen und dort die gewuumlnschte Grafik per Klick auswaumlhlen Uumlber die Funktion bdquoVollbild

waumlhlenldquo koumlnnen Sie das Bild optional zu einer groumlszligeren Ansicht verlinken die sich als

bdquoLightboxldquo uumlber der aktiven Webseite oumlffnet Der Befehl bdquoBild zuruumlcksetzenldquo entfernt die

gewaumlhlte Grafik aus Ihrer Webseite

Waumlhrend Sie mittels bdquoInsertEdit Imageldquo die Anzeige-Groumlszlige Ihres Bildes (bis maximal 480 Pixel

Breite) selbst bestimmen koumlnnen werden Grafiken uumlber die Funktion bdquoVorschaubild waumlhlenldquo beim

Einfuumlgen automatisch auf die passende Groumlszlige skaliert (162 Pixel Breite in der linken und 204 Pixel

Breite in der rechten Content-Spalte) In diesem Fall koumlnnen Sie zudem waumlhlen ob der Text an dieser

Stelle das Bild umflieszligt oder aber rechts daneben angezeigt wird Das Vollbild wird bei der Eingabe

nicht skaliert Nutzen Sie daher bitte Bilder mit einer bildschirmtauglichen Groumlszlige (maximal 1024

Pixel)

S e i t e | 22

Tabellen

Uumlber das Icon bdquoInsertEdit Tableldquo fuumlgen Sie an der gewuumlnschten Stelle Tabellen in Ihren Texteditor

ein Unter den Reitern bdquoGeneralldquo und bdquoAdvancedldquo koumlnnen Sie diese Tabellen gemaumlszlig den uumlblichen

HTML-Konventionen erstellen formatieren und bearbeiten

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig gemaumlszlig den Vorgaben der Barrierefreiheit als

solche aus Der Text-Editor stellt Ihnen diese Optionen zur Verfuumlgung

bull Beachten Sie dass die Hintergrundfarbe der Tabellen je nach gewaumlhlter Einfaumlrbung des

Moduls variiert

S e i t e | 23

Texte mit bdquoVerfallsdatumldquo

Grundsaumltzlich steht Ihnen das Modul bdquo(TinyMCE)-Texteditorldquo sowohl auf shtml-Seiten als auch in

php-Skripten zur Verfuumlgung Auf php-Seiten laumlsst sich jedoch eine zusaumltzliche Option nutzen Fuumlr

Texte die nur fuumlr einen gewissen Zeitraum auf Ihrer Webseite erscheinen sollen koumlnnen Sie ein

Start- und Enddatum setzen

63 A-Z verwalten PHP-Skript HTML-Web-Seite

Das Modul bdquoA-Z verwaltenldquo ermoumlglicht den Redakteuren A-Z-Listen relativ einfach zu erzeugen und

zu pflegen

S e i t e | 24

Fuumlr jeden Eintrag in der Stichwortliste muss im Eingabefeld eine einzelne Zeile eingefuumlgt werden Die

Eingabe folgt einem festen Schema

bull Stichwort||URL (Internetadresse)||

oder

bull Stichwort||URL (Internetadresse)||eventuell ein kurzer Beschreibungstext

wobei auf den Beschreibungstext auch verzichtet werden kann Die sogenannten bdquoPipe-Zeichenldquo (||)

dienen als Feldtrenner Sie erzeugen sie uumlber den Tastaturbefehl bdquoAltGr amp das Groumlszligerzeichenldquo

Wahlweise kopieren Sie die entsprechenden Zeichen aus bisherigen Eintraumlgen

Auch hier gilt Tragen Sie interne Links in Ihrer A-Z-Liste bitte als relative Verknuumlpfungen ohne

Verweis auf den Webserver der Universitaumlt ein also

bull Abiturjahrgang 2013||doppelter_abiturjahrgang||

anstelle von

bull Abiturjahrgang 2013||httpwwwuni-duededoppelter_abiturjahrgang||

Externe Links (wie etwa bdquoGlassbooth ||httpwwwglassboothde||ldquo) werden auf der

ausgegebenen Webseite entsprechend gekennzeichnet

S e i t e | 25

Die Eintraumlge im Modul bdquoA-Z verwaltenldquo sortiert das Content Management System automatisch nach

Ziffernreihenfolge bzw dem Alphabet Um die Eintraumlge spaumlter einfach aufzufinden und bearbeiten zu

koumlnnen empfiehlt es sich jedoch bereits im Eingabefeld selbst eine alphabetische Sortierung

vorzunehmen

64 Code editieren PHP-Skript HTML-Web-Seite

Das Modul bdquoCode editierenldquo eroumlffnet Ihnen die Moumlglichkeit in Ihrem Internetauftritt eigene PHP-

oder HTML-Codeschnipsel zu erstellen und zu nutzen oder Programmierungen eigener Funktionen

vorzunehmen

Nutzen Sie dieses Modul bitte nicht um Funktionen zu simulieren die Ihnen das CMS IMPERIA bereits

als vorgefertigte Module zur Verfuumlgung stellt Das freie Code-Eingabefeld ist ebenfalls nicht dazu

S e i t e | 26

vorgesehen auf diesem Wege vom Corporate Design der Universitaumlt abweichende eigene Layouts zu

entwickeln

65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

Uumlber das Modul bdquoCodebaustein einfuumlgenldquo ist es moumlglich vorgefertigte Bloumlcke oder bdquoBauteileldquo in Ihre

Webseite zu integrieren Codebausteine eignen sich dazu bestimmte Informationen die auf vielen

Webseiten wiederkehren an einer Stelle zentral zu pflegen In der Bearbeitungsebene bietet Ihnen

das Modul die in der aktuellen Rubrik vorhandenen Bausteine zur Auswahl an

Codebausteine erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 27

Sie koumlnnen in Codebausteinen wie beim uumlblichen Seitenaufbau gewohnt unterschiedliche Module

kombinieren und positionieren Zur Verfuumlgung stehen die Elemente

bull (TinyMCE)-Texteditor

bull Code editieren

bull die Formularmodule

bull Randlose Grafik

bull RSS-Feed-Agent

bull Tube Audio-VideoPlayer

Eine spaumltere Bearbeitung der Codebausteine ist im CMS IMPERIA nicht uumlber das Tool bdquoQuickEditldquo

moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo

im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichniscode_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Codebausteine im

selben Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

66 DBAdmin PHP-Skript

Mit Hilfe des Moduls bdquoDBAdminldquo lassen sich Datenbank direkt in Tabellenform auf Ihrer Webseite

darstellen Uumlber die Funktion bdquoOptionen anzeigenldquo erhalten Sie zudem die Moumlglichkeit eine

Webseite zur Pflege Ihrer Datenbank zu erstellen Dort koumlnnen Sie die entsprechende Tabelle

editieren d h Eintraumlge einzeln erstellen bearbeiten oder loumlschen

S e i t e | 28

Zur Nutzung dieses Moduls sind folgende Angaben notwendig

bull Datenbank-Server Name oder IP-Adresse des Servers auf dem die anzusprechende

Datenbank liegt (bspw bdquodbuni-duedeldquo)

bull Datenbank-Name

bull Tabellen-Name Name der speziellen Tabelle die innerhalb der Datenbank angesprochen

werden soll

bull Datenbank-Benutzer und Datenbank-Passwort

Datenbanken auf einem UDE-Server koumlnnen Universitaumltsangehoumlrige unter Nutzung ihrer

Hochschulkennung online beim Zentrum fuumlr Informations- und Mediendienste (ZIM) beantragen

unter httpwwwuni-duedezimserviceshomepagesmysqlshtml

67 Doppelcontainer PHP-Skript HTML-Web-Seite

Das Modul bdquoDoppelcontainerldquo ermoumlglicht es Ihnen auf Ihrer Webseite zwei Textebloumlcke (je nach

Wunsch mit oder ohne Bilder) nebeneinander zu setzen

Auf zweispaltig angelegten Webseiten ist die Anlage eines Doppelcontainers nur in der linken Spalte

moumlglich Bilder erscheinen dort in einer Breite von 246 Pixeln Auf einspaltig angelegten Webseiten

werden die einzelnen Bloumlcke (und dementsprechend die verwendeten Bilder) in einer Breite von 366

Pixeln angezeigt Die Bildhoumlhe ist in beiden Faumlllen frei waumlhlbar sollte jedoch in beiden Containern

identisch sein

S e i t e | 29

Zur Texteingabe stehen Ihnen die Optionen bdquoTeaserldquo (mit Zeichenbegrenzung) sowie bdquoStandardldquo

(ohne Zeichenbegrenzung) zur Verfuumlgung Waumlhlen Sie bdquoTeaserldquo so erhalten Sie Platz fuumlr 300 Zeichen

ndash ein Zeichenzaumlhler neben der Texteingabe-Box erleichtert das Mitzaumlhlen Der Text wird gelb

unterlegt wenn er nach dem naumlchsten Leerzeichen abgeschnitten wird Rot erscheint das Textfeld

wenn die Zeichenzahl bereits uumlberschritten wurde

Beachten Sie bitte dass das Modul HTML-Tags (URLs Mailadressen etc) automatisch filtert Sie

werden daher nicht angezeigt Um Ihren Text zu verlinken koumlnnen Sie das Eingabefeld bdquoMehr-Linkldquo

nutzen

Beide Bloumlcke innerhalb eines Doppelcontainers lassen sich individuell auf die uumlbliche Weise (weiszlig

hellblau sandfarben) hinterlegen

S e i t e | 30

68 Flickr nutzen PHP-Skript

Das Modul bdquoFlickr nutzenldquo ermoumlglicht es Ihnen im Sinne einer crossmedialen Verwertung Bilder aus

Ihrem Flickr-Account in Ihre IMPERIA-Webseite einzubinden Fuumlr diese Funktion benoumltigen Sie einen

sogenannten API-Key den Sie in Ihrem Flick-Auftritt unter

bull httpwwwflickrcomservicesappscreateapply

erzeugen lassen koumlnnen Tragen Sie dann diesen Key in die entsprechende Eingabemaske des Moduls

ein Anschlieszligend haben Sie die Moumlglichkeit ganze Fotosets (Alben) oder Einzelbilder einzubinden

Photoset anzeigen

S e i t e | 31

Zum Anzeigen von Photosets wird die entsprechende Photoset-ID ins Modul eingetragen Diese ID ist

Teil der Link-Adresse des entsprechenden Albums bei Flickr (die erscheint wenn Sie das Album

angeklickt haben) Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAMEsets12340954909

Die Photoset-ID verbirgt sich hinter den Ziffern am Ende der URL Sie koumlnnen auswaumlhlen wie viele

Fotos auf einer Webseite erscheinen sollen Dafuumlr uumlbernimmt das Modul die Bilder in der

quadratischen Aufloumlsung von Flickr also in einer Groumlszlige von 75 x 75 Pixeln Reicht der Platz dafuumlr

nicht aus wird eine zusaumltzliche Blaumltterfunktion angeboten Photoset- und Bild-Beschreibungen

koumlnnen aus dem Flickr-Account automatisch uumlbernommen werden wenn die entsprechenden

Optionen mit einem Haken aktiviert wurden

Einzelbild anzeigen

Um ein einzelnes Bild anzuzeigen benoumltigen Sie die entsprechen Flickr-Foto-ID Diese verbirgt sich

hinter der ersten Zahl in der Link-Adresse des entsprechenden Bildes Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAME5841603851inset-72157626981464896

Ein Einzelbild kann in einer hohen oder einer geringen Aufloumlsung eingebunden werden Bei einer

zweispaltig angelegten Webseite wird das Bild in der linken Inhaltsspalte auf eine Breite von 480

Pixel bei einer einspaltig angelegten Webseite auf eine Breite von 721 Pixel skaliert

69 Formulare

Mit IMPERIA haben Sie die Moumlglichkeit Formulare auf Ihrer Webseite zu platzieren In der

Bearbeitungsebene Ihrer Seite finden Sie im Bereich bdquoNeues Modulldquo den Menupunkt UDE ndash

Formular oumlffnen

Nach dem Festlegen der Hintergrundfarbe koumlnnen Sie im Bereich bdquoLegendeldquo den Titel Ihres

Formulars waumlhlen Wenn Sie die Funktion bdquoMailer-Funktionalitaumltldquo aktivieren koumlnnen Sie die Adresse

Ihres Mailscripts eingeben Anderenfalls belassen Sie es bitte beim Vorgabewert

Im Bereich bdquoNexturlldquo kann angegeben werden welche Seite nach dem Abschicken des Formulars

aufgerufen werden soll Daruumlber hinaus werden der Titel der E-Mail die Absender-Adresse sowie die

Empfaumlnger-Adresse definiert Optional kann eine Bestaumltigungs-E-Mail mit frei waumlhlbarem Text

versendet werden

S e i t e | 32

Um dem erstellten Formular Eingabefelder hinzuzufuumlgen ist das Modul bdquoUDE Formular Elementldquo zu

waumlhlen Waumlhlen Sie das Element bdquoTextldquo um ein Eingabefeld zu erzeugen Die Option bdquoBezeichnerldquo

beschreibt den sichtbaren Text im fertigen Formular zum Beispiel bdquoIhr Nameldquo Weitergehend koumlnnen

Sie die zulaumlssigen Inhalte der Nutzereingaben definieren sowie markieren ob das Element ein

Pflichtfeld sein soll

S e i t e | 33

Um ein Texteingabefeld innerhalb des Formulars zu erzeugen waumlhlen Sie das Element bdquoTextarealdquo

Sie koumlnnen die Groumlszlige des Textfeldes definieren (Zeilen x Spalten) und optional erneut eine Pruumlfung

zulaumlssiger Nutzereingaben aktivieren Weiterhin koumlnnen Sie waumlhlen ob der eingegebene Wert des

Formularelements in die Datenbank eingetragen werden soll Wenn Sie fuumlr Ihre Formulare auf eine

Datenbank zuruumlckgreifen moumlchten koumlnnen Sie sich hier informieren httpwwwuni-

duedezimserviceshomepagesmysqlshtml

Insgesamt stehen folgende Elemente zur Verfuumlgung

bull Checkbox Hidden Password Select Anfang Select Option einfuumlgen Select Ende Submit

Text Datum Textarea Radio Reset Leerzeile Kommentarzeile Neuer Abschnitt mit

Bezeichner sowie Datei-Upload

Ein Formular muss mit dem Modul bdquoUDE Formular schlieszligenldquo abgeschlossen werden An dieser

Stelle koumlnnen Sie einen Send-Button hinzufuumlgen dessen Name frei waumlhlbar ist Der eingegebene Text

wird als Beschriftung des Buttons angezeigt Erst durch das Hinzufuumlgen dieses Moduls wird das

Formular auf Ihrer Seite sichtbar und kann nach der Veroumlffentlichung genutzt werden

S e i t e | 34

610 Google-Maps (v30) PHP-Skript HTML-Web-Seite

Dieses Modul bringt eine Grafik von Google-Maps auf die Webseite entweder in Kartenoptik oder als

Satellitenbild Sie haben zwei Moumlglichkeiten eine solche zu generieren Uumlber die konkreten GPS-

Koordinaten oder durch das Angeben einer Adresse (zB Forsthausweg 2 47057 Duisburg) Sie

koumlnnen aus zwoumllf Vergroumlszligerungsstufen fuumlr den gewuumlnschten Ausschnitt zwei Kartengroumlszligen und

zwei Kartenformaten waumlhlen

S e i t e | 35

Kartengroumlszlige bdquogroszligldquo skaliert die Graphik auf 480 Pixel Breite auf einer zweispaltigen Seite bzw auf

721 Pixel auf einer einspaltigen Seite Die Option bdquokleinldquo verringert die Breite auf etwa die Haumllfte Die

beiden Optionen beim Kartenformat beeinflussen die Houmlhe der Grafik

S e i t e | 36

611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite

Das Modul Image-Gallery ermoumlglicht die Integration einer komfortablen Bildergallerie uumlber IMPERIA

Per Klick auf bdquoNeues Modulldquo -gt bdquoUDE Image-Gallery (v21)ldquo kann die entsprechende Gallerie an der

gewuumlnschten Position eingefuumlgt werden Generell sollten nur Bilder verwendet werden die

entweder auf 640 x 480 Pixel oder maximal auf 900 x 600 Pixel skaliert sind Aufgrund einer hohen

Dateigroumlszlige sollten Bilder einer Digitalkamera vor dem Upload komprimiert werden

Innerhalb des Moduls kann zunaumlchst die Hintergrundfarbe der Gallerie wahlweise zwischen Beige

Blau und Weiszlig eingestellt werden Um die Gallerie mit Bildern zu fuumlllen ist das entsprechende

Verzeichnis der Mediendatenbank anzugeben Aufgrund der geaumlnderten Syntax wird das Verzeichnis

ohne images angegeben Die Suchmaske fuumlr die Bilderauswahl deklariert die Dateiformate die mit

einbezogen werden sollen Schlieszliglich koumlnnen Sie die Bilder alphabetisch sortiert anzeigen lassen

sowie einen kleinen und einen groszligen Titel fuumlr Ihre Bildergallerie vergeben

Grundsaumltzlich ist es empfehlenswert groumlszligere Bildmengen auf mehrere Seiten zu verteilen um

einerseits die Darstellung auf mobilen Geraumlten zu vereinfachen und andererseits geringeren

Bandbreiten Rechnung zu tragen

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 17: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 16

bull Formular Element PHP-Skript

bull Formulareingabe in DB speichern PHP-Skript

bull Google-Maps (v30) PHP-Skript HTML-Web-Seite

bull Image-Gallery (v21) PHP-Skript HTML-Web-Seite

bull Mailinglisten PHP-Skript

bull Mitarbeiter-Liste PHP-Skript

bull Mitarbeiter-Publikationsliste PHP-Skript

bull Mitarbeiter-Seite PHP-Skript

bull Randlose Grafik PHP-Skript HTML-Web-Seite

bull RSS-Feed-Administration PHP-Skript

bull RSS-Feed-Agent PHP-Skript

bull Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

bull Veranstaltungskalender Kalendermodul PHP-Skript

bull Veranstaltungskalender Veranstaltungsmodul PHP-Skript

Rechte Spalte des Inhaltsbereiches

bull (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

bull Code editieren PHP-Skript HTML-Web-Seite

bull Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

bull Flickr nutzen PHP-Skript

bull Mitarbeiter-Seite PHP-Skript

bull Randlose Grafik PHP-Skript HTML-Web-Seite

bull RSS-Feed-Agent PHP-Skript

bull Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

bull Veranstaltungskalender Kalendermodul PHP-Skript

Beim Erstellen Ihrer Webseite koumlnnen Sie diese einzelnen Module nach Bedarf (auch mehrfach)

erzeugen und in der gewuumlnschten Reihenfolge platzieren wobei die gewaumlhlte Reihenfolge jederzeit

veraumlnderbar ist Mit wenigen Ausnahmen lassen sich die einzelnen Einheiten weiszlig blau oder beige

einfaumlrben (Ausnahme randlose Grafik) Sie werden vom System dann als voneinander abgesetzte

Bloumlcke ausgegeben

Um innerhalb eines Dokuments zu navigieren koumlnnen Sie wenn noumltig die einzelnen Elemente auch

mit einem Link-Anker versehen (Ausnahmen randlose Grafik Mitarbeiter-Liste -Publikationsliste

und ndashSeite Veranstaltungskalender Veranstaltungs- sowie Kalendermodul) Den Ankernamen

S e i t e | 17

koumlnnen Sie frei vergeben er darf jedoch keine Leer- oder Sonderzeichen enthalten Das erste Zeichen

muss auszligerdem ein Buchstabe sein

61 Uumlber allem Die Brotkrumennavigation

Zwischen Seitentitel und ndashinhalt koumlnnen Sie auf jeder Seite eine individuelle Brotkrumennavigation

editieren die den Nutzern eine schnelle Uumlbersicht daruumlber ermoumlglicht wie sie auf die gerade

aufgerufene Webseite gelangt sind Verwenden Sie dieses Instrument bitte nicht als moumlgliche

zusaumltzliche Quernavigation sondern ausschlieszliglich als Hilfe im vorgesehenen Sinne

Der letzte Eintrag der Brotkrumennavigation der uumlblicherweise die aktuell aufgerufene Seite

benennt sollte nicht mit einer Zieladresse (URL) versehen werden Der Eintrag erscheint dann als

regulaumlr schwarz formatierter Text nicht als blau ausgezeichneter Link

S e i t e | 18

62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

Mit dem TinyMCE-Texteditor stellt Ihnen das Content Management System der UDE einen auf

JavaScript basierenden WYSIWYG-Editor (bdquoWhat You See Is What You Getldquo) zur Verfuumlgung Mit Hilfe

dieses Moduls ist es moumlglich ohne HTML- oder weitergehende Programmierkenntnisse Beitraumlge zu

verfassen und Seiten zu formatieren Die Bedienung mittels einer Textbox orientiert sich stark an

gaumlngiger und bekannter Textverarbeitungs-Software

Texte formatieren

Selbstverstaumlndlich bietet der TinyMCE-Editor die uumlblichen Arten Texte zu formatieren Neben den

Befehlen fett (bdquoBoldldquo) kursiv (bdquoItalicldquo) unterstrichen (bdquoUnderlineldquo) sowie hoch- bzw tiefgestellt

bietet Ihnen das System uumlber das Ω-Symbol eine breite Palette an Sonderzeichen uumlber die

Listenfunktion die Erstellung einfacher oder nummerierter Aufzaumlhlungslisten an Mittels einer Select-

S e i t e | 19

Box koumlnnen Sie auszligerdem auf im Hochschullayout vorgegebene Uumlberschriftarten (bdquoHeadingsldquo)

zuruumlckgreifen

Als weitere Moumlglichkeiten steht Ihnen frei

bull ein Datum undoder eine Uhrzeit einzufuumlgen

bull Blockzitate zu kennzeichnen oder

bull geschuumltzte Leerzeichen (bdquoNon-breaking Space Characterldquo) zu definieren

bull Das Ankersymbol (bdquoInsertEdit Anchorldquo) erlaubt die Definition von Sprungzielen innerhalb

laumlngerer Texte

Im Notfall hilft Ihnen das Radiergummi-Symbol (bdquoRemove Formatting) saumlmtliche Formatierungen zu

entfernen

Bereits formatierten Text einfuumlgen

Uumlber diese Formatierungsarten hinaus koumlnnen Sie auch bereits vorformatierte Texte aus Ihrer

Textverarbeitung in den Editor kopieren Zum Einfuumlgen nutzen Sie jedoch bitte nicht den einfachen

Copy amp Paste-Befehl sondern die im Modul bereitgestellte Funktion bdquoPaste from Wordldquo (Sie finden

das entsprechende bdquoWldquo-Symbol unter der Texteingabe-Box) ndash und zwar auch dann wenn Ihr

Ursprungstext nicht aus Microsoft Word sondern einer anderen Textverarbeitungssoftware

importiert wird Schriftformatierungen Verlinkungen und Aumlhnliches werden dann 11 uumlbernommen

Achten Sie bitte dennoch darauf dass dieser Funktion Grenzen gesetzt sind und arbeiten Sie mit

moumlglichst einfachen Formatvorlagen

HTML-Ansicht

Fuumlr Redakteure die sich in der Seitenprogrammierung sicherer fuumlhlen als in der Textverarbeitung

haumllt das Modul TinyMCE-Texteditor uumlber den Button bdquoHTMLldquo einen HTML Source Editor bereit mit

dem direkt auf den Quelltext und die Codierung dieses Teils der Webseite zugegriffen werden kann

Diese Funktion eignet sich auszligerdem besonders zur Uumlberpruumlfung und Fehlersuche Zur

Programmierung eigener Funktionen nutzen Sie jedoch bitte das Modul bdquoCode editierenldquo

S e i t e | 20

Links

Die uumlber die Symbole bdquoInsertEdit Linkldquo (Link einfuumlgen oder bearbeiten) in Ihre Texte oder

Aufzaumlhlungslisten eingefuumlgten Hyperlinks formatiert das System selbststaumlndig im fuumlr die UDE

vorgesehehen Layout Tragen Sie Links auf Seiten innerhalb von wwwuni-duede bitte als relative

Verknuumlpfungen ohne Verweis auf den Webserver der Universitaumlt ein also

bull depresse

anstelle von

bull httpwwwuni-duededepresseindexphp

Zeichnen sie auszligerdem Ihre Verlinkungen im Sinne der Barrierefreiheit mit sprechenden Titeln aus

und uumlberlegen Sie sich ob das Sprungziel im selben oder in einem neuen Browserfenster geoumlffnet

werden soll

Uumlber das Symbol bdquoUnlinkldquo entfernen Sie die entsprechende Verlinkung

Bilder

Der TinyMCE-Texteditor bietet Ihnen zwei Moumlglichkeiten Bilder in Ihre Texte einzubinden

S e i t e | 21

bull Uumlber die Funktion bdquoInsertEdit Imageldquo (Icon unter der Texteingabe-Box) koumlnnen Sie den

relativen Pfad auf das entsprechende Bild aus der IMPERIA-Mediendatenbank einfuumlgen

(Formatbeispiel imperiamdimageswebredaktion2013parentservicejpg)

bull Die Funktion bdquoVorschaubild waumlhlenldquo laumlsst Sie direkt auf die IMPERIA-Mediendatenbank

zugreifen und dort die gewuumlnschte Grafik per Klick auswaumlhlen Uumlber die Funktion bdquoVollbild

waumlhlenldquo koumlnnen Sie das Bild optional zu einer groumlszligeren Ansicht verlinken die sich als

bdquoLightboxldquo uumlber der aktiven Webseite oumlffnet Der Befehl bdquoBild zuruumlcksetzenldquo entfernt die

gewaumlhlte Grafik aus Ihrer Webseite

Waumlhrend Sie mittels bdquoInsertEdit Imageldquo die Anzeige-Groumlszlige Ihres Bildes (bis maximal 480 Pixel

Breite) selbst bestimmen koumlnnen werden Grafiken uumlber die Funktion bdquoVorschaubild waumlhlenldquo beim

Einfuumlgen automatisch auf die passende Groumlszlige skaliert (162 Pixel Breite in der linken und 204 Pixel

Breite in der rechten Content-Spalte) In diesem Fall koumlnnen Sie zudem waumlhlen ob der Text an dieser

Stelle das Bild umflieszligt oder aber rechts daneben angezeigt wird Das Vollbild wird bei der Eingabe

nicht skaliert Nutzen Sie daher bitte Bilder mit einer bildschirmtauglichen Groumlszlige (maximal 1024

Pixel)

S e i t e | 22

Tabellen

Uumlber das Icon bdquoInsertEdit Tableldquo fuumlgen Sie an der gewuumlnschten Stelle Tabellen in Ihren Texteditor

ein Unter den Reitern bdquoGeneralldquo und bdquoAdvancedldquo koumlnnen Sie diese Tabellen gemaumlszlig den uumlblichen

HTML-Konventionen erstellen formatieren und bearbeiten

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig gemaumlszlig den Vorgaben der Barrierefreiheit als

solche aus Der Text-Editor stellt Ihnen diese Optionen zur Verfuumlgung

bull Beachten Sie dass die Hintergrundfarbe der Tabellen je nach gewaumlhlter Einfaumlrbung des

Moduls variiert

S e i t e | 23

Texte mit bdquoVerfallsdatumldquo

Grundsaumltzlich steht Ihnen das Modul bdquo(TinyMCE)-Texteditorldquo sowohl auf shtml-Seiten als auch in

php-Skripten zur Verfuumlgung Auf php-Seiten laumlsst sich jedoch eine zusaumltzliche Option nutzen Fuumlr

Texte die nur fuumlr einen gewissen Zeitraum auf Ihrer Webseite erscheinen sollen koumlnnen Sie ein

Start- und Enddatum setzen

63 A-Z verwalten PHP-Skript HTML-Web-Seite

Das Modul bdquoA-Z verwaltenldquo ermoumlglicht den Redakteuren A-Z-Listen relativ einfach zu erzeugen und

zu pflegen

S e i t e | 24

Fuumlr jeden Eintrag in der Stichwortliste muss im Eingabefeld eine einzelne Zeile eingefuumlgt werden Die

Eingabe folgt einem festen Schema

bull Stichwort||URL (Internetadresse)||

oder

bull Stichwort||URL (Internetadresse)||eventuell ein kurzer Beschreibungstext

wobei auf den Beschreibungstext auch verzichtet werden kann Die sogenannten bdquoPipe-Zeichenldquo (||)

dienen als Feldtrenner Sie erzeugen sie uumlber den Tastaturbefehl bdquoAltGr amp das Groumlszligerzeichenldquo

Wahlweise kopieren Sie die entsprechenden Zeichen aus bisherigen Eintraumlgen

Auch hier gilt Tragen Sie interne Links in Ihrer A-Z-Liste bitte als relative Verknuumlpfungen ohne

Verweis auf den Webserver der Universitaumlt ein also

bull Abiturjahrgang 2013||doppelter_abiturjahrgang||

anstelle von

bull Abiturjahrgang 2013||httpwwwuni-duededoppelter_abiturjahrgang||

Externe Links (wie etwa bdquoGlassbooth ||httpwwwglassboothde||ldquo) werden auf der

ausgegebenen Webseite entsprechend gekennzeichnet

S e i t e | 25

Die Eintraumlge im Modul bdquoA-Z verwaltenldquo sortiert das Content Management System automatisch nach

Ziffernreihenfolge bzw dem Alphabet Um die Eintraumlge spaumlter einfach aufzufinden und bearbeiten zu

koumlnnen empfiehlt es sich jedoch bereits im Eingabefeld selbst eine alphabetische Sortierung

vorzunehmen

64 Code editieren PHP-Skript HTML-Web-Seite

Das Modul bdquoCode editierenldquo eroumlffnet Ihnen die Moumlglichkeit in Ihrem Internetauftritt eigene PHP-

oder HTML-Codeschnipsel zu erstellen und zu nutzen oder Programmierungen eigener Funktionen

vorzunehmen

Nutzen Sie dieses Modul bitte nicht um Funktionen zu simulieren die Ihnen das CMS IMPERIA bereits

als vorgefertigte Module zur Verfuumlgung stellt Das freie Code-Eingabefeld ist ebenfalls nicht dazu

S e i t e | 26

vorgesehen auf diesem Wege vom Corporate Design der Universitaumlt abweichende eigene Layouts zu

entwickeln

65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

Uumlber das Modul bdquoCodebaustein einfuumlgenldquo ist es moumlglich vorgefertigte Bloumlcke oder bdquoBauteileldquo in Ihre

Webseite zu integrieren Codebausteine eignen sich dazu bestimmte Informationen die auf vielen

Webseiten wiederkehren an einer Stelle zentral zu pflegen In der Bearbeitungsebene bietet Ihnen

das Modul die in der aktuellen Rubrik vorhandenen Bausteine zur Auswahl an

Codebausteine erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 27

Sie koumlnnen in Codebausteinen wie beim uumlblichen Seitenaufbau gewohnt unterschiedliche Module

kombinieren und positionieren Zur Verfuumlgung stehen die Elemente

bull (TinyMCE)-Texteditor

bull Code editieren

bull die Formularmodule

bull Randlose Grafik

bull RSS-Feed-Agent

bull Tube Audio-VideoPlayer

Eine spaumltere Bearbeitung der Codebausteine ist im CMS IMPERIA nicht uumlber das Tool bdquoQuickEditldquo

moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo

im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichniscode_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Codebausteine im

selben Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

66 DBAdmin PHP-Skript

Mit Hilfe des Moduls bdquoDBAdminldquo lassen sich Datenbank direkt in Tabellenform auf Ihrer Webseite

darstellen Uumlber die Funktion bdquoOptionen anzeigenldquo erhalten Sie zudem die Moumlglichkeit eine

Webseite zur Pflege Ihrer Datenbank zu erstellen Dort koumlnnen Sie die entsprechende Tabelle

editieren d h Eintraumlge einzeln erstellen bearbeiten oder loumlschen

S e i t e | 28

Zur Nutzung dieses Moduls sind folgende Angaben notwendig

bull Datenbank-Server Name oder IP-Adresse des Servers auf dem die anzusprechende

Datenbank liegt (bspw bdquodbuni-duedeldquo)

bull Datenbank-Name

bull Tabellen-Name Name der speziellen Tabelle die innerhalb der Datenbank angesprochen

werden soll

bull Datenbank-Benutzer und Datenbank-Passwort

Datenbanken auf einem UDE-Server koumlnnen Universitaumltsangehoumlrige unter Nutzung ihrer

Hochschulkennung online beim Zentrum fuumlr Informations- und Mediendienste (ZIM) beantragen

unter httpwwwuni-duedezimserviceshomepagesmysqlshtml

67 Doppelcontainer PHP-Skript HTML-Web-Seite

Das Modul bdquoDoppelcontainerldquo ermoumlglicht es Ihnen auf Ihrer Webseite zwei Textebloumlcke (je nach

Wunsch mit oder ohne Bilder) nebeneinander zu setzen

Auf zweispaltig angelegten Webseiten ist die Anlage eines Doppelcontainers nur in der linken Spalte

moumlglich Bilder erscheinen dort in einer Breite von 246 Pixeln Auf einspaltig angelegten Webseiten

werden die einzelnen Bloumlcke (und dementsprechend die verwendeten Bilder) in einer Breite von 366

Pixeln angezeigt Die Bildhoumlhe ist in beiden Faumlllen frei waumlhlbar sollte jedoch in beiden Containern

identisch sein

S e i t e | 29

Zur Texteingabe stehen Ihnen die Optionen bdquoTeaserldquo (mit Zeichenbegrenzung) sowie bdquoStandardldquo

(ohne Zeichenbegrenzung) zur Verfuumlgung Waumlhlen Sie bdquoTeaserldquo so erhalten Sie Platz fuumlr 300 Zeichen

ndash ein Zeichenzaumlhler neben der Texteingabe-Box erleichtert das Mitzaumlhlen Der Text wird gelb

unterlegt wenn er nach dem naumlchsten Leerzeichen abgeschnitten wird Rot erscheint das Textfeld

wenn die Zeichenzahl bereits uumlberschritten wurde

Beachten Sie bitte dass das Modul HTML-Tags (URLs Mailadressen etc) automatisch filtert Sie

werden daher nicht angezeigt Um Ihren Text zu verlinken koumlnnen Sie das Eingabefeld bdquoMehr-Linkldquo

nutzen

Beide Bloumlcke innerhalb eines Doppelcontainers lassen sich individuell auf die uumlbliche Weise (weiszlig

hellblau sandfarben) hinterlegen

S e i t e | 30

68 Flickr nutzen PHP-Skript

Das Modul bdquoFlickr nutzenldquo ermoumlglicht es Ihnen im Sinne einer crossmedialen Verwertung Bilder aus

Ihrem Flickr-Account in Ihre IMPERIA-Webseite einzubinden Fuumlr diese Funktion benoumltigen Sie einen

sogenannten API-Key den Sie in Ihrem Flick-Auftritt unter

bull httpwwwflickrcomservicesappscreateapply

erzeugen lassen koumlnnen Tragen Sie dann diesen Key in die entsprechende Eingabemaske des Moduls

ein Anschlieszligend haben Sie die Moumlglichkeit ganze Fotosets (Alben) oder Einzelbilder einzubinden

Photoset anzeigen

S e i t e | 31

Zum Anzeigen von Photosets wird die entsprechende Photoset-ID ins Modul eingetragen Diese ID ist

Teil der Link-Adresse des entsprechenden Albums bei Flickr (die erscheint wenn Sie das Album

angeklickt haben) Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAMEsets12340954909

Die Photoset-ID verbirgt sich hinter den Ziffern am Ende der URL Sie koumlnnen auswaumlhlen wie viele

Fotos auf einer Webseite erscheinen sollen Dafuumlr uumlbernimmt das Modul die Bilder in der

quadratischen Aufloumlsung von Flickr also in einer Groumlszlige von 75 x 75 Pixeln Reicht der Platz dafuumlr

nicht aus wird eine zusaumltzliche Blaumltterfunktion angeboten Photoset- und Bild-Beschreibungen

koumlnnen aus dem Flickr-Account automatisch uumlbernommen werden wenn die entsprechenden

Optionen mit einem Haken aktiviert wurden

Einzelbild anzeigen

Um ein einzelnes Bild anzuzeigen benoumltigen Sie die entsprechen Flickr-Foto-ID Diese verbirgt sich

hinter der ersten Zahl in der Link-Adresse des entsprechenden Bildes Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAME5841603851inset-72157626981464896

Ein Einzelbild kann in einer hohen oder einer geringen Aufloumlsung eingebunden werden Bei einer

zweispaltig angelegten Webseite wird das Bild in der linken Inhaltsspalte auf eine Breite von 480

Pixel bei einer einspaltig angelegten Webseite auf eine Breite von 721 Pixel skaliert

69 Formulare

Mit IMPERIA haben Sie die Moumlglichkeit Formulare auf Ihrer Webseite zu platzieren In der

Bearbeitungsebene Ihrer Seite finden Sie im Bereich bdquoNeues Modulldquo den Menupunkt UDE ndash

Formular oumlffnen

Nach dem Festlegen der Hintergrundfarbe koumlnnen Sie im Bereich bdquoLegendeldquo den Titel Ihres

Formulars waumlhlen Wenn Sie die Funktion bdquoMailer-Funktionalitaumltldquo aktivieren koumlnnen Sie die Adresse

Ihres Mailscripts eingeben Anderenfalls belassen Sie es bitte beim Vorgabewert

Im Bereich bdquoNexturlldquo kann angegeben werden welche Seite nach dem Abschicken des Formulars

aufgerufen werden soll Daruumlber hinaus werden der Titel der E-Mail die Absender-Adresse sowie die

Empfaumlnger-Adresse definiert Optional kann eine Bestaumltigungs-E-Mail mit frei waumlhlbarem Text

versendet werden

S e i t e | 32

Um dem erstellten Formular Eingabefelder hinzuzufuumlgen ist das Modul bdquoUDE Formular Elementldquo zu

waumlhlen Waumlhlen Sie das Element bdquoTextldquo um ein Eingabefeld zu erzeugen Die Option bdquoBezeichnerldquo

beschreibt den sichtbaren Text im fertigen Formular zum Beispiel bdquoIhr Nameldquo Weitergehend koumlnnen

Sie die zulaumlssigen Inhalte der Nutzereingaben definieren sowie markieren ob das Element ein

Pflichtfeld sein soll

S e i t e | 33

Um ein Texteingabefeld innerhalb des Formulars zu erzeugen waumlhlen Sie das Element bdquoTextarealdquo

Sie koumlnnen die Groumlszlige des Textfeldes definieren (Zeilen x Spalten) und optional erneut eine Pruumlfung

zulaumlssiger Nutzereingaben aktivieren Weiterhin koumlnnen Sie waumlhlen ob der eingegebene Wert des

Formularelements in die Datenbank eingetragen werden soll Wenn Sie fuumlr Ihre Formulare auf eine

Datenbank zuruumlckgreifen moumlchten koumlnnen Sie sich hier informieren httpwwwuni-

duedezimserviceshomepagesmysqlshtml

Insgesamt stehen folgende Elemente zur Verfuumlgung

bull Checkbox Hidden Password Select Anfang Select Option einfuumlgen Select Ende Submit

Text Datum Textarea Radio Reset Leerzeile Kommentarzeile Neuer Abschnitt mit

Bezeichner sowie Datei-Upload

Ein Formular muss mit dem Modul bdquoUDE Formular schlieszligenldquo abgeschlossen werden An dieser

Stelle koumlnnen Sie einen Send-Button hinzufuumlgen dessen Name frei waumlhlbar ist Der eingegebene Text

wird als Beschriftung des Buttons angezeigt Erst durch das Hinzufuumlgen dieses Moduls wird das

Formular auf Ihrer Seite sichtbar und kann nach der Veroumlffentlichung genutzt werden

S e i t e | 34

610 Google-Maps (v30) PHP-Skript HTML-Web-Seite

Dieses Modul bringt eine Grafik von Google-Maps auf die Webseite entweder in Kartenoptik oder als

Satellitenbild Sie haben zwei Moumlglichkeiten eine solche zu generieren Uumlber die konkreten GPS-

Koordinaten oder durch das Angeben einer Adresse (zB Forsthausweg 2 47057 Duisburg) Sie

koumlnnen aus zwoumllf Vergroumlszligerungsstufen fuumlr den gewuumlnschten Ausschnitt zwei Kartengroumlszligen und

zwei Kartenformaten waumlhlen

S e i t e | 35

Kartengroumlszlige bdquogroszligldquo skaliert die Graphik auf 480 Pixel Breite auf einer zweispaltigen Seite bzw auf

721 Pixel auf einer einspaltigen Seite Die Option bdquokleinldquo verringert die Breite auf etwa die Haumllfte Die

beiden Optionen beim Kartenformat beeinflussen die Houmlhe der Grafik

S e i t e | 36

611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite

Das Modul Image-Gallery ermoumlglicht die Integration einer komfortablen Bildergallerie uumlber IMPERIA

Per Klick auf bdquoNeues Modulldquo -gt bdquoUDE Image-Gallery (v21)ldquo kann die entsprechende Gallerie an der

gewuumlnschten Position eingefuumlgt werden Generell sollten nur Bilder verwendet werden die

entweder auf 640 x 480 Pixel oder maximal auf 900 x 600 Pixel skaliert sind Aufgrund einer hohen

Dateigroumlszlige sollten Bilder einer Digitalkamera vor dem Upload komprimiert werden

Innerhalb des Moduls kann zunaumlchst die Hintergrundfarbe der Gallerie wahlweise zwischen Beige

Blau und Weiszlig eingestellt werden Um die Gallerie mit Bildern zu fuumlllen ist das entsprechende

Verzeichnis der Mediendatenbank anzugeben Aufgrund der geaumlnderten Syntax wird das Verzeichnis

ohne images angegeben Die Suchmaske fuumlr die Bilderauswahl deklariert die Dateiformate die mit

einbezogen werden sollen Schlieszliglich koumlnnen Sie die Bilder alphabetisch sortiert anzeigen lassen

sowie einen kleinen und einen groszligen Titel fuumlr Ihre Bildergallerie vergeben

Grundsaumltzlich ist es empfehlenswert groumlszligere Bildmengen auf mehrere Seiten zu verteilen um

einerseits die Darstellung auf mobilen Geraumlten zu vereinfachen und andererseits geringeren

Bandbreiten Rechnung zu tragen

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 18: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 17

koumlnnen Sie frei vergeben er darf jedoch keine Leer- oder Sonderzeichen enthalten Das erste Zeichen

muss auszligerdem ein Buchstabe sein

61 Uumlber allem Die Brotkrumennavigation

Zwischen Seitentitel und ndashinhalt koumlnnen Sie auf jeder Seite eine individuelle Brotkrumennavigation

editieren die den Nutzern eine schnelle Uumlbersicht daruumlber ermoumlglicht wie sie auf die gerade

aufgerufene Webseite gelangt sind Verwenden Sie dieses Instrument bitte nicht als moumlgliche

zusaumltzliche Quernavigation sondern ausschlieszliglich als Hilfe im vorgesehenen Sinne

Der letzte Eintrag der Brotkrumennavigation der uumlblicherweise die aktuell aufgerufene Seite

benennt sollte nicht mit einer Zieladresse (URL) versehen werden Der Eintrag erscheint dann als

regulaumlr schwarz formatierter Text nicht als blau ausgezeichneter Link

S e i t e | 18

62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

Mit dem TinyMCE-Texteditor stellt Ihnen das Content Management System der UDE einen auf

JavaScript basierenden WYSIWYG-Editor (bdquoWhat You See Is What You Getldquo) zur Verfuumlgung Mit Hilfe

dieses Moduls ist es moumlglich ohne HTML- oder weitergehende Programmierkenntnisse Beitraumlge zu

verfassen und Seiten zu formatieren Die Bedienung mittels einer Textbox orientiert sich stark an

gaumlngiger und bekannter Textverarbeitungs-Software

Texte formatieren

Selbstverstaumlndlich bietet der TinyMCE-Editor die uumlblichen Arten Texte zu formatieren Neben den

Befehlen fett (bdquoBoldldquo) kursiv (bdquoItalicldquo) unterstrichen (bdquoUnderlineldquo) sowie hoch- bzw tiefgestellt

bietet Ihnen das System uumlber das Ω-Symbol eine breite Palette an Sonderzeichen uumlber die

Listenfunktion die Erstellung einfacher oder nummerierter Aufzaumlhlungslisten an Mittels einer Select-

S e i t e | 19

Box koumlnnen Sie auszligerdem auf im Hochschullayout vorgegebene Uumlberschriftarten (bdquoHeadingsldquo)

zuruumlckgreifen

Als weitere Moumlglichkeiten steht Ihnen frei

bull ein Datum undoder eine Uhrzeit einzufuumlgen

bull Blockzitate zu kennzeichnen oder

bull geschuumltzte Leerzeichen (bdquoNon-breaking Space Characterldquo) zu definieren

bull Das Ankersymbol (bdquoInsertEdit Anchorldquo) erlaubt die Definition von Sprungzielen innerhalb

laumlngerer Texte

Im Notfall hilft Ihnen das Radiergummi-Symbol (bdquoRemove Formatting) saumlmtliche Formatierungen zu

entfernen

Bereits formatierten Text einfuumlgen

Uumlber diese Formatierungsarten hinaus koumlnnen Sie auch bereits vorformatierte Texte aus Ihrer

Textverarbeitung in den Editor kopieren Zum Einfuumlgen nutzen Sie jedoch bitte nicht den einfachen

Copy amp Paste-Befehl sondern die im Modul bereitgestellte Funktion bdquoPaste from Wordldquo (Sie finden

das entsprechende bdquoWldquo-Symbol unter der Texteingabe-Box) ndash und zwar auch dann wenn Ihr

Ursprungstext nicht aus Microsoft Word sondern einer anderen Textverarbeitungssoftware

importiert wird Schriftformatierungen Verlinkungen und Aumlhnliches werden dann 11 uumlbernommen

Achten Sie bitte dennoch darauf dass dieser Funktion Grenzen gesetzt sind und arbeiten Sie mit

moumlglichst einfachen Formatvorlagen

HTML-Ansicht

Fuumlr Redakteure die sich in der Seitenprogrammierung sicherer fuumlhlen als in der Textverarbeitung

haumllt das Modul TinyMCE-Texteditor uumlber den Button bdquoHTMLldquo einen HTML Source Editor bereit mit

dem direkt auf den Quelltext und die Codierung dieses Teils der Webseite zugegriffen werden kann

Diese Funktion eignet sich auszligerdem besonders zur Uumlberpruumlfung und Fehlersuche Zur

Programmierung eigener Funktionen nutzen Sie jedoch bitte das Modul bdquoCode editierenldquo

S e i t e | 20

Links

Die uumlber die Symbole bdquoInsertEdit Linkldquo (Link einfuumlgen oder bearbeiten) in Ihre Texte oder

Aufzaumlhlungslisten eingefuumlgten Hyperlinks formatiert das System selbststaumlndig im fuumlr die UDE

vorgesehehen Layout Tragen Sie Links auf Seiten innerhalb von wwwuni-duede bitte als relative

Verknuumlpfungen ohne Verweis auf den Webserver der Universitaumlt ein also

bull depresse

anstelle von

bull httpwwwuni-duededepresseindexphp

Zeichnen sie auszligerdem Ihre Verlinkungen im Sinne der Barrierefreiheit mit sprechenden Titeln aus

und uumlberlegen Sie sich ob das Sprungziel im selben oder in einem neuen Browserfenster geoumlffnet

werden soll

Uumlber das Symbol bdquoUnlinkldquo entfernen Sie die entsprechende Verlinkung

Bilder

Der TinyMCE-Texteditor bietet Ihnen zwei Moumlglichkeiten Bilder in Ihre Texte einzubinden

S e i t e | 21

bull Uumlber die Funktion bdquoInsertEdit Imageldquo (Icon unter der Texteingabe-Box) koumlnnen Sie den

relativen Pfad auf das entsprechende Bild aus der IMPERIA-Mediendatenbank einfuumlgen

(Formatbeispiel imperiamdimageswebredaktion2013parentservicejpg)

bull Die Funktion bdquoVorschaubild waumlhlenldquo laumlsst Sie direkt auf die IMPERIA-Mediendatenbank

zugreifen und dort die gewuumlnschte Grafik per Klick auswaumlhlen Uumlber die Funktion bdquoVollbild

waumlhlenldquo koumlnnen Sie das Bild optional zu einer groumlszligeren Ansicht verlinken die sich als

bdquoLightboxldquo uumlber der aktiven Webseite oumlffnet Der Befehl bdquoBild zuruumlcksetzenldquo entfernt die

gewaumlhlte Grafik aus Ihrer Webseite

Waumlhrend Sie mittels bdquoInsertEdit Imageldquo die Anzeige-Groumlszlige Ihres Bildes (bis maximal 480 Pixel

Breite) selbst bestimmen koumlnnen werden Grafiken uumlber die Funktion bdquoVorschaubild waumlhlenldquo beim

Einfuumlgen automatisch auf die passende Groumlszlige skaliert (162 Pixel Breite in der linken und 204 Pixel

Breite in der rechten Content-Spalte) In diesem Fall koumlnnen Sie zudem waumlhlen ob der Text an dieser

Stelle das Bild umflieszligt oder aber rechts daneben angezeigt wird Das Vollbild wird bei der Eingabe

nicht skaliert Nutzen Sie daher bitte Bilder mit einer bildschirmtauglichen Groumlszlige (maximal 1024

Pixel)

S e i t e | 22

Tabellen

Uumlber das Icon bdquoInsertEdit Tableldquo fuumlgen Sie an der gewuumlnschten Stelle Tabellen in Ihren Texteditor

ein Unter den Reitern bdquoGeneralldquo und bdquoAdvancedldquo koumlnnen Sie diese Tabellen gemaumlszlig den uumlblichen

HTML-Konventionen erstellen formatieren und bearbeiten

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig gemaumlszlig den Vorgaben der Barrierefreiheit als

solche aus Der Text-Editor stellt Ihnen diese Optionen zur Verfuumlgung

bull Beachten Sie dass die Hintergrundfarbe der Tabellen je nach gewaumlhlter Einfaumlrbung des

Moduls variiert

S e i t e | 23

Texte mit bdquoVerfallsdatumldquo

Grundsaumltzlich steht Ihnen das Modul bdquo(TinyMCE)-Texteditorldquo sowohl auf shtml-Seiten als auch in

php-Skripten zur Verfuumlgung Auf php-Seiten laumlsst sich jedoch eine zusaumltzliche Option nutzen Fuumlr

Texte die nur fuumlr einen gewissen Zeitraum auf Ihrer Webseite erscheinen sollen koumlnnen Sie ein

Start- und Enddatum setzen

63 A-Z verwalten PHP-Skript HTML-Web-Seite

Das Modul bdquoA-Z verwaltenldquo ermoumlglicht den Redakteuren A-Z-Listen relativ einfach zu erzeugen und

zu pflegen

S e i t e | 24

Fuumlr jeden Eintrag in der Stichwortliste muss im Eingabefeld eine einzelne Zeile eingefuumlgt werden Die

Eingabe folgt einem festen Schema

bull Stichwort||URL (Internetadresse)||

oder

bull Stichwort||URL (Internetadresse)||eventuell ein kurzer Beschreibungstext

wobei auf den Beschreibungstext auch verzichtet werden kann Die sogenannten bdquoPipe-Zeichenldquo (||)

dienen als Feldtrenner Sie erzeugen sie uumlber den Tastaturbefehl bdquoAltGr amp das Groumlszligerzeichenldquo

Wahlweise kopieren Sie die entsprechenden Zeichen aus bisherigen Eintraumlgen

Auch hier gilt Tragen Sie interne Links in Ihrer A-Z-Liste bitte als relative Verknuumlpfungen ohne

Verweis auf den Webserver der Universitaumlt ein also

bull Abiturjahrgang 2013||doppelter_abiturjahrgang||

anstelle von

bull Abiturjahrgang 2013||httpwwwuni-duededoppelter_abiturjahrgang||

Externe Links (wie etwa bdquoGlassbooth ||httpwwwglassboothde||ldquo) werden auf der

ausgegebenen Webseite entsprechend gekennzeichnet

S e i t e | 25

Die Eintraumlge im Modul bdquoA-Z verwaltenldquo sortiert das Content Management System automatisch nach

Ziffernreihenfolge bzw dem Alphabet Um die Eintraumlge spaumlter einfach aufzufinden und bearbeiten zu

koumlnnen empfiehlt es sich jedoch bereits im Eingabefeld selbst eine alphabetische Sortierung

vorzunehmen

64 Code editieren PHP-Skript HTML-Web-Seite

Das Modul bdquoCode editierenldquo eroumlffnet Ihnen die Moumlglichkeit in Ihrem Internetauftritt eigene PHP-

oder HTML-Codeschnipsel zu erstellen und zu nutzen oder Programmierungen eigener Funktionen

vorzunehmen

Nutzen Sie dieses Modul bitte nicht um Funktionen zu simulieren die Ihnen das CMS IMPERIA bereits

als vorgefertigte Module zur Verfuumlgung stellt Das freie Code-Eingabefeld ist ebenfalls nicht dazu

S e i t e | 26

vorgesehen auf diesem Wege vom Corporate Design der Universitaumlt abweichende eigene Layouts zu

entwickeln

65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

Uumlber das Modul bdquoCodebaustein einfuumlgenldquo ist es moumlglich vorgefertigte Bloumlcke oder bdquoBauteileldquo in Ihre

Webseite zu integrieren Codebausteine eignen sich dazu bestimmte Informationen die auf vielen

Webseiten wiederkehren an einer Stelle zentral zu pflegen In der Bearbeitungsebene bietet Ihnen

das Modul die in der aktuellen Rubrik vorhandenen Bausteine zur Auswahl an

Codebausteine erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 27

Sie koumlnnen in Codebausteinen wie beim uumlblichen Seitenaufbau gewohnt unterschiedliche Module

kombinieren und positionieren Zur Verfuumlgung stehen die Elemente

bull (TinyMCE)-Texteditor

bull Code editieren

bull die Formularmodule

bull Randlose Grafik

bull RSS-Feed-Agent

bull Tube Audio-VideoPlayer

Eine spaumltere Bearbeitung der Codebausteine ist im CMS IMPERIA nicht uumlber das Tool bdquoQuickEditldquo

moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo

im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichniscode_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Codebausteine im

selben Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

66 DBAdmin PHP-Skript

Mit Hilfe des Moduls bdquoDBAdminldquo lassen sich Datenbank direkt in Tabellenform auf Ihrer Webseite

darstellen Uumlber die Funktion bdquoOptionen anzeigenldquo erhalten Sie zudem die Moumlglichkeit eine

Webseite zur Pflege Ihrer Datenbank zu erstellen Dort koumlnnen Sie die entsprechende Tabelle

editieren d h Eintraumlge einzeln erstellen bearbeiten oder loumlschen

S e i t e | 28

Zur Nutzung dieses Moduls sind folgende Angaben notwendig

bull Datenbank-Server Name oder IP-Adresse des Servers auf dem die anzusprechende

Datenbank liegt (bspw bdquodbuni-duedeldquo)

bull Datenbank-Name

bull Tabellen-Name Name der speziellen Tabelle die innerhalb der Datenbank angesprochen

werden soll

bull Datenbank-Benutzer und Datenbank-Passwort

Datenbanken auf einem UDE-Server koumlnnen Universitaumltsangehoumlrige unter Nutzung ihrer

Hochschulkennung online beim Zentrum fuumlr Informations- und Mediendienste (ZIM) beantragen

unter httpwwwuni-duedezimserviceshomepagesmysqlshtml

67 Doppelcontainer PHP-Skript HTML-Web-Seite

Das Modul bdquoDoppelcontainerldquo ermoumlglicht es Ihnen auf Ihrer Webseite zwei Textebloumlcke (je nach

Wunsch mit oder ohne Bilder) nebeneinander zu setzen

Auf zweispaltig angelegten Webseiten ist die Anlage eines Doppelcontainers nur in der linken Spalte

moumlglich Bilder erscheinen dort in einer Breite von 246 Pixeln Auf einspaltig angelegten Webseiten

werden die einzelnen Bloumlcke (und dementsprechend die verwendeten Bilder) in einer Breite von 366

Pixeln angezeigt Die Bildhoumlhe ist in beiden Faumlllen frei waumlhlbar sollte jedoch in beiden Containern

identisch sein

S e i t e | 29

Zur Texteingabe stehen Ihnen die Optionen bdquoTeaserldquo (mit Zeichenbegrenzung) sowie bdquoStandardldquo

(ohne Zeichenbegrenzung) zur Verfuumlgung Waumlhlen Sie bdquoTeaserldquo so erhalten Sie Platz fuumlr 300 Zeichen

ndash ein Zeichenzaumlhler neben der Texteingabe-Box erleichtert das Mitzaumlhlen Der Text wird gelb

unterlegt wenn er nach dem naumlchsten Leerzeichen abgeschnitten wird Rot erscheint das Textfeld

wenn die Zeichenzahl bereits uumlberschritten wurde

Beachten Sie bitte dass das Modul HTML-Tags (URLs Mailadressen etc) automatisch filtert Sie

werden daher nicht angezeigt Um Ihren Text zu verlinken koumlnnen Sie das Eingabefeld bdquoMehr-Linkldquo

nutzen

Beide Bloumlcke innerhalb eines Doppelcontainers lassen sich individuell auf die uumlbliche Weise (weiszlig

hellblau sandfarben) hinterlegen

S e i t e | 30

68 Flickr nutzen PHP-Skript

Das Modul bdquoFlickr nutzenldquo ermoumlglicht es Ihnen im Sinne einer crossmedialen Verwertung Bilder aus

Ihrem Flickr-Account in Ihre IMPERIA-Webseite einzubinden Fuumlr diese Funktion benoumltigen Sie einen

sogenannten API-Key den Sie in Ihrem Flick-Auftritt unter

bull httpwwwflickrcomservicesappscreateapply

erzeugen lassen koumlnnen Tragen Sie dann diesen Key in die entsprechende Eingabemaske des Moduls

ein Anschlieszligend haben Sie die Moumlglichkeit ganze Fotosets (Alben) oder Einzelbilder einzubinden

Photoset anzeigen

S e i t e | 31

Zum Anzeigen von Photosets wird die entsprechende Photoset-ID ins Modul eingetragen Diese ID ist

Teil der Link-Adresse des entsprechenden Albums bei Flickr (die erscheint wenn Sie das Album

angeklickt haben) Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAMEsets12340954909

Die Photoset-ID verbirgt sich hinter den Ziffern am Ende der URL Sie koumlnnen auswaumlhlen wie viele

Fotos auf einer Webseite erscheinen sollen Dafuumlr uumlbernimmt das Modul die Bilder in der

quadratischen Aufloumlsung von Flickr also in einer Groumlszlige von 75 x 75 Pixeln Reicht der Platz dafuumlr

nicht aus wird eine zusaumltzliche Blaumltterfunktion angeboten Photoset- und Bild-Beschreibungen

koumlnnen aus dem Flickr-Account automatisch uumlbernommen werden wenn die entsprechenden

Optionen mit einem Haken aktiviert wurden

Einzelbild anzeigen

Um ein einzelnes Bild anzuzeigen benoumltigen Sie die entsprechen Flickr-Foto-ID Diese verbirgt sich

hinter der ersten Zahl in der Link-Adresse des entsprechenden Bildes Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAME5841603851inset-72157626981464896

Ein Einzelbild kann in einer hohen oder einer geringen Aufloumlsung eingebunden werden Bei einer

zweispaltig angelegten Webseite wird das Bild in der linken Inhaltsspalte auf eine Breite von 480

Pixel bei einer einspaltig angelegten Webseite auf eine Breite von 721 Pixel skaliert

69 Formulare

Mit IMPERIA haben Sie die Moumlglichkeit Formulare auf Ihrer Webseite zu platzieren In der

Bearbeitungsebene Ihrer Seite finden Sie im Bereich bdquoNeues Modulldquo den Menupunkt UDE ndash

Formular oumlffnen

Nach dem Festlegen der Hintergrundfarbe koumlnnen Sie im Bereich bdquoLegendeldquo den Titel Ihres

Formulars waumlhlen Wenn Sie die Funktion bdquoMailer-Funktionalitaumltldquo aktivieren koumlnnen Sie die Adresse

Ihres Mailscripts eingeben Anderenfalls belassen Sie es bitte beim Vorgabewert

Im Bereich bdquoNexturlldquo kann angegeben werden welche Seite nach dem Abschicken des Formulars

aufgerufen werden soll Daruumlber hinaus werden der Titel der E-Mail die Absender-Adresse sowie die

Empfaumlnger-Adresse definiert Optional kann eine Bestaumltigungs-E-Mail mit frei waumlhlbarem Text

versendet werden

S e i t e | 32

Um dem erstellten Formular Eingabefelder hinzuzufuumlgen ist das Modul bdquoUDE Formular Elementldquo zu

waumlhlen Waumlhlen Sie das Element bdquoTextldquo um ein Eingabefeld zu erzeugen Die Option bdquoBezeichnerldquo

beschreibt den sichtbaren Text im fertigen Formular zum Beispiel bdquoIhr Nameldquo Weitergehend koumlnnen

Sie die zulaumlssigen Inhalte der Nutzereingaben definieren sowie markieren ob das Element ein

Pflichtfeld sein soll

S e i t e | 33

Um ein Texteingabefeld innerhalb des Formulars zu erzeugen waumlhlen Sie das Element bdquoTextarealdquo

Sie koumlnnen die Groumlszlige des Textfeldes definieren (Zeilen x Spalten) und optional erneut eine Pruumlfung

zulaumlssiger Nutzereingaben aktivieren Weiterhin koumlnnen Sie waumlhlen ob der eingegebene Wert des

Formularelements in die Datenbank eingetragen werden soll Wenn Sie fuumlr Ihre Formulare auf eine

Datenbank zuruumlckgreifen moumlchten koumlnnen Sie sich hier informieren httpwwwuni-

duedezimserviceshomepagesmysqlshtml

Insgesamt stehen folgende Elemente zur Verfuumlgung

bull Checkbox Hidden Password Select Anfang Select Option einfuumlgen Select Ende Submit

Text Datum Textarea Radio Reset Leerzeile Kommentarzeile Neuer Abschnitt mit

Bezeichner sowie Datei-Upload

Ein Formular muss mit dem Modul bdquoUDE Formular schlieszligenldquo abgeschlossen werden An dieser

Stelle koumlnnen Sie einen Send-Button hinzufuumlgen dessen Name frei waumlhlbar ist Der eingegebene Text

wird als Beschriftung des Buttons angezeigt Erst durch das Hinzufuumlgen dieses Moduls wird das

Formular auf Ihrer Seite sichtbar und kann nach der Veroumlffentlichung genutzt werden

S e i t e | 34

610 Google-Maps (v30) PHP-Skript HTML-Web-Seite

Dieses Modul bringt eine Grafik von Google-Maps auf die Webseite entweder in Kartenoptik oder als

Satellitenbild Sie haben zwei Moumlglichkeiten eine solche zu generieren Uumlber die konkreten GPS-

Koordinaten oder durch das Angeben einer Adresse (zB Forsthausweg 2 47057 Duisburg) Sie

koumlnnen aus zwoumllf Vergroumlszligerungsstufen fuumlr den gewuumlnschten Ausschnitt zwei Kartengroumlszligen und

zwei Kartenformaten waumlhlen

S e i t e | 35

Kartengroumlszlige bdquogroszligldquo skaliert die Graphik auf 480 Pixel Breite auf einer zweispaltigen Seite bzw auf

721 Pixel auf einer einspaltigen Seite Die Option bdquokleinldquo verringert die Breite auf etwa die Haumllfte Die

beiden Optionen beim Kartenformat beeinflussen die Houmlhe der Grafik

S e i t e | 36

611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite

Das Modul Image-Gallery ermoumlglicht die Integration einer komfortablen Bildergallerie uumlber IMPERIA

Per Klick auf bdquoNeues Modulldquo -gt bdquoUDE Image-Gallery (v21)ldquo kann die entsprechende Gallerie an der

gewuumlnschten Position eingefuumlgt werden Generell sollten nur Bilder verwendet werden die

entweder auf 640 x 480 Pixel oder maximal auf 900 x 600 Pixel skaliert sind Aufgrund einer hohen

Dateigroumlszlige sollten Bilder einer Digitalkamera vor dem Upload komprimiert werden

Innerhalb des Moduls kann zunaumlchst die Hintergrundfarbe der Gallerie wahlweise zwischen Beige

Blau und Weiszlig eingestellt werden Um die Gallerie mit Bildern zu fuumlllen ist das entsprechende

Verzeichnis der Mediendatenbank anzugeben Aufgrund der geaumlnderten Syntax wird das Verzeichnis

ohne images angegeben Die Suchmaske fuumlr die Bilderauswahl deklariert die Dateiformate die mit

einbezogen werden sollen Schlieszliglich koumlnnen Sie die Bilder alphabetisch sortiert anzeigen lassen

sowie einen kleinen und einen groszligen Titel fuumlr Ihre Bildergallerie vergeben

Grundsaumltzlich ist es empfehlenswert groumlszligere Bildmengen auf mehrere Seiten zu verteilen um

einerseits die Darstellung auf mobilen Geraumlten zu vereinfachen und andererseits geringeren

Bandbreiten Rechnung zu tragen

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 19: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 18

62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite

Mit dem TinyMCE-Texteditor stellt Ihnen das Content Management System der UDE einen auf

JavaScript basierenden WYSIWYG-Editor (bdquoWhat You See Is What You Getldquo) zur Verfuumlgung Mit Hilfe

dieses Moduls ist es moumlglich ohne HTML- oder weitergehende Programmierkenntnisse Beitraumlge zu

verfassen und Seiten zu formatieren Die Bedienung mittels einer Textbox orientiert sich stark an

gaumlngiger und bekannter Textverarbeitungs-Software

Texte formatieren

Selbstverstaumlndlich bietet der TinyMCE-Editor die uumlblichen Arten Texte zu formatieren Neben den

Befehlen fett (bdquoBoldldquo) kursiv (bdquoItalicldquo) unterstrichen (bdquoUnderlineldquo) sowie hoch- bzw tiefgestellt

bietet Ihnen das System uumlber das Ω-Symbol eine breite Palette an Sonderzeichen uumlber die

Listenfunktion die Erstellung einfacher oder nummerierter Aufzaumlhlungslisten an Mittels einer Select-

S e i t e | 19

Box koumlnnen Sie auszligerdem auf im Hochschullayout vorgegebene Uumlberschriftarten (bdquoHeadingsldquo)

zuruumlckgreifen

Als weitere Moumlglichkeiten steht Ihnen frei

bull ein Datum undoder eine Uhrzeit einzufuumlgen

bull Blockzitate zu kennzeichnen oder

bull geschuumltzte Leerzeichen (bdquoNon-breaking Space Characterldquo) zu definieren

bull Das Ankersymbol (bdquoInsertEdit Anchorldquo) erlaubt die Definition von Sprungzielen innerhalb

laumlngerer Texte

Im Notfall hilft Ihnen das Radiergummi-Symbol (bdquoRemove Formatting) saumlmtliche Formatierungen zu

entfernen

Bereits formatierten Text einfuumlgen

Uumlber diese Formatierungsarten hinaus koumlnnen Sie auch bereits vorformatierte Texte aus Ihrer

Textverarbeitung in den Editor kopieren Zum Einfuumlgen nutzen Sie jedoch bitte nicht den einfachen

Copy amp Paste-Befehl sondern die im Modul bereitgestellte Funktion bdquoPaste from Wordldquo (Sie finden

das entsprechende bdquoWldquo-Symbol unter der Texteingabe-Box) ndash und zwar auch dann wenn Ihr

Ursprungstext nicht aus Microsoft Word sondern einer anderen Textverarbeitungssoftware

importiert wird Schriftformatierungen Verlinkungen und Aumlhnliches werden dann 11 uumlbernommen

Achten Sie bitte dennoch darauf dass dieser Funktion Grenzen gesetzt sind und arbeiten Sie mit

moumlglichst einfachen Formatvorlagen

HTML-Ansicht

Fuumlr Redakteure die sich in der Seitenprogrammierung sicherer fuumlhlen als in der Textverarbeitung

haumllt das Modul TinyMCE-Texteditor uumlber den Button bdquoHTMLldquo einen HTML Source Editor bereit mit

dem direkt auf den Quelltext und die Codierung dieses Teils der Webseite zugegriffen werden kann

Diese Funktion eignet sich auszligerdem besonders zur Uumlberpruumlfung und Fehlersuche Zur

Programmierung eigener Funktionen nutzen Sie jedoch bitte das Modul bdquoCode editierenldquo

S e i t e | 20

Links

Die uumlber die Symbole bdquoInsertEdit Linkldquo (Link einfuumlgen oder bearbeiten) in Ihre Texte oder

Aufzaumlhlungslisten eingefuumlgten Hyperlinks formatiert das System selbststaumlndig im fuumlr die UDE

vorgesehehen Layout Tragen Sie Links auf Seiten innerhalb von wwwuni-duede bitte als relative

Verknuumlpfungen ohne Verweis auf den Webserver der Universitaumlt ein also

bull depresse

anstelle von

bull httpwwwuni-duededepresseindexphp

Zeichnen sie auszligerdem Ihre Verlinkungen im Sinne der Barrierefreiheit mit sprechenden Titeln aus

und uumlberlegen Sie sich ob das Sprungziel im selben oder in einem neuen Browserfenster geoumlffnet

werden soll

Uumlber das Symbol bdquoUnlinkldquo entfernen Sie die entsprechende Verlinkung

Bilder

Der TinyMCE-Texteditor bietet Ihnen zwei Moumlglichkeiten Bilder in Ihre Texte einzubinden

S e i t e | 21

bull Uumlber die Funktion bdquoInsertEdit Imageldquo (Icon unter der Texteingabe-Box) koumlnnen Sie den

relativen Pfad auf das entsprechende Bild aus der IMPERIA-Mediendatenbank einfuumlgen

(Formatbeispiel imperiamdimageswebredaktion2013parentservicejpg)

bull Die Funktion bdquoVorschaubild waumlhlenldquo laumlsst Sie direkt auf die IMPERIA-Mediendatenbank

zugreifen und dort die gewuumlnschte Grafik per Klick auswaumlhlen Uumlber die Funktion bdquoVollbild

waumlhlenldquo koumlnnen Sie das Bild optional zu einer groumlszligeren Ansicht verlinken die sich als

bdquoLightboxldquo uumlber der aktiven Webseite oumlffnet Der Befehl bdquoBild zuruumlcksetzenldquo entfernt die

gewaumlhlte Grafik aus Ihrer Webseite

Waumlhrend Sie mittels bdquoInsertEdit Imageldquo die Anzeige-Groumlszlige Ihres Bildes (bis maximal 480 Pixel

Breite) selbst bestimmen koumlnnen werden Grafiken uumlber die Funktion bdquoVorschaubild waumlhlenldquo beim

Einfuumlgen automatisch auf die passende Groumlszlige skaliert (162 Pixel Breite in der linken und 204 Pixel

Breite in der rechten Content-Spalte) In diesem Fall koumlnnen Sie zudem waumlhlen ob der Text an dieser

Stelle das Bild umflieszligt oder aber rechts daneben angezeigt wird Das Vollbild wird bei der Eingabe

nicht skaliert Nutzen Sie daher bitte Bilder mit einer bildschirmtauglichen Groumlszlige (maximal 1024

Pixel)

S e i t e | 22

Tabellen

Uumlber das Icon bdquoInsertEdit Tableldquo fuumlgen Sie an der gewuumlnschten Stelle Tabellen in Ihren Texteditor

ein Unter den Reitern bdquoGeneralldquo und bdquoAdvancedldquo koumlnnen Sie diese Tabellen gemaumlszlig den uumlblichen

HTML-Konventionen erstellen formatieren und bearbeiten

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig gemaumlszlig den Vorgaben der Barrierefreiheit als

solche aus Der Text-Editor stellt Ihnen diese Optionen zur Verfuumlgung

bull Beachten Sie dass die Hintergrundfarbe der Tabellen je nach gewaumlhlter Einfaumlrbung des

Moduls variiert

S e i t e | 23

Texte mit bdquoVerfallsdatumldquo

Grundsaumltzlich steht Ihnen das Modul bdquo(TinyMCE)-Texteditorldquo sowohl auf shtml-Seiten als auch in

php-Skripten zur Verfuumlgung Auf php-Seiten laumlsst sich jedoch eine zusaumltzliche Option nutzen Fuumlr

Texte die nur fuumlr einen gewissen Zeitraum auf Ihrer Webseite erscheinen sollen koumlnnen Sie ein

Start- und Enddatum setzen

63 A-Z verwalten PHP-Skript HTML-Web-Seite

Das Modul bdquoA-Z verwaltenldquo ermoumlglicht den Redakteuren A-Z-Listen relativ einfach zu erzeugen und

zu pflegen

S e i t e | 24

Fuumlr jeden Eintrag in der Stichwortliste muss im Eingabefeld eine einzelne Zeile eingefuumlgt werden Die

Eingabe folgt einem festen Schema

bull Stichwort||URL (Internetadresse)||

oder

bull Stichwort||URL (Internetadresse)||eventuell ein kurzer Beschreibungstext

wobei auf den Beschreibungstext auch verzichtet werden kann Die sogenannten bdquoPipe-Zeichenldquo (||)

dienen als Feldtrenner Sie erzeugen sie uumlber den Tastaturbefehl bdquoAltGr amp das Groumlszligerzeichenldquo

Wahlweise kopieren Sie die entsprechenden Zeichen aus bisherigen Eintraumlgen

Auch hier gilt Tragen Sie interne Links in Ihrer A-Z-Liste bitte als relative Verknuumlpfungen ohne

Verweis auf den Webserver der Universitaumlt ein also

bull Abiturjahrgang 2013||doppelter_abiturjahrgang||

anstelle von

bull Abiturjahrgang 2013||httpwwwuni-duededoppelter_abiturjahrgang||

Externe Links (wie etwa bdquoGlassbooth ||httpwwwglassboothde||ldquo) werden auf der

ausgegebenen Webseite entsprechend gekennzeichnet

S e i t e | 25

Die Eintraumlge im Modul bdquoA-Z verwaltenldquo sortiert das Content Management System automatisch nach

Ziffernreihenfolge bzw dem Alphabet Um die Eintraumlge spaumlter einfach aufzufinden und bearbeiten zu

koumlnnen empfiehlt es sich jedoch bereits im Eingabefeld selbst eine alphabetische Sortierung

vorzunehmen

64 Code editieren PHP-Skript HTML-Web-Seite

Das Modul bdquoCode editierenldquo eroumlffnet Ihnen die Moumlglichkeit in Ihrem Internetauftritt eigene PHP-

oder HTML-Codeschnipsel zu erstellen und zu nutzen oder Programmierungen eigener Funktionen

vorzunehmen

Nutzen Sie dieses Modul bitte nicht um Funktionen zu simulieren die Ihnen das CMS IMPERIA bereits

als vorgefertigte Module zur Verfuumlgung stellt Das freie Code-Eingabefeld ist ebenfalls nicht dazu

S e i t e | 26

vorgesehen auf diesem Wege vom Corporate Design der Universitaumlt abweichende eigene Layouts zu

entwickeln

65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

Uumlber das Modul bdquoCodebaustein einfuumlgenldquo ist es moumlglich vorgefertigte Bloumlcke oder bdquoBauteileldquo in Ihre

Webseite zu integrieren Codebausteine eignen sich dazu bestimmte Informationen die auf vielen

Webseiten wiederkehren an einer Stelle zentral zu pflegen In der Bearbeitungsebene bietet Ihnen

das Modul die in der aktuellen Rubrik vorhandenen Bausteine zur Auswahl an

Codebausteine erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 27

Sie koumlnnen in Codebausteinen wie beim uumlblichen Seitenaufbau gewohnt unterschiedliche Module

kombinieren und positionieren Zur Verfuumlgung stehen die Elemente

bull (TinyMCE)-Texteditor

bull Code editieren

bull die Formularmodule

bull Randlose Grafik

bull RSS-Feed-Agent

bull Tube Audio-VideoPlayer

Eine spaumltere Bearbeitung der Codebausteine ist im CMS IMPERIA nicht uumlber das Tool bdquoQuickEditldquo

moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo

im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichniscode_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Codebausteine im

selben Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

66 DBAdmin PHP-Skript

Mit Hilfe des Moduls bdquoDBAdminldquo lassen sich Datenbank direkt in Tabellenform auf Ihrer Webseite

darstellen Uumlber die Funktion bdquoOptionen anzeigenldquo erhalten Sie zudem die Moumlglichkeit eine

Webseite zur Pflege Ihrer Datenbank zu erstellen Dort koumlnnen Sie die entsprechende Tabelle

editieren d h Eintraumlge einzeln erstellen bearbeiten oder loumlschen

S e i t e | 28

Zur Nutzung dieses Moduls sind folgende Angaben notwendig

bull Datenbank-Server Name oder IP-Adresse des Servers auf dem die anzusprechende

Datenbank liegt (bspw bdquodbuni-duedeldquo)

bull Datenbank-Name

bull Tabellen-Name Name der speziellen Tabelle die innerhalb der Datenbank angesprochen

werden soll

bull Datenbank-Benutzer und Datenbank-Passwort

Datenbanken auf einem UDE-Server koumlnnen Universitaumltsangehoumlrige unter Nutzung ihrer

Hochschulkennung online beim Zentrum fuumlr Informations- und Mediendienste (ZIM) beantragen

unter httpwwwuni-duedezimserviceshomepagesmysqlshtml

67 Doppelcontainer PHP-Skript HTML-Web-Seite

Das Modul bdquoDoppelcontainerldquo ermoumlglicht es Ihnen auf Ihrer Webseite zwei Textebloumlcke (je nach

Wunsch mit oder ohne Bilder) nebeneinander zu setzen

Auf zweispaltig angelegten Webseiten ist die Anlage eines Doppelcontainers nur in der linken Spalte

moumlglich Bilder erscheinen dort in einer Breite von 246 Pixeln Auf einspaltig angelegten Webseiten

werden die einzelnen Bloumlcke (und dementsprechend die verwendeten Bilder) in einer Breite von 366

Pixeln angezeigt Die Bildhoumlhe ist in beiden Faumlllen frei waumlhlbar sollte jedoch in beiden Containern

identisch sein

S e i t e | 29

Zur Texteingabe stehen Ihnen die Optionen bdquoTeaserldquo (mit Zeichenbegrenzung) sowie bdquoStandardldquo

(ohne Zeichenbegrenzung) zur Verfuumlgung Waumlhlen Sie bdquoTeaserldquo so erhalten Sie Platz fuumlr 300 Zeichen

ndash ein Zeichenzaumlhler neben der Texteingabe-Box erleichtert das Mitzaumlhlen Der Text wird gelb

unterlegt wenn er nach dem naumlchsten Leerzeichen abgeschnitten wird Rot erscheint das Textfeld

wenn die Zeichenzahl bereits uumlberschritten wurde

Beachten Sie bitte dass das Modul HTML-Tags (URLs Mailadressen etc) automatisch filtert Sie

werden daher nicht angezeigt Um Ihren Text zu verlinken koumlnnen Sie das Eingabefeld bdquoMehr-Linkldquo

nutzen

Beide Bloumlcke innerhalb eines Doppelcontainers lassen sich individuell auf die uumlbliche Weise (weiszlig

hellblau sandfarben) hinterlegen

S e i t e | 30

68 Flickr nutzen PHP-Skript

Das Modul bdquoFlickr nutzenldquo ermoumlglicht es Ihnen im Sinne einer crossmedialen Verwertung Bilder aus

Ihrem Flickr-Account in Ihre IMPERIA-Webseite einzubinden Fuumlr diese Funktion benoumltigen Sie einen

sogenannten API-Key den Sie in Ihrem Flick-Auftritt unter

bull httpwwwflickrcomservicesappscreateapply

erzeugen lassen koumlnnen Tragen Sie dann diesen Key in die entsprechende Eingabemaske des Moduls

ein Anschlieszligend haben Sie die Moumlglichkeit ganze Fotosets (Alben) oder Einzelbilder einzubinden

Photoset anzeigen

S e i t e | 31

Zum Anzeigen von Photosets wird die entsprechende Photoset-ID ins Modul eingetragen Diese ID ist

Teil der Link-Adresse des entsprechenden Albums bei Flickr (die erscheint wenn Sie das Album

angeklickt haben) Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAMEsets12340954909

Die Photoset-ID verbirgt sich hinter den Ziffern am Ende der URL Sie koumlnnen auswaumlhlen wie viele

Fotos auf einer Webseite erscheinen sollen Dafuumlr uumlbernimmt das Modul die Bilder in der

quadratischen Aufloumlsung von Flickr also in einer Groumlszlige von 75 x 75 Pixeln Reicht der Platz dafuumlr

nicht aus wird eine zusaumltzliche Blaumltterfunktion angeboten Photoset- und Bild-Beschreibungen

koumlnnen aus dem Flickr-Account automatisch uumlbernommen werden wenn die entsprechenden

Optionen mit einem Haken aktiviert wurden

Einzelbild anzeigen

Um ein einzelnes Bild anzuzeigen benoumltigen Sie die entsprechen Flickr-Foto-ID Diese verbirgt sich

hinter der ersten Zahl in der Link-Adresse des entsprechenden Bildes Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAME5841603851inset-72157626981464896

Ein Einzelbild kann in einer hohen oder einer geringen Aufloumlsung eingebunden werden Bei einer

zweispaltig angelegten Webseite wird das Bild in der linken Inhaltsspalte auf eine Breite von 480

Pixel bei einer einspaltig angelegten Webseite auf eine Breite von 721 Pixel skaliert

69 Formulare

Mit IMPERIA haben Sie die Moumlglichkeit Formulare auf Ihrer Webseite zu platzieren In der

Bearbeitungsebene Ihrer Seite finden Sie im Bereich bdquoNeues Modulldquo den Menupunkt UDE ndash

Formular oumlffnen

Nach dem Festlegen der Hintergrundfarbe koumlnnen Sie im Bereich bdquoLegendeldquo den Titel Ihres

Formulars waumlhlen Wenn Sie die Funktion bdquoMailer-Funktionalitaumltldquo aktivieren koumlnnen Sie die Adresse

Ihres Mailscripts eingeben Anderenfalls belassen Sie es bitte beim Vorgabewert

Im Bereich bdquoNexturlldquo kann angegeben werden welche Seite nach dem Abschicken des Formulars

aufgerufen werden soll Daruumlber hinaus werden der Titel der E-Mail die Absender-Adresse sowie die

Empfaumlnger-Adresse definiert Optional kann eine Bestaumltigungs-E-Mail mit frei waumlhlbarem Text

versendet werden

S e i t e | 32

Um dem erstellten Formular Eingabefelder hinzuzufuumlgen ist das Modul bdquoUDE Formular Elementldquo zu

waumlhlen Waumlhlen Sie das Element bdquoTextldquo um ein Eingabefeld zu erzeugen Die Option bdquoBezeichnerldquo

beschreibt den sichtbaren Text im fertigen Formular zum Beispiel bdquoIhr Nameldquo Weitergehend koumlnnen

Sie die zulaumlssigen Inhalte der Nutzereingaben definieren sowie markieren ob das Element ein

Pflichtfeld sein soll

S e i t e | 33

Um ein Texteingabefeld innerhalb des Formulars zu erzeugen waumlhlen Sie das Element bdquoTextarealdquo

Sie koumlnnen die Groumlszlige des Textfeldes definieren (Zeilen x Spalten) und optional erneut eine Pruumlfung

zulaumlssiger Nutzereingaben aktivieren Weiterhin koumlnnen Sie waumlhlen ob der eingegebene Wert des

Formularelements in die Datenbank eingetragen werden soll Wenn Sie fuumlr Ihre Formulare auf eine

Datenbank zuruumlckgreifen moumlchten koumlnnen Sie sich hier informieren httpwwwuni-

duedezimserviceshomepagesmysqlshtml

Insgesamt stehen folgende Elemente zur Verfuumlgung

bull Checkbox Hidden Password Select Anfang Select Option einfuumlgen Select Ende Submit

Text Datum Textarea Radio Reset Leerzeile Kommentarzeile Neuer Abschnitt mit

Bezeichner sowie Datei-Upload

Ein Formular muss mit dem Modul bdquoUDE Formular schlieszligenldquo abgeschlossen werden An dieser

Stelle koumlnnen Sie einen Send-Button hinzufuumlgen dessen Name frei waumlhlbar ist Der eingegebene Text

wird als Beschriftung des Buttons angezeigt Erst durch das Hinzufuumlgen dieses Moduls wird das

Formular auf Ihrer Seite sichtbar und kann nach der Veroumlffentlichung genutzt werden

S e i t e | 34

610 Google-Maps (v30) PHP-Skript HTML-Web-Seite

Dieses Modul bringt eine Grafik von Google-Maps auf die Webseite entweder in Kartenoptik oder als

Satellitenbild Sie haben zwei Moumlglichkeiten eine solche zu generieren Uumlber die konkreten GPS-

Koordinaten oder durch das Angeben einer Adresse (zB Forsthausweg 2 47057 Duisburg) Sie

koumlnnen aus zwoumllf Vergroumlszligerungsstufen fuumlr den gewuumlnschten Ausschnitt zwei Kartengroumlszligen und

zwei Kartenformaten waumlhlen

S e i t e | 35

Kartengroumlszlige bdquogroszligldquo skaliert die Graphik auf 480 Pixel Breite auf einer zweispaltigen Seite bzw auf

721 Pixel auf einer einspaltigen Seite Die Option bdquokleinldquo verringert die Breite auf etwa die Haumllfte Die

beiden Optionen beim Kartenformat beeinflussen die Houmlhe der Grafik

S e i t e | 36

611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite

Das Modul Image-Gallery ermoumlglicht die Integration einer komfortablen Bildergallerie uumlber IMPERIA

Per Klick auf bdquoNeues Modulldquo -gt bdquoUDE Image-Gallery (v21)ldquo kann die entsprechende Gallerie an der

gewuumlnschten Position eingefuumlgt werden Generell sollten nur Bilder verwendet werden die

entweder auf 640 x 480 Pixel oder maximal auf 900 x 600 Pixel skaliert sind Aufgrund einer hohen

Dateigroumlszlige sollten Bilder einer Digitalkamera vor dem Upload komprimiert werden

Innerhalb des Moduls kann zunaumlchst die Hintergrundfarbe der Gallerie wahlweise zwischen Beige

Blau und Weiszlig eingestellt werden Um die Gallerie mit Bildern zu fuumlllen ist das entsprechende

Verzeichnis der Mediendatenbank anzugeben Aufgrund der geaumlnderten Syntax wird das Verzeichnis

ohne images angegeben Die Suchmaske fuumlr die Bilderauswahl deklariert die Dateiformate die mit

einbezogen werden sollen Schlieszliglich koumlnnen Sie die Bilder alphabetisch sortiert anzeigen lassen

sowie einen kleinen und einen groszligen Titel fuumlr Ihre Bildergallerie vergeben

Grundsaumltzlich ist es empfehlenswert groumlszligere Bildmengen auf mehrere Seiten zu verteilen um

einerseits die Darstellung auf mobilen Geraumlten zu vereinfachen und andererseits geringeren

Bandbreiten Rechnung zu tragen

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 20: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 19

Box koumlnnen Sie auszligerdem auf im Hochschullayout vorgegebene Uumlberschriftarten (bdquoHeadingsldquo)

zuruumlckgreifen

Als weitere Moumlglichkeiten steht Ihnen frei

bull ein Datum undoder eine Uhrzeit einzufuumlgen

bull Blockzitate zu kennzeichnen oder

bull geschuumltzte Leerzeichen (bdquoNon-breaking Space Characterldquo) zu definieren

bull Das Ankersymbol (bdquoInsertEdit Anchorldquo) erlaubt die Definition von Sprungzielen innerhalb

laumlngerer Texte

Im Notfall hilft Ihnen das Radiergummi-Symbol (bdquoRemove Formatting) saumlmtliche Formatierungen zu

entfernen

Bereits formatierten Text einfuumlgen

Uumlber diese Formatierungsarten hinaus koumlnnen Sie auch bereits vorformatierte Texte aus Ihrer

Textverarbeitung in den Editor kopieren Zum Einfuumlgen nutzen Sie jedoch bitte nicht den einfachen

Copy amp Paste-Befehl sondern die im Modul bereitgestellte Funktion bdquoPaste from Wordldquo (Sie finden

das entsprechende bdquoWldquo-Symbol unter der Texteingabe-Box) ndash und zwar auch dann wenn Ihr

Ursprungstext nicht aus Microsoft Word sondern einer anderen Textverarbeitungssoftware

importiert wird Schriftformatierungen Verlinkungen und Aumlhnliches werden dann 11 uumlbernommen

Achten Sie bitte dennoch darauf dass dieser Funktion Grenzen gesetzt sind und arbeiten Sie mit

moumlglichst einfachen Formatvorlagen

HTML-Ansicht

Fuumlr Redakteure die sich in der Seitenprogrammierung sicherer fuumlhlen als in der Textverarbeitung

haumllt das Modul TinyMCE-Texteditor uumlber den Button bdquoHTMLldquo einen HTML Source Editor bereit mit

dem direkt auf den Quelltext und die Codierung dieses Teils der Webseite zugegriffen werden kann

Diese Funktion eignet sich auszligerdem besonders zur Uumlberpruumlfung und Fehlersuche Zur

Programmierung eigener Funktionen nutzen Sie jedoch bitte das Modul bdquoCode editierenldquo

S e i t e | 20

Links

Die uumlber die Symbole bdquoInsertEdit Linkldquo (Link einfuumlgen oder bearbeiten) in Ihre Texte oder

Aufzaumlhlungslisten eingefuumlgten Hyperlinks formatiert das System selbststaumlndig im fuumlr die UDE

vorgesehehen Layout Tragen Sie Links auf Seiten innerhalb von wwwuni-duede bitte als relative

Verknuumlpfungen ohne Verweis auf den Webserver der Universitaumlt ein also

bull depresse

anstelle von

bull httpwwwuni-duededepresseindexphp

Zeichnen sie auszligerdem Ihre Verlinkungen im Sinne der Barrierefreiheit mit sprechenden Titeln aus

und uumlberlegen Sie sich ob das Sprungziel im selben oder in einem neuen Browserfenster geoumlffnet

werden soll

Uumlber das Symbol bdquoUnlinkldquo entfernen Sie die entsprechende Verlinkung

Bilder

Der TinyMCE-Texteditor bietet Ihnen zwei Moumlglichkeiten Bilder in Ihre Texte einzubinden

S e i t e | 21

bull Uumlber die Funktion bdquoInsertEdit Imageldquo (Icon unter der Texteingabe-Box) koumlnnen Sie den

relativen Pfad auf das entsprechende Bild aus der IMPERIA-Mediendatenbank einfuumlgen

(Formatbeispiel imperiamdimageswebredaktion2013parentservicejpg)

bull Die Funktion bdquoVorschaubild waumlhlenldquo laumlsst Sie direkt auf die IMPERIA-Mediendatenbank

zugreifen und dort die gewuumlnschte Grafik per Klick auswaumlhlen Uumlber die Funktion bdquoVollbild

waumlhlenldquo koumlnnen Sie das Bild optional zu einer groumlszligeren Ansicht verlinken die sich als

bdquoLightboxldquo uumlber der aktiven Webseite oumlffnet Der Befehl bdquoBild zuruumlcksetzenldquo entfernt die

gewaumlhlte Grafik aus Ihrer Webseite

Waumlhrend Sie mittels bdquoInsertEdit Imageldquo die Anzeige-Groumlszlige Ihres Bildes (bis maximal 480 Pixel

Breite) selbst bestimmen koumlnnen werden Grafiken uumlber die Funktion bdquoVorschaubild waumlhlenldquo beim

Einfuumlgen automatisch auf die passende Groumlszlige skaliert (162 Pixel Breite in der linken und 204 Pixel

Breite in der rechten Content-Spalte) In diesem Fall koumlnnen Sie zudem waumlhlen ob der Text an dieser

Stelle das Bild umflieszligt oder aber rechts daneben angezeigt wird Das Vollbild wird bei der Eingabe

nicht skaliert Nutzen Sie daher bitte Bilder mit einer bildschirmtauglichen Groumlszlige (maximal 1024

Pixel)

S e i t e | 22

Tabellen

Uumlber das Icon bdquoInsertEdit Tableldquo fuumlgen Sie an der gewuumlnschten Stelle Tabellen in Ihren Texteditor

ein Unter den Reitern bdquoGeneralldquo und bdquoAdvancedldquo koumlnnen Sie diese Tabellen gemaumlszlig den uumlblichen

HTML-Konventionen erstellen formatieren und bearbeiten

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig gemaumlszlig den Vorgaben der Barrierefreiheit als

solche aus Der Text-Editor stellt Ihnen diese Optionen zur Verfuumlgung

bull Beachten Sie dass die Hintergrundfarbe der Tabellen je nach gewaumlhlter Einfaumlrbung des

Moduls variiert

S e i t e | 23

Texte mit bdquoVerfallsdatumldquo

Grundsaumltzlich steht Ihnen das Modul bdquo(TinyMCE)-Texteditorldquo sowohl auf shtml-Seiten als auch in

php-Skripten zur Verfuumlgung Auf php-Seiten laumlsst sich jedoch eine zusaumltzliche Option nutzen Fuumlr

Texte die nur fuumlr einen gewissen Zeitraum auf Ihrer Webseite erscheinen sollen koumlnnen Sie ein

Start- und Enddatum setzen

63 A-Z verwalten PHP-Skript HTML-Web-Seite

Das Modul bdquoA-Z verwaltenldquo ermoumlglicht den Redakteuren A-Z-Listen relativ einfach zu erzeugen und

zu pflegen

S e i t e | 24

Fuumlr jeden Eintrag in der Stichwortliste muss im Eingabefeld eine einzelne Zeile eingefuumlgt werden Die

Eingabe folgt einem festen Schema

bull Stichwort||URL (Internetadresse)||

oder

bull Stichwort||URL (Internetadresse)||eventuell ein kurzer Beschreibungstext

wobei auf den Beschreibungstext auch verzichtet werden kann Die sogenannten bdquoPipe-Zeichenldquo (||)

dienen als Feldtrenner Sie erzeugen sie uumlber den Tastaturbefehl bdquoAltGr amp das Groumlszligerzeichenldquo

Wahlweise kopieren Sie die entsprechenden Zeichen aus bisherigen Eintraumlgen

Auch hier gilt Tragen Sie interne Links in Ihrer A-Z-Liste bitte als relative Verknuumlpfungen ohne

Verweis auf den Webserver der Universitaumlt ein also

bull Abiturjahrgang 2013||doppelter_abiturjahrgang||

anstelle von

bull Abiturjahrgang 2013||httpwwwuni-duededoppelter_abiturjahrgang||

Externe Links (wie etwa bdquoGlassbooth ||httpwwwglassboothde||ldquo) werden auf der

ausgegebenen Webseite entsprechend gekennzeichnet

S e i t e | 25

Die Eintraumlge im Modul bdquoA-Z verwaltenldquo sortiert das Content Management System automatisch nach

Ziffernreihenfolge bzw dem Alphabet Um die Eintraumlge spaumlter einfach aufzufinden und bearbeiten zu

koumlnnen empfiehlt es sich jedoch bereits im Eingabefeld selbst eine alphabetische Sortierung

vorzunehmen

64 Code editieren PHP-Skript HTML-Web-Seite

Das Modul bdquoCode editierenldquo eroumlffnet Ihnen die Moumlglichkeit in Ihrem Internetauftritt eigene PHP-

oder HTML-Codeschnipsel zu erstellen und zu nutzen oder Programmierungen eigener Funktionen

vorzunehmen

Nutzen Sie dieses Modul bitte nicht um Funktionen zu simulieren die Ihnen das CMS IMPERIA bereits

als vorgefertigte Module zur Verfuumlgung stellt Das freie Code-Eingabefeld ist ebenfalls nicht dazu

S e i t e | 26

vorgesehen auf diesem Wege vom Corporate Design der Universitaumlt abweichende eigene Layouts zu

entwickeln

65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

Uumlber das Modul bdquoCodebaustein einfuumlgenldquo ist es moumlglich vorgefertigte Bloumlcke oder bdquoBauteileldquo in Ihre

Webseite zu integrieren Codebausteine eignen sich dazu bestimmte Informationen die auf vielen

Webseiten wiederkehren an einer Stelle zentral zu pflegen In der Bearbeitungsebene bietet Ihnen

das Modul die in der aktuellen Rubrik vorhandenen Bausteine zur Auswahl an

Codebausteine erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 27

Sie koumlnnen in Codebausteinen wie beim uumlblichen Seitenaufbau gewohnt unterschiedliche Module

kombinieren und positionieren Zur Verfuumlgung stehen die Elemente

bull (TinyMCE)-Texteditor

bull Code editieren

bull die Formularmodule

bull Randlose Grafik

bull RSS-Feed-Agent

bull Tube Audio-VideoPlayer

Eine spaumltere Bearbeitung der Codebausteine ist im CMS IMPERIA nicht uumlber das Tool bdquoQuickEditldquo

moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo

im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichniscode_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Codebausteine im

selben Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

66 DBAdmin PHP-Skript

Mit Hilfe des Moduls bdquoDBAdminldquo lassen sich Datenbank direkt in Tabellenform auf Ihrer Webseite

darstellen Uumlber die Funktion bdquoOptionen anzeigenldquo erhalten Sie zudem die Moumlglichkeit eine

Webseite zur Pflege Ihrer Datenbank zu erstellen Dort koumlnnen Sie die entsprechende Tabelle

editieren d h Eintraumlge einzeln erstellen bearbeiten oder loumlschen

S e i t e | 28

Zur Nutzung dieses Moduls sind folgende Angaben notwendig

bull Datenbank-Server Name oder IP-Adresse des Servers auf dem die anzusprechende

Datenbank liegt (bspw bdquodbuni-duedeldquo)

bull Datenbank-Name

bull Tabellen-Name Name der speziellen Tabelle die innerhalb der Datenbank angesprochen

werden soll

bull Datenbank-Benutzer und Datenbank-Passwort

Datenbanken auf einem UDE-Server koumlnnen Universitaumltsangehoumlrige unter Nutzung ihrer

Hochschulkennung online beim Zentrum fuumlr Informations- und Mediendienste (ZIM) beantragen

unter httpwwwuni-duedezimserviceshomepagesmysqlshtml

67 Doppelcontainer PHP-Skript HTML-Web-Seite

Das Modul bdquoDoppelcontainerldquo ermoumlglicht es Ihnen auf Ihrer Webseite zwei Textebloumlcke (je nach

Wunsch mit oder ohne Bilder) nebeneinander zu setzen

Auf zweispaltig angelegten Webseiten ist die Anlage eines Doppelcontainers nur in der linken Spalte

moumlglich Bilder erscheinen dort in einer Breite von 246 Pixeln Auf einspaltig angelegten Webseiten

werden die einzelnen Bloumlcke (und dementsprechend die verwendeten Bilder) in einer Breite von 366

Pixeln angezeigt Die Bildhoumlhe ist in beiden Faumlllen frei waumlhlbar sollte jedoch in beiden Containern

identisch sein

S e i t e | 29

Zur Texteingabe stehen Ihnen die Optionen bdquoTeaserldquo (mit Zeichenbegrenzung) sowie bdquoStandardldquo

(ohne Zeichenbegrenzung) zur Verfuumlgung Waumlhlen Sie bdquoTeaserldquo so erhalten Sie Platz fuumlr 300 Zeichen

ndash ein Zeichenzaumlhler neben der Texteingabe-Box erleichtert das Mitzaumlhlen Der Text wird gelb

unterlegt wenn er nach dem naumlchsten Leerzeichen abgeschnitten wird Rot erscheint das Textfeld

wenn die Zeichenzahl bereits uumlberschritten wurde

Beachten Sie bitte dass das Modul HTML-Tags (URLs Mailadressen etc) automatisch filtert Sie

werden daher nicht angezeigt Um Ihren Text zu verlinken koumlnnen Sie das Eingabefeld bdquoMehr-Linkldquo

nutzen

Beide Bloumlcke innerhalb eines Doppelcontainers lassen sich individuell auf die uumlbliche Weise (weiszlig

hellblau sandfarben) hinterlegen

S e i t e | 30

68 Flickr nutzen PHP-Skript

Das Modul bdquoFlickr nutzenldquo ermoumlglicht es Ihnen im Sinne einer crossmedialen Verwertung Bilder aus

Ihrem Flickr-Account in Ihre IMPERIA-Webseite einzubinden Fuumlr diese Funktion benoumltigen Sie einen

sogenannten API-Key den Sie in Ihrem Flick-Auftritt unter

bull httpwwwflickrcomservicesappscreateapply

erzeugen lassen koumlnnen Tragen Sie dann diesen Key in die entsprechende Eingabemaske des Moduls

ein Anschlieszligend haben Sie die Moumlglichkeit ganze Fotosets (Alben) oder Einzelbilder einzubinden

Photoset anzeigen

S e i t e | 31

Zum Anzeigen von Photosets wird die entsprechende Photoset-ID ins Modul eingetragen Diese ID ist

Teil der Link-Adresse des entsprechenden Albums bei Flickr (die erscheint wenn Sie das Album

angeklickt haben) Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAMEsets12340954909

Die Photoset-ID verbirgt sich hinter den Ziffern am Ende der URL Sie koumlnnen auswaumlhlen wie viele

Fotos auf einer Webseite erscheinen sollen Dafuumlr uumlbernimmt das Modul die Bilder in der

quadratischen Aufloumlsung von Flickr also in einer Groumlszlige von 75 x 75 Pixeln Reicht der Platz dafuumlr

nicht aus wird eine zusaumltzliche Blaumltterfunktion angeboten Photoset- und Bild-Beschreibungen

koumlnnen aus dem Flickr-Account automatisch uumlbernommen werden wenn die entsprechenden

Optionen mit einem Haken aktiviert wurden

Einzelbild anzeigen

Um ein einzelnes Bild anzuzeigen benoumltigen Sie die entsprechen Flickr-Foto-ID Diese verbirgt sich

hinter der ersten Zahl in der Link-Adresse des entsprechenden Bildes Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAME5841603851inset-72157626981464896

Ein Einzelbild kann in einer hohen oder einer geringen Aufloumlsung eingebunden werden Bei einer

zweispaltig angelegten Webseite wird das Bild in der linken Inhaltsspalte auf eine Breite von 480

Pixel bei einer einspaltig angelegten Webseite auf eine Breite von 721 Pixel skaliert

69 Formulare

Mit IMPERIA haben Sie die Moumlglichkeit Formulare auf Ihrer Webseite zu platzieren In der

Bearbeitungsebene Ihrer Seite finden Sie im Bereich bdquoNeues Modulldquo den Menupunkt UDE ndash

Formular oumlffnen

Nach dem Festlegen der Hintergrundfarbe koumlnnen Sie im Bereich bdquoLegendeldquo den Titel Ihres

Formulars waumlhlen Wenn Sie die Funktion bdquoMailer-Funktionalitaumltldquo aktivieren koumlnnen Sie die Adresse

Ihres Mailscripts eingeben Anderenfalls belassen Sie es bitte beim Vorgabewert

Im Bereich bdquoNexturlldquo kann angegeben werden welche Seite nach dem Abschicken des Formulars

aufgerufen werden soll Daruumlber hinaus werden der Titel der E-Mail die Absender-Adresse sowie die

Empfaumlnger-Adresse definiert Optional kann eine Bestaumltigungs-E-Mail mit frei waumlhlbarem Text

versendet werden

S e i t e | 32

Um dem erstellten Formular Eingabefelder hinzuzufuumlgen ist das Modul bdquoUDE Formular Elementldquo zu

waumlhlen Waumlhlen Sie das Element bdquoTextldquo um ein Eingabefeld zu erzeugen Die Option bdquoBezeichnerldquo

beschreibt den sichtbaren Text im fertigen Formular zum Beispiel bdquoIhr Nameldquo Weitergehend koumlnnen

Sie die zulaumlssigen Inhalte der Nutzereingaben definieren sowie markieren ob das Element ein

Pflichtfeld sein soll

S e i t e | 33

Um ein Texteingabefeld innerhalb des Formulars zu erzeugen waumlhlen Sie das Element bdquoTextarealdquo

Sie koumlnnen die Groumlszlige des Textfeldes definieren (Zeilen x Spalten) und optional erneut eine Pruumlfung

zulaumlssiger Nutzereingaben aktivieren Weiterhin koumlnnen Sie waumlhlen ob der eingegebene Wert des

Formularelements in die Datenbank eingetragen werden soll Wenn Sie fuumlr Ihre Formulare auf eine

Datenbank zuruumlckgreifen moumlchten koumlnnen Sie sich hier informieren httpwwwuni-

duedezimserviceshomepagesmysqlshtml

Insgesamt stehen folgende Elemente zur Verfuumlgung

bull Checkbox Hidden Password Select Anfang Select Option einfuumlgen Select Ende Submit

Text Datum Textarea Radio Reset Leerzeile Kommentarzeile Neuer Abschnitt mit

Bezeichner sowie Datei-Upload

Ein Formular muss mit dem Modul bdquoUDE Formular schlieszligenldquo abgeschlossen werden An dieser

Stelle koumlnnen Sie einen Send-Button hinzufuumlgen dessen Name frei waumlhlbar ist Der eingegebene Text

wird als Beschriftung des Buttons angezeigt Erst durch das Hinzufuumlgen dieses Moduls wird das

Formular auf Ihrer Seite sichtbar und kann nach der Veroumlffentlichung genutzt werden

S e i t e | 34

610 Google-Maps (v30) PHP-Skript HTML-Web-Seite

Dieses Modul bringt eine Grafik von Google-Maps auf die Webseite entweder in Kartenoptik oder als

Satellitenbild Sie haben zwei Moumlglichkeiten eine solche zu generieren Uumlber die konkreten GPS-

Koordinaten oder durch das Angeben einer Adresse (zB Forsthausweg 2 47057 Duisburg) Sie

koumlnnen aus zwoumllf Vergroumlszligerungsstufen fuumlr den gewuumlnschten Ausschnitt zwei Kartengroumlszligen und

zwei Kartenformaten waumlhlen

S e i t e | 35

Kartengroumlszlige bdquogroszligldquo skaliert die Graphik auf 480 Pixel Breite auf einer zweispaltigen Seite bzw auf

721 Pixel auf einer einspaltigen Seite Die Option bdquokleinldquo verringert die Breite auf etwa die Haumllfte Die

beiden Optionen beim Kartenformat beeinflussen die Houmlhe der Grafik

S e i t e | 36

611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite

Das Modul Image-Gallery ermoumlglicht die Integration einer komfortablen Bildergallerie uumlber IMPERIA

Per Klick auf bdquoNeues Modulldquo -gt bdquoUDE Image-Gallery (v21)ldquo kann die entsprechende Gallerie an der

gewuumlnschten Position eingefuumlgt werden Generell sollten nur Bilder verwendet werden die

entweder auf 640 x 480 Pixel oder maximal auf 900 x 600 Pixel skaliert sind Aufgrund einer hohen

Dateigroumlszlige sollten Bilder einer Digitalkamera vor dem Upload komprimiert werden

Innerhalb des Moduls kann zunaumlchst die Hintergrundfarbe der Gallerie wahlweise zwischen Beige

Blau und Weiszlig eingestellt werden Um die Gallerie mit Bildern zu fuumlllen ist das entsprechende

Verzeichnis der Mediendatenbank anzugeben Aufgrund der geaumlnderten Syntax wird das Verzeichnis

ohne images angegeben Die Suchmaske fuumlr die Bilderauswahl deklariert die Dateiformate die mit

einbezogen werden sollen Schlieszliglich koumlnnen Sie die Bilder alphabetisch sortiert anzeigen lassen

sowie einen kleinen und einen groszligen Titel fuumlr Ihre Bildergallerie vergeben

Grundsaumltzlich ist es empfehlenswert groumlszligere Bildmengen auf mehrere Seiten zu verteilen um

einerseits die Darstellung auf mobilen Geraumlten zu vereinfachen und andererseits geringeren

Bandbreiten Rechnung zu tragen

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 21: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 20

Links

Die uumlber die Symbole bdquoInsertEdit Linkldquo (Link einfuumlgen oder bearbeiten) in Ihre Texte oder

Aufzaumlhlungslisten eingefuumlgten Hyperlinks formatiert das System selbststaumlndig im fuumlr die UDE

vorgesehehen Layout Tragen Sie Links auf Seiten innerhalb von wwwuni-duede bitte als relative

Verknuumlpfungen ohne Verweis auf den Webserver der Universitaumlt ein also

bull depresse

anstelle von

bull httpwwwuni-duededepresseindexphp

Zeichnen sie auszligerdem Ihre Verlinkungen im Sinne der Barrierefreiheit mit sprechenden Titeln aus

und uumlberlegen Sie sich ob das Sprungziel im selben oder in einem neuen Browserfenster geoumlffnet

werden soll

Uumlber das Symbol bdquoUnlinkldquo entfernen Sie die entsprechende Verlinkung

Bilder

Der TinyMCE-Texteditor bietet Ihnen zwei Moumlglichkeiten Bilder in Ihre Texte einzubinden

S e i t e | 21

bull Uumlber die Funktion bdquoInsertEdit Imageldquo (Icon unter der Texteingabe-Box) koumlnnen Sie den

relativen Pfad auf das entsprechende Bild aus der IMPERIA-Mediendatenbank einfuumlgen

(Formatbeispiel imperiamdimageswebredaktion2013parentservicejpg)

bull Die Funktion bdquoVorschaubild waumlhlenldquo laumlsst Sie direkt auf die IMPERIA-Mediendatenbank

zugreifen und dort die gewuumlnschte Grafik per Klick auswaumlhlen Uumlber die Funktion bdquoVollbild

waumlhlenldquo koumlnnen Sie das Bild optional zu einer groumlszligeren Ansicht verlinken die sich als

bdquoLightboxldquo uumlber der aktiven Webseite oumlffnet Der Befehl bdquoBild zuruumlcksetzenldquo entfernt die

gewaumlhlte Grafik aus Ihrer Webseite

Waumlhrend Sie mittels bdquoInsertEdit Imageldquo die Anzeige-Groumlszlige Ihres Bildes (bis maximal 480 Pixel

Breite) selbst bestimmen koumlnnen werden Grafiken uumlber die Funktion bdquoVorschaubild waumlhlenldquo beim

Einfuumlgen automatisch auf die passende Groumlszlige skaliert (162 Pixel Breite in der linken und 204 Pixel

Breite in der rechten Content-Spalte) In diesem Fall koumlnnen Sie zudem waumlhlen ob der Text an dieser

Stelle das Bild umflieszligt oder aber rechts daneben angezeigt wird Das Vollbild wird bei der Eingabe

nicht skaliert Nutzen Sie daher bitte Bilder mit einer bildschirmtauglichen Groumlszlige (maximal 1024

Pixel)

S e i t e | 22

Tabellen

Uumlber das Icon bdquoInsertEdit Tableldquo fuumlgen Sie an der gewuumlnschten Stelle Tabellen in Ihren Texteditor

ein Unter den Reitern bdquoGeneralldquo und bdquoAdvancedldquo koumlnnen Sie diese Tabellen gemaumlszlig den uumlblichen

HTML-Konventionen erstellen formatieren und bearbeiten

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig gemaumlszlig den Vorgaben der Barrierefreiheit als

solche aus Der Text-Editor stellt Ihnen diese Optionen zur Verfuumlgung

bull Beachten Sie dass die Hintergrundfarbe der Tabellen je nach gewaumlhlter Einfaumlrbung des

Moduls variiert

S e i t e | 23

Texte mit bdquoVerfallsdatumldquo

Grundsaumltzlich steht Ihnen das Modul bdquo(TinyMCE)-Texteditorldquo sowohl auf shtml-Seiten als auch in

php-Skripten zur Verfuumlgung Auf php-Seiten laumlsst sich jedoch eine zusaumltzliche Option nutzen Fuumlr

Texte die nur fuumlr einen gewissen Zeitraum auf Ihrer Webseite erscheinen sollen koumlnnen Sie ein

Start- und Enddatum setzen

63 A-Z verwalten PHP-Skript HTML-Web-Seite

Das Modul bdquoA-Z verwaltenldquo ermoumlglicht den Redakteuren A-Z-Listen relativ einfach zu erzeugen und

zu pflegen

S e i t e | 24

Fuumlr jeden Eintrag in der Stichwortliste muss im Eingabefeld eine einzelne Zeile eingefuumlgt werden Die

Eingabe folgt einem festen Schema

bull Stichwort||URL (Internetadresse)||

oder

bull Stichwort||URL (Internetadresse)||eventuell ein kurzer Beschreibungstext

wobei auf den Beschreibungstext auch verzichtet werden kann Die sogenannten bdquoPipe-Zeichenldquo (||)

dienen als Feldtrenner Sie erzeugen sie uumlber den Tastaturbefehl bdquoAltGr amp das Groumlszligerzeichenldquo

Wahlweise kopieren Sie die entsprechenden Zeichen aus bisherigen Eintraumlgen

Auch hier gilt Tragen Sie interne Links in Ihrer A-Z-Liste bitte als relative Verknuumlpfungen ohne

Verweis auf den Webserver der Universitaumlt ein also

bull Abiturjahrgang 2013||doppelter_abiturjahrgang||

anstelle von

bull Abiturjahrgang 2013||httpwwwuni-duededoppelter_abiturjahrgang||

Externe Links (wie etwa bdquoGlassbooth ||httpwwwglassboothde||ldquo) werden auf der

ausgegebenen Webseite entsprechend gekennzeichnet

S e i t e | 25

Die Eintraumlge im Modul bdquoA-Z verwaltenldquo sortiert das Content Management System automatisch nach

Ziffernreihenfolge bzw dem Alphabet Um die Eintraumlge spaumlter einfach aufzufinden und bearbeiten zu

koumlnnen empfiehlt es sich jedoch bereits im Eingabefeld selbst eine alphabetische Sortierung

vorzunehmen

64 Code editieren PHP-Skript HTML-Web-Seite

Das Modul bdquoCode editierenldquo eroumlffnet Ihnen die Moumlglichkeit in Ihrem Internetauftritt eigene PHP-

oder HTML-Codeschnipsel zu erstellen und zu nutzen oder Programmierungen eigener Funktionen

vorzunehmen

Nutzen Sie dieses Modul bitte nicht um Funktionen zu simulieren die Ihnen das CMS IMPERIA bereits

als vorgefertigte Module zur Verfuumlgung stellt Das freie Code-Eingabefeld ist ebenfalls nicht dazu

S e i t e | 26

vorgesehen auf diesem Wege vom Corporate Design der Universitaumlt abweichende eigene Layouts zu

entwickeln

65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

Uumlber das Modul bdquoCodebaustein einfuumlgenldquo ist es moumlglich vorgefertigte Bloumlcke oder bdquoBauteileldquo in Ihre

Webseite zu integrieren Codebausteine eignen sich dazu bestimmte Informationen die auf vielen

Webseiten wiederkehren an einer Stelle zentral zu pflegen In der Bearbeitungsebene bietet Ihnen

das Modul die in der aktuellen Rubrik vorhandenen Bausteine zur Auswahl an

Codebausteine erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 27

Sie koumlnnen in Codebausteinen wie beim uumlblichen Seitenaufbau gewohnt unterschiedliche Module

kombinieren und positionieren Zur Verfuumlgung stehen die Elemente

bull (TinyMCE)-Texteditor

bull Code editieren

bull die Formularmodule

bull Randlose Grafik

bull RSS-Feed-Agent

bull Tube Audio-VideoPlayer

Eine spaumltere Bearbeitung der Codebausteine ist im CMS IMPERIA nicht uumlber das Tool bdquoQuickEditldquo

moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo

im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichniscode_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Codebausteine im

selben Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

66 DBAdmin PHP-Skript

Mit Hilfe des Moduls bdquoDBAdminldquo lassen sich Datenbank direkt in Tabellenform auf Ihrer Webseite

darstellen Uumlber die Funktion bdquoOptionen anzeigenldquo erhalten Sie zudem die Moumlglichkeit eine

Webseite zur Pflege Ihrer Datenbank zu erstellen Dort koumlnnen Sie die entsprechende Tabelle

editieren d h Eintraumlge einzeln erstellen bearbeiten oder loumlschen

S e i t e | 28

Zur Nutzung dieses Moduls sind folgende Angaben notwendig

bull Datenbank-Server Name oder IP-Adresse des Servers auf dem die anzusprechende

Datenbank liegt (bspw bdquodbuni-duedeldquo)

bull Datenbank-Name

bull Tabellen-Name Name der speziellen Tabelle die innerhalb der Datenbank angesprochen

werden soll

bull Datenbank-Benutzer und Datenbank-Passwort

Datenbanken auf einem UDE-Server koumlnnen Universitaumltsangehoumlrige unter Nutzung ihrer

Hochschulkennung online beim Zentrum fuumlr Informations- und Mediendienste (ZIM) beantragen

unter httpwwwuni-duedezimserviceshomepagesmysqlshtml

67 Doppelcontainer PHP-Skript HTML-Web-Seite

Das Modul bdquoDoppelcontainerldquo ermoumlglicht es Ihnen auf Ihrer Webseite zwei Textebloumlcke (je nach

Wunsch mit oder ohne Bilder) nebeneinander zu setzen

Auf zweispaltig angelegten Webseiten ist die Anlage eines Doppelcontainers nur in der linken Spalte

moumlglich Bilder erscheinen dort in einer Breite von 246 Pixeln Auf einspaltig angelegten Webseiten

werden die einzelnen Bloumlcke (und dementsprechend die verwendeten Bilder) in einer Breite von 366

Pixeln angezeigt Die Bildhoumlhe ist in beiden Faumlllen frei waumlhlbar sollte jedoch in beiden Containern

identisch sein

S e i t e | 29

Zur Texteingabe stehen Ihnen die Optionen bdquoTeaserldquo (mit Zeichenbegrenzung) sowie bdquoStandardldquo

(ohne Zeichenbegrenzung) zur Verfuumlgung Waumlhlen Sie bdquoTeaserldquo so erhalten Sie Platz fuumlr 300 Zeichen

ndash ein Zeichenzaumlhler neben der Texteingabe-Box erleichtert das Mitzaumlhlen Der Text wird gelb

unterlegt wenn er nach dem naumlchsten Leerzeichen abgeschnitten wird Rot erscheint das Textfeld

wenn die Zeichenzahl bereits uumlberschritten wurde

Beachten Sie bitte dass das Modul HTML-Tags (URLs Mailadressen etc) automatisch filtert Sie

werden daher nicht angezeigt Um Ihren Text zu verlinken koumlnnen Sie das Eingabefeld bdquoMehr-Linkldquo

nutzen

Beide Bloumlcke innerhalb eines Doppelcontainers lassen sich individuell auf die uumlbliche Weise (weiszlig

hellblau sandfarben) hinterlegen

S e i t e | 30

68 Flickr nutzen PHP-Skript

Das Modul bdquoFlickr nutzenldquo ermoumlglicht es Ihnen im Sinne einer crossmedialen Verwertung Bilder aus

Ihrem Flickr-Account in Ihre IMPERIA-Webseite einzubinden Fuumlr diese Funktion benoumltigen Sie einen

sogenannten API-Key den Sie in Ihrem Flick-Auftritt unter

bull httpwwwflickrcomservicesappscreateapply

erzeugen lassen koumlnnen Tragen Sie dann diesen Key in die entsprechende Eingabemaske des Moduls

ein Anschlieszligend haben Sie die Moumlglichkeit ganze Fotosets (Alben) oder Einzelbilder einzubinden

Photoset anzeigen

S e i t e | 31

Zum Anzeigen von Photosets wird die entsprechende Photoset-ID ins Modul eingetragen Diese ID ist

Teil der Link-Adresse des entsprechenden Albums bei Flickr (die erscheint wenn Sie das Album

angeklickt haben) Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAMEsets12340954909

Die Photoset-ID verbirgt sich hinter den Ziffern am Ende der URL Sie koumlnnen auswaumlhlen wie viele

Fotos auf einer Webseite erscheinen sollen Dafuumlr uumlbernimmt das Modul die Bilder in der

quadratischen Aufloumlsung von Flickr also in einer Groumlszlige von 75 x 75 Pixeln Reicht der Platz dafuumlr

nicht aus wird eine zusaumltzliche Blaumltterfunktion angeboten Photoset- und Bild-Beschreibungen

koumlnnen aus dem Flickr-Account automatisch uumlbernommen werden wenn die entsprechenden

Optionen mit einem Haken aktiviert wurden

Einzelbild anzeigen

Um ein einzelnes Bild anzuzeigen benoumltigen Sie die entsprechen Flickr-Foto-ID Diese verbirgt sich

hinter der ersten Zahl in der Link-Adresse des entsprechenden Bildes Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAME5841603851inset-72157626981464896

Ein Einzelbild kann in einer hohen oder einer geringen Aufloumlsung eingebunden werden Bei einer

zweispaltig angelegten Webseite wird das Bild in der linken Inhaltsspalte auf eine Breite von 480

Pixel bei einer einspaltig angelegten Webseite auf eine Breite von 721 Pixel skaliert

69 Formulare

Mit IMPERIA haben Sie die Moumlglichkeit Formulare auf Ihrer Webseite zu platzieren In der

Bearbeitungsebene Ihrer Seite finden Sie im Bereich bdquoNeues Modulldquo den Menupunkt UDE ndash

Formular oumlffnen

Nach dem Festlegen der Hintergrundfarbe koumlnnen Sie im Bereich bdquoLegendeldquo den Titel Ihres

Formulars waumlhlen Wenn Sie die Funktion bdquoMailer-Funktionalitaumltldquo aktivieren koumlnnen Sie die Adresse

Ihres Mailscripts eingeben Anderenfalls belassen Sie es bitte beim Vorgabewert

Im Bereich bdquoNexturlldquo kann angegeben werden welche Seite nach dem Abschicken des Formulars

aufgerufen werden soll Daruumlber hinaus werden der Titel der E-Mail die Absender-Adresse sowie die

Empfaumlnger-Adresse definiert Optional kann eine Bestaumltigungs-E-Mail mit frei waumlhlbarem Text

versendet werden

S e i t e | 32

Um dem erstellten Formular Eingabefelder hinzuzufuumlgen ist das Modul bdquoUDE Formular Elementldquo zu

waumlhlen Waumlhlen Sie das Element bdquoTextldquo um ein Eingabefeld zu erzeugen Die Option bdquoBezeichnerldquo

beschreibt den sichtbaren Text im fertigen Formular zum Beispiel bdquoIhr Nameldquo Weitergehend koumlnnen

Sie die zulaumlssigen Inhalte der Nutzereingaben definieren sowie markieren ob das Element ein

Pflichtfeld sein soll

S e i t e | 33

Um ein Texteingabefeld innerhalb des Formulars zu erzeugen waumlhlen Sie das Element bdquoTextarealdquo

Sie koumlnnen die Groumlszlige des Textfeldes definieren (Zeilen x Spalten) und optional erneut eine Pruumlfung

zulaumlssiger Nutzereingaben aktivieren Weiterhin koumlnnen Sie waumlhlen ob der eingegebene Wert des

Formularelements in die Datenbank eingetragen werden soll Wenn Sie fuumlr Ihre Formulare auf eine

Datenbank zuruumlckgreifen moumlchten koumlnnen Sie sich hier informieren httpwwwuni-

duedezimserviceshomepagesmysqlshtml

Insgesamt stehen folgende Elemente zur Verfuumlgung

bull Checkbox Hidden Password Select Anfang Select Option einfuumlgen Select Ende Submit

Text Datum Textarea Radio Reset Leerzeile Kommentarzeile Neuer Abschnitt mit

Bezeichner sowie Datei-Upload

Ein Formular muss mit dem Modul bdquoUDE Formular schlieszligenldquo abgeschlossen werden An dieser

Stelle koumlnnen Sie einen Send-Button hinzufuumlgen dessen Name frei waumlhlbar ist Der eingegebene Text

wird als Beschriftung des Buttons angezeigt Erst durch das Hinzufuumlgen dieses Moduls wird das

Formular auf Ihrer Seite sichtbar und kann nach der Veroumlffentlichung genutzt werden

S e i t e | 34

610 Google-Maps (v30) PHP-Skript HTML-Web-Seite

Dieses Modul bringt eine Grafik von Google-Maps auf die Webseite entweder in Kartenoptik oder als

Satellitenbild Sie haben zwei Moumlglichkeiten eine solche zu generieren Uumlber die konkreten GPS-

Koordinaten oder durch das Angeben einer Adresse (zB Forsthausweg 2 47057 Duisburg) Sie

koumlnnen aus zwoumllf Vergroumlszligerungsstufen fuumlr den gewuumlnschten Ausschnitt zwei Kartengroumlszligen und

zwei Kartenformaten waumlhlen

S e i t e | 35

Kartengroumlszlige bdquogroszligldquo skaliert die Graphik auf 480 Pixel Breite auf einer zweispaltigen Seite bzw auf

721 Pixel auf einer einspaltigen Seite Die Option bdquokleinldquo verringert die Breite auf etwa die Haumllfte Die

beiden Optionen beim Kartenformat beeinflussen die Houmlhe der Grafik

S e i t e | 36

611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite

Das Modul Image-Gallery ermoumlglicht die Integration einer komfortablen Bildergallerie uumlber IMPERIA

Per Klick auf bdquoNeues Modulldquo -gt bdquoUDE Image-Gallery (v21)ldquo kann die entsprechende Gallerie an der

gewuumlnschten Position eingefuumlgt werden Generell sollten nur Bilder verwendet werden die

entweder auf 640 x 480 Pixel oder maximal auf 900 x 600 Pixel skaliert sind Aufgrund einer hohen

Dateigroumlszlige sollten Bilder einer Digitalkamera vor dem Upload komprimiert werden

Innerhalb des Moduls kann zunaumlchst die Hintergrundfarbe der Gallerie wahlweise zwischen Beige

Blau und Weiszlig eingestellt werden Um die Gallerie mit Bildern zu fuumlllen ist das entsprechende

Verzeichnis der Mediendatenbank anzugeben Aufgrund der geaumlnderten Syntax wird das Verzeichnis

ohne images angegeben Die Suchmaske fuumlr die Bilderauswahl deklariert die Dateiformate die mit

einbezogen werden sollen Schlieszliglich koumlnnen Sie die Bilder alphabetisch sortiert anzeigen lassen

sowie einen kleinen und einen groszligen Titel fuumlr Ihre Bildergallerie vergeben

Grundsaumltzlich ist es empfehlenswert groumlszligere Bildmengen auf mehrere Seiten zu verteilen um

einerseits die Darstellung auf mobilen Geraumlten zu vereinfachen und andererseits geringeren

Bandbreiten Rechnung zu tragen

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 22: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 21

bull Uumlber die Funktion bdquoInsertEdit Imageldquo (Icon unter der Texteingabe-Box) koumlnnen Sie den

relativen Pfad auf das entsprechende Bild aus der IMPERIA-Mediendatenbank einfuumlgen

(Formatbeispiel imperiamdimageswebredaktion2013parentservicejpg)

bull Die Funktion bdquoVorschaubild waumlhlenldquo laumlsst Sie direkt auf die IMPERIA-Mediendatenbank

zugreifen und dort die gewuumlnschte Grafik per Klick auswaumlhlen Uumlber die Funktion bdquoVollbild

waumlhlenldquo koumlnnen Sie das Bild optional zu einer groumlszligeren Ansicht verlinken die sich als

bdquoLightboxldquo uumlber der aktiven Webseite oumlffnet Der Befehl bdquoBild zuruumlcksetzenldquo entfernt die

gewaumlhlte Grafik aus Ihrer Webseite

Waumlhrend Sie mittels bdquoInsertEdit Imageldquo die Anzeige-Groumlszlige Ihres Bildes (bis maximal 480 Pixel

Breite) selbst bestimmen koumlnnen werden Grafiken uumlber die Funktion bdquoVorschaubild waumlhlenldquo beim

Einfuumlgen automatisch auf die passende Groumlszlige skaliert (162 Pixel Breite in der linken und 204 Pixel

Breite in der rechten Content-Spalte) In diesem Fall koumlnnen Sie zudem waumlhlen ob der Text an dieser

Stelle das Bild umflieszligt oder aber rechts daneben angezeigt wird Das Vollbild wird bei der Eingabe

nicht skaliert Nutzen Sie daher bitte Bilder mit einer bildschirmtauglichen Groumlszlige (maximal 1024

Pixel)

S e i t e | 22

Tabellen

Uumlber das Icon bdquoInsertEdit Tableldquo fuumlgen Sie an der gewuumlnschten Stelle Tabellen in Ihren Texteditor

ein Unter den Reitern bdquoGeneralldquo und bdquoAdvancedldquo koumlnnen Sie diese Tabellen gemaumlszlig den uumlblichen

HTML-Konventionen erstellen formatieren und bearbeiten

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig gemaumlszlig den Vorgaben der Barrierefreiheit als

solche aus Der Text-Editor stellt Ihnen diese Optionen zur Verfuumlgung

bull Beachten Sie dass die Hintergrundfarbe der Tabellen je nach gewaumlhlter Einfaumlrbung des

Moduls variiert

S e i t e | 23

Texte mit bdquoVerfallsdatumldquo

Grundsaumltzlich steht Ihnen das Modul bdquo(TinyMCE)-Texteditorldquo sowohl auf shtml-Seiten als auch in

php-Skripten zur Verfuumlgung Auf php-Seiten laumlsst sich jedoch eine zusaumltzliche Option nutzen Fuumlr

Texte die nur fuumlr einen gewissen Zeitraum auf Ihrer Webseite erscheinen sollen koumlnnen Sie ein

Start- und Enddatum setzen

63 A-Z verwalten PHP-Skript HTML-Web-Seite

Das Modul bdquoA-Z verwaltenldquo ermoumlglicht den Redakteuren A-Z-Listen relativ einfach zu erzeugen und

zu pflegen

S e i t e | 24

Fuumlr jeden Eintrag in der Stichwortliste muss im Eingabefeld eine einzelne Zeile eingefuumlgt werden Die

Eingabe folgt einem festen Schema

bull Stichwort||URL (Internetadresse)||

oder

bull Stichwort||URL (Internetadresse)||eventuell ein kurzer Beschreibungstext

wobei auf den Beschreibungstext auch verzichtet werden kann Die sogenannten bdquoPipe-Zeichenldquo (||)

dienen als Feldtrenner Sie erzeugen sie uumlber den Tastaturbefehl bdquoAltGr amp das Groumlszligerzeichenldquo

Wahlweise kopieren Sie die entsprechenden Zeichen aus bisherigen Eintraumlgen

Auch hier gilt Tragen Sie interne Links in Ihrer A-Z-Liste bitte als relative Verknuumlpfungen ohne

Verweis auf den Webserver der Universitaumlt ein also

bull Abiturjahrgang 2013||doppelter_abiturjahrgang||

anstelle von

bull Abiturjahrgang 2013||httpwwwuni-duededoppelter_abiturjahrgang||

Externe Links (wie etwa bdquoGlassbooth ||httpwwwglassboothde||ldquo) werden auf der

ausgegebenen Webseite entsprechend gekennzeichnet

S e i t e | 25

Die Eintraumlge im Modul bdquoA-Z verwaltenldquo sortiert das Content Management System automatisch nach

Ziffernreihenfolge bzw dem Alphabet Um die Eintraumlge spaumlter einfach aufzufinden und bearbeiten zu

koumlnnen empfiehlt es sich jedoch bereits im Eingabefeld selbst eine alphabetische Sortierung

vorzunehmen

64 Code editieren PHP-Skript HTML-Web-Seite

Das Modul bdquoCode editierenldquo eroumlffnet Ihnen die Moumlglichkeit in Ihrem Internetauftritt eigene PHP-

oder HTML-Codeschnipsel zu erstellen und zu nutzen oder Programmierungen eigener Funktionen

vorzunehmen

Nutzen Sie dieses Modul bitte nicht um Funktionen zu simulieren die Ihnen das CMS IMPERIA bereits

als vorgefertigte Module zur Verfuumlgung stellt Das freie Code-Eingabefeld ist ebenfalls nicht dazu

S e i t e | 26

vorgesehen auf diesem Wege vom Corporate Design der Universitaumlt abweichende eigene Layouts zu

entwickeln

65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

Uumlber das Modul bdquoCodebaustein einfuumlgenldquo ist es moumlglich vorgefertigte Bloumlcke oder bdquoBauteileldquo in Ihre

Webseite zu integrieren Codebausteine eignen sich dazu bestimmte Informationen die auf vielen

Webseiten wiederkehren an einer Stelle zentral zu pflegen In der Bearbeitungsebene bietet Ihnen

das Modul die in der aktuellen Rubrik vorhandenen Bausteine zur Auswahl an

Codebausteine erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 27

Sie koumlnnen in Codebausteinen wie beim uumlblichen Seitenaufbau gewohnt unterschiedliche Module

kombinieren und positionieren Zur Verfuumlgung stehen die Elemente

bull (TinyMCE)-Texteditor

bull Code editieren

bull die Formularmodule

bull Randlose Grafik

bull RSS-Feed-Agent

bull Tube Audio-VideoPlayer

Eine spaumltere Bearbeitung der Codebausteine ist im CMS IMPERIA nicht uumlber das Tool bdquoQuickEditldquo

moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo

im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichniscode_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Codebausteine im

selben Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

66 DBAdmin PHP-Skript

Mit Hilfe des Moduls bdquoDBAdminldquo lassen sich Datenbank direkt in Tabellenform auf Ihrer Webseite

darstellen Uumlber die Funktion bdquoOptionen anzeigenldquo erhalten Sie zudem die Moumlglichkeit eine

Webseite zur Pflege Ihrer Datenbank zu erstellen Dort koumlnnen Sie die entsprechende Tabelle

editieren d h Eintraumlge einzeln erstellen bearbeiten oder loumlschen

S e i t e | 28

Zur Nutzung dieses Moduls sind folgende Angaben notwendig

bull Datenbank-Server Name oder IP-Adresse des Servers auf dem die anzusprechende

Datenbank liegt (bspw bdquodbuni-duedeldquo)

bull Datenbank-Name

bull Tabellen-Name Name der speziellen Tabelle die innerhalb der Datenbank angesprochen

werden soll

bull Datenbank-Benutzer und Datenbank-Passwort

Datenbanken auf einem UDE-Server koumlnnen Universitaumltsangehoumlrige unter Nutzung ihrer

Hochschulkennung online beim Zentrum fuumlr Informations- und Mediendienste (ZIM) beantragen

unter httpwwwuni-duedezimserviceshomepagesmysqlshtml

67 Doppelcontainer PHP-Skript HTML-Web-Seite

Das Modul bdquoDoppelcontainerldquo ermoumlglicht es Ihnen auf Ihrer Webseite zwei Textebloumlcke (je nach

Wunsch mit oder ohne Bilder) nebeneinander zu setzen

Auf zweispaltig angelegten Webseiten ist die Anlage eines Doppelcontainers nur in der linken Spalte

moumlglich Bilder erscheinen dort in einer Breite von 246 Pixeln Auf einspaltig angelegten Webseiten

werden die einzelnen Bloumlcke (und dementsprechend die verwendeten Bilder) in einer Breite von 366

Pixeln angezeigt Die Bildhoumlhe ist in beiden Faumlllen frei waumlhlbar sollte jedoch in beiden Containern

identisch sein

S e i t e | 29

Zur Texteingabe stehen Ihnen die Optionen bdquoTeaserldquo (mit Zeichenbegrenzung) sowie bdquoStandardldquo

(ohne Zeichenbegrenzung) zur Verfuumlgung Waumlhlen Sie bdquoTeaserldquo so erhalten Sie Platz fuumlr 300 Zeichen

ndash ein Zeichenzaumlhler neben der Texteingabe-Box erleichtert das Mitzaumlhlen Der Text wird gelb

unterlegt wenn er nach dem naumlchsten Leerzeichen abgeschnitten wird Rot erscheint das Textfeld

wenn die Zeichenzahl bereits uumlberschritten wurde

Beachten Sie bitte dass das Modul HTML-Tags (URLs Mailadressen etc) automatisch filtert Sie

werden daher nicht angezeigt Um Ihren Text zu verlinken koumlnnen Sie das Eingabefeld bdquoMehr-Linkldquo

nutzen

Beide Bloumlcke innerhalb eines Doppelcontainers lassen sich individuell auf die uumlbliche Weise (weiszlig

hellblau sandfarben) hinterlegen

S e i t e | 30

68 Flickr nutzen PHP-Skript

Das Modul bdquoFlickr nutzenldquo ermoumlglicht es Ihnen im Sinne einer crossmedialen Verwertung Bilder aus

Ihrem Flickr-Account in Ihre IMPERIA-Webseite einzubinden Fuumlr diese Funktion benoumltigen Sie einen

sogenannten API-Key den Sie in Ihrem Flick-Auftritt unter

bull httpwwwflickrcomservicesappscreateapply

erzeugen lassen koumlnnen Tragen Sie dann diesen Key in die entsprechende Eingabemaske des Moduls

ein Anschlieszligend haben Sie die Moumlglichkeit ganze Fotosets (Alben) oder Einzelbilder einzubinden

Photoset anzeigen

S e i t e | 31

Zum Anzeigen von Photosets wird die entsprechende Photoset-ID ins Modul eingetragen Diese ID ist

Teil der Link-Adresse des entsprechenden Albums bei Flickr (die erscheint wenn Sie das Album

angeklickt haben) Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAMEsets12340954909

Die Photoset-ID verbirgt sich hinter den Ziffern am Ende der URL Sie koumlnnen auswaumlhlen wie viele

Fotos auf einer Webseite erscheinen sollen Dafuumlr uumlbernimmt das Modul die Bilder in der

quadratischen Aufloumlsung von Flickr also in einer Groumlszlige von 75 x 75 Pixeln Reicht der Platz dafuumlr

nicht aus wird eine zusaumltzliche Blaumltterfunktion angeboten Photoset- und Bild-Beschreibungen

koumlnnen aus dem Flickr-Account automatisch uumlbernommen werden wenn die entsprechenden

Optionen mit einem Haken aktiviert wurden

Einzelbild anzeigen

Um ein einzelnes Bild anzuzeigen benoumltigen Sie die entsprechen Flickr-Foto-ID Diese verbirgt sich

hinter der ersten Zahl in der Link-Adresse des entsprechenden Bildes Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAME5841603851inset-72157626981464896

Ein Einzelbild kann in einer hohen oder einer geringen Aufloumlsung eingebunden werden Bei einer

zweispaltig angelegten Webseite wird das Bild in der linken Inhaltsspalte auf eine Breite von 480

Pixel bei einer einspaltig angelegten Webseite auf eine Breite von 721 Pixel skaliert

69 Formulare

Mit IMPERIA haben Sie die Moumlglichkeit Formulare auf Ihrer Webseite zu platzieren In der

Bearbeitungsebene Ihrer Seite finden Sie im Bereich bdquoNeues Modulldquo den Menupunkt UDE ndash

Formular oumlffnen

Nach dem Festlegen der Hintergrundfarbe koumlnnen Sie im Bereich bdquoLegendeldquo den Titel Ihres

Formulars waumlhlen Wenn Sie die Funktion bdquoMailer-Funktionalitaumltldquo aktivieren koumlnnen Sie die Adresse

Ihres Mailscripts eingeben Anderenfalls belassen Sie es bitte beim Vorgabewert

Im Bereich bdquoNexturlldquo kann angegeben werden welche Seite nach dem Abschicken des Formulars

aufgerufen werden soll Daruumlber hinaus werden der Titel der E-Mail die Absender-Adresse sowie die

Empfaumlnger-Adresse definiert Optional kann eine Bestaumltigungs-E-Mail mit frei waumlhlbarem Text

versendet werden

S e i t e | 32

Um dem erstellten Formular Eingabefelder hinzuzufuumlgen ist das Modul bdquoUDE Formular Elementldquo zu

waumlhlen Waumlhlen Sie das Element bdquoTextldquo um ein Eingabefeld zu erzeugen Die Option bdquoBezeichnerldquo

beschreibt den sichtbaren Text im fertigen Formular zum Beispiel bdquoIhr Nameldquo Weitergehend koumlnnen

Sie die zulaumlssigen Inhalte der Nutzereingaben definieren sowie markieren ob das Element ein

Pflichtfeld sein soll

S e i t e | 33

Um ein Texteingabefeld innerhalb des Formulars zu erzeugen waumlhlen Sie das Element bdquoTextarealdquo

Sie koumlnnen die Groumlszlige des Textfeldes definieren (Zeilen x Spalten) und optional erneut eine Pruumlfung

zulaumlssiger Nutzereingaben aktivieren Weiterhin koumlnnen Sie waumlhlen ob der eingegebene Wert des

Formularelements in die Datenbank eingetragen werden soll Wenn Sie fuumlr Ihre Formulare auf eine

Datenbank zuruumlckgreifen moumlchten koumlnnen Sie sich hier informieren httpwwwuni-

duedezimserviceshomepagesmysqlshtml

Insgesamt stehen folgende Elemente zur Verfuumlgung

bull Checkbox Hidden Password Select Anfang Select Option einfuumlgen Select Ende Submit

Text Datum Textarea Radio Reset Leerzeile Kommentarzeile Neuer Abschnitt mit

Bezeichner sowie Datei-Upload

Ein Formular muss mit dem Modul bdquoUDE Formular schlieszligenldquo abgeschlossen werden An dieser

Stelle koumlnnen Sie einen Send-Button hinzufuumlgen dessen Name frei waumlhlbar ist Der eingegebene Text

wird als Beschriftung des Buttons angezeigt Erst durch das Hinzufuumlgen dieses Moduls wird das

Formular auf Ihrer Seite sichtbar und kann nach der Veroumlffentlichung genutzt werden

S e i t e | 34

610 Google-Maps (v30) PHP-Skript HTML-Web-Seite

Dieses Modul bringt eine Grafik von Google-Maps auf die Webseite entweder in Kartenoptik oder als

Satellitenbild Sie haben zwei Moumlglichkeiten eine solche zu generieren Uumlber die konkreten GPS-

Koordinaten oder durch das Angeben einer Adresse (zB Forsthausweg 2 47057 Duisburg) Sie

koumlnnen aus zwoumllf Vergroumlszligerungsstufen fuumlr den gewuumlnschten Ausschnitt zwei Kartengroumlszligen und

zwei Kartenformaten waumlhlen

S e i t e | 35

Kartengroumlszlige bdquogroszligldquo skaliert die Graphik auf 480 Pixel Breite auf einer zweispaltigen Seite bzw auf

721 Pixel auf einer einspaltigen Seite Die Option bdquokleinldquo verringert die Breite auf etwa die Haumllfte Die

beiden Optionen beim Kartenformat beeinflussen die Houmlhe der Grafik

S e i t e | 36

611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite

Das Modul Image-Gallery ermoumlglicht die Integration einer komfortablen Bildergallerie uumlber IMPERIA

Per Klick auf bdquoNeues Modulldquo -gt bdquoUDE Image-Gallery (v21)ldquo kann die entsprechende Gallerie an der

gewuumlnschten Position eingefuumlgt werden Generell sollten nur Bilder verwendet werden die

entweder auf 640 x 480 Pixel oder maximal auf 900 x 600 Pixel skaliert sind Aufgrund einer hohen

Dateigroumlszlige sollten Bilder einer Digitalkamera vor dem Upload komprimiert werden

Innerhalb des Moduls kann zunaumlchst die Hintergrundfarbe der Gallerie wahlweise zwischen Beige

Blau und Weiszlig eingestellt werden Um die Gallerie mit Bildern zu fuumlllen ist das entsprechende

Verzeichnis der Mediendatenbank anzugeben Aufgrund der geaumlnderten Syntax wird das Verzeichnis

ohne images angegeben Die Suchmaske fuumlr die Bilderauswahl deklariert die Dateiformate die mit

einbezogen werden sollen Schlieszliglich koumlnnen Sie die Bilder alphabetisch sortiert anzeigen lassen

sowie einen kleinen und einen groszligen Titel fuumlr Ihre Bildergallerie vergeben

Grundsaumltzlich ist es empfehlenswert groumlszligere Bildmengen auf mehrere Seiten zu verteilen um

einerseits die Darstellung auf mobilen Geraumlten zu vereinfachen und andererseits geringeren

Bandbreiten Rechnung zu tragen

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 23: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 22

Tabellen

Uumlber das Icon bdquoInsertEdit Tableldquo fuumlgen Sie an der gewuumlnschten Stelle Tabellen in Ihren Texteditor

ein Unter den Reitern bdquoGeneralldquo und bdquoAdvancedldquo koumlnnen Sie diese Tabellen gemaumlszlig den uumlblichen

HTML-Konventionen erstellen formatieren und bearbeiten

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig gemaumlszlig den Vorgaben der Barrierefreiheit als

solche aus Der Text-Editor stellt Ihnen diese Optionen zur Verfuumlgung

bull Beachten Sie dass die Hintergrundfarbe der Tabellen je nach gewaumlhlter Einfaumlrbung des

Moduls variiert

S e i t e | 23

Texte mit bdquoVerfallsdatumldquo

Grundsaumltzlich steht Ihnen das Modul bdquo(TinyMCE)-Texteditorldquo sowohl auf shtml-Seiten als auch in

php-Skripten zur Verfuumlgung Auf php-Seiten laumlsst sich jedoch eine zusaumltzliche Option nutzen Fuumlr

Texte die nur fuumlr einen gewissen Zeitraum auf Ihrer Webseite erscheinen sollen koumlnnen Sie ein

Start- und Enddatum setzen

63 A-Z verwalten PHP-Skript HTML-Web-Seite

Das Modul bdquoA-Z verwaltenldquo ermoumlglicht den Redakteuren A-Z-Listen relativ einfach zu erzeugen und

zu pflegen

S e i t e | 24

Fuumlr jeden Eintrag in der Stichwortliste muss im Eingabefeld eine einzelne Zeile eingefuumlgt werden Die

Eingabe folgt einem festen Schema

bull Stichwort||URL (Internetadresse)||

oder

bull Stichwort||URL (Internetadresse)||eventuell ein kurzer Beschreibungstext

wobei auf den Beschreibungstext auch verzichtet werden kann Die sogenannten bdquoPipe-Zeichenldquo (||)

dienen als Feldtrenner Sie erzeugen sie uumlber den Tastaturbefehl bdquoAltGr amp das Groumlszligerzeichenldquo

Wahlweise kopieren Sie die entsprechenden Zeichen aus bisherigen Eintraumlgen

Auch hier gilt Tragen Sie interne Links in Ihrer A-Z-Liste bitte als relative Verknuumlpfungen ohne

Verweis auf den Webserver der Universitaumlt ein also

bull Abiturjahrgang 2013||doppelter_abiturjahrgang||

anstelle von

bull Abiturjahrgang 2013||httpwwwuni-duededoppelter_abiturjahrgang||

Externe Links (wie etwa bdquoGlassbooth ||httpwwwglassboothde||ldquo) werden auf der

ausgegebenen Webseite entsprechend gekennzeichnet

S e i t e | 25

Die Eintraumlge im Modul bdquoA-Z verwaltenldquo sortiert das Content Management System automatisch nach

Ziffernreihenfolge bzw dem Alphabet Um die Eintraumlge spaumlter einfach aufzufinden und bearbeiten zu

koumlnnen empfiehlt es sich jedoch bereits im Eingabefeld selbst eine alphabetische Sortierung

vorzunehmen

64 Code editieren PHP-Skript HTML-Web-Seite

Das Modul bdquoCode editierenldquo eroumlffnet Ihnen die Moumlglichkeit in Ihrem Internetauftritt eigene PHP-

oder HTML-Codeschnipsel zu erstellen und zu nutzen oder Programmierungen eigener Funktionen

vorzunehmen

Nutzen Sie dieses Modul bitte nicht um Funktionen zu simulieren die Ihnen das CMS IMPERIA bereits

als vorgefertigte Module zur Verfuumlgung stellt Das freie Code-Eingabefeld ist ebenfalls nicht dazu

S e i t e | 26

vorgesehen auf diesem Wege vom Corporate Design der Universitaumlt abweichende eigene Layouts zu

entwickeln

65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

Uumlber das Modul bdquoCodebaustein einfuumlgenldquo ist es moumlglich vorgefertigte Bloumlcke oder bdquoBauteileldquo in Ihre

Webseite zu integrieren Codebausteine eignen sich dazu bestimmte Informationen die auf vielen

Webseiten wiederkehren an einer Stelle zentral zu pflegen In der Bearbeitungsebene bietet Ihnen

das Modul die in der aktuellen Rubrik vorhandenen Bausteine zur Auswahl an

Codebausteine erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 27

Sie koumlnnen in Codebausteinen wie beim uumlblichen Seitenaufbau gewohnt unterschiedliche Module

kombinieren und positionieren Zur Verfuumlgung stehen die Elemente

bull (TinyMCE)-Texteditor

bull Code editieren

bull die Formularmodule

bull Randlose Grafik

bull RSS-Feed-Agent

bull Tube Audio-VideoPlayer

Eine spaumltere Bearbeitung der Codebausteine ist im CMS IMPERIA nicht uumlber das Tool bdquoQuickEditldquo

moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo

im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichniscode_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Codebausteine im

selben Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

66 DBAdmin PHP-Skript

Mit Hilfe des Moduls bdquoDBAdminldquo lassen sich Datenbank direkt in Tabellenform auf Ihrer Webseite

darstellen Uumlber die Funktion bdquoOptionen anzeigenldquo erhalten Sie zudem die Moumlglichkeit eine

Webseite zur Pflege Ihrer Datenbank zu erstellen Dort koumlnnen Sie die entsprechende Tabelle

editieren d h Eintraumlge einzeln erstellen bearbeiten oder loumlschen

S e i t e | 28

Zur Nutzung dieses Moduls sind folgende Angaben notwendig

bull Datenbank-Server Name oder IP-Adresse des Servers auf dem die anzusprechende

Datenbank liegt (bspw bdquodbuni-duedeldquo)

bull Datenbank-Name

bull Tabellen-Name Name der speziellen Tabelle die innerhalb der Datenbank angesprochen

werden soll

bull Datenbank-Benutzer und Datenbank-Passwort

Datenbanken auf einem UDE-Server koumlnnen Universitaumltsangehoumlrige unter Nutzung ihrer

Hochschulkennung online beim Zentrum fuumlr Informations- und Mediendienste (ZIM) beantragen

unter httpwwwuni-duedezimserviceshomepagesmysqlshtml

67 Doppelcontainer PHP-Skript HTML-Web-Seite

Das Modul bdquoDoppelcontainerldquo ermoumlglicht es Ihnen auf Ihrer Webseite zwei Textebloumlcke (je nach

Wunsch mit oder ohne Bilder) nebeneinander zu setzen

Auf zweispaltig angelegten Webseiten ist die Anlage eines Doppelcontainers nur in der linken Spalte

moumlglich Bilder erscheinen dort in einer Breite von 246 Pixeln Auf einspaltig angelegten Webseiten

werden die einzelnen Bloumlcke (und dementsprechend die verwendeten Bilder) in einer Breite von 366

Pixeln angezeigt Die Bildhoumlhe ist in beiden Faumlllen frei waumlhlbar sollte jedoch in beiden Containern

identisch sein

S e i t e | 29

Zur Texteingabe stehen Ihnen die Optionen bdquoTeaserldquo (mit Zeichenbegrenzung) sowie bdquoStandardldquo

(ohne Zeichenbegrenzung) zur Verfuumlgung Waumlhlen Sie bdquoTeaserldquo so erhalten Sie Platz fuumlr 300 Zeichen

ndash ein Zeichenzaumlhler neben der Texteingabe-Box erleichtert das Mitzaumlhlen Der Text wird gelb

unterlegt wenn er nach dem naumlchsten Leerzeichen abgeschnitten wird Rot erscheint das Textfeld

wenn die Zeichenzahl bereits uumlberschritten wurde

Beachten Sie bitte dass das Modul HTML-Tags (URLs Mailadressen etc) automatisch filtert Sie

werden daher nicht angezeigt Um Ihren Text zu verlinken koumlnnen Sie das Eingabefeld bdquoMehr-Linkldquo

nutzen

Beide Bloumlcke innerhalb eines Doppelcontainers lassen sich individuell auf die uumlbliche Weise (weiszlig

hellblau sandfarben) hinterlegen

S e i t e | 30

68 Flickr nutzen PHP-Skript

Das Modul bdquoFlickr nutzenldquo ermoumlglicht es Ihnen im Sinne einer crossmedialen Verwertung Bilder aus

Ihrem Flickr-Account in Ihre IMPERIA-Webseite einzubinden Fuumlr diese Funktion benoumltigen Sie einen

sogenannten API-Key den Sie in Ihrem Flick-Auftritt unter

bull httpwwwflickrcomservicesappscreateapply

erzeugen lassen koumlnnen Tragen Sie dann diesen Key in die entsprechende Eingabemaske des Moduls

ein Anschlieszligend haben Sie die Moumlglichkeit ganze Fotosets (Alben) oder Einzelbilder einzubinden

Photoset anzeigen

S e i t e | 31

Zum Anzeigen von Photosets wird die entsprechende Photoset-ID ins Modul eingetragen Diese ID ist

Teil der Link-Adresse des entsprechenden Albums bei Flickr (die erscheint wenn Sie das Album

angeklickt haben) Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAMEsets12340954909

Die Photoset-ID verbirgt sich hinter den Ziffern am Ende der URL Sie koumlnnen auswaumlhlen wie viele

Fotos auf einer Webseite erscheinen sollen Dafuumlr uumlbernimmt das Modul die Bilder in der

quadratischen Aufloumlsung von Flickr also in einer Groumlszlige von 75 x 75 Pixeln Reicht der Platz dafuumlr

nicht aus wird eine zusaumltzliche Blaumltterfunktion angeboten Photoset- und Bild-Beschreibungen

koumlnnen aus dem Flickr-Account automatisch uumlbernommen werden wenn die entsprechenden

Optionen mit einem Haken aktiviert wurden

Einzelbild anzeigen

Um ein einzelnes Bild anzuzeigen benoumltigen Sie die entsprechen Flickr-Foto-ID Diese verbirgt sich

hinter der ersten Zahl in der Link-Adresse des entsprechenden Bildes Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAME5841603851inset-72157626981464896

Ein Einzelbild kann in einer hohen oder einer geringen Aufloumlsung eingebunden werden Bei einer

zweispaltig angelegten Webseite wird das Bild in der linken Inhaltsspalte auf eine Breite von 480

Pixel bei einer einspaltig angelegten Webseite auf eine Breite von 721 Pixel skaliert

69 Formulare

Mit IMPERIA haben Sie die Moumlglichkeit Formulare auf Ihrer Webseite zu platzieren In der

Bearbeitungsebene Ihrer Seite finden Sie im Bereich bdquoNeues Modulldquo den Menupunkt UDE ndash

Formular oumlffnen

Nach dem Festlegen der Hintergrundfarbe koumlnnen Sie im Bereich bdquoLegendeldquo den Titel Ihres

Formulars waumlhlen Wenn Sie die Funktion bdquoMailer-Funktionalitaumltldquo aktivieren koumlnnen Sie die Adresse

Ihres Mailscripts eingeben Anderenfalls belassen Sie es bitte beim Vorgabewert

Im Bereich bdquoNexturlldquo kann angegeben werden welche Seite nach dem Abschicken des Formulars

aufgerufen werden soll Daruumlber hinaus werden der Titel der E-Mail die Absender-Adresse sowie die

Empfaumlnger-Adresse definiert Optional kann eine Bestaumltigungs-E-Mail mit frei waumlhlbarem Text

versendet werden

S e i t e | 32

Um dem erstellten Formular Eingabefelder hinzuzufuumlgen ist das Modul bdquoUDE Formular Elementldquo zu

waumlhlen Waumlhlen Sie das Element bdquoTextldquo um ein Eingabefeld zu erzeugen Die Option bdquoBezeichnerldquo

beschreibt den sichtbaren Text im fertigen Formular zum Beispiel bdquoIhr Nameldquo Weitergehend koumlnnen

Sie die zulaumlssigen Inhalte der Nutzereingaben definieren sowie markieren ob das Element ein

Pflichtfeld sein soll

S e i t e | 33

Um ein Texteingabefeld innerhalb des Formulars zu erzeugen waumlhlen Sie das Element bdquoTextarealdquo

Sie koumlnnen die Groumlszlige des Textfeldes definieren (Zeilen x Spalten) und optional erneut eine Pruumlfung

zulaumlssiger Nutzereingaben aktivieren Weiterhin koumlnnen Sie waumlhlen ob der eingegebene Wert des

Formularelements in die Datenbank eingetragen werden soll Wenn Sie fuumlr Ihre Formulare auf eine

Datenbank zuruumlckgreifen moumlchten koumlnnen Sie sich hier informieren httpwwwuni-

duedezimserviceshomepagesmysqlshtml

Insgesamt stehen folgende Elemente zur Verfuumlgung

bull Checkbox Hidden Password Select Anfang Select Option einfuumlgen Select Ende Submit

Text Datum Textarea Radio Reset Leerzeile Kommentarzeile Neuer Abschnitt mit

Bezeichner sowie Datei-Upload

Ein Formular muss mit dem Modul bdquoUDE Formular schlieszligenldquo abgeschlossen werden An dieser

Stelle koumlnnen Sie einen Send-Button hinzufuumlgen dessen Name frei waumlhlbar ist Der eingegebene Text

wird als Beschriftung des Buttons angezeigt Erst durch das Hinzufuumlgen dieses Moduls wird das

Formular auf Ihrer Seite sichtbar und kann nach der Veroumlffentlichung genutzt werden

S e i t e | 34

610 Google-Maps (v30) PHP-Skript HTML-Web-Seite

Dieses Modul bringt eine Grafik von Google-Maps auf die Webseite entweder in Kartenoptik oder als

Satellitenbild Sie haben zwei Moumlglichkeiten eine solche zu generieren Uumlber die konkreten GPS-

Koordinaten oder durch das Angeben einer Adresse (zB Forsthausweg 2 47057 Duisburg) Sie

koumlnnen aus zwoumllf Vergroumlszligerungsstufen fuumlr den gewuumlnschten Ausschnitt zwei Kartengroumlszligen und

zwei Kartenformaten waumlhlen

S e i t e | 35

Kartengroumlszlige bdquogroszligldquo skaliert die Graphik auf 480 Pixel Breite auf einer zweispaltigen Seite bzw auf

721 Pixel auf einer einspaltigen Seite Die Option bdquokleinldquo verringert die Breite auf etwa die Haumllfte Die

beiden Optionen beim Kartenformat beeinflussen die Houmlhe der Grafik

S e i t e | 36

611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite

Das Modul Image-Gallery ermoumlglicht die Integration einer komfortablen Bildergallerie uumlber IMPERIA

Per Klick auf bdquoNeues Modulldquo -gt bdquoUDE Image-Gallery (v21)ldquo kann die entsprechende Gallerie an der

gewuumlnschten Position eingefuumlgt werden Generell sollten nur Bilder verwendet werden die

entweder auf 640 x 480 Pixel oder maximal auf 900 x 600 Pixel skaliert sind Aufgrund einer hohen

Dateigroumlszlige sollten Bilder einer Digitalkamera vor dem Upload komprimiert werden

Innerhalb des Moduls kann zunaumlchst die Hintergrundfarbe der Gallerie wahlweise zwischen Beige

Blau und Weiszlig eingestellt werden Um die Gallerie mit Bildern zu fuumlllen ist das entsprechende

Verzeichnis der Mediendatenbank anzugeben Aufgrund der geaumlnderten Syntax wird das Verzeichnis

ohne images angegeben Die Suchmaske fuumlr die Bilderauswahl deklariert die Dateiformate die mit

einbezogen werden sollen Schlieszliglich koumlnnen Sie die Bilder alphabetisch sortiert anzeigen lassen

sowie einen kleinen und einen groszligen Titel fuumlr Ihre Bildergallerie vergeben

Grundsaumltzlich ist es empfehlenswert groumlszligere Bildmengen auf mehrere Seiten zu verteilen um

einerseits die Darstellung auf mobilen Geraumlten zu vereinfachen und andererseits geringeren

Bandbreiten Rechnung zu tragen

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 24: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 23

Texte mit bdquoVerfallsdatumldquo

Grundsaumltzlich steht Ihnen das Modul bdquo(TinyMCE)-Texteditorldquo sowohl auf shtml-Seiten als auch in

php-Skripten zur Verfuumlgung Auf php-Seiten laumlsst sich jedoch eine zusaumltzliche Option nutzen Fuumlr

Texte die nur fuumlr einen gewissen Zeitraum auf Ihrer Webseite erscheinen sollen koumlnnen Sie ein

Start- und Enddatum setzen

63 A-Z verwalten PHP-Skript HTML-Web-Seite

Das Modul bdquoA-Z verwaltenldquo ermoumlglicht den Redakteuren A-Z-Listen relativ einfach zu erzeugen und

zu pflegen

S e i t e | 24

Fuumlr jeden Eintrag in der Stichwortliste muss im Eingabefeld eine einzelne Zeile eingefuumlgt werden Die

Eingabe folgt einem festen Schema

bull Stichwort||URL (Internetadresse)||

oder

bull Stichwort||URL (Internetadresse)||eventuell ein kurzer Beschreibungstext

wobei auf den Beschreibungstext auch verzichtet werden kann Die sogenannten bdquoPipe-Zeichenldquo (||)

dienen als Feldtrenner Sie erzeugen sie uumlber den Tastaturbefehl bdquoAltGr amp das Groumlszligerzeichenldquo

Wahlweise kopieren Sie die entsprechenden Zeichen aus bisherigen Eintraumlgen

Auch hier gilt Tragen Sie interne Links in Ihrer A-Z-Liste bitte als relative Verknuumlpfungen ohne

Verweis auf den Webserver der Universitaumlt ein also

bull Abiturjahrgang 2013||doppelter_abiturjahrgang||

anstelle von

bull Abiturjahrgang 2013||httpwwwuni-duededoppelter_abiturjahrgang||

Externe Links (wie etwa bdquoGlassbooth ||httpwwwglassboothde||ldquo) werden auf der

ausgegebenen Webseite entsprechend gekennzeichnet

S e i t e | 25

Die Eintraumlge im Modul bdquoA-Z verwaltenldquo sortiert das Content Management System automatisch nach

Ziffernreihenfolge bzw dem Alphabet Um die Eintraumlge spaumlter einfach aufzufinden und bearbeiten zu

koumlnnen empfiehlt es sich jedoch bereits im Eingabefeld selbst eine alphabetische Sortierung

vorzunehmen

64 Code editieren PHP-Skript HTML-Web-Seite

Das Modul bdquoCode editierenldquo eroumlffnet Ihnen die Moumlglichkeit in Ihrem Internetauftritt eigene PHP-

oder HTML-Codeschnipsel zu erstellen und zu nutzen oder Programmierungen eigener Funktionen

vorzunehmen

Nutzen Sie dieses Modul bitte nicht um Funktionen zu simulieren die Ihnen das CMS IMPERIA bereits

als vorgefertigte Module zur Verfuumlgung stellt Das freie Code-Eingabefeld ist ebenfalls nicht dazu

S e i t e | 26

vorgesehen auf diesem Wege vom Corporate Design der Universitaumlt abweichende eigene Layouts zu

entwickeln

65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

Uumlber das Modul bdquoCodebaustein einfuumlgenldquo ist es moumlglich vorgefertigte Bloumlcke oder bdquoBauteileldquo in Ihre

Webseite zu integrieren Codebausteine eignen sich dazu bestimmte Informationen die auf vielen

Webseiten wiederkehren an einer Stelle zentral zu pflegen In der Bearbeitungsebene bietet Ihnen

das Modul die in der aktuellen Rubrik vorhandenen Bausteine zur Auswahl an

Codebausteine erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 27

Sie koumlnnen in Codebausteinen wie beim uumlblichen Seitenaufbau gewohnt unterschiedliche Module

kombinieren und positionieren Zur Verfuumlgung stehen die Elemente

bull (TinyMCE)-Texteditor

bull Code editieren

bull die Formularmodule

bull Randlose Grafik

bull RSS-Feed-Agent

bull Tube Audio-VideoPlayer

Eine spaumltere Bearbeitung der Codebausteine ist im CMS IMPERIA nicht uumlber das Tool bdquoQuickEditldquo

moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo

im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichniscode_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Codebausteine im

selben Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

66 DBAdmin PHP-Skript

Mit Hilfe des Moduls bdquoDBAdminldquo lassen sich Datenbank direkt in Tabellenform auf Ihrer Webseite

darstellen Uumlber die Funktion bdquoOptionen anzeigenldquo erhalten Sie zudem die Moumlglichkeit eine

Webseite zur Pflege Ihrer Datenbank zu erstellen Dort koumlnnen Sie die entsprechende Tabelle

editieren d h Eintraumlge einzeln erstellen bearbeiten oder loumlschen

S e i t e | 28

Zur Nutzung dieses Moduls sind folgende Angaben notwendig

bull Datenbank-Server Name oder IP-Adresse des Servers auf dem die anzusprechende

Datenbank liegt (bspw bdquodbuni-duedeldquo)

bull Datenbank-Name

bull Tabellen-Name Name der speziellen Tabelle die innerhalb der Datenbank angesprochen

werden soll

bull Datenbank-Benutzer und Datenbank-Passwort

Datenbanken auf einem UDE-Server koumlnnen Universitaumltsangehoumlrige unter Nutzung ihrer

Hochschulkennung online beim Zentrum fuumlr Informations- und Mediendienste (ZIM) beantragen

unter httpwwwuni-duedezimserviceshomepagesmysqlshtml

67 Doppelcontainer PHP-Skript HTML-Web-Seite

Das Modul bdquoDoppelcontainerldquo ermoumlglicht es Ihnen auf Ihrer Webseite zwei Textebloumlcke (je nach

Wunsch mit oder ohne Bilder) nebeneinander zu setzen

Auf zweispaltig angelegten Webseiten ist die Anlage eines Doppelcontainers nur in der linken Spalte

moumlglich Bilder erscheinen dort in einer Breite von 246 Pixeln Auf einspaltig angelegten Webseiten

werden die einzelnen Bloumlcke (und dementsprechend die verwendeten Bilder) in einer Breite von 366

Pixeln angezeigt Die Bildhoumlhe ist in beiden Faumlllen frei waumlhlbar sollte jedoch in beiden Containern

identisch sein

S e i t e | 29

Zur Texteingabe stehen Ihnen die Optionen bdquoTeaserldquo (mit Zeichenbegrenzung) sowie bdquoStandardldquo

(ohne Zeichenbegrenzung) zur Verfuumlgung Waumlhlen Sie bdquoTeaserldquo so erhalten Sie Platz fuumlr 300 Zeichen

ndash ein Zeichenzaumlhler neben der Texteingabe-Box erleichtert das Mitzaumlhlen Der Text wird gelb

unterlegt wenn er nach dem naumlchsten Leerzeichen abgeschnitten wird Rot erscheint das Textfeld

wenn die Zeichenzahl bereits uumlberschritten wurde

Beachten Sie bitte dass das Modul HTML-Tags (URLs Mailadressen etc) automatisch filtert Sie

werden daher nicht angezeigt Um Ihren Text zu verlinken koumlnnen Sie das Eingabefeld bdquoMehr-Linkldquo

nutzen

Beide Bloumlcke innerhalb eines Doppelcontainers lassen sich individuell auf die uumlbliche Weise (weiszlig

hellblau sandfarben) hinterlegen

S e i t e | 30

68 Flickr nutzen PHP-Skript

Das Modul bdquoFlickr nutzenldquo ermoumlglicht es Ihnen im Sinne einer crossmedialen Verwertung Bilder aus

Ihrem Flickr-Account in Ihre IMPERIA-Webseite einzubinden Fuumlr diese Funktion benoumltigen Sie einen

sogenannten API-Key den Sie in Ihrem Flick-Auftritt unter

bull httpwwwflickrcomservicesappscreateapply

erzeugen lassen koumlnnen Tragen Sie dann diesen Key in die entsprechende Eingabemaske des Moduls

ein Anschlieszligend haben Sie die Moumlglichkeit ganze Fotosets (Alben) oder Einzelbilder einzubinden

Photoset anzeigen

S e i t e | 31

Zum Anzeigen von Photosets wird die entsprechende Photoset-ID ins Modul eingetragen Diese ID ist

Teil der Link-Adresse des entsprechenden Albums bei Flickr (die erscheint wenn Sie das Album

angeklickt haben) Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAMEsets12340954909

Die Photoset-ID verbirgt sich hinter den Ziffern am Ende der URL Sie koumlnnen auswaumlhlen wie viele

Fotos auf einer Webseite erscheinen sollen Dafuumlr uumlbernimmt das Modul die Bilder in der

quadratischen Aufloumlsung von Flickr also in einer Groumlszlige von 75 x 75 Pixeln Reicht der Platz dafuumlr

nicht aus wird eine zusaumltzliche Blaumltterfunktion angeboten Photoset- und Bild-Beschreibungen

koumlnnen aus dem Flickr-Account automatisch uumlbernommen werden wenn die entsprechenden

Optionen mit einem Haken aktiviert wurden

Einzelbild anzeigen

Um ein einzelnes Bild anzuzeigen benoumltigen Sie die entsprechen Flickr-Foto-ID Diese verbirgt sich

hinter der ersten Zahl in der Link-Adresse des entsprechenden Bildes Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAME5841603851inset-72157626981464896

Ein Einzelbild kann in einer hohen oder einer geringen Aufloumlsung eingebunden werden Bei einer

zweispaltig angelegten Webseite wird das Bild in der linken Inhaltsspalte auf eine Breite von 480

Pixel bei einer einspaltig angelegten Webseite auf eine Breite von 721 Pixel skaliert

69 Formulare

Mit IMPERIA haben Sie die Moumlglichkeit Formulare auf Ihrer Webseite zu platzieren In der

Bearbeitungsebene Ihrer Seite finden Sie im Bereich bdquoNeues Modulldquo den Menupunkt UDE ndash

Formular oumlffnen

Nach dem Festlegen der Hintergrundfarbe koumlnnen Sie im Bereich bdquoLegendeldquo den Titel Ihres

Formulars waumlhlen Wenn Sie die Funktion bdquoMailer-Funktionalitaumltldquo aktivieren koumlnnen Sie die Adresse

Ihres Mailscripts eingeben Anderenfalls belassen Sie es bitte beim Vorgabewert

Im Bereich bdquoNexturlldquo kann angegeben werden welche Seite nach dem Abschicken des Formulars

aufgerufen werden soll Daruumlber hinaus werden der Titel der E-Mail die Absender-Adresse sowie die

Empfaumlnger-Adresse definiert Optional kann eine Bestaumltigungs-E-Mail mit frei waumlhlbarem Text

versendet werden

S e i t e | 32

Um dem erstellten Formular Eingabefelder hinzuzufuumlgen ist das Modul bdquoUDE Formular Elementldquo zu

waumlhlen Waumlhlen Sie das Element bdquoTextldquo um ein Eingabefeld zu erzeugen Die Option bdquoBezeichnerldquo

beschreibt den sichtbaren Text im fertigen Formular zum Beispiel bdquoIhr Nameldquo Weitergehend koumlnnen

Sie die zulaumlssigen Inhalte der Nutzereingaben definieren sowie markieren ob das Element ein

Pflichtfeld sein soll

S e i t e | 33

Um ein Texteingabefeld innerhalb des Formulars zu erzeugen waumlhlen Sie das Element bdquoTextarealdquo

Sie koumlnnen die Groumlszlige des Textfeldes definieren (Zeilen x Spalten) und optional erneut eine Pruumlfung

zulaumlssiger Nutzereingaben aktivieren Weiterhin koumlnnen Sie waumlhlen ob der eingegebene Wert des

Formularelements in die Datenbank eingetragen werden soll Wenn Sie fuumlr Ihre Formulare auf eine

Datenbank zuruumlckgreifen moumlchten koumlnnen Sie sich hier informieren httpwwwuni-

duedezimserviceshomepagesmysqlshtml

Insgesamt stehen folgende Elemente zur Verfuumlgung

bull Checkbox Hidden Password Select Anfang Select Option einfuumlgen Select Ende Submit

Text Datum Textarea Radio Reset Leerzeile Kommentarzeile Neuer Abschnitt mit

Bezeichner sowie Datei-Upload

Ein Formular muss mit dem Modul bdquoUDE Formular schlieszligenldquo abgeschlossen werden An dieser

Stelle koumlnnen Sie einen Send-Button hinzufuumlgen dessen Name frei waumlhlbar ist Der eingegebene Text

wird als Beschriftung des Buttons angezeigt Erst durch das Hinzufuumlgen dieses Moduls wird das

Formular auf Ihrer Seite sichtbar und kann nach der Veroumlffentlichung genutzt werden

S e i t e | 34

610 Google-Maps (v30) PHP-Skript HTML-Web-Seite

Dieses Modul bringt eine Grafik von Google-Maps auf die Webseite entweder in Kartenoptik oder als

Satellitenbild Sie haben zwei Moumlglichkeiten eine solche zu generieren Uumlber die konkreten GPS-

Koordinaten oder durch das Angeben einer Adresse (zB Forsthausweg 2 47057 Duisburg) Sie

koumlnnen aus zwoumllf Vergroumlszligerungsstufen fuumlr den gewuumlnschten Ausschnitt zwei Kartengroumlszligen und

zwei Kartenformaten waumlhlen

S e i t e | 35

Kartengroumlszlige bdquogroszligldquo skaliert die Graphik auf 480 Pixel Breite auf einer zweispaltigen Seite bzw auf

721 Pixel auf einer einspaltigen Seite Die Option bdquokleinldquo verringert die Breite auf etwa die Haumllfte Die

beiden Optionen beim Kartenformat beeinflussen die Houmlhe der Grafik

S e i t e | 36

611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite

Das Modul Image-Gallery ermoumlglicht die Integration einer komfortablen Bildergallerie uumlber IMPERIA

Per Klick auf bdquoNeues Modulldquo -gt bdquoUDE Image-Gallery (v21)ldquo kann die entsprechende Gallerie an der

gewuumlnschten Position eingefuumlgt werden Generell sollten nur Bilder verwendet werden die

entweder auf 640 x 480 Pixel oder maximal auf 900 x 600 Pixel skaliert sind Aufgrund einer hohen

Dateigroumlszlige sollten Bilder einer Digitalkamera vor dem Upload komprimiert werden

Innerhalb des Moduls kann zunaumlchst die Hintergrundfarbe der Gallerie wahlweise zwischen Beige

Blau und Weiszlig eingestellt werden Um die Gallerie mit Bildern zu fuumlllen ist das entsprechende

Verzeichnis der Mediendatenbank anzugeben Aufgrund der geaumlnderten Syntax wird das Verzeichnis

ohne images angegeben Die Suchmaske fuumlr die Bilderauswahl deklariert die Dateiformate die mit

einbezogen werden sollen Schlieszliglich koumlnnen Sie die Bilder alphabetisch sortiert anzeigen lassen

sowie einen kleinen und einen groszligen Titel fuumlr Ihre Bildergallerie vergeben

Grundsaumltzlich ist es empfehlenswert groumlszligere Bildmengen auf mehrere Seiten zu verteilen um

einerseits die Darstellung auf mobilen Geraumlten zu vereinfachen und andererseits geringeren

Bandbreiten Rechnung zu tragen

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 25: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 24

Fuumlr jeden Eintrag in der Stichwortliste muss im Eingabefeld eine einzelne Zeile eingefuumlgt werden Die

Eingabe folgt einem festen Schema

bull Stichwort||URL (Internetadresse)||

oder

bull Stichwort||URL (Internetadresse)||eventuell ein kurzer Beschreibungstext

wobei auf den Beschreibungstext auch verzichtet werden kann Die sogenannten bdquoPipe-Zeichenldquo (||)

dienen als Feldtrenner Sie erzeugen sie uumlber den Tastaturbefehl bdquoAltGr amp das Groumlszligerzeichenldquo

Wahlweise kopieren Sie die entsprechenden Zeichen aus bisherigen Eintraumlgen

Auch hier gilt Tragen Sie interne Links in Ihrer A-Z-Liste bitte als relative Verknuumlpfungen ohne

Verweis auf den Webserver der Universitaumlt ein also

bull Abiturjahrgang 2013||doppelter_abiturjahrgang||

anstelle von

bull Abiturjahrgang 2013||httpwwwuni-duededoppelter_abiturjahrgang||

Externe Links (wie etwa bdquoGlassbooth ||httpwwwglassboothde||ldquo) werden auf der

ausgegebenen Webseite entsprechend gekennzeichnet

S e i t e | 25

Die Eintraumlge im Modul bdquoA-Z verwaltenldquo sortiert das Content Management System automatisch nach

Ziffernreihenfolge bzw dem Alphabet Um die Eintraumlge spaumlter einfach aufzufinden und bearbeiten zu

koumlnnen empfiehlt es sich jedoch bereits im Eingabefeld selbst eine alphabetische Sortierung

vorzunehmen

64 Code editieren PHP-Skript HTML-Web-Seite

Das Modul bdquoCode editierenldquo eroumlffnet Ihnen die Moumlglichkeit in Ihrem Internetauftritt eigene PHP-

oder HTML-Codeschnipsel zu erstellen und zu nutzen oder Programmierungen eigener Funktionen

vorzunehmen

Nutzen Sie dieses Modul bitte nicht um Funktionen zu simulieren die Ihnen das CMS IMPERIA bereits

als vorgefertigte Module zur Verfuumlgung stellt Das freie Code-Eingabefeld ist ebenfalls nicht dazu

S e i t e | 26

vorgesehen auf diesem Wege vom Corporate Design der Universitaumlt abweichende eigene Layouts zu

entwickeln

65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

Uumlber das Modul bdquoCodebaustein einfuumlgenldquo ist es moumlglich vorgefertigte Bloumlcke oder bdquoBauteileldquo in Ihre

Webseite zu integrieren Codebausteine eignen sich dazu bestimmte Informationen die auf vielen

Webseiten wiederkehren an einer Stelle zentral zu pflegen In der Bearbeitungsebene bietet Ihnen

das Modul die in der aktuellen Rubrik vorhandenen Bausteine zur Auswahl an

Codebausteine erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 27

Sie koumlnnen in Codebausteinen wie beim uumlblichen Seitenaufbau gewohnt unterschiedliche Module

kombinieren und positionieren Zur Verfuumlgung stehen die Elemente

bull (TinyMCE)-Texteditor

bull Code editieren

bull die Formularmodule

bull Randlose Grafik

bull RSS-Feed-Agent

bull Tube Audio-VideoPlayer

Eine spaumltere Bearbeitung der Codebausteine ist im CMS IMPERIA nicht uumlber das Tool bdquoQuickEditldquo

moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo

im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichniscode_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Codebausteine im

selben Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

66 DBAdmin PHP-Skript

Mit Hilfe des Moduls bdquoDBAdminldquo lassen sich Datenbank direkt in Tabellenform auf Ihrer Webseite

darstellen Uumlber die Funktion bdquoOptionen anzeigenldquo erhalten Sie zudem die Moumlglichkeit eine

Webseite zur Pflege Ihrer Datenbank zu erstellen Dort koumlnnen Sie die entsprechende Tabelle

editieren d h Eintraumlge einzeln erstellen bearbeiten oder loumlschen

S e i t e | 28

Zur Nutzung dieses Moduls sind folgende Angaben notwendig

bull Datenbank-Server Name oder IP-Adresse des Servers auf dem die anzusprechende

Datenbank liegt (bspw bdquodbuni-duedeldquo)

bull Datenbank-Name

bull Tabellen-Name Name der speziellen Tabelle die innerhalb der Datenbank angesprochen

werden soll

bull Datenbank-Benutzer und Datenbank-Passwort

Datenbanken auf einem UDE-Server koumlnnen Universitaumltsangehoumlrige unter Nutzung ihrer

Hochschulkennung online beim Zentrum fuumlr Informations- und Mediendienste (ZIM) beantragen

unter httpwwwuni-duedezimserviceshomepagesmysqlshtml

67 Doppelcontainer PHP-Skript HTML-Web-Seite

Das Modul bdquoDoppelcontainerldquo ermoumlglicht es Ihnen auf Ihrer Webseite zwei Textebloumlcke (je nach

Wunsch mit oder ohne Bilder) nebeneinander zu setzen

Auf zweispaltig angelegten Webseiten ist die Anlage eines Doppelcontainers nur in der linken Spalte

moumlglich Bilder erscheinen dort in einer Breite von 246 Pixeln Auf einspaltig angelegten Webseiten

werden die einzelnen Bloumlcke (und dementsprechend die verwendeten Bilder) in einer Breite von 366

Pixeln angezeigt Die Bildhoumlhe ist in beiden Faumlllen frei waumlhlbar sollte jedoch in beiden Containern

identisch sein

S e i t e | 29

Zur Texteingabe stehen Ihnen die Optionen bdquoTeaserldquo (mit Zeichenbegrenzung) sowie bdquoStandardldquo

(ohne Zeichenbegrenzung) zur Verfuumlgung Waumlhlen Sie bdquoTeaserldquo so erhalten Sie Platz fuumlr 300 Zeichen

ndash ein Zeichenzaumlhler neben der Texteingabe-Box erleichtert das Mitzaumlhlen Der Text wird gelb

unterlegt wenn er nach dem naumlchsten Leerzeichen abgeschnitten wird Rot erscheint das Textfeld

wenn die Zeichenzahl bereits uumlberschritten wurde

Beachten Sie bitte dass das Modul HTML-Tags (URLs Mailadressen etc) automatisch filtert Sie

werden daher nicht angezeigt Um Ihren Text zu verlinken koumlnnen Sie das Eingabefeld bdquoMehr-Linkldquo

nutzen

Beide Bloumlcke innerhalb eines Doppelcontainers lassen sich individuell auf die uumlbliche Weise (weiszlig

hellblau sandfarben) hinterlegen

S e i t e | 30

68 Flickr nutzen PHP-Skript

Das Modul bdquoFlickr nutzenldquo ermoumlglicht es Ihnen im Sinne einer crossmedialen Verwertung Bilder aus

Ihrem Flickr-Account in Ihre IMPERIA-Webseite einzubinden Fuumlr diese Funktion benoumltigen Sie einen

sogenannten API-Key den Sie in Ihrem Flick-Auftritt unter

bull httpwwwflickrcomservicesappscreateapply

erzeugen lassen koumlnnen Tragen Sie dann diesen Key in die entsprechende Eingabemaske des Moduls

ein Anschlieszligend haben Sie die Moumlglichkeit ganze Fotosets (Alben) oder Einzelbilder einzubinden

Photoset anzeigen

S e i t e | 31

Zum Anzeigen von Photosets wird die entsprechende Photoset-ID ins Modul eingetragen Diese ID ist

Teil der Link-Adresse des entsprechenden Albums bei Flickr (die erscheint wenn Sie das Album

angeklickt haben) Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAMEsets12340954909

Die Photoset-ID verbirgt sich hinter den Ziffern am Ende der URL Sie koumlnnen auswaumlhlen wie viele

Fotos auf einer Webseite erscheinen sollen Dafuumlr uumlbernimmt das Modul die Bilder in der

quadratischen Aufloumlsung von Flickr also in einer Groumlszlige von 75 x 75 Pixeln Reicht der Platz dafuumlr

nicht aus wird eine zusaumltzliche Blaumltterfunktion angeboten Photoset- und Bild-Beschreibungen

koumlnnen aus dem Flickr-Account automatisch uumlbernommen werden wenn die entsprechenden

Optionen mit einem Haken aktiviert wurden

Einzelbild anzeigen

Um ein einzelnes Bild anzuzeigen benoumltigen Sie die entsprechen Flickr-Foto-ID Diese verbirgt sich

hinter der ersten Zahl in der Link-Adresse des entsprechenden Bildes Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAME5841603851inset-72157626981464896

Ein Einzelbild kann in einer hohen oder einer geringen Aufloumlsung eingebunden werden Bei einer

zweispaltig angelegten Webseite wird das Bild in der linken Inhaltsspalte auf eine Breite von 480

Pixel bei einer einspaltig angelegten Webseite auf eine Breite von 721 Pixel skaliert

69 Formulare

Mit IMPERIA haben Sie die Moumlglichkeit Formulare auf Ihrer Webseite zu platzieren In der

Bearbeitungsebene Ihrer Seite finden Sie im Bereich bdquoNeues Modulldquo den Menupunkt UDE ndash

Formular oumlffnen

Nach dem Festlegen der Hintergrundfarbe koumlnnen Sie im Bereich bdquoLegendeldquo den Titel Ihres

Formulars waumlhlen Wenn Sie die Funktion bdquoMailer-Funktionalitaumltldquo aktivieren koumlnnen Sie die Adresse

Ihres Mailscripts eingeben Anderenfalls belassen Sie es bitte beim Vorgabewert

Im Bereich bdquoNexturlldquo kann angegeben werden welche Seite nach dem Abschicken des Formulars

aufgerufen werden soll Daruumlber hinaus werden der Titel der E-Mail die Absender-Adresse sowie die

Empfaumlnger-Adresse definiert Optional kann eine Bestaumltigungs-E-Mail mit frei waumlhlbarem Text

versendet werden

S e i t e | 32

Um dem erstellten Formular Eingabefelder hinzuzufuumlgen ist das Modul bdquoUDE Formular Elementldquo zu

waumlhlen Waumlhlen Sie das Element bdquoTextldquo um ein Eingabefeld zu erzeugen Die Option bdquoBezeichnerldquo

beschreibt den sichtbaren Text im fertigen Formular zum Beispiel bdquoIhr Nameldquo Weitergehend koumlnnen

Sie die zulaumlssigen Inhalte der Nutzereingaben definieren sowie markieren ob das Element ein

Pflichtfeld sein soll

S e i t e | 33

Um ein Texteingabefeld innerhalb des Formulars zu erzeugen waumlhlen Sie das Element bdquoTextarealdquo

Sie koumlnnen die Groumlszlige des Textfeldes definieren (Zeilen x Spalten) und optional erneut eine Pruumlfung

zulaumlssiger Nutzereingaben aktivieren Weiterhin koumlnnen Sie waumlhlen ob der eingegebene Wert des

Formularelements in die Datenbank eingetragen werden soll Wenn Sie fuumlr Ihre Formulare auf eine

Datenbank zuruumlckgreifen moumlchten koumlnnen Sie sich hier informieren httpwwwuni-

duedezimserviceshomepagesmysqlshtml

Insgesamt stehen folgende Elemente zur Verfuumlgung

bull Checkbox Hidden Password Select Anfang Select Option einfuumlgen Select Ende Submit

Text Datum Textarea Radio Reset Leerzeile Kommentarzeile Neuer Abschnitt mit

Bezeichner sowie Datei-Upload

Ein Formular muss mit dem Modul bdquoUDE Formular schlieszligenldquo abgeschlossen werden An dieser

Stelle koumlnnen Sie einen Send-Button hinzufuumlgen dessen Name frei waumlhlbar ist Der eingegebene Text

wird als Beschriftung des Buttons angezeigt Erst durch das Hinzufuumlgen dieses Moduls wird das

Formular auf Ihrer Seite sichtbar und kann nach der Veroumlffentlichung genutzt werden

S e i t e | 34

610 Google-Maps (v30) PHP-Skript HTML-Web-Seite

Dieses Modul bringt eine Grafik von Google-Maps auf die Webseite entweder in Kartenoptik oder als

Satellitenbild Sie haben zwei Moumlglichkeiten eine solche zu generieren Uumlber die konkreten GPS-

Koordinaten oder durch das Angeben einer Adresse (zB Forsthausweg 2 47057 Duisburg) Sie

koumlnnen aus zwoumllf Vergroumlszligerungsstufen fuumlr den gewuumlnschten Ausschnitt zwei Kartengroumlszligen und

zwei Kartenformaten waumlhlen

S e i t e | 35

Kartengroumlszlige bdquogroszligldquo skaliert die Graphik auf 480 Pixel Breite auf einer zweispaltigen Seite bzw auf

721 Pixel auf einer einspaltigen Seite Die Option bdquokleinldquo verringert die Breite auf etwa die Haumllfte Die

beiden Optionen beim Kartenformat beeinflussen die Houmlhe der Grafik

S e i t e | 36

611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite

Das Modul Image-Gallery ermoumlglicht die Integration einer komfortablen Bildergallerie uumlber IMPERIA

Per Klick auf bdquoNeues Modulldquo -gt bdquoUDE Image-Gallery (v21)ldquo kann die entsprechende Gallerie an der

gewuumlnschten Position eingefuumlgt werden Generell sollten nur Bilder verwendet werden die

entweder auf 640 x 480 Pixel oder maximal auf 900 x 600 Pixel skaliert sind Aufgrund einer hohen

Dateigroumlszlige sollten Bilder einer Digitalkamera vor dem Upload komprimiert werden

Innerhalb des Moduls kann zunaumlchst die Hintergrundfarbe der Gallerie wahlweise zwischen Beige

Blau und Weiszlig eingestellt werden Um die Gallerie mit Bildern zu fuumlllen ist das entsprechende

Verzeichnis der Mediendatenbank anzugeben Aufgrund der geaumlnderten Syntax wird das Verzeichnis

ohne images angegeben Die Suchmaske fuumlr die Bilderauswahl deklariert die Dateiformate die mit

einbezogen werden sollen Schlieszliglich koumlnnen Sie die Bilder alphabetisch sortiert anzeigen lassen

sowie einen kleinen und einen groszligen Titel fuumlr Ihre Bildergallerie vergeben

Grundsaumltzlich ist es empfehlenswert groumlszligere Bildmengen auf mehrere Seiten zu verteilen um

einerseits die Darstellung auf mobilen Geraumlten zu vereinfachen und andererseits geringeren

Bandbreiten Rechnung zu tragen

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 26: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 25

Die Eintraumlge im Modul bdquoA-Z verwaltenldquo sortiert das Content Management System automatisch nach

Ziffernreihenfolge bzw dem Alphabet Um die Eintraumlge spaumlter einfach aufzufinden und bearbeiten zu

koumlnnen empfiehlt es sich jedoch bereits im Eingabefeld selbst eine alphabetische Sortierung

vorzunehmen

64 Code editieren PHP-Skript HTML-Web-Seite

Das Modul bdquoCode editierenldquo eroumlffnet Ihnen die Moumlglichkeit in Ihrem Internetauftritt eigene PHP-

oder HTML-Codeschnipsel zu erstellen und zu nutzen oder Programmierungen eigener Funktionen

vorzunehmen

Nutzen Sie dieses Modul bitte nicht um Funktionen zu simulieren die Ihnen das CMS IMPERIA bereits

als vorgefertigte Module zur Verfuumlgung stellt Das freie Code-Eingabefeld ist ebenfalls nicht dazu

S e i t e | 26

vorgesehen auf diesem Wege vom Corporate Design der Universitaumlt abweichende eigene Layouts zu

entwickeln

65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

Uumlber das Modul bdquoCodebaustein einfuumlgenldquo ist es moumlglich vorgefertigte Bloumlcke oder bdquoBauteileldquo in Ihre

Webseite zu integrieren Codebausteine eignen sich dazu bestimmte Informationen die auf vielen

Webseiten wiederkehren an einer Stelle zentral zu pflegen In der Bearbeitungsebene bietet Ihnen

das Modul die in der aktuellen Rubrik vorhandenen Bausteine zur Auswahl an

Codebausteine erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 27

Sie koumlnnen in Codebausteinen wie beim uumlblichen Seitenaufbau gewohnt unterschiedliche Module

kombinieren und positionieren Zur Verfuumlgung stehen die Elemente

bull (TinyMCE)-Texteditor

bull Code editieren

bull die Formularmodule

bull Randlose Grafik

bull RSS-Feed-Agent

bull Tube Audio-VideoPlayer

Eine spaumltere Bearbeitung der Codebausteine ist im CMS IMPERIA nicht uumlber das Tool bdquoQuickEditldquo

moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo

im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichniscode_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Codebausteine im

selben Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

66 DBAdmin PHP-Skript

Mit Hilfe des Moduls bdquoDBAdminldquo lassen sich Datenbank direkt in Tabellenform auf Ihrer Webseite

darstellen Uumlber die Funktion bdquoOptionen anzeigenldquo erhalten Sie zudem die Moumlglichkeit eine

Webseite zur Pflege Ihrer Datenbank zu erstellen Dort koumlnnen Sie die entsprechende Tabelle

editieren d h Eintraumlge einzeln erstellen bearbeiten oder loumlschen

S e i t e | 28

Zur Nutzung dieses Moduls sind folgende Angaben notwendig

bull Datenbank-Server Name oder IP-Adresse des Servers auf dem die anzusprechende

Datenbank liegt (bspw bdquodbuni-duedeldquo)

bull Datenbank-Name

bull Tabellen-Name Name der speziellen Tabelle die innerhalb der Datenbank angesprochen

werden soll

bull Datenbank-Benutzer und Datenbank-Passwort

Datenbanken auf einem UDE-Server koumlnnen Universitaumltsangehoumlrige unter Nutzung ihrer

Hochschulkennung online beim Zentrum fuumlr Informations- und Mediendienste (ZIM) beantragen

unter httpwwwuni-duedezimserviceshomepagesmysqlshtml

67 Doppelcontainer PHP-Skript HTML-Web-Seite

Das Modul bdquoDoppelcontainerldquo ermoumlglicht es Ihnen auf Ihrer Webseite zwei Textebloumlcke (je nach

Wunsch mit oder ohne Bilder) nebeneinander zu setzen

Auf zweispaltig angelegten Webseiten ist die Anlage eines Doppelcontainers nur in der linken Spalte

moumlglich Bilder erscheinen dort in einer Breite von 246 Pixeln Auf einspaltig angelegten Webseiten

werden die einzelnen Bloumlcke (und dementsprechend die verwendeten Bilder) in einer Breite von 366

Pixeln angezeigt Die Bildhoumlhe ist in beiden Faumlllen frei waumlhlbar sollte jedoch in beiden Containern

identisch sein

S e i t e | 29

Zur Texteingabe stehen Ihnen die Optionen bdquoTeaserldquo (mit Zeichenbegrenzung) sowie bdquoStandardldquo

(ohne Zeichenbegrenzung) zur Verfuumlgung Waumlhlen Sie bdquoTeaserldquo so erhalten Sie Platz fuumlr 300 Zeichen

ndash ein Zeichenzaumlhler neben der Texteingabe-Box erleichtert das Mitzaumlhlen Der Text wird gelb

unterlegt wenn er nach dem naumlchsten Leerzeichen abgeschnitten wird Rot erscheint das Textfeld

wenn die Zeichenzahl bereits uumlberschritten wurde

Beachten Sie bitte dass das Modul HTML-Tags (URLs Mailadressen etc) automatisch filtert Sie

werden daher nicht angezeigt Um Ihren Text zu verlinken koumlnnen Sie das Eingabefeld bdquoMehr-Linkldquo

nutzen

Beide Bloumlcke innerhalb eines Doppelcontainers lassen sich individuell auf die uumlbliche Weise (weiszlig

hellblau sandfarben) hinterlegen

S e i t e | 30

68 Flickr nutzen PHP-Skript

Das Modul bdquoFlickr nutzenldquo ermoumlglicht es Ihnen im Sinne einer crossmedialen Verwertung Bilder aus

Ihrem Flickr-Account in Ihre IMPERIA-Webseite einzubinden Fuumlr diese Funktion benoumltigen Sie einen

sogenannten API-Key den Sie in Ihrem Flick-Auftritt unter

bull httpwwwflickrcomservicesappscreateapply

erzeugen lassen koumlnnen Tragen Sie dann diesen Key in die entsprechende Eingabemaske des Moduls

ein Anschlieszligend haben Sie die Moumlglichkeit ganze Fotosets (Alben) oder Einzelbilder einzubinden

Photoset anzeigen

S e i t e | 31

Zum Anzeigen von Photosets wird die entsprechende Photoset-ID ins Modul eingetragen Diese ID ist

Teil der Link-Adresse des entsprechenden Albums bei Flickr (die erscheint wenn Sie das Album

angeklickt haben) Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAMEsets12340954909

Die Photoset-ID verbirgt sich hinter den Ziffern am Ende der URL Sie koumlnnen auswaumlhlen wie viele

Fotos auf einer Webseite erscheinen sollen Dafuumlr uumlbernimmt das Modul die Bilder in der

quadratischen Aufloumlsung von Flickr also in einer Groumlszlige von 75 x 75 Pixeln Reicht der Platz dafuumlr

nicht aus wird eine zusaumltzliche Blaumltterfunktion angeboten Photoset- und Bild-Beschreibungen

koumlnnen aus dem Flickr-Account automatisch uumlbernommen werden wenn die entsprechenden

Optionen mit einem Haken aktiviert wurden

Einzelbild anzeigen

Um ein einzelnes Bild anzuzeigen benoumltigen Sie die entsprechen Flickr-Foto-ID Diese verbirgt sich

hinter der ersten Zahl in der Link-Adresse des entsprechenden Bildes Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAME5841603851inset-72157626981464896

Ein Einzelbild kann in einer hohen oder einer geringen Aufloumlsung eingebunden werden Bei einer

zweispaltig angelegten Webseite wird das Bild in der linken Inhaltsspalte auf eine Breite von 480

Pixel bei einer einspaltig angelegten Webseite auf eine Breite von 721 Pixel skaliert

69 Formulare

Mit IMPERIA haben Sie die Moumlglichkeit Formulare auf Ihrer Webseite zu platzieren In der

Bearbeitungsebene Ihrer Seite finden Sie im Bereich bdquoNeues Modulldquo den Menupunkt UDE ndash

Formular oumlffnen

Nach dem Festlegen der Hintergrundfarbe koumlnnen Sie im Bereich bdquoLegendeldquo den Titel Ihres

Formulars waumlhlen Wenn Sie die Funktion bdquoMailer-Funktionalitaumltldquo aktivieren koumlnnen Sie die Adresse

Ihres Mailscripts eingeben Anderenfalls belassen Sie es bitte beim Vorgabewert

Im Bereich bdquoNexturlldquo kann angegeben werden welche Seite nach dem Abschicken des Formulars

aufgerufen werden soll Daruumlber hinaus werden der Titel der E-Mail die Absender-Adresse sowie die

Empfaumlnger-Adresse definiert Optional kann eine Bestaumltigungs-E-Mail mit frei waumlhlbarem Text

versendet werden

S e i t e | 32

Um dem erstellten Formular Eingabefelder hinzuzufuumlgen ist das Modul bdquoUDE Formular Elementldquo zu

waumlhlen Waumlhlen Sie das Element bdquoTextldquo um ein Eingabefeld zu erzeugen Die Option bdquoBezeichnerldquo

beschreibt den sichtbaren Text im fertigen Formular zum Beispiel bdquoIhr Nameldquo Weitergehend koumlnnen

Sie die zulaumlssigen Inhalte der Nutzereingaben definieren sowie markieren ob das Element ein

Pflichtfeld sein soll

S e i t e | 33

Um ein Texteingabefeld innerhalb des Formulars zu erzeugen waumlhlen Sie das Element bdquoTextarealdquo

Sie koumlnnen die Groumlszlige des Textfeldes definieren (Zeilen x Spalten) und optional erneut eine Pruumlfung

zulaumlssiger Nutzereingaben aktivieren Weiterhin koumlnnen Sie waumlhlen ob der eingegebene Wert des

Formularelements in die Datenbank eingetragen werden soll Wenn Sie fuumlr Ihre Formulare auf eine

Datenbank zuruumlckgreifen moumlchten koumlnnen Sie sich hier informieren httpwwwuni-

duedezimserviceshomepagesmysqlshtml

Insgesamt stehen folgende Elemente zur Verfuumlgung

bull Checkbox Hidden Password Select Anfang Select Option einfuumlgen Select Ende Submit

Text Datum Textarea Radio Reset Leerzeile Kommentarzeile Neuer Abschnitt mit

Bezeichner sowie Datei-Upload

Ein Formular muss mit dem Modul bdquoUDE Formular schlieszligenldquo abgeschlossen werden An dieser

Stelle koumlnnen Sie einen Send-Button hinzufuumlgen dessen Name frei waumlhlbar ist Der eingegebene Text

wird als Beschriftung des Buttons angezeigt Erst durch das Hinzufuumlgen dieses Moduls wird das

Formular auf Ihrer Seite sichtbar und kann nach der Veroumlffentlichung genutzt werden

S e i t e | 34

610 Google-Maps (v30) PHP-Skript HTML-Web-Seite

Dieses Modul bringt eine Grafik von Google-Maps auf die Webseite entweder in Kartenoptik oder als

Satellitenbild Sie haben zwei Moumlglichkeiten eine solche zu generieren Uumlber die konkreten GPS-

Koordinaten oder durch das Angeben einer Adresse (zB Forsthausweg 2 47057 Duisburg) Sie

koumlnnen aus zwoumllf Vergroumlszligerungsstufen fuumlr den gewuumlnschten Ausschnitt zwei Kartengroumlszligen und

zwei Kartenformaten waumlhlen

S e i t e | 35

Kartengroumlszlige bdquogroszligldquo skaliert die Graphik auf 480 Pixel Breite auf einer zweispaltigen Seite bzw auf

721 Pixel auf einer einspaltigen Seite Die Option bdquokleinldquo verringert die Breite auf etwa die Haumllfte Die

beiden Optionen beim Kartenformat beeinflussen die Houmlhe der Grafik

S e i t e | 36

611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite

Das Modul Image-Gallery ermoumlglicht die Integration einer komfortablen Bildergallerie uumlber IMPERIA

Per Klick auf bdquoNeues Modulldquo -gt bdquoUDE Image-Gallery (v21)ldquo kann die entsprechende Gallerie an der

gewuumlnschten Position eingefuumlgt werden Generell sollten nur Bilder verwendet werden die

entweder auf 640 x 480 Pixel oder maximal auf 900 x 600 Pixel skaliert sind Aufgrund einer hohen

Dateigroumlszlige sollten Bilder einer Digitalkamera vor dem Upload komprimiert werden

Innerhalb des Moduls kann zunaumlchst die Hintergrundfarbe der Gallerie wahlweise zwischen Beige

Blau und Weiszlig eingestellt werden Um die Gallerie mit Bildern zu fuumlllen ist das entsprechende

Verzeichnis der Mediendatenbank anzugeben Aufgrund der geaumlnderten Syntax wird das Verzeichnis

ohne images angegeben Die Suchmaske fuumlr die Bilderauswahl deklariert die Dateiformate die mit

einbezogen werden sollen Schlieszliglich koumlnnen Sie die Bilder alphabetisch sortiert anzeigen lassen

sowie einen kleinen und einen groszligen Titel fuumlr Ihre Bildergallerie vergeben

Grundsaumltzlich ist es empfehlenswert groumlszligere Bildmengen auf mehrere Seiten zu verteilen um

einerseits die Darstellung auf mobilen Geraumlten zu vereinfachen und andererseits geringeren

Bandbreiten Rechnung zu tragen

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 27: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 26

vorgesehen auf diesem Wege vom Corporate Design der Universitaumlt abweichende eigene Layouts zu

entwickeln

65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite

Uumlber das Modul bdquoCodebaustein einfuumlgenldquo ist es moumlglich vorgefertigte Bloumlcke oder bdquoBauteileldquo in Ihre

Webseite zu integrieren Codebausteine eignen sich dazu bestimmte Informationen die auf vielen

Webseiten wiederkehren an einer Stelle zentral zu pflegen In der Bearbeitungsebene bietet Ihnen

das Modul die in der aktuellen Rubrik vorhandenen Bausteine zur Auswahl an

Codebausteine erstellen Sie uumlber das IMPERIA-Hauptmenuuml

bull Hauptmenuuml -gt Neues Dokument erzeugen -gt Rubrikenauswahl -gt Meta-Information Dort

koumlnnen Sie den entsprechenden Dokumententyp auswaumlhlen und mit bdquoOkldquo erzeugen

S e i t e | 27

Sie koumlnnen in Codebausteinen wie beim uumlblichen Seitenaufbau gewohnt unterschiedliche Module

kombinieren und positionieren Zur Verfuumlgung stehen die Elemente

bull (TinyMCE)-Texteditor

bull Code editieren

bull die Formularmodule

bull Randlose Grafik

bull RSS-Feed-Agent

bull Tube Audio-VideoPlayer

Eine spaumltere Bearbeitung der Codebausteine ist im CMS IMPERIA nicht uumlber das Tool bdquoQuickEditldquo

moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo

im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichniscode_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Codebausteine im

selben Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

66 DBAdmin PHP-Skript

Mit Hilfe des Moduls bdquoDBAdminldquo lassen sich Datenbank direkt in Tabellenform auf Ihrer Webseite

darstellen Uumlber die Funktion bdquoOptionen anzeigenldquo erhalten Sie zudem die Moumlglichkeit eine

Webseite zur Pflege Ihrer Datenbank zu erstellen Dort koumlnnen Sie die entsprechende Tabelle

editieren d h Eintraumlge einzeln erstellen bearbeiten oder loumlschen

S e i t e | 28

Zur Nutzung dieses Moduls sind folgende Angaben notwendig

bull Datenbank-Server Name oder IP-Adresse des Servers auf dem die anzusprechende

Datenbank liegt (bspw bdquodbuni-duedeldquo)

bull Datenbank-Name

bull Tabellen-Name Name der speziellen Tabelle die innerhalb der Datenbank angesprochen

werden soll

bull Datenbank-Benutzer und Datenbank-Passwort

Datenbanken auf einem UDE-Server koumlnnen Universitaumltsangehoumlrige unter Nutzung ihrer

Hochschulkennung online beim Zentrum fuumlr Informations- und Mediendienste (ZIM) beantragen

unter httpwwwuni-duedezimserviceshomepagesmysqlshtml

67 Doppelcontainer PHP-Skript HTML-Web-Seite

Das Modul bdquoDoppelcontainerldquo ermoumlglicht es Ihnen auf Ihrer Webseite zwei Textebloumlcke (je nach

Wunsch mit oder ohne Bilder) nebeneinander zu setzen

Auf zweispaltig angelegten Webseiten ist die Anlage eines Doppelcontainers nur in der linken Spalte

moumlglich Bilder erscheinen dort in einer Breite von 246 Pixeln Auf einspaltig angelegten Webseiten

werden die einzelnen Bloumlcke (und dementsprechend die verwendeten Bilder) in einer Breite von 366

Pixeln angezeigt Die Bildhoumlhe ist in beiden Faumlllen frei waumlhlbar sollte jedoch in beiden Containern

identisch sein

S e i t e | 29

Zur Texteingabe stehen Ihnen die Optionen bdquoTeaserldquo (mit Zeichenbegrenzung) sowie bdquoStandardldquo

(ohne Zeichenbegrenzung) zur Verfuumlgung Waumlhlen Sie bdquoTeaserldquo so erhalten Sie Platz fuumlr 300 Zeichen

ndash ein Zeichenzaumlhler neben der Texteingabe-Box erleichtert das Mitzaumlhlen Der Text wird gelb

unterlegt wenn er nach dem naumlchsten Leerzeichen abgeschnitten wird Rot erscheint das Textfeld

wenn die Zeichenzahl bereits uumlberschritten wurde

Beachten Sie bitte dass das Modul HTML-Tags (URLs Mailadressen etc) automatisch filtert Sie

werden daher nicht angezeigt Um Ihren Text zu verlinken koumlnnen Sie das Eingabefeld bdquoMehr-Linkldquo

nutzen

Beide Bloumlcke innerhalb eines Doppelcontainers lassen sich individuell auf die uumlbliche Weise (weiszlig

hellblau sandfarben) hinterlegen

S e i t e | 30

68 Flickr nutzen PHP-Skript

Das Modul bdquoFlickr nutzenldquo ermoumlglicht es Ihnen im Sinne einer crossmedialen Verwertung Bilder aus

Ihrem Flickr-Account in Ihre IMPERIA-Webseite einzubinden Fuumlr diese Funktion benoumltigen Sie einen

sogenannten API-Key den Sie in Ihrem Flick-Auftritt unter

bull httpwwwflickrcomservicesappscreateapply

erzeugen lassen koumlnnen Tragen Sie dann diesen Key in die entsprechende Eingabemaske des Moduls

ein Anschlieszligend haben Sie die Moumlglichkeit ganze Fotosets (Alben) oder Einzelbilder einzubinden

Photoset anzeigen

S e i t e | 31

Zum Anzeigen von Photosets wird die entsprechende Photoset-ID ins Modul eingetragen Diese ID ist

Teil der Link-Adresse des entsprechenden Albums bei Flickr (die erscheint wenn Sie das Album

angeklickt haben) Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAMEsets12340954909

Die Photoset-ID verbirgt sich hinter den Ziffern am Ende der URL Sie koumlnnen auswaumlhlen wie viele

Fotos auf einer Webseite erscheinen sollen Dafuumlr uumlbernimmt das Modul die Bilder in der

quadratischen Aufloumlsung von Flickr also in einer Groumlszlige von 75 x 75 Pixeln Reicht der Platz dafuumlr

nicht aus wird eine zusaumltzliche Blaumltterfunktion angeboten Photoset- und Bild-Beschreibungen

koumlnnen aus dem Flickr-Account automatisch uumlbernommen werden wenn die entsprechenden

Optionen mit einem Haken aktiviert wurden

Einzelbild anzeigen

Um ein einzelnes Bild anzuzeigen benoumltigen Sie die entsprechen Flickr-Foto-ID Diese verbirgt sich

hinter der ersten Zahl in der Link-Adresse des entsprechenden Bildes Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAME5841603851inset-72157626981464896

Ein Einzelbild kann in einer hohen oder einer geringen Aufloumlsung eingebunden werden Bei einer

zweispaltig angelegten Webseite wird das Bild in der linken Inhaltsspalte auf eine Breite von 480

Pixel bei einer einspaltig angelegten Webseite auf eine Breite von 721 Pixel skaliert

69 Formulare

Mit IMPERIA haben Sie die Moumlglichkeit Formulare auf Ihrer Webseite zu platzieren In der

Bearbeitungsebene Ihrer Seite finden Sie im Bereich bdquoNeues Modulldquo den Menupunkt UDE ndash

Formular oumlffnen

Nach dem Festlegen der Hintergrundfarbe koumlnnen Sie im Bereich bdquoLegendeldquo den Titel Ihres

Formulars waumlhlen Wenn Sie die Funktion bdquoMailer-Funktionalitaumltldquo aktivieren koumlnnen Sie die Adresse

Ihres Mailscripts eingeben Anderenfalls belassen Sie es bitte beim Vorgabewert

Im Bereich bdquoNexturlldquo kann angegeben werden welche Seite nach dem Abschicken des Formulars

aufgerufen werden soll Daruumlber hinaus werden der Titel der E-Mail die Absender-Adresse sowie die

Empfaumlnger-Adresse definiert Optional kann eine Bestaumltigungs-E-Mail mit frei waumlhlbarem Text

versendet werden

S e i t e | 32

Um dem erstellten Formular Eingabefelder hinzuzufuumlgen ist das Modul bdquoUDE Formular Elementldquo zu

waumlhlen Waumlhlen Sie das Element bdquoTextldquo um ein Eingabefeld zu erzeugen Die Option bdquoBezeichnerldquo

beschreibt den sichtbaren Text im fertigen Formular zum Beispiel bdquoIhr Nameldquo Weitergehend koumlnnen

Sie die zulaumlssigen Inhalte der Nutzereingaben definieren sowie markieren ob das Element ein

Pflichtfeld sein soll

S e i t e | 33

Um ein Texteingabefeld innerhalb des Formulars zu erzeugen waumlhlen Sie das Element bdquoTextarealdquo

Sie koumlnnen die Groumlszlige des Textfeldes definieren (Zeilen x Spalten) und optional erneut eine Pruumlfung

zulaumlssiger Nutzereingaben aktivieren Weiterhin koumlnnen Sie waumlhlen ob der eingegebene Wert des

Formularelements in die Datenbank eingetragen werden soll Wenn Sie fuumlr Ihre Formulare auf eine

Datenbank zuruumlckgreifen moumlchten koumlnnen Sie sich hier informieren httpwwwuni-

duedezimserviceshomepagesmysqlshtml

Insgesamt stehen folgende Elemente zur Verfuumlgung

bull Checkbox Hidden Password Select Anfang Select Option einfuumlgen Select Ende Submit

Text Datum Textarea Radio Reset Leerzeile Kommentarzeile Neuer Abschnitt mit

Bezeichner sowie Datei-Upload

Ein Formular muss mit dem Modul bdquoUDE Formular schlieszligenldquo abgeschlossen werden An dieser

Stelle koumlnnen Sie einen Send-Button hinzufuumlgen dessen Name frei waumlhlbar ist Der eingegebene Text

wird als Beschriftung des Buttons angezeigt Erst durch das Hinzufuumlgen dieses Moduls wird das

Formular auf Ihrer Seite sichtbar und kann nach der Veroumlffentlichung genutzt werden

S e i t e | 34

610 Google-Maps (v30) PHP-Skript HTML-Web-Seite

Dieses Modul bringt eine Grafik von Google-Maps auf die Webseite entweder in Kartenoptik oder als

Satellitenbild Sie haben zwei Moumlglichkeiten eine solche zu generieren Uumlber die konkreten GPS-

Koordinaten oder durch das Angeben einer Adresse (zB Forsthausweg 2 47057 Duisburg) Sie

koumlnnen aus zwoumllf Vergroumlszligerungsstufen fuumlr den gewuumlnschten Ausschnitt zwei Kartengroumlszligen und

zwei Kartenformaten waumlhlen

S e i t e | 35

Kartengroumlszlige bdquogroszligldquo skaliert die Graphik auf 480 Pixel Breite auf einer zweispaltigen Seite bzw auf

721 Pixel auf einer einspaltigen Seite Die Option bdquokleinldquo verringert die Breite auf etwa die Haumllfte Die

beiden Optionen beim Kartenformat beeinflussen die Houmlhe der Grafik

S e i t e | 36

611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite

Das Modul Image-Gallery ermoumlglicht die Integration einer komfortablen Bildergallerie uumlber IMPERIA

Per Klick auf bdquoNeues Modulldquo -gt bdquoUDE Image-Gallery (v21)ldquo kann die entsprechende Gallerie an der

gewuumlnschten Position eingefuumlgt werden Generell sollten nur Bilder verwendet werden die

entweder auf 640 x 480 Pixel oder maximal auf 900 x 600 Pixel skaliert sind Aufgrund einer hohen

Dateigroumlszlige sollten Bilder einer Digitalkamera vor dem Upload komprimiert werden

Innerhalb des Moduls kann zunaumlchst die Hintergrundfarbe der Gallerie wahlweise zwischen Beige

Blau und Weiszlig eingestellt werden Um die Gallerie mit Bildern zu fuumlllen ist das entsprechende

Verzeichnis der Mediendatenbank anzugeben Aufgrund der geaumlnderten Syntax wird das Verzeichnis

ohne images angegeben Die Suchmaske fuumlr die Bilderauswahl deklariert die Dateiformate die mit

einbezogen werden sollen Schlieszliglich koumlnnen Sie die Bilder alphabetisch sortiert anzeigen lassen

sowie einen kleinen und einen groszligen Titel fuumlr Ihre Bildergallerie vergeben

Grundsaumltzlich ist es empfehlenswert groumlszligere Bildmengen auf mehrere Seiten zu verteilen um

einerseits die Darstellung auf mobilen Geraumlten zu vereinfachen und andererseits geringeren

Bandbreiten Rechnung zu tragen

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 28: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 27

Sie koumlnnen in Codebausteinen wie beim uumlblichen Seitenaufbau gewohnt unterschiedliche Module

kombinieren und positionieren Zur Verfuumlgung stehen die Elemente

bull (TinyMCE)-Texteditor

bull Code editieren

bull die Formularmodule

bull Randlose Grafik

bull RSS-Feed-Agent

bull Tube Audio-VideoPlayer

Eine spaumltere Bearbeitung der Codebausteine ist im CMS IMPERIA nicht uumlber das Tool bdquoQuickEditldquo

moumlglich Die entsprechende Datei muss uumlber die Funktion bdquoFreigeschaltete Dokumente bearbeitenldquo

im IMPERIA-Hauptmenuuml gesucht und in den Workflow importiert werden

bull Der Dateiname und Pfad (URL) der Organisationsbezeichnungen folgt folgendem Muster

ihrverzeichniscode_12345shtml

Der Zahlencode innerhalb des Dateinamens wird vom System eigenstaumlndig vergeben und laumlsst sich

nicht individuell beeinflussen Achten Sie deshalb darauf wenn Sie mehrere Codebausteine im

selben Verzeichnis erstellen diesen einen jeweils moumlglichst aussagekraumlftigen Dateititel zu geben

66 DBAdmin PHP-Skript

Mit Hilfe des Moduls bdquoDBAdminldquo lassen sich Datenbank direkt in Tabellenform auf Ihrer Webseite

darstellen Uumlber die Funktion bdquoOptionen anzeigenldquo erhalten Sie zudem die Moumlglichkeit eine

Webseite zur Pflege Ihrer Datenbank zu erstellen Dort koumlnnen Sie die entsprechende Tabelle

editieren d h Eintraumlge einzeln erstellen bearbeiten oder loumlschen

S e i t e | 28

Zur Nutzung dieses Moduls sind folgende Angaben notwendig

bull Datenbank-Server Name oder IP-Adresse des Servers auf dem die anzusprechende

Datenbank liegt (bspw bdquodbuni-duedeldquo)

bull Datenbank-Name

bull Tabellen-Name Name der speziellen Tabelle die innerhalb der Datenbank angesprochen

werden soll

bull Datenbank-Benutzer und Datenbank-Passwort

Datenbanken auf einem UDE-Server koumlnnen Universitaumltsangehoumlrige unter Nutzung ihrer

Hochschulkennung online beim Zentrum fuumlr Informations- und Mediendienste (ZIM) beantragen

unter httpwwwuni-duedezimserviceshomepagesmysqlshtml

67 Doppelcontainer PHP-Skript HTML-Web-Seite

Das Modul bdquoDoppelcontainerldquo ermoumlglicht es Ihnen auf Ihrer Webseite zwei Textebloumlcke (je nach

Wunsch mit oder ohne Bilder) nebeneinander zu setzen

Auf zweispaltig angelegten Webseiten ist die Anlage eines Doppelcontainers nur in der linken Spalte

moumlglich Bilder erscheinen dort in einer Breite von 246 Pixeln Auf einspaltig angelegten Webseiten

werden die einzelnen Bloumlcke (und dementsprechend die verwendeten Bilder) in einer Breite von 366

Pixeln angezeigt Die Bildhoumlhe ist in beiden Faumlllen frei waumlhlbar sollte jedoch in beiden Containern

identisch sein

S e i t e | 29

Zur Texteingabe stehen Ihnen die Optionen bdquoTeaserldquo (mit Zeichenbegrenzung) sowie bdquoStandardldquo

(ohne Zeichenbegrenzung) zur Verfuumlgung Waumlhlen Sie bdquoTeaserldquo so erhalten Sie Platz fuumlr 300 Zeichen

ndash ein Zeichenzaumlhler neben der Texteingabe-Box erleichtert das Mitzaumlhlen Der Text wird gelb

unterlegt wenn er nach dem naumlchsten Leerzeichen abgeschnitten wird Rot erscheint das Textfeld

wenn die Zeichenzahl bereits uumlberschritten wurde

Beachten Sie bitte dass das Modul HTML-Tags (URLs Mailadressen etc) automatisch filtert Sie

werden daher nicht angezeigt Um Ihren Text zu verlinken koumlnnen Sie das Eingabefeld bdquoMehr-Linkldquo

nutzen

Beide Bloumlcke innerhalb eines Doppelcontainers lassen sich individuell auf die uumlbliche Weise (weiszlig

hellblau sandfarben) hinterlegen

S e i t e | 30

68 Flickr nutzen PHP-Skript

Das Modul bdquoFlickr nutzenldquo ermoumlglicht es Ihnen im Sinne einer crossmedialen Verwertung Bilder aus

Ihrem Flickr-Account in Ihre IMPERIA-Webseite einzubinden Fuumlr diese Funktion benoumltigen Sie einen

sogenannten API-Key den Sie in Ihrem Flick-Auftritt unter

bull httpwwwflickrcomservicesappscreateapply

erzeugen lassen koumlnnen Tragen Sie dann diesen Key in die entsprechende Eingabemaske des Moduls

ein Anschlieszligend haben Sie die Moumlglichkeit ganze Fotosets (Alben) oder Einzelbilder einzubinden

Photoset anzeigen

S e i t e | 31

Zum Anzeigen von Photosets wird die entsprechende Photoset-ID ins Modul eingetragen Diese ID ist

Teil der Link-Adresse des entsprechenden Albums bei Flickr (die erscheint wenn Sie das Album

angeklickt haben) Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAMEsets12340954909

Die Photoset-ID verbirgt sich hinter den Ziffern am Ende der URL Sie koumlnnen auswaumlhlen wie viele

Fotos auf einer Webseite erscheinen sollen Dafuumlr uumlbernimmt das Modul die Bilder in der

quadratischen Aufloumlsung von Flickr also in einer Groumlszlige von 75 x 75 Pixeln Reicht der Platz dafuumlr

nicht aus wird eine zusaumltzliche Blaumltterfunktion angeboten Photoset- und Bild-Beschreibungen

koumlnnen aus dem Flickr-Account automatisch uumlbernommen werden wenn die entsprechenden

Optionen mit einem Haken aktiviert wurden

Einzelbild anzeigen

Um ein einzelnes Bild anzuzeigen benoumltigen Sie die entsprechen Flickr-Foto-ID Diese verbirgt sich

hinter der ersten Zahl in der Link-Adresse des entsprechenden Bildes Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAME5841603851inset-72157626981464896

Ein Einzelbild kann in einer hohen oder einer geringen Aufloumlsung eingebunden werden Bei einer

zweispaltig angelegten Webseite wird das Bild in der linken Inhaltsspalte auf eine Breite von 480

Pixel bei einer einspaltig angelegten Webseite auf eine Breite von 721 Pixel skaliert

69 Formulare

Mit IMPERIA haben Sie die Moumlglichkeit Formulare auf Ihrer Webseite zu platzieren In der

Bearbeitungsebene Ihrer Seite finden Sie im Bereich bdquoNeues Modulldquo den Menupunkt UDE ndash

Formular oumlffnen

Nach dem Festlegen der Hintergrundfarbe koumlnnen Sie im Bereich bdquoLegendeldquo den Titel Ihres

Formulars waumlhlen Wenn Sie die Funktion bdquoMailer-Funktionalitaumltldquo aktivieren koumlnnen Sie die Adresse

Ihres Mailscripts eingeben Anderenfalls belassen Sie es bitte beim Vorgabewert

Im Bereich bdquoNexturlldquo kann angegeben werden welche Seite nach dem Abschicken des Formulars

aufgerufen werden soll Daruumlber hinaus werden der Titel der E-Mail die Absender-Adresse sowie die

Empfaumlnger-Adresse definiert Optional kann eine Bestaumltigungs-E-Mail mit frei waumlhlbarem Text

versendet werden

S e i t e | 32

Um dem erstellten Formular Eingabefelder hinzuzufuumlgen ist das Modul bdquoUDE Formular Elementldquo zu

waumlhlen Waumlhlen Sie das Element bdquoTextldquo um ein Eingabefeld zu erzeugen Die Option bdquoBezeichnerldquo

beschreibt den sichtbaren Text im fertigen Formular zum Beispiel bdquoIhr Nameldquo Weitergehend koumlnnen

Sie die zulaumlssigen Inhalte der Nutzereingaben definieren sowie markieren ob das Element ein

Pflichtfeld sein soll

S e i t e | 33

Um ein Texteingabefeld innerhalb des Formulars zu erzeugen waumlhlen Sie das Element bdquoTextarealdquo

Sie koumlnnen die Groumlszlige des Textfeldes definieren (Zeilen x Spalten) und optional erneut eine Pruumlfung

zulaumlssiger Nutzereingaben aktivieren Weiterhin koumlnnen Sie waumlhlen ob der eingegebene Wert des

Formularelements in die Datenbank eingetragen werden soll Wenn Sie fuumlr Ihre Formulare auf eine

Datenbank zuruumlckgreifen moumlchten koumlnnen Sie sich hier informieren httpwwwuni-

duedezimserviceshomepagesmysqlshtml

Insgesamt stehen folgende Elemente zur Verfuumlgung

bull Checkbox Hidden Password Select Anfang Select Option einfuumlgen Select Ende Submit

Text Datum Textarea Radio Reset Leerzeile Kommentarzeile Neuer Abschnitt mit

Bezeichner sowie Datei-Upload

Ein Formular muss mit dem Modul bdquoUDE Formular schlieszligenldquo abgeschlossen werden An dieser

Stelle koumlnnen Sie einen Send-Button hinzufuumlgen dessen Name frei waumlhlbar ist Der eingegebene Text

wird als Beschriftung des Buttons angezeigt Erst durch das Hinzufuumlgen dieses Moduls wird das

Formular auf Ihrer Seite sichtbar und kann nach der Veroumlffentlichung genutzt werden

S e i t e | 34

610 Google-Maps (v30) PHP-Skript HTML-Web-Seite

Dieses Modul bringt eine Grafik von Google-Maps auf die Webseite entweder in Kartenoptik oder als

Satellitenbild Sie haben zwei Moumlglichkeiten eine solche zu generieren Uumlber die konkreten GPS-

Koordinaten oder durch das Angeben einer Adresse (zB Forsthausweg 2 47057 Duisburg) Sie

koumlnnen aus zwoumllf Vergroumlszligerungsstufen fuumlr den gewuumlnschten Ausschnitt zwei Kartengroumlszligen und

zwei Kartenformaten waumlhlen

S e i t e | 35

Kartengroumlszlige bdquogroszligldquo skaliert die Graphik auf 480 Pixel Breite auf einer zweispaltigen Seite bzw auf

721 Pixel auf einer einspaltigen Seite Die Option bdquokleinldquo verringert die Breite auf etwa die Haumllfte Die

beiden Optionen beim Kartenformat beeinflussen die Houmlhe der Grafik

S e i t e | 36

611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite

Das Modul Image-Gallery ermoumlglicht die Integration einer komfortablen Bildergallerie uumlber IMPERIA

Per Klick auf bdquoNeues Modulldquo -gt bdquoUDE Image-Gallery (v21)ldquo kann die entsprechende Gallerie an der

gewuumlnschten Position eingefuumlgt werden Generell sollten nur Bilder verwendet werden die

entweder auf 640 x 480 Pixel oder maximal auf 900 x 600 Pixel skaliert sind Aufgrund einer hohen

Dateigroumlszlige sollten Bilder einer Digitalkamera vor dem Upload komprimiert werden

Innerhalb des Moduls kann zunaumlchst die Hintergrundfarbe der Gallerie wahlweise zwischen Beige

Blau und Weiszlig eingestellt werden Um die Gallerie mit Bildern zu fuumlllen ist das entsprechende

Verzeichnis der Mediendatenbank anzugeben Aufgrund der geaumlnderten Syntax wird das Verzeichnis

ohne images angegeben Die Suchmaske fuumlr die Bilderauswahl deklariert die Dateiformate die mit

einbezogen werden sollen Schlieszliglich koumlnnen Sie die Bilder alphabetisch sortiert anzeigen lassen

sowie einen kleinen und einen groszligen Titel fuumlr Ihre Bildergallerie vergeben

Grundsaumltzlich ist es empfehlenswert groumlszligere Bildmengen auf mehrere Seiten zu verteilen um

einerseits die Darstellung auf mobilen Geraumlten zu vereinfachen und andererseits geringeren

Bandbreiten Rechnung zu tragen

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 29: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 28

Zur Nutzung dieses Moduls sind folgende Angaben notwendig

bull Datenbank-Server Name oder IP-Adresse des Servers auf dem die anzusprechende

Datenbank liegt (bspw bdquodbuni-duedeldquo)

bull Datenbank-Name

bull Tabellen-Name Name der speziellen Tabelle die innerhalb der Datenbank angesprochen

werden soll

bull Datenbank-Benutzer und Datenbank-Passwort

Datenbanken auf einem UDE-Server koumlnnen Universitaumltsangehoumlrige unter Nutzung ihrer

Hochschulkennung online beim Zentrum fuumlr Informations- und Mediendienste (ZIM) beantragen

unter httpwwwuni-duedezimserviceshomepagesmysqlshtml

67 Doppelcontainer PHP-Skript HTML-Web-Seite

Das Modul bdquoDoppelcontainerldquo ermoumlglicht es Ihnen auf Ihrer Webseite zwei Textebloumlcke (je nach

Wunsch mit oder ohne Bilder) nebeneinander zu setzen

Auf zweispaltig angelegten Webseiten ist die Anlage eines Doppelcontainers nur in der linken Spalte

moumlglich Bilder erscheinen dort in einer Breite von 246 Pixeln Auf einspaltig angelegten Webseiten

werden die einzelnen Bloumlcke (und dementsprechend die verwendeten Bilder) in einer Breite von 366

Pixeln angezeigt Die Bildhoumlhe ist in beiden Faumlllen frei waumlhlbar sollte jedoch in beiden Containern

identisch sein

S e i t e | 29

Zur Texteingabe stehen Ihnen die Optionen bdquoTeaserldquo (mit Zeichenbegrenzung) sowie bdquoStandardldquo

(ohne Zeichenbegrenzung) zur Verfuumlgung Waumlhlen Sie bdquoTeaserldquo so erhalten Sie Platz fuumlr 300 Zeichen

ndash ein Zeichenzaumlhler neben der Texteingabe-Box erleichtert das Mitzaumlhlen Der Text wird gelb

unterlegt wenn er nach dem naumlchsten Leerzeichen abgeschnitten wird Rot erscheint das Textfeld

wenn die Zeichenzahl bereits uumlberschritten wurde

Beachten Sie bitte dass das Modul HTML-Tags (URLs Mailadressen etc) automatisch filtert Sie

werden daher nicht angezeigt Um Ihren Text zu verlinken koumlnnen Sie das Eingabefeld bdquoMehr-Linkldquo

nutzen

Beide Bloumlcke innerhalb eines Doppelcontainers lassen sich individuell auf die uumlbliche Weise (weiszlig

hellblau sandfarben) hinterlegen

S e i t e | 30

68 Flickr nutzen PHP-Skript

Das Modul bdquoFlickr nutzenldquo ermoumlglicht es Ihnen im Sinne einer crossmedialen Verwertung Bilder aus

Ihrem Flickr-Account in Ihre IMPERIA-Webseite einzubinden Fuumlr diese Funktion benoumltigen Sie einen

sogenannten API-Key den Sie in Ihrem Flick-Auftritt unter

bull httpwwwflickrcomservicesappscreateapply

erzeugen lassen koumlnnen Tragen Sie dann diesen Key in die entsprechende Eingabemaske des Moduls

ein Anschlieszligend haben Sie die Moumlglichkeit ganze Fotosets (Alben) oder Einzelbilder einzubinden

Photoset anzeigen

S e i t e | 31

Zum Anzeigen von Photosets wird die entsprechende Photoset-ID ins Modul eingetragen Diese ID ist

Teil der Link-Adresse des entsprechenden Albums bei Flickr (die erscheint wenn Sie das Album

angeklickt haben) Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAMEsets12340954909

Die Photoset-ID verbirgt sich hinter den Ziffern am Ende der URL Sie koumlnnen auswaumlhlen wie viele

Fotos auf einer Webseite erscheinen sollen Dafuumlr uumlbernimmt das Modul die Bilder in der

quadratischen Aufloumlsung von Flickr also in einer Groumlszlige von 75 x 75 Pixeln Reicht der Platz dafuumlr

nicht aus wird eine zusaumltzliche Blaumltterfunktion angeboten Photoset- und Bild-Beschreibungen

koumlnnen aus dem Flickr-Account automatisch uumlbernommen werden wenn die entsprechenden

Optionen mit einem Haken aktiviert wurden

Einzelbild anzeigen

Um ein einzelnes Bild anzuzeigen benoumltigen Sie die entsprechen Flickr-Foto-ID Diese verbirgt sich

hinter der ersten Zahl in der Link-Adresse des entsprechenden Bildes Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAME5841603851inset-72157626981464896

Ein Einzelbild kann in einer hohen oder einer geringen Aufloumlsung eingebunden werden Bei einer

zweispaltig angelegten Webseite wird das Bild in der linken Inhaltsspalte auf eine Breite von 480

Pixel bei einer einspaltig angelegten Webseite auf eine Breite von 721 Pixel skaliert

69 Formulare

Mit IMPERIA haben Sie die Moumlglichkeit Formulare auf Ihrer Webseite zu platzieren In der

Bearbeitungsebene Ihrer Seite finden Sie im Bereich bdquoNeues Modulldquo den Menupunkt UDE ndash

Formular oumlffnen

Nach dem Festlegen der Hintergrundfarbe koumlnnen Sie im Bereich bdquoLegendeldquo den Titel Ihres

Formulars waumlhlen Wenn Sie die Funktion bdquoMailer-Funktionalitaumltldquo aktivieren koumlnnen Sie die Adresse

Ihres Mailscripts eingeben Anderenfalls belassen Sie es bitte beim Vorgabewert

Im Bereich bdquoNexturlldquo kann angegeben werden welche Seite nach dem Abschicken des Formulars

aufgerufen werden soll Daruumlber hinaus werden der Titel der E-Mail die Absender-Adresse sowie die

Empfaumlnger-Adresse definiert Optional kann eine Bestaumltigungs-E-Mail mit frei waumlhlbarem Text

versendet werden

S e i t e | 32

Um dem erstellten Formular Eingabefelder hinzuzufuumlgen ist das Modul bdquoUDE Formular Elementldquo zu

waumlhlen Waumlhlen Sie das Element bdquoTextldquo um ein Eingabefeld zu erzeugen Die Option bdquoBezeichnerldquo

beschreibt den sichtbaren Text im fertigen Formular zum Beispiel bdquoIhr Nameldquo Weitergehend koumlnnen

Sie die zulaumlssigen Inhalte der Nutzereingaben definieren sowie markieren ob das Element ein

Pflichtfeld sein soll

S e i t e | 33

Um ein Texteingabefeld innerhalb des Formulars zu erzeugen waumlhlen Sie das Element bdquoTextarealdquo

Sie koumlnnen die Groumlszlige des Textfeldes definieren (Zeilen x Spalten) und optional erneut eine Pruumlfung

zulaumlssiger Nutzereingaben aktivieren Weiterhin koumlnnen Sie waumlhlen ob der eingegebene Wert des

Formularelements in die Datenbank eingetragen werden soll Wenn Sie fuumlr Ihre Formulare auf eine

Datenbank zuruumlckgreifen moumlchten koumlnnen Sie sich hier informieren httpwwwuni-

duedezimserviceshomepagesmysqlshtml

Insgesamt stehen folgende Elemente zur Verfuumlgung

bull Checkbox Hidden Password Select Anfang Select Option einfuumlgen Select Ende Submit

Text Datum Textarea Radio Reset Leerzeile Kommentarzeile Neuer Abschnitt mit

Bezeichner sowie Datei-Upload

Ein Formular muss mit dem Modul bdquoUDE Formular schlieszligenldquo abgeschlossen werden An dieser

Stelle koumlnnen Sie einen Send-Button hinzufuumlgen dessen Name frei waumlhlbar ist Der eingegebene Text

wird als Beschriftung des Buttons angezeigt Erst durch das Hinzufuumlgen dieses Moduls wird das

Formular auf Ihrer Seite sichtbar und kann nach der Veroumlffentlichung genutzt werden

S e i t e | 34

610 Google-Maps (v30) PHP-Skript HTML-Web-Seite

Dieses Modul bringt eine Grafik von Google-Maps auf die Webseite entweder in Kartenoptik oder als

Satellitenbild Sie haben zwei Moumlglichkeiten eine solche zu generieren Uumlber die konkreten GPS-

Koordinaten oder durch das Angeben einer Adresse (zB Forsthausweg 2 47057 Duisburg) Sie

koumlnnen aus zwoumllf Vergroumlszligerungsstufen fuumlr den gewuumlnschten Ausschnitt zwei Kartengroumlszligen und

zwei Kartenformaten waumlhlen

S e i t e | 35

Kartengroumlszlige bdquogroszligldquo skaliert die Graphik auf 480 Pixel Breite auf einer zweispaltigen Seite bzw auf

721 Pixel auf einer einspaltigen Seite Die Option bdquokleinldquo verringert die Breite auf etwa die Haumllfte Die

beiden Optionen beim Kartenformat beeinflussen die Houmlhe der Grafik

S e i t e | 36

611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite

Das Modul Image-Gallery ermoumlglicht die Integration einer komfortablen Bildergallerie uumlber IMPERIA

Per Klick auf bdquoNeues Modulldquo -gt bdquoUDE Image-Gallery (v21)ldquo kann die entsprechende Gallerie an der

gewuumlnschten Position eingefuumlgt werden Generell sollten nur Bilder verwendet werden die

entweder auf 640 x 480 Pixel oder maximal auf 900 x 600 Pixel skaliert sind Aufgrund einer hohen

Dateigroumlszlige sollten Bilder einer Digitalkamera vor dem Upload komprimiert werden

Innerhalb des Moduls kann zunaumlchst die Hintergrundfarbe der Gallerie wahlweise zwischen Beige

Blau und Weiszlig eingestellt werden Um die Gallerie mit Bildern zu fuumlllen ist das entsprechende

Verzeichnis der Mediendatenbank anzugeben Aufgrund der geaumlnderten Syntax wird das Verzeichnis

ohne images angegeben Die Suchmaske fuumlr die Bilderauswahl deklariert die Dateiformate die mit

einbezogen werden sollen Schlieszliglich koumlnnen Sie die Bilder alphabetisch sortiert anzeigen lassen

sowie einen kleinen und einen groszligen Titel fuumlr Ihre Bildergallerie vergeben

Grundsaumltzlich ist es empfehlenswert groumlszligere Bildmengen auf mehrere Seiten zu verteilen um

einerseits die Darstellung auf mobilen Geraumlten zu vereinfachen und andererseits geringeren

Bandbreiten Rechnung zu tragen

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 30: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 29

Zur Texteingabe stehen Ihnen die Optionen bdquoTeaserldquo (mit Zeichenbegrenzung) sowie bdquoStandardldquo

(ohne Zeichenbegrenzung) zur Verfuumlgung Waumlhlen Sie bdquoTeaserldquo so erhalten Sie Platz fuumlr 300 Zeichen

ndash ein Zeichenzaumlhler neben der Texteingabe-Box erleichtert das Mitzaumlhlen Der Text wird gelb

unterlegt wenn er nach dem naumlchsten Leerzeichen abgeschnitten wird Rot erscheint das Textfeld

wenn die Zeichenzahl bereits uumlberschritten wurde

Beachten Sie bitte dass das Modul HTML-Tags (URLs Mailadressen etc) automatisch filtert Sie

werden daher nicht angezeigt Um Ihren Text zu verlinken koumlnnen Sie das Eingabefeld bdquoMehr-Linkldquo

nutzen

Beide Bloumlcke innerhalb eines Doppelcontainers lassen sich individuell auf die uumlbliche Weise (weiszlig

hellblau sandfarben) hinterlegen

S e i t e | 30

68 Flickr nutzen PHP-Skript

Das Modul bdquoFlickr nutzenldquo ermoumlglicht es Ihnen im Sinne einer crossmedialen Verwertung Bilder aus

Ihrem Flickr-Account in Ihre IMPERIA-Webseite einzubinden Fuumlr diese Funktion benoumltigen Sie einen

sogenannten API-Key den Sie in Ihrem Flick-Auftritt unter

bull httpwwwflickrcomservicesappscreateapply

erzeugen lassen koumlnnen Tragen Sie dann diesen Key in die entsprechende Eingabemaske des Moduls

ein Anschlieszligend haben Sie die Moumlglichkeit ganze Fotosets (Alben) oder Einzelbilder einzubinden

Photoset anzeigen

S e i t e | 31

Zum Anzeigen von Photosets wird die entsprechende Photoset-ID ins Modul eingetragen Diese ID ist

Teil der Link-Adresse des entsprechenden Albums bei Flickr (die erscheint wenn Sie das Album

angeklickt haben) Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAMEsets12340954909

Die Photoset-ID verbirgt sich hinter den Ziffern am Ende der URL Sie koumlnnen auswaumlhlen wie viele

Fotos auf einer Webseite erscheinen sollen Dafuumlr uumlbernimmt das Modul die Bilder in der

quadratischen Aufloumlsung von Flickr also in einer Groumlszlige von 75 x 75 Pixeln Reicht der Platz dafuumlr

nicht aus wird eine zusaumltzliche Blaumltterfunktion angeboten Photoset- und Bild-Beschreibungen

koumlnnen aus dem Flickr-Account automatisch uumlbernommen werden wenn die entsprechenden

Optionen mit einem Haken aktiviert wurden

Einzelbild anzeigen

Um ein einzelnes Bild anzuzeigen benoumltigen Sie die entsprechen Flickr-Foto-ID Diese verbirgt sich

hinter der ersten Zahl in der Link-Adresse des entsprechenden Bildes Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAME5841603851inset-72157626981464896

Ein Einzelbild kann in einer hohen oder einer geringen Aufloumlsung eingebunden werden Bei einer

zweispaltig angelegten Webseite wird das Bild in der linken Inhaltsspalte auf eine Breite von 480

Pixel bei einer einspaltig angelegten Webseite auf eine Breite von 721 Pixel skaliert

69 Formulare

Mit IMPERIA haben Sie die Moumlglichkeit Formulare auf Ihrer Webseite zu platzieren In der

Bearbeitungsebene Ihrer Seite finden Sie im Bereich bdquoNeues Modulldquo den Menupunkt UDE ndash

Formular oumlffnen

Nach dem Festlegen der Hintergrundfarbe koumlnnen Sie im Bereich bdquoLegendeldquo den Titel Ihres

Formulars waumlhlen Wenn Sie die Funktion bdquoMailer-Funktionalitaumltldquo aktivieren koumlnnen Sie die Adresse

Ihres Mailscripts eingeben Anderenfalls belassen Sie es bitte beim Vorgabewert

Im Bereich bdquoNexturlldquo kann angegeben werden welche Seite nach dem Abschicken des Formulars

aufgerufen werden soll Daruumlber hinaus werden der Titel der E-Mail die Absender-Adresse sowie die

Empfaumlnger-Adresse definiert Optional kann eine Bestaumltigungs-E-Mail mit frei waumlhlbarem Text

versendet werden

S e i t e | 32

Um dem erstellten Formular Eingabefelder hinzuzufuumlgen ist das Modul bdquoUDE Formular Elementldquo zu

waumlhlen Waumlhlen Sie das Element bdquoTextldquo um ein Eingabefeld zu erzeugen Die Option bdquoBezeichnerldquo

beschreibt den sichtbaren Text im fertigen Formular zum Beispiel bdquoIhr Nameldquo Weitergehend koumlnnen

Sie die zulaumlssigen Inhalte der Nutzereingaben definieren sowie markieren ob das Element ein

Pflichtfeld sein soll

S e i t e | 33

Um ein Texteingabefeld innerhalb des Formulars zu erzeugen waumlhlen Sie das Element bdquoTextarealdquo

Sie koumlnnen die Groumlszlige des Textfeldes definieren (Zeilen x Spalten) und optional erneut eine Pruumlfung

zulaumlssiger Nutzereingaben aktivieren Weiterhin koumlnnen Sie waumlhlen ob der eingegebene Wert des

Formularelements in die Datenbank eingetragen werden soll Wenn Sie fuumlr Ihre Formulare auf eine

Datenbank zuruumlckgreifen moumlchten koumlnnen Sie sich hier informieren httpwwwuni-

duedezimserviceshomepagesmysqlshtml

Insgesamt stehen folgende Elemente zur Verfuumlgung

bull Checkbox Hidden Password Select Anfang Select Option einfuumlgen Select Ende Submit

Text Datum Textarea Radio Reset Leerzeile Kommentarzeile Neuer Abschnitt mit

Bezeichner sowie Datei-Upload

Ein Formular muss mit dem Modul bdquoUDE Formular schlieszligenldquo abgeschlossen werden An dieser

Stelle koumlnnen Sie einen Send-Button hinzufuumlgen dessen Name frei waumlhlbar ist Der eingegebene Text

wird als Beschriftung des Buttons angezeigt Erst durch das Hinzufuumlgen dieses Moduls wird das

Formular auf Ihrer Seite sichtbar und kann nach der Veroumlffentlichung genutzt werden

S e i t e | 34

610 Google-Maps (v30) PHP-Skript HTML-Web-Seite

Dieses Modul bringt eine Grafik von Google-Maps auf die Webseite entweder in Kartenoptik oder als

Satellitenbild Sie haben zwei Moumlglichkeiten eine solche zu generieren Uumlber die konkreten GPS-

Koordinaten oder durch das Angeben einer Adresse (zB Forsthausweg 2 47057 Duisburg) Sie

koumlnnen aus zwoumllf Vergroumlszligerungsstufen fuumlr den gewuumlnschten Ausschnitt zwei Kartengroumlszligen und

zwei Kartenformaten waumlhlen

S e i t e | 35

Kartengroumlszlige bdquogroszligldquo skaliert die Graphik auf 480 Pixel Breite auf einer zweispaltigen Seite bzw auf

721 Pixel auf einer einspaltigen Seite Die Option bdquokleinldquo verringert die Breite auf etwa die Haumllfte Die

beiden Optionen beim Kartenformat beeinflussen die Houmlhe der Grafik

S e i t e | 36

611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite

Das Modul Image-Gallery ermoumlglicht die Integration einer komfortablen Bildergallerie uumlber IMPERIA

Per Klick auf bdquoNeues Modulldquo -gt bdquoUDE Image-Gallery (v21)ldquo kann die entsprechende Gallerie an der

gewuumlnschten Position eingefuumlgt werden Generell sollten nur Bilder verwendet werden die

entweder auf 640 x 480 Pixel oder maximal auf 900 x 600 Pixel skaliert sind Aufgrund einer hohen

Dateigroumlszlige sollten Bilder einer Digitalkamera vor dem Upload komprimiert werden

Innerhalb des Moduls kann zunaumlchst die Hintergrundfarbe der Gallerie wahlweise zwischen Beige

Blau und Weiszlig eingestellt werden Um die Gallerie mit Bildern zu fuumlllen ist das entsprechende

Verzeichnis der Mediendatenbank anzugeben Aufgrund der geaumlnderten Syntax wird das Verzeichnis

ohne images angegeben Die Suchmaske fuumlr die Bilderauswahl deklariert die Dateiformate die mit

einbezogen werden sollen Schlieszliglich koumlnnen Sie die Bilder alphabetisch sortiert anzeigen lassen

sowie einen kleinen und einen groszligen Titel fuumlr Ihre Bildergallerie vergeben

Grundsaumltzlich ist es empfehlenswert groumlszligere Bildmengen auf mehrere Seiten zu verteilen um

einerseits die Darstellung auf mobilen Geraumlten zu vereinfachen und andererseits geringeren

Bandbreiten Rechnung zu tragen

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 31: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 30

68 Flickr nutzen PHP-Skript

Das Modul bdquoFlickr nutzenldquo ermoumlglicht es Ihnen im Sinne einer crossmedialen Verwertung Bilder aus

Ihrem Flickr-Account in Ihre IMPERIA-Webseite einzubinden Fuumlr diese Funktion benoumltigen Sie einen

sogenannten API-Key den Sie in Ihrem Flick-Auftritt unter

bull httpwwwflickrcomservicesappscreateapply

erzeugen lassen koumlnnen Tragen Sie dann diesen Key in die entsprechende Eingabemaske des Moduls

ein Anschlieszligend haben Sie die Moumlglichkeit ganze Fotosets (Alben) oder Einzelbilder einzubinden

Photoset anzeigen

S e i t e | 31

Zum Anzeigen von Photosets wird die entsprechende Photoset-ID ins Modul eingetragen Diese ID ist

Teil der Link-Adresse des entsprechenden Albums bei Flickr (die erscheint wenn Sie das Album

angeklickt haben) Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAMEsets12340954909

Die Photoset-ID verbirgt sich hinter den Ziffern am Ende der URL Sie koumlnnen auswaumlhlen wie viele

Fotos auf einer Webseite erscheinen sollen Dafuumlr uumlbernimmt das Modul die Bilder in der

quadratischen Aufloumlsung von Flickr also in einer Groumlszlige von 75 x 75 Pixeln Reicht der Platz dafuumlr

nicht aus wird eine zusaumltzliche Blaumltterfunktion angeboten Photoset- und Bild-Beschreibungen

koumlnnen aus dem Flickr-Account automatisch uumlbernommen werden wenn die entsprechenden

Optionen mit einem Haken aktiviert wurden

Einzelbild anzeigen

Um ein einzelnes Bild anzuzeigen benoumltigen Sie die entsprechen Flickr-Foto-ID Diese verbirgt sich

hinter der ersten Zahl in der Link-Adresse des entsprechenden Bildes Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAME5841603851inset-72157626981464896

Ein Einzelbild kann in einer hohen oder einer geringen Aufloumlsung eingebunden werden Bei einer

zweispaltig angelegten Webseite wird das Bild in der linken Inhaltsspalte auf eine Breite von 480

Pixel bei einer einspaltig angelegten Webseite auf eine Breite von 721 Pixel skaliert

69 Formulare

Mit IMPERIA haben Sie die Moumlglichkeit Formulare auf Ihrer Webseite zu platzieren In der

Bearbeitungsebene Ihrer Seite finden Sie im Bereich bdquoNeues Modulldquo den Menupunkt UDE ndash

Formular oumlffnen

Nach dem Festlegen der Hintergrundfarbe koumlnnen Sie im Bereich bdquoLegendeldquo den Titel Ihres

Formulars waumlhlen Wenn Sie die Funktion bdquoMailer-Funktionalitaumltldquo aktivieren koumlnnen Sie die Adresse

Ihres Mailscripts eingeben Anderenfalls belassen Sie es bitte beim Vorgabewert

Im Bereich bdquoNexturlldquo kann angegeben werden welche Seite nach dem Abschicken des Formulars

aufgerufen werden soll Daruumlber hinaus werden der Titel der E-Mail die Absender-Adresse sowie die

Empfaumlnger-Adresse definiert Optional kann eine Bestaumltigungs-E-Mail mit frei waumlhlbarem Text

versendet werden

S e i t e | 32

Um dem erstellten Formular Eingabefelder hinzuzufuumlgen ist das Modul bdquoUDE Formular Elementldquo zu

waumlhlen Waumlhlen Sie das Element bdquoTextldquo um ein Eingabefeld zu erzeugen Die Option bdquoBezeichnerldquo

beschreibt den sichtbaren Text im fertigen Formular zum Beispiel bdquoIhr Nameldquo Weitergehend koumlnnen

Sie die zulaumlssigen Inhalte der Nutzereingaben definieren sowie markieren ob das Element ein

Pflichtfeld sein soll

S e i t e | 33

Um ein Texteingabefeld innerhalb des Formulars zu erzeugen waumlhlen Sie das Element bdquoTextarealdquo

Sie koumlnnen die Groumlszlige des Textfeldes definieren (Zeilen x Spalten) und optional erneut eine Pruumlfung

zulaumlssiger Nutzereingaben aktivieren Weiterhin koumlnnen Sie waumlhlen ob der eingegebene Wert des

Formularelements in die Datenbank eingetragen werden soll Wenn Sie fuumlr Ihre Formulare auf eine

Datenbank zuruumlckgreifen moumlchten koumlnnen Sie sich hier informieren httpwwwuni-

duedezimserviceshomepagesmysqlshtml

Insgesamt stehen folgende Elemente zur Verfuumlgung

bull Checkbox Hidden Password Select Anfang Select Option einfuumlgen Select Ende Submit

Text Datum Textarea Radio Reset Leerzeile Kommentarzeile Neuer Abschnitt mit

Bezeichner sowie Datei-Upload

Ein Formular muss mit dem Modul bdquoUDE Formular schlieszligenldquo abgeschlossen werden An dieser

Stelle koumlnnen Sie einen Send-Button hinzufuumlgen dessen Name frei waumlhlbar ist Der eingegebene Text

wird als Beschriftung des Buttons angezeigt Erst durch das Hinzufuumlgen dieses Moduls wird das

Formular auf Ihrer Seite sichtbar und kann nach der Veroumlffentlichung genutzt werden

S e i t e | 34

610 Google-Maps (v30) PHP-Skript HTML-Web-Seite

Dieses Modul bringt eine Grafik von Google-Maps auf die Webseite entweder in Kartenoptik oder als

Satellitenbild Sie haben zwei Moumlglichkeiten eine solche zu generieren Uumlber die konkreten GPS-

Koordinaten oder durch das Angeben einer Adresse (zB Forsthausweg 2 47057 Duisburg) Sie

koumlnnen aus zwoumllf Vergroumlszligerungsstufen fuumlr den gewuumlnschten Ausschnitt zwei Kartengroumlszligen und

zwei Kartenformaten waumlhlen

S e i t e | 35

Kartengroumlszlige bdquogroszligldquo skaliert die Graphik auf 480 Pixel Breite auf einer zweispaltigen Seite bzw auf

721 Pixel auf einer einspaltigen Seite Die Option bdquokleinldquo verringert die Breite auf etwa die Haumllfte Die

beiden Optionen beim Kartenformat beeinflussen die Houmlhe der Grafik

S e i t e | 36

611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite

Das Modul Image-Gallery ermoumlglicht die Integration einer komfortablen Bildergallerie uumlber IMPERIA

Per Klick auf bdquoNeues Modulldquo -gt bdquoUDE Image-Gallery (v21)ldquo kann die entsprechende Gallerie an der

gewuumlnschten Position eingefuumlgt werden Generell sollten nur Bilder verwendet werden die

entweder auf 640 x 480 Pixel oder maximal auf 900 x 600 Pixel skaliert sind Aufgrund einer hohen

Dateigroumlszlige sollten Bilder einer Digitalkamera vor dem Upload komprimiert werden

Innerhalb des Moduls kann zunaumlchst die Hintergrundfarbe der Gallerie wahlweise zwischen Beige

Blau und Weiszlig eingestellt werden Um die Gallerie mit Bildern zu fuumlllen ist das entsprechende

Verzeichnis der Mediendatenbank anzugeben Aufgrund der geaumlnderten Syntax wird das Verzeichnis

ohne images angegeben Die Suchmaske fuumlr die Bilderauswahl deklariert die Dateiformate die mit

einbezogen werden sollen Schlieszliglich koumlnnen Sie die Bilder alphabetisch sortiert anzeigen lassen

sowie einen kleinen und einen groszligen Titel fuumlr Ihre Bildergallerie vergeben

Grundsaumltzlich ist es empfehlenswert groumlszligere Bildmengen auf mehrere Seiten zu verteilen um

einerseits die Darstellung auf mobilen Geraumlten zu vereinfachen und andererseits geringeren

Bandbreiten Rechnung zu tragen

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 32: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 31

Zum Anzeigen von Photosets wird die entsprechende Photoset-ID ins Modul eingetragen Diese ID ist

Teil der Link-Adresse des entsprechenden Albums bei Flickr (die erscheint wenn Sie das Album

angeklickt haben) Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAMEsets12340954909

Die Photoset-ID verbirgt sich hinter den Ziffern am Ende der URL Sie koumlnnen auswaumlhlen wie viele

Fotos auf einer Webseite erscheinen sollen Dafuumlr uumlbernimmt das Modul die Bilder in der

quadratischen Aufloumlsung von Flickr also in einer Groumlszlige von 75 x 75 Pixeln Reicht der Platz dafuumlr

nicht aus wird eine zusaumltzliche Blaumltterfunktion angeboten Photoset- und Bild-Beschreibungen

koumlnnen aus dem Flickr-Account automatisch uumlbernommen werden wenn die entsprechenden

Optionen mit einem Haken aktiviert wurden

Einzelbild anzeigen

Um ein einzelnes Bild anzuzeigen benoumltigen Sie die entsprechen Flickr-Foto-ID Diese verbirgt sich

hinter der ersten Zahl in der Link-Adresse des entsprechenden Bildes Beispiel

httpwwwflickrcomphotosIHR_FLICKR_NAME5841603851inset-72157626981464896

Ein Einzelbild kann in einer hohen oder einer geringen Aufloumlsung eingebunden werden Bei einer

zweispaltig angelegten Webseite wird das Bild in der linken Inhaltsspalte auf eine Breite von 480

Pixel bei einer einspaltig angelegten Webseite auf eine Breite von 721 Pixel skaliert

69 Formulare

Mit IMPERIA haben Sie die Moumlglichkeit Formulare auf Ihrer Webseite zu platzieren In der

Bearbeitungsebene Ihrer Seite finden Sie im Bereich bdquoNeues Modulldquo den Menupunkt UDE ndash

Formular oumlffnen

Nach dem Festlegen der Hintergrundfarbe koumlnnen Sie im Bereich bdquoLegendeldquo den Titel Ihres

Formulars waumlhlen Wenn Sie die Funktion bdquoMailer-Funktionalitaumltldquo aktivieren koumlnnen Sie die Adresse

Ihres Mailscripts eingeben Anderenfalls belassen Sie es bitte beim Vorgabewert

Im Bereich bdquoNexturlldquo kann angegeben werden welche Seite nach dem Abschicken des Formulars

aufgerufen werden soll Daruumlber hinaus werden der Titel der E-Mail die Absender-Adresse sowie die

Empfaumlnger-Adresse definiert Optional kann eine Bestaumltigungs-E-Mail mit frei waumlhlbarem Text

versendet werden

S e i t e | 32

Um dem erstellten Formular Eingabefelder hinzuzufuumlgen ist das Modul bdquoUDE Formular Elementldquo zu

waumlhlen Waumlhlen Sie das Element bdquoTextldquo um ein Eingabefeld zu erzeugen Die Option bdquoBezeichnerldquo

beschreibt den sichtbaren Text im fertigen Formular zum Beispiel bdquoIhr Nameldquo Weitergehend koumlnnen

Sie die zulaumlssigen Inhalte der Nutzereingaben definieren sowie markieren ob das Element ein

Pflichtfeld sein soll

S e i t e | 33

Um ein Texteingabefeld innerhalb des Formulars zu erzeugen waumlhlen Sie das Element bdquoTextarealdquo

Sie koumlnnen die Groumlszlige des Textfeldes definieren (Zeilen x Spalten) und optional erneut eine Pruumlfung

zulaumlssiger Nutzereingaben aktivieren Weiterhin koumlnnen Sie waumlhlen ob der eingegebene Wert des

Formularelements in die Datenbank eingetragen werden soll Wenn Sie fuumlr Ihre Formulare auf eine

Datenbank zuruumlckgreifen moumlchten koumlnnen Sie sich hier informieren httpwwwuni-

duedezimserviceshomepagesmysqlshtml

Insgesamt stehen folgende Elemente zur Verfuumlgung

bull Checkbox Hidden Password Select Anfang Select Option einfuumlgen Select Ende Submit

Text Datum Textarea Radio Reset Leerzeile Kommentarzeile Neuer Abschnitt mit

Bezeichner sowie Datei-Upload

Ein Formular muss mit dem Modul bdquoUDE Formular schlieszligenldquo abgeschlossen werden An dieser

Stelle koumlnnen Sie einen Send-Button hinzufuumlgen dessen Name frei waumlhlbar ist Der eingegebene Text

wird als Beschriftung des Buttons angezeigt Erst durch das Hinzufuumlgen dieses Moduls wird das

Formular auf Ihrer Seite sichtbar und kann nach der Veroumlffentlichung genutzt werden

S e i t e | 34

610 Google-Maps (v30) PHP-Skript HTML-Web-Seite

Dieses Modul bringt eine Grafik von Google-Maps auf die Webseite entweder in Kartenoptik oder als

Satellitenbild Sie haben zwei Moumlglichkeiten eine solche zu generieren Uumlber die konkreten GPS-

Koordinaten oder durch das Angeben einer Adresse (zB Forsthausweg 2 47057 Duisburg) Sie

koumlnnen aus zwoumllf Vergroumlszligerungsstufen fuumlr den gewuumlnschten Ausschnitt zwei Kartengroumlszligen und

zwei Kartenformaten waumlhlen

S e i t e | 35

Kartengroumlszlige bdquogroszligldquo skaliert die Graphik auf 480 Pixel Breite auf einer zweispaltigen Seite bzw auf

721 Pixel auf einer einspaltigen Seite Die Option bdquokleinldquo verringert die Breite auf etwa die Haumllfte Die

beiden Optionen beim Kartenformat beeinflussen die Houmlhe der Grafik

S e i t e | 36

611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite

Das Modul Image-Gallery ermoumlglicht die Integration einer komfortablen Bildergallerie uumlber IMPERIA

Per Klick auf bdquoNeues Modulldquo -gt bdquoUDE Image-Gallery (v21)ldquo kann die entsprechende Gallerie an der

gewuumlnschten Position eingefuumlgt werden Generell sollten nur Bilder verwendet werden die

entweder auf 640 x 480 Pixel oder maximal auf 900 x 600 Pixel skaliert sind Aufgrund einer hohen

Dateigroumlszlige sollten Bilder einer Digitalkamera vor dem Upload komprimiert werden

Innerhalb des Moduls kann zunaumlchst die Hintergrundfarbe der Gallerie wahlweise zwischen Beige

Blau und Weiszlig eingestellt werden Um die Gallerie mit Bildern zu fuumlllen ist das entsprechende

Verzeichnis der Mediendatenbank anzugeben Aufgrund der geaumlnderten Syntax wird das Verzeichnis

ohne images angegeben Die Suchmaske fuumlr die Bilderauswahl deklariert die Dateiformate die mit

einbezogen werden sollen Schlieszliglich koumlnnen Sie die Bilder alphabetisch sortiert anzeigen lassen

sowie einen kleinen und einen groszligen Titel fuumlr Ihre Bildergallerie vergeben

Grundsaumltzlich ist es empfehlenswert groumlszligere Bildmengen auf mehrere Seiten zu verteilen um

einerseits die Darstellung auf mobilen Geraumlten zu vereinfachen und andererseits geringeren

Bandbreiten Rechnung zu tragen

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 33: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 32

Um dem erstellten Formular Eingabefelder hinzuzufuumlgen ist das Modul bdquoUDE Formular Elementldquo zu

waumlhlen Waumlhlen Sie das Element bdquoTextldquo um ein Eingabefeld zu erzeugen Die Option bdquoBezeichnerldquo

beschreibt den sichtbaren Text im fertigen Formular zum Beispiel bdquoIhr Nameldquo Weitergehend koumlnnen

Sie die zulaumlssigen Inhalte der Nutzereingaben definieren sowie markieren ob das Element ein

Pflichtfeld sein soll

S e i t e | 33

Um ein Texteingabefeld innerhalb des Formulars zu erzeugen waumlhlen Sie das Element bdquoTextarealdquo

Sie koumlnnen die Groumlszlige des Textfeldes definieren (Zeilen x Spalten) und optional erneut eine Pruumlfung

zulaumlssiger Nutzereingaben aktivieren Weiterhin koumlnnen Sie waumlhlen ob der eingegebene Wert des

Formularelements in die Datenbank eingetragen werden soll Wenn Sie fuumlr Ihre Formulare auf eine

Datenbank zuruumlckgreifen moumlchten koumlnnen Sie sich hier informieren httpwwwuni-

duedezimserviceshomepagesmysqlshtml

Insgesamt stehen folgende Elemente zur Verfuumlgung

bull Checkbox Hidden Password Select Anfang Select Option einfuumlgen Select Ende Submit

Text Datum Textarea Radio Reset Leerzeile Kommentarzeile Neuer Abschnitt mit

Bezeichner sowie Datei-Upload

Ein Formular muss mit dem Modul bdquoUDE Formular schlieszligenldquo abgeschlossen werden An dieser

Stelle koumlnnen Sie einen Send-Button hinzufuumlgen dessen Name frei waumlhlbar ist Der eingegebene Text

wird als Beschriftung des Buttons angezeigt Erst durch das Hinzufuumlgen dieses Moduls wird das

Formular auf Ihrer Seite sichtbar und kann nach der Veroumlffentlichung genutzt werden

S e i t e | 34

610 Google-Maps (v30) PHP-Skript HTML-Web-Seite

Dieses Modul bringt eine Grafik von Google-Maps auf die Webseite entweder in Kartenoptik oder als

Satellitenbild Sie haben zwei Moumlglichkeiten eine solche zu generieren Uumlber die konkreten GPS-

Koordinaten oder durch das Angeben einer Adresse (zB Forsthausweg 2 47057 Duisburg) Sie

koumlnnen aus zwoumllf Vergroumlszligerungsstufen fuumlr den gewuumlnschten Ausschnitt zwei Kartengroumlszligen und

zwei Kartenformaten waumlhlen

S e i t e | 35

Kartengroumlszlige bdquogroszligldquo skaliert die Graphik auf 480 Pixel Breite auf einer zweispaltigen Seite bzw auf

721 Pixel auf einer einspaltigen Seite Die Option bdquokleinldquo verringert die Breite auf etwa die Haumllfte Die

beiden Optionen beim Kartenformat beeinflussen die Houmlhe der Grafik

S e i t e | 36

611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite

Das Modul Image-Gallery ermoumlglicht die Integration einer komfortablen Bildergallerie uumlber IMPERIA

Per Klick auf bdquoNeues Modulldquo -gt bdquoUDE Image-Gallery (v21)ldquo kann die entsprechende Gallerie an der

gewuumlnschten Position eingefuumlgt werden Generell sollten nur Bilder verwendet werden die

entweder auf 640 x 480 Pixel oder maximal auf 900 x 600 Pixel skaliert sind Aufgrund einer hohen

Dateigroumlszlige sollten Bilder einer Digitalkamera vor dem Upload komprimiert werden

Innerhalb des Moduls kann zunaumlchst die Hintergrundfarbe der Gallerie wahlweise zwischen Beige

Blau und Weiszlig eingestellt werden Um die Gallerie mit Bildern zu fuumlllen ist das entsprechende

Verzeichnis der Mediendatenbank anzugeben Aufgrund der geaumlnderten Syntax wird das Verzeichnis

ohne images angegeben Die Suchmaske fuumlr die Bilderauswahl deklariert die Dateiformate die mit

einbezogen werden sollen Schlieszliglich koumlnnen Sie die Bilder alphabetisch sortiert anzeigen lassen

sowie einen kleinen und einen groszligen Titel fuumlr Ihre Bildergallerie vergeben

Grundsaumltzlich ist es empfehlenswert groumlszligere Bildmengen auf mehrere Seiten zu verteilen um

einerseits die Darstellung auf mobilen Geraumlten zu vereinfachen und andererseits geringeren

Bandbreiten Rechnung zu tragen

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 34: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 33

Um ein Texteingabefeld innerhalb des Formulars zu erzeugen waumlhlen Sie das Element bdquoTextarealdquo

Sie koumlnnen die Groumlszlige des Textfeldes definieren (Zeilen x Spalten) und optional erneut eine Pruumlfung

zulaumlssiger Nutzereingaben aktivieren Weiterhin koumlnnen Sie waumlhlen ob der eingegebene Wert des

Formularelements in die Datenbank eingetragen werden soll Wenn Sie fuumlr Ihre Formulare auf eine

Datenbank zuruumlckgreifen moumlchten koumlnnen Sie sich hier informieren httpwwwuni-

duedezimserviceshomepagesmysqlshtml

Insgesamt stehen folgende Elemente zur Verfuumlgung

bull Checkbox Hidden Password Select Anfang Select Option einfuumlgen Select Ende Submit

Text Datum Textarea Radio Reset Leerzeile Kommentarzeile Neuer Abschnitt mit

Bezeichner sowie Datei-Upload

Ein Formular muss mit dem Modul bdquoUDE Formular schlieszligenldquo abgeschlossen werden An dieser

Stelle koumlnnen Sie einen Send-Button hinzufuumlgen dessen Name frei waumlhlbar ist Der eingegebene Text

wird als Beschriftung des Buttons angezeigt Erst durch das Hinzufuumlgen dieses Moduls wird das

Formular auf Ihrer Seite sichtbar und kann nach der Veroumlffentlichung genutzt werden

S e i t e | 34

610 Google-Maps (v30) PHP-Skript HTML-Web-Seite

Dieses Modul bringt eine Grafik von Google-Maps auf die Webseite entweder in Kartenoptik oder als

Satellitenbild Sie haben zwei Moumlglichkeiten eine solche zu generieren Uumlber die konkreten GPS-

Koordinaten oder durch das Angeben einer Adresse (zB Forsthausweg 2 47057 Duisburg) Sie

koumlnnen aus zwoumllf Vergroumlszligerungsstufen fuumlr den gewuumlnschten Ausschnitt zwei Kartengroumlszligen und

zwei Kartenformaten waumlhlen

S e i t e | 35

Kartengroumlszlige bdquogroszligldquo skaliert die Graphik auf 480 Pixel Breite auf einer zweispaltigen Seite bzw auf

721 Pixel auf einer einspaltigen Seite Die Option bdquokleinldquo verringert die Breite auf etwa die Haumllfte Die

beiden Optionen beim Kartenformat beeinflussen die Houmlhe der Grafik

S e i t e | 36

611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite

Das Modul Image-Gallery ermoumlglicht die Integration einer komfortablen Bildergallerie uumlber IMPERIA

Per Klick auf bdquoNeues Modulldquo -gt bdquoUDE Image-Gallery (v21)ldquo kann die entsprechende Gallerie an der

gewuumlnschten Position eingefuumlgt werden Generell sollten nur Bilder verwendet werden die

entweder auf 640 x 480 Pixel oder maximal auf 900 x 600 Pixel skaliert sind Aufgrund einer hohen

Dateigroumlszlige sollten Bilder einer Digitalkamera vor dem Upload komprimiert werden

Innerhalb des Moduls kann zunaumlchst die Hintergrundfarbe der Gallerie wahlweise zwischen Beige

Blau und Weiszlig eingestellt werden Um die Gallerie mit Bildern zu fuumlllen ist das entsprechende

Verzeichnis der Mediendatenbank anzugeben Aufgrund der geaumlnderten Syntax wird das Verzeichnis

ohne images angegeben Die Suchmaske fuumlr die Bilderauswahl deklariert die Dateiformate die mit

einbezogen werden sollen Schlieszliglich koumlnnen Sie die Bilder alphabetisch sortiert anzeigen lassen

sowie einen kleinen und einen groszligen Titel fuumlr Ihre Bildergallerie vergeben

Grundsaumltzlich ist es empfehlenswert groumlszligere Bildmengen auf mehrere Seiten zu verteilen um

einerseits die Darstellung auf mobilen Geraumlten zu vereinfachen und andererseits geringeren

Bandbreiten Rechnung zu tragen

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 35: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 34

610 Google-Maps (v30) PHP-Skript HTML-Web-Seite

Dieses Modul bringt eine Grafik von Google-Maps auf die Webseite entweder in Kartenoptik oder als

Satellitenbild Sie haben zwei Moumlglichkeiten eine solche zu generieren Uumlber die konkreten GPS-

Koordinaten oder durch das Angeben einer Adresse (zB Forsthausweg 2 47057 Duisburg) Sie

koumlnnen aus zwoumllf Vergroumlszligerungsstufen fuumlr den gewuumlnschten Ausschnitt zwei Kartengroumlszligen und

zwei Kartenformaten waumlhlen

S e i t e | 35

Kartengroumlszlige bdquogroszligldquo skaliert die Graphik auf 480 Pixel Breite auf einer zweispaltigen Seite bzw auf

721 Pixel auf einer einspaltigen Seite Die Option bdquokleinldquo verringert die Breite auf etwa die Haumllfte Die

beiden Optionen beim Kartenformat beeinflussen die Houmlhe der Grafik

S e i t e | 36

611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite

Das Modul Image-Gallery ermoumlglicht die Integration einer komfortablen Bildergallerie uumlber IMPERIA

Per Klick auf bdquoNeues Modulldquo -gt bdquoUDE Image-Gallery (v21)ldquo kann die entsprechende Gallerie an der

gewuumlnschten Position eingefuumlgt werden Generell sollten nur Bilder verwendet werden die

entweder auf 640 x 480 Pixel oder maximal auf 900 x 600 Pixel skaliert sind Aufgrund einer hohen

Dateigroumlszlige sollten Bilder einer Digitalkamera vor dem Upload komprimiert werden

Innerhalb des Moduls kann zunaumlchst die Hintergrundfarbe der Gallerie wahlweise zwischen Beige

Blau und Weiszlig eingestellt werden Um die Gallerie mit Bildern zu fuumlllen ist das entsprechende

Verzeichnis der Mediendatenbank anzugeben Aufgrund der geaumlnderten Syntax wird das Verzeichnis

ohne images angegeben Die Suchmaske fuumlr die Bilderauswahl deklariert die Dateiformate die mit

einbezogen werden sollen Schlieszliglich koumlnnen Sie die Bilder alphabetisch sortiert anzeigen lassen

sowie einen kleinen und einen groszligen Titel fuumlr Ihre Bildergallerie vergeben

Grundsaumltzlich ist es empfehlenswert groumlszligere Bildmengen auf mehrere Seiten zu verteilen um

einerseits die Darstellung auf mobilen Geraumlten zu vereinfachen und andererseits geringeren

Bandbreiten Rechnung zu tragen

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 36: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 35

Kartengroumlszlige bdquogroszligldquo skaliert die Graphik auf 480 Pixel Breite auf einer zweispaltigen Seite bzw auf

721 Pixel auf einer einspaltigen Seite Die Option bdquokleinldquo verringert die Breite auf etwa die Haumllfte Die

beiden Optionen beim Kartenformat beeinflussen die Houmlhe der Grafik

S e i t e | 36

611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite

Das Modul Image-Gallery ermoumlglicht die Integration einer komfortablen Bildergallerie uumlber IMPERIA

Per Klick auf bdquoNeues Modulldquo -gt bdquoUDE Image-Gallery (v21)ldquo kann die entsprechende Gallerie an der

gewuumlnschten Position eingefuumlgt werden Generell sollten nur Bilder verwendet werden die

entweder auf 640 x 480 Pixel oder maximal auf 900 x 600 Pixel skaliert sind Aufgrund einer hohen

Dateigroumlszlige sollten Bilder einer Digitalkamera vor dem Upload komprimiert werden

Innerhalb des Moduls kann zunaumlchst die Hintergrundfarbe der Gallerie wahlweise zwischen Beige

Blau und Weiszlig eingestellt werden Um die Gallerie mit Bildern zu fuumlllen ist das entsprechende

Verzeichnis der Mediendatenbank anzugeben Aufgrund der geaumlnderten Syntax wird das Verzeichnis

ohne images angegeben Die Suchmaske fuumlr die Bilderauswahl deklariert die Dateiformate die mit

einbezogen werden sollen Schlieszliglich koumlnnen Sie die Bilder alphabetisch sortiert anzeigen lassen

sowie einen kleinen und einen groszligen Titel fuumlr Ihre Bildergallerie vergeben

Grundsaumltzlich ist es empfehlenswert groumlszligere Bildmengen auf mehrere Seiten zu verteilen um

einerseits die Darstellung auf mobilen Geraumlten zu vereinfachen und andererseits geringeren

Bandbreiten Rechnung zu tragen

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 37: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 36

611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite

Das Modul Image-Gallery ermoumlglicht die Integration einer komfortablen Bildergallerie uumlber IMPERIA

Per Klick auf bdquoNeues Modulldquo -gt bdquoUDE Image-Gallery (v21)ldquo kann die entsprechende Gallerie an der

gewuumlnschten Position eingefuumlgt werden Generell sollten nur Bilder verwendet werden die

entweder auf 640 x 480 Pixel oder maximal auf 900 x 600 Pixel skaliert sind Aufgrund einer hohen

Dateigroumlszlige sollten Bilder einer Digitalkamera vor dem Upload komprimiert werden

Innerhalb des Moduls kann zunaumlchst die Hintergrundfarbe der Gallerie wahlweise zwischen Beige

Blau und Weiszlig eingestellt werden Um die Gallerie mit Bildern zu fuumlllen ist das entsprechende

Verzeichnis der Mediendatenbank anzugeben Aufgrund der geaumlnderten Syntax wird das Verzeichnis

ohne images angegeben Die Suchmaske fuumlr die Bilderauswahl deklariert die Dateiformate die mit

einbezogen werden sollen Schlieszliglich koumlnnen Sie die Bilder alphabetisch sortiert anzeigen lassen

sowie einen kleinen und einen groszligen Titel fuumlr Ihre Bildergallerie vergeben

Grundsaumltzlich ist es empfehlenswert groumlszligere Bildmengen auf mehrere Seiten zu verteilen um

einerseits die Darstellung auf mobilen Geraumlten zu vereinfachen und andererseits geringeren

Bandbreiten Rechnung zu tragen

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 38: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 37

612 Mailinglisten PHP-Skript

Das Modul bdquoUDE Mailinglistenldquo ermoumlglicht den Besuchern der eigenen Seite sich eigenstaumlndig fuumlr

den Newsletterempfang anzumelden und sich davon ebenfalls wieder abzumelden Nach dem

Festlegen der Hintergrundfarbe des Moduls ist der Mailinglisten-Server einzugeben Hierbei kann auf

den Server bdquolistsuni-duedeldquo zuruumlckgegriffen werden Falls ein anderer Server genutzt wird koumlnnen

Sie diesen durch Auswahl der Option bdquoAnderer Serverldquo im Pulldownmenu eingeben

Zudem ist die Mailinglisten-Adresse anzugeben Optional haben Sie die Moumlglichkeit einen

Kommentar einzufuumlgen der zum Beispiel den Inhalt die Art oder den Zyklus Ihres Newsletters

beschreibt Zum Schluss legen Sie eine Folgeseite nach dem Mailversand fest die angezeigt wird

sobald sich ein Nutzer fuumlr den Newsletter anmeldet oder selbigen wieder abbestellt

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 39: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 38

Im Ergebnis sieht der Besucher Ihrer Seite ein Eingabefeld fuumlr die eigene Emailadresse und die

Auswahlmoumlglichkeiten sich in die Mailingliste einzutragen oder die eigene E-Mail-Adresse wieder zu

entfernen Der Klick auf den Button bdquoAbsendenldquo speichert die entsprechende Aktion und ruft eine

Bestaumltigungsseite hervor Per Klick auf den Button bdquoweiterldquo wird der User zur im Modul definierten

Folgeseite weitergeleitet

613 Mitarbeiter-Seite PHP-Skript

Das Modul bdquoMitarbeiter-Seiteldquo ermoumlglicht es im Hochschulinformationssystem LSF hinterlegte

Kontaktinformationen sowie die Liste eventueller Lehrveranstaltungen automatisiert in eine

IMPERIA-Webseite einzubinden Die dazu benoumltigte Mitarbeiter-ID finden Sie im Infosystem LSF oder

in der Online-Personensuche der Universitaumlt

bull Ihre eigene Mitarbeiter-ID koumlnnen Sie unter httpwwwlsfuni-duede auslesen Nach der

Authentifizierung mit Ihrer Hochschul-Mitarbeiterkennung finden Sie die ID in der ersten

Zeile Ihrer unter dem Menuumlpunkt Meine Personaldaten aumlndern angezeigten Daten

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 40: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 39

bull Ihre eigene sowie die Mitarbeiter-IDs anderer Personen koumlnnen Sie uumlber die Personensuche

der UDE auslesen Geben Sie zuerst unter httpwwwuni-duedesuche die gesuchte Person

ein und waumlhlen Sie bei Bedarf unter mehreren Moumlglichkeiten den gewuumlnschten Eintrag

Rufen Sie den entsprechenden Eintrag auf und kopieren lesen Sie den Link aus mit dem der

Name der gesuchten Person hinterlegt ist Die Mitarbeiter-ID finden Sie am Ende dieses

Links (Bspw httpwwwuni-duedezimservicessuchdienstemitarbeiterphpid=49471)

614 Mitarbeiter-Publikationsliste PHP-Skript

Uumlber das Modul bdquoMitarbeiter-Publikationslisteldquo koumlnnen Sie uumlber IMPERIA erzeugte Webseiten mit

einer Liste der Publikationen eines Hochschulmitarbeiters ergaumlnzen die das System uumlber eine

Schnittstelle automatisch aus dem Angebot bdquoDuEPublico - Duisburg-Essen Publications onlineldquo

(httpduepublicouni-duisburg-essende) ausliest Die entsprechende Person koumlnnen Sie in der

Form bdquoNachnameVornameldquo in das Eingabefeld bdquoMitarbeiter-Nameldquo eintragen Wahlweise reicht an

dieser Stelle auch die entsprechende ID der Person im Hochschulinformationssystem LSF Wie Sie

diese ID uumlber Ihren LSF-Zugang oder die Online-Personensuche der Universitaumlt ermitteln daruumlber

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 41: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 40

gibt Ihnen der vorangegangene Abschnitt des Redakteursleitfaden (714 Mitarbeiter-Seite PHP-

Skript) Auskunft

615 Mitarbeiter-Liste PHP-Skript

Zusaumltzlich zu der Funktion uumlber das UDE-CMS automatisiert einzelne Mitarbeiter-Seiten zu erzeugen

bietet Ihnen IMPERIA die Moumlglichkeit komplette alphabetisch sortierte Mitarbeiter-Uumlbersichten zu

erstellen Dafuumlr benoumltigen Sie im Modul bdquoMitarbeiter-Listeldquo die Einrichtungs-ID der entsprechenden

Einheit im Informationssystem LSF Leider gestaltet sich die Auslese der Einrichtungs-ID fuumlr die

Seitenredakteure etwas kompliziert

bull Waumlhlen Sie im Quermenuuml der Seite httpwwwlsfuni-duede den Link bdquoEinrichtungen

bull Uumlber die Menuumlpunkte bdquoEinrichtungenldquo oder bdquoSuche nach Einrichtungenldquo gelangen Sie zu

Uumlbersichten der organisatorischen Struktur der UDE

bull Klicken Sie sich dort zur gewuumlnschten Einrichtung durch (bspw Universitaumlt Duisburg-Essen

Verwaltung Stabsstelle Justitiariat)

bull Die Einrichtungs-ID verbirgt sich hinter den letzten vier Ziffern der dazugehoumlrigen URL

(bspw httpwwwlsfuni-

duedelsfrdsstate=wtreeampsearch=2amptrex=stepamproot220131=165|2008|2134ampPvx=kurz)

bull Wahlweise klicken Sie in der Uumlbersichtsliste auf das Informationssymbol bdquoildquo vor der

entsprechenden Einrichtung Sie finden die gesuchte ID dann am Ende der dann

aufgerufenen URL unter bdquoeid=XXXXldquo (bspw httpwwwlsfuni-

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 42: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 41

duedelsfrdsstate=verpublishampstatus=initampvmfile=noampmoduleCall=webInfoamppublishConfF

ile=webInfoEinrichtungamppublishSubDir=einrichtungampeinrichtungeid=2134)

616 Randlose Grafik PHP-Skript HTML-Web-Seite

Mit dem Modul bdquoRandlose Grafikldquo koumlnnen Sie ein beliebiges Bild in voller Breite einfuumlgen Dazu

haben Sie drei Moumlglichkeiten Bei einer zweispaltigen Seite erscheint Ihre Grafik entweder in der

linken Spalte mit einer Breite von 500 Pixeln In der rechten Spalte hat sie eine Breite von 230 Pixeln

Falls Sie eine einspaltige Seite erstellen betraumlgt die Breite Ihrer Grafik 742 Pixel Die Houmlhe ist

grundsaumltzlich frei waumlhlbar

Waumlhlen Sie dazu im Bereich bdquoNeues Modulldquo die Option bdquoUDE Randlose Grafikldquo Es wird daraufhin

eine neue Einheit in der Bearbeitungsebene erstellt deren Position Sie im rechten Pulldown-Menu

festlegen koumlnnen Mit dem Kilck auf ldquoMediaDBldquo oumlffnet sich die Mediendatenbank in einem neuen

Fenster Navigieren Sie an dieser Stelle im Bereich bdquoImagesldquo zu dem Ordner in dem sich das

gewuumlnschte Bild befindet Per Klick auf das Icon wird das Bild direkt uumlbernommen und erscheint im

Vorschaufenster des eingefuumlgten Moduls Von hier aus koumlnnen Sie das Bild auch zuruumlcksetzen und

gegebenenfalls ein neues Bild hochladen

Optional koumlnnen Sie eine Bild-URL eingefuumlgen Diese Funktion kann genutzt werden wenn sich das

gewuumlnschte Bild nicht in der Mediendatenbank befindet Eine eingefuumlgte Bild-URL hat stets Vorrang

vor dem daruumlber eingefuumlgten Bild Zudem koumlnnen Sie der randlosen Grafik einen Link zuordnen

indem Sie die Spalte bdquoLink-URLldquo ausfuumlllen Daruumlber hinaus ist optinal ein Banner-Titel waumlhlbar der

unter der randlosen Grafik erscheinen soll

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 43: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 42

617 RSS-Feed-Agent PHP-Skript

RSS (Really Simple Syndication) ist ein elektronisches Nachrichtenformat das dem Nutzer

ermoumlglicht die Inhalte einer Website ndashoder Teile davon ndash zu abonnieren oder in andere Websites zu

integrieren Das Modul RSS-Feed-Agent erlaubt Ihnen das Einbinden eines eigenen oder fremden

RSS-Feeds in Ihre Webseite

bull Allgemeine Informationen zum Thema RSS-Newsfeeds praumlsentiert Ihnen das Zentrum fuumlr

Informations- und Mediendienste (ZIM) unter httpwwwuni-duedezimrss-

newsfeedshtml

bull Wenn Sie einen eigenen Newsfeed erzeugen wollen stellt Ihnen das ZIM gerne die dafuumlr

benoumltigten technischen Zugaumlnge zur Verfuumlgung (httpwwwuni-

duedezimsoforthilfehotline)

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 44: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 43

Tragen Sie die Feed-URL in diesem Modul bitte als absoluten (kompletten) Link ein Zudem koumlnnen

Sie waumlhlen wie viele Ihrer Meldungen auf der jeweiligen Webseite ausgegeben werden sollen und

einstellen ob zusaumltzlich zur Uumlberschrift und zum Link das Publikationsdatum der Beschreibungstext

Ihrer Meldung (Abstract) oder ein Bild veroumlffentlicht werden

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 45: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 44

618 RSS-Feed-Administration PHP-Skript

Das Modul bdquoUDE RSS-Feed-Administrationldquo ermoumlglicht es Ihnen uumlber eine Ihrer Webseiten auf eine

Eingabemaske zur Administration Ihrer RSS-Feed-Datenbank zuzugreifen Bitte nutzen Sie dieses

Modul ausschlieszliglich wenn Sie sich in der Handhabung von Datenbanken weitgehend sicher fuumlhlen

Anderenfalls wenden Sie sich bitte an die Administration des Zentrums fuumlr Informations- und

Mediendienste

Das Modul ldquoUDE RSS-Feed_Administrationrdquo selbst beinhaltet auf der einen Seite Angaben zur

Datenbank-Quelle und auf der anderen Seite die relevanten Angaben zu den RSS-Feeds In einem

ersten Schritt koumlnnen Sie den Tabellennamen festlegen sowie den Datenbank-Benutzer und das

dazugehoumlrige Passwort eingeben

Im zweiten Schritt geben Sie den Namen der Einrichtung ein sowie den Link im RSS-Feed inklusive der

Feedbeschreibung Schlieszliglich ist der Pfad zu den RSS-Feeds anzugeben Beachten Sie dass bdquodeldquo

bereits vorgegeben ist und somit nur noch die nachfolgende URL eingegeben werden muss

619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite

Das Modul bdquoUDE Tube Audio-VideoPlayerldquo ermoumlglicht das Einbinden von Audio- und Videodateien

in die eigene Webseite Nach der Wahl der entsprechenden Hintergrundfarbe kann im Bereich

bdquoVideo-Audio-URLldquo der Link zu der entsprechenden Datei eingefuumlgt werden Per Klick auf bdquoMDBldquo

oumlffnet sich die Mediendatenbank aus der Sie das gewuumlnschte Video bequem heraussuchen und per

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 46: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 45

Mausklick einbinden koumlnnen Alternativ koumlnnen Sie auch gerne den Link zu Ihrem Video eintippen

oder die Youtube-Video-URL hineinkopieren

Es ist zu beachten dass nur Videos in den Formaten flv mp4 sowie Audiodateien in den Formaten

mp3 oder aac eingebunden werden koumlnnen Grundsaumltzlich ist die Einbindung von Videos im MP4-

Format empfehlenswert Anstelle des blauen Startbildschirms kann im Bereich bdquoSplash-Image-URLldquo

wahlweise ein Bild per URL oder aus der IMPERIA-Mediendatenbank eingefuumlgt werden

Der eingefuumlgten Audio- oder Videodatei kann weiterhin ein Titel sowie eine Beschreibung zugefuumlgt

werden Die Videobeschreibung kann entsprechend den Funktionen des TinyMCE-Editors individuell

formatiert werden Schlieszliglich koumlnnen Sie dem Video eine Untertitel-Datei im XML-Format

hinzufuumlgen Bei Bedarf fuumlgen Sie zudem einen Link zu weiteren Informationen an

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 47: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 46

620 Veranstaltungskalender PHP-Skript

Immer auf dem Laufenden Das Zentrum fuumlr Informations- und Mediendienste stellt den Nutzern des

CMS IMPERIA einen Veranstaltungskalender zum Einbinden in eigene Webseiten zur Verfuumlgung

Diese Funktion umfasst eine Veranstaltungs- Benutzer- und Bereichsverwaltung sowie die

Moumlglichkeit die im eigenen Bereich eingetragenen Veranstaltungen fuumlr den hochschulweiten

Veranstaltungskalender zu uumlbernehmen

Der Kalender ermoumlglicht das Navigieren durch Veranstaltungen Mit den beiden Doppelpfeilen links

und rechts oben lassen sich die vorherigen bzw naumlchsten Monate auswaumlhlen Mit einem Klick auf

den Monat im Kopfbereich des Kalenders wird eine Monatsuumlbersicht uumlber die Veranstaltungen im

jeweiligen Monat aufgerufen

Tage fuumlr die Veranstaltungen eingetragen wurden sind als Links hinterlegt Mit einem Klick

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 48: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 47

auf ein bestimmtes Datum erhaumllt man eine Uumlbersicht uumlber die Veranstaltungen dieses Tages Beim

Uumlberfahren der einzelnen Tage mit der Maus werden die Veranstaltungen dieses Tages in einem

kleinen Vorschaubereich unterhalb des Kalenders eingeblendet

Wenn Sie einen eigenen Kalender fuumlr Ihre Einrichtung einrichten oder Nutzerrechte veraumlndern

wollen wenden Sie sich bitte an

bull Manuela Muumlnch Arne Rensing (Pressestelle Webredaktion)

Telefon (0203) 379-1482 -1481 webredaktionuni-duede

bull Frank Zerres (Zentrum fuumlr Informations- und Mediendienste IT-Infrastruktur)

Telefon (0203) 379-4244 frankzerresuni-duede

Um die volle Funktion des Kalenders nutzen zu koumlnnen benoumltigen Sie sowohl das Kalendermodul

(das Sie an unterschiedlichen Stellen einpflegen koumlnnen) als auch das Veranstaltungsmodul (das Sie

am besten auf einer Uumlbersichtsseite einbinden)

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 49: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 48

Um einen Kalender in Ihrer Webseite zu positionieren erzeugen Sie in der bearbeitungsebene Ihrer

Webseite das Element bdquoVeranstaltungskalender Kalendermodulldquo Aufgrund des Kalenderdesigns

bietet sich dafuumlr die rechte Spalte eines zweispaltigen Contentbereiches an

Unter bdquoUumlberschriftldquo waumlhlen Sie womit die Kalenderuumlbersicht betitelt werden soll Hinter dem Feld

bdquoBereichldquo verbirgt sich der Name unter dem die Pressestelle oder das Zentrum fuumlr Informations- und

Mediendienste Ihren Kalender eingerichtet haben

Sie haben fuumlr Ihre Webseite nun zwei Moumlglichkeiten

bull Fuumlr den Fall dass die Detailuumlbersicht der einzelnen Veranstaltungen auf der selben Seite

erscheinen soll binden Sie in der linken Contentspalte das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo ein und tragen dort ebenfalls den Namen ein unter dem Ihr Kalender

eingerichtet wurde

bull Wenn Sie die Detailuumlbersicht der einzelnen Veranstaltungen auf einer eigenen Seite

darstellen wollen muumlssen Sie zuerst die entsprechende Seite erzeugen (bspw wwwuni-

duedeihr_bereichveranstaltungenphp) dort das Element bdquoVeranstaltungskalender

Veranstaltungsmodulldquo waumlhlen und den Namen eintragen unter dem Ihr Kalender

eingerichtet wurde Auf der (anderen) Webseite auf der Ihr Kalender erscheint muumlssen Sie

nun im Element bdquoVeranstaltungskalender Kalendermodulldquo die Option bdquoKalender ohne

Veranstaltungsmodul einbindenldquo waumlhlen und danach im Feld bdquoURL des

Veranstaltungskalendersldquo die vorher erzeugte Uumlbersichtsseite benennen

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 50: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 49

Informationen zu den Funktionen des Veranstaltungskalenders zur Veranstaltungs- Benutzer- und

Bereichsverwaltung entnehmen Sie bitte dem Handbuch unter httpimperiauni-

duedeimperiamdcontentkonzeptionanleitungenhandbuch_vkpdf oder unter bdquoHilfen Toolsldquo

im IMPERIA-Hauptmenuuml

7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit

Das Content Management System IMPERIA stellt den Nutzern zwei Wege des Arbeitens zur

Verfuumlgung

bull Zum einen koumlnnen Sie Seiten uumlber httpimperiauni-duede erstellen und bearbeiten Nach

erfolgreichem Login stehen die wesentlichen Funktionen in der linken Navigation unter

bdquoDokumenteldquo zur Verfuumlgung Neben der Erzeugung eines neuen Dokuments koumlnnen Sie an

dieser Stelle bereits bdquofreigeschaltete Dokumente bearbeitenldquo auf die Ordner Ihrer

Mediendatenbank zuruumlckgreifen oder ndash im Notfall ndash aumlltere Dokumentversionen aus Ihrem

Archiv importieren

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 51: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 50

Zum Bearbeiten suchen Sie unter bdquofreigeschaltete Dokumente bearbeitenldquo das gewuumlnschte

Dokument mittels der entsprechenden URL nehmen die Aumlnderungen vor und waumlhlen dann

bdquoSpeichernldquo Sie werden automatisch zum bdquoSchreibtischldquo weitergeleitet Von dort aus klicken

Sie zur Freischaltung des Dokuments auf bdquoVeroumlffentlichenldquo und bestaumltigen nachfolgend mit

bdquoJetzt veroumlffentlichenldquo

bull Zum anderen koumlnnen Sie den Schnell-Editier-Befehl bdquoOne-Click-Editldquo nutzen um

Seiteninhalte direkt aus Ihrem Browser heraus zu editieren oder Kopien von Seiten zu

erstellen Die Funktion bdquoQuickEditldquo ermoumlglicht den direkten Sprung in die

Bearbeitungsebene so dass das Auffinden der Seite uumlber die Funktion bdquofreigeschaltete

Dokumente bearbeitenldquo entfaumlllt

Der Befehl bdquoRepublishldquo bewirkt eine Neuveroumlffentlichung der aufgerufenen Seite Mit dem

Klick bdquoCopyldquo erstellen Sie eine identische Kopie der aufgerufenen Seite (im selben

Verzeichnis)

Hilfestellung amp Dokumentationen

bull Ein ausfuumlhrliches Handbuch zur IMPERIA-Nutzung finden Sie im IMPERIA-Hauptmenuuml unter

der Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsbenutzerhandbuch-imperia-

8depdf

bull Einen umfassenden Uumlberblick uumlber die Funktionsweise und die Systemarchitektur der

IMPERIA-Software finden Sie im IMPERIA-Hauptmenuuml unter der Sparte bdquoDokumentationldquo

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 52: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 51

oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsadminhandbuch-imperia-8depdf

bull Hilfen und Informationen zur Programmierung finden Sie im IMPERIA -Hauptmenuuml unter der

Sparte bdquoDokumentationldquo oder im direkten Zugriff unter httpimperiauni-

duedeimperiamdcontentzimservicescmsmanualsprogrammierhandbuch-imperia-

8depdf

Das One-Click-Edit-Tool fuumlr Mozilla Firefox (Versionen 36 bis 20) und den Internet Explorer

(Versionen 8 und 9) steht im IMPERIA-Hauptmenuuml im Menuumlpunkt bdquoHilfen Toolsldquo zur Installation

bereit Nach dem Download und der Installation der Datei koumlnnen Sie die Symbolleiste

bdquoOneClickEditldquo nutzen Diese aktivieren bzw deaktivieren Sie im Browser Firefox sowie im Microsoft

Internet Explorer uumlber bdquoAnsichtldquo -gt bdquoSymbolleistenldquo Durch den Klick auf bdquoGoldquo werden Sie zur

IMPERIA-Loginmaske geleitet Nach erfolgreichem Login stehen Ihnen die entsprechenden

Funktionen zur Verfuumlgung sobald Sie eine Seite der Universitaumlt Duisburg-Essen aufrufen zu deren

Bearbeitung Sie berechtigt sind

8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum

Unter dem Begriff bdquoInternetseitenldquo werden in der Regel Webseiten-dateien zusammengefasst die im

weltweiten Netz aufruf- und einsehbar sind Grundsaumltzlich koumlnnen Sie Ihre Inhalte jedoch in

unterschiedlicher Reichweite veroumlffentlichen

bull Weltweit einsehbare Seiten lassen sich zu jeder Zeit an jedem Ort und von jedem

Internetnutzer aufrufen

bull Auf hochschulweit veroumlffentlichte Seiten (Intranet) ist der Zugriff ohne Einschraumlnkungen aus

dem Hochschulnetz der UDE moumlglich Bei einem externen Zugriff muumlssen sich Nutzer zuvor

mit Ihrem Hochschulaccount authentifizieren

bull Fuumlr einen besonderen Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder

Bereiche mit einem eigenen Nutzernamen und Passwort zu versehen

Der Standard bdquoUDE-Inhalte in die Welt tragenldquo

Internetseiten weltweit veroumlffentlichen ndash das macht Ihnen das UDE Content Management System

extrem einfach Waumlhlen Sie nach dem ErstellenBearbeiten Ihrer Inhalte bdquoSpeichernldquo auf dem

IMPERIA-Schreibtisch bdquoVeroumlffentlichenldquo im darauf folgenden Fenster bdquoJetzt freischaltenldquo und schon

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 53: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 52

ist das eben Geschriebene unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Teil des

weltweiten Informationsangebotes von Abu Dhabi bis Zypern

Hochschulweit veroumlffentlichen (Intranet)

Eine lediglich hochschulweite Veroumlffentlichung erreichen Sie uumlber zwei Wege

bull Nach der Speicherung Ihrer bearbeiteten Inhalte waumlhlen Sie auf dem Schreibtisch den Befehl

bdquoVeroumlffentlichenldquo auf dem dann folgenden Bildschirm klicken Sie bdquoSchreibtischldquo anstelle von

bdquoJetzt freischaltenldquo Ihre Seite ist dann nicht weltweit sondern lediglich im IMPERIA-

Entwicklungssysten freigeschaltet und nur aus dem UDE-Netzwerk unter der Adresse

imperiauni-duedeihrverzeichnisihreseitephp aufzurufen Gehen Sie hier jedoch aumluszligerst

vorsichtig vor Wenn Sie nach dem Veroumlffentlichungsbefehl fuumlr Ihre Seite einmal den Befehl

bdquoJetzt freischaltenldquo gewaumlhlt haben erscheint die entsprechende Seite auch oumlffentlich

einsehbar unter der Adresse wwwuni-duedeihrverzeichnisihreseitephp Dort muumlssen Sie

sie dann unter dem IMPERIA-Hauptmenuumlpunkt bdquoFreigeschaltete Dokumente bearbeitenldquo

vom Zielsystem der UDE loumlschen Beachten Sie bitte auch dass diese Moumlglichkeit sich nur fuumlr

den Fall eignet dass Sie einzelne Seiten vor externem Zugriff schuumltzen wollen

bull Wenn Sie mehrere Seiten oder ganze Bereiche vor externem Zugriff schuumltzen wollen koumlnnen

Sie sich von den IMPERIA-Administratoren des ZIMs eigene Intranet-Verzeichnisse einrichten

lassen Dort veroumlffentlichte IntranetseitenInhalte erscheinen in Ihrem Browser mit der

bdquoregulaumlrenldquo Adresse wwwuni-duedeihrverzeichnisihreseitephp sind jedoch auch nur aus

dem Hochschulnetz oder nach vorheriger Authentifizierung zu oumlffnen

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 54: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 53

Beachten Sie dabei bitte dass auf solchen Seiten in der Regel auch geschuumltzte Dateien

(bspw PDFs oder Aumlhnliches) verlinkt werden und dass Sie dementsprechend parallel uumlber

geschuumltze Verzeichnisse in der IMPERIA-Mediendatenbank verfuumlgen muumlssen Sie haben auf

diese Weise aber zusaumltzliche Moumlglichkeiten Beispielsweise ist es so moumlglich geschuumltzte

Inhalte auf oumlffentlichen Seiten zu verlinken ndash jedoch nur uumlber die Hochschulidentifizierung

abrufbar zu machen

Weitergehender Schutz

Fuumlr einen weitergehenden Schutz steht die Moumlglichkeit zur Verfuumlgung spezielle Seiten oder Bereiche

mit einem eigenen Nutzernamen und Passwort zu versehen Wenden Sie sich dafuumlr bitte auch an die

IMPERIA-Administratoren im ZIM Dokumente die mit einem solchen Verzeichnisschutz versehen

sind koumlnnen nur von einem bestimmten Personenkreis betrachtet werden

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 55: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 54

9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo

Die Webseiten der UDE entsprechen den Anforderungen der vom Bund erlassenen und von den

Laumlndern adaptierten Verordnung die Internetangebote oumlffentlicher Einrichtungen im Sinne der

Gleichstellung fuumlr alle zugaumlnglich zu machen Dies nur auf die Beduumlrfnisse behinderter Menschen zu

beziehen waumlre jedoch zu kurz gegriffen Von einer barrierefreien Webseite profitieren alle

Internetteilnehmer

Eine barrierefreie Website zeichnet sich durch eine klare uumlbersichtliche Navigation eine im Rahmen

des Themas moumlglichst einfach gewaumlhlte Sprache deutlich gekennzeichnete Links eine gut lesbare

bei Bedarf skalierbare Schrift und gute Farbkontraste aus

Daruumlber hinaus sind die Ladezeiten durch einen schlankeren technischen Unterbau und den Verzicht

auf Uumlberfluumlssiges optimiert

Dies kommt allen zugute die sich auf den Seiten der UDE orientieren moumlchten sei es mit einem

herkoumlmmlichen Desktop-Browser einem Smartphone oder assistiven Technologien wie Screenreader

(Vorlesesoftware) oder Braille-Zeile

Damit wird eine barrierefreie Website automatisch auch einem ganz speziellen blinden User gerecht

fuumlr dessen Aufmerksamkeit nicht-barrierefreie Seiten oftmals viel Geld bezahlen die Suchmaschine

zB Google oder Yahoo Suchmaschinen bdquosehenldquo eine Website aumlhnlich wie ein blinder Mensch Sie

verwerfen das visuelle Design erfassen nur die Struktur und Texte und werten diese anhand ihrer

Qualitaumlt aus Je besser diese Struktur geplant und verwirklicht ist (also barrierefrei) umso besser

werden die Inhalte der Website in den Suchmaschinen gefunden Eine hohe Positionierung in den

Suchmaschinenergebnissen bildet die Grundlage fuumlr den Erfolg einer Internetpraumlsenz

Was heiszligt das fuumlr Sie

Die gute Nachricht zuerst ein Groszligteil der Arbeit ist bereits getan Mit vielen Einzelheiten der BITV

werden Sie nie in Beruumlhrung kommen Die Anforderungen sind bereits erfuumlllt indem Sie einfach nur

das Template der UDE verwenden Umgekehrt wird es Ihnen kaum moumlglich sein den vielfaumlltigen

technischen Anforderungen der BITV in einem zB in Word selbst erstellten HTML-Dokument gerecht

zu werden Verwenden Sie daher zur Pflege der UDE-Seiten ausschlieszliglich das UDE-Standard-

Template

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 56: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 55

Die Kehrseite der Medaille ist dass die BITV auch Sie als Redakteur in die Verantwortung fuumlr die

Barrierefreiheit des UDE-Angebotes nimmt Die BITV ist kein Vorschlag zur Verbesserung einer

Website sondern eine Verordnung deren Nichterfuumlllen entsprechend geahndet werden kann

Da es aber nur einige wenige Punkte sind die Sie in Ihrem Arbeitsalltag beachten muumlssen und jeder

dieser Punkte die Qualitaumlt Ihrer redaktionellen Arbeit zugleich verbessern kann werden Sie in der

praktischen Arbeit nicht lange daruumlber nachdenken muumlssen Im Einzelnen beachten Sie einfach die

folgenden Punkte

Textbearbeitung

Die BITV sieht eine logische und saubere Textstruktur vor Vieles kennen Sie bereits aus Ihrem

Umgang mit Formatvorlagen in Office-Anwendungen

bull Uumlberschriften hierarchisch strukturieren

bull Absaumltze statt Leerzeilen verwenden

bull Listen als solche formatieren statt Spiegelstriche zu verwenden

Hinzu kommen einige Strukturierungen die Ihnen wahrscheinlich noch nicht gelaumlufig sind

bull Sprachwechsel muumlssen angezeigt werden dh Sie zeichnen zB ein englisches Fremdwort als

bdquoenglischldquo aus um eine korrekte Aussprache in einem Screenreader zu ermoumlglichen

bull Abkuumlrzungen muumlssen bei der ersten Verwendung im Text ausgeschrieben und erklaumlrt im

weiteren Verlauf des Textes als Abkuumlrzung ausgezeichnet werden

bull Zitate muumlssen als solche moumlglichst mit Quellenangabe gekennzeichnet werden

bull Externe Links also Links zu Seiten auszligerhalb der UDE-Website muumlssen als solche

gekennzeichnet werden

Um Ihnen diese Formen der Textauszeichnung zu ermoumlglichen stellen wir Ihnen im CMS einen

intuitiv bedienbaren Texteditor (bdquoTinyMCEldquo) zu Verfuumlgung den Sie aumlhnlich wie Ihr Office-Programm

verwenden koumlnnen

Texte verfassen

Beim Schreiben von Texten halten Sie sich immer vor Augen dass keine Behinderung noumltig ist um

Schwierigkeiten beim Erfassen eines Textes zu haben Denken Sie an Studierende aus dem Ausland

die zunaumlchst begrenzte Deutsch-Kenntnisse mitbringen Dann ergeben sich die meisten

Anforderungen ganz von selbst

bull Waumlhlen Sie immer die einfachst moumlgliche Formulierung die dem Thema angemessen ist

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 57: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 56

bull Vermeiden Sie verschachtelte Saumltze und Fachchinesisch

bull Verwenden Sie nach Moumlglichkeit aktive statt passive Formulierungen zB bdquowir verwendenldquo

statt bdquoes wird verwendetldquo

bull Unterteilen Sie lange Texte durch Zwischenuumlberschriften und Absaumltze in leicht erfassbare

Abschnitte

bull Verfassen Sie aussagekraumlftige Linktexte die auch auszligerhalb ihres Kontextes das Linkziel

erkennen lassen (schreiben Sie also statt bdquohier klickenldquo zB bdquozum Artikel uumlber

Nanotechnologieldquo)

Der letzte Punkt bezieht sich auf die Option von Screenreadern alle Links auf einer Seite in einer Liste

zusammenzufassen um dem blinden Leser einen Uumlberblick uumlber moumlgliche weitere Ziele zu

verschaffen Eine Liste der Art bdquohier klicken hier klicken hier klickenldquo ist dabei nicht hilfreich

Bilder

Das Sprichwort bdquoEin Bild sagt mehr als tausend Worteldquo trifft im Internet nur bedingt zu Die

eigentliche Sprache des Webs ist das geschriebene Wort Ein Bild bietet nur sehenden Menschen

einen Mehrwert und auch hier sind noch kognitive und visuelle Einschraumlnkungen bei der Bildauswahl

zu beruumlcksichtigen

bull Verwenden Sie Bildmaterial das in einem Sinnzusammenhang mit dem Text steht

Unzusammenhaumlngende oder rein dekorative Bilder irritieren mehr als sie nuumltzen

bull Achten Sie bei der Bildauswahl auf Farb- und Helligkeitskontraste Ein einfacher Test ist der

bdquoZwinkertestldquo schauen Sie das Bild mit fast geschlossenen Augen durch die Wimpern an und

pruumlfen Sie ob Sie es so noch erkennen koumlnnen

bull Vermeiden Sie besonders bei Infografiken die fuumlr Farbfehlsichtige schwierigen

Farbkombinationen wie zB RotGruumln

bull Verwenden Sie bdquosprechendeldquo Dateinamen also zB bdquoportrait-prof-dr-muellerjpgldquo statt

bdquoDSC_1234JPGldquo

bull Geben Sie zu jedem Bild im CMS einen beschreibenden Alternativtext an Dieser wird

ausgegeben wenn keine Bilder angezeigt wer-den koumlnnen Auch stark sehbehinderte

Menschen nutzen den bdquoalt-Textldquo um ein Bild besser erkennen zu koumlnnen Suchmaschinen

nutzen ihn uumlbrigens auch fuumlr die Bildersuche

Tabellen

bull Verwenden Sie Tabellen ausschlieszliglich zur Darstellung tabellarischer Daten und niemals zur

grafischen Anordnung anderer Inhalte

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo
Page 58: Redakteursleitfaden - uni-due.de · Redakteursleitfaden Styleguide zum Internetauftritt der Universität Duisburg-Essen Ressort Presse / Webredaktion Stabsstelle des Rektorats Forsthausweg

S e i t e | 57

bull Zeichnen Sie Tabellenkopf -koumlrper und -fuszlig als solche aus Der Text-Editor stellt Ihnen diese

Optionen zur Verfuumlgung

bull Fuumlgen Sie Tabellen eine beschreibende Zusammenfassung hinzu zB bdquoSemester-Busfahrplan

zwischen den Campi Duisburg und Essen Abfahr- und Ankunftszeiten an Wochentagenldquo um

eine erste Orientierung zu ermoumlglichen

bull Denken Sie auch in Tabellen immer an die Erklaumlrung von Abkuumlrzungen (Mo Di Mi )

PDF-Dokumente

bull Verwenden Sie PDF-Dokumente nur wenn unbedingt noumltig zB fuumlr Antraumlge die ausgedruckt

und unterschrieben werden muumlssen

bull Fuumlr PDF-Dokumente gelten dieselben Bedingungen wie fuumlr HTML-Seiten Auch hier muumlssen

Sie Uumlberschriftenhierarchien und Absatzformate verwenden und saumlmtliche anderen BITV-

Punkte beruumlcksichtigen

bull Beim Speichern eines PDF-Dokumentes achten Sie unbedingt darauf dass die

Textauszeichnungen komplett erhalten bleiben Die meisten Office- und Layout-Programme

und Adobe Acrobat bieten hierfuumlr spezielle Export-Optionen Details entnehmen Sie bitte der

Dokumentation der jeweiligen Software

Multimedia

bull Stellen Sie fuumlr jede Audiodatei (zB Podcast) ein vollstaumlndiges Texttranskript zur Verfuumlgung

bull Versehen Sie Videos und zeitgesteuerte Multimedia-Praumlsentationen mit synchronisierten

Untertiteln und Audiobeschreibungen der Videospur (bdquoSchauenldquo Sie zB einmal den bdquoTatortldquo

mit geschlossenen Augen und aktivierter Tonspur fuumlr Blinde um diesen Punkt nachvollziehen

zu koumlnnen)

bull Geben Sie dem Anwender eine Moumlglichkeit die Wiedergabe zeitlich gesteuerter Ablaumlufe zu

kontrollieren (Stop Pause Wiederholung Zeitlupe)

bull Vermeiden Sie flackernde oder blinkende Inhalte da diese auch bei Menschen mit nicht

erkannter Epilepsie spontan Anfaumllle ausloumlsen koumlnnen

  • Styleguide Deckblatt
  • Styleguide Web UDE 2013 Imperia 8
    • 1 Einleitung Ein einheitliches Gesicht der Universitaumlt
    • 2 Schluumlsselelemente des Corporate Design
    • 3 Technische Plattform Zugang zum CMS
    • 4 Grundsaumltze der Webseitengestaltung Seitenaufbau
    • 5 Bestandteile von Webseiten
    • 51 Die Organisationsbezeichnung
    • 52 Die Zielgruppennavigation
    • 53 Die Navigation
    • 6 Webseiten gestalten
    • 61 Uumlber allem Die Brotkrumennavigation
    • 62 (TinyMCE)-Texteditor PHP-Skript HTML-Web-Seite
    • 63 A-Z verwalten PHP-Skript HTML-Web-Seite
    • 64 Code editieren PHP-Skript HTML-Web-Seite
    • 65 Codebaustein einfuumlgen PHP-Skript HTML-Web-Seite
    • 66 DBAdmin PHP-Skript
    • 67 Doppelcontainer PHP-Skript HTML-Web-Seite
    • 68 Flickr nutzen PHP-Skript
    • 69 Formulare
    • 610 Google-Maps (v30) PHP-Skript HTML-Web-Seite
    • 611 Image-Gallery (v21) PHP-Skript HTML-Web-Seite
    • 612 Mailinglisten PHP-Skript
    • 613 Mitarbeiter-Seite PHP-Skript
    • 614 Mitarbeiter-Publikationsliste PHP-Skript
    • 615 Mitarbeiter-Liste PHP-Skript
    • 616 Randlose Grafik PHP-Skript HTML-Web-Seite
    • 617 RSS-Feed-Agent PHP-Skript
    • 618 RSS-Feed-Administration PHP-Skript
    • 619 Tube Audio-VideoPlayer PHP-Skript HTML-Web-Seite
    • 620 Veranstaltungskalender PHP-Skript
    • 7 Webseiten bearbeiten Hauptmenuuml vs One-Click-Edit
    • 8 Veroumlffentlichen Weltweit hochschulweit im geschuumltzten Raum
    • 9 Anhang Hinweise zur bdquoBarrierefreie Informationstechnik-Verordnung (BITV)ldquo