redakteursleitfaden - uni-due.de · redakteursleitfaden styleguide zum internetauftritt der...
TRANSCRIPT
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-
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
-